:root {
  --bg: #f4f0ea;
  --card: #ffffff;
  --ink: #4a3e3a;
  --muted: #86776f;
  --blue: #3494e3;
  --blue2: #1c7fd0;
  --sky: #deeefb;
  --beige: #e6ddcf;
  --beige-l: #f4efe7;
  --teal: #2eb3b1;
  --lime: #2eb2b0;
  --yellow: #fbd96a;
  --coral: #2eb3b1;
  --line: #e8e1d6;
  --shadow: 0 18px 40px -22px rgba(92, 78, 66, 0.42);
  /* имена, на которые опираются внутренние страницы */
  --rust: var(--coral);
  --mustard: var(--yellow);
  --peach: #efe8dd;
  --cream: #f5fafe;
  --mint: #d2f4f3;
  --hand: "Rubik", "Nunito", "Segoe UI", Arial, sans-serif;
  --sans: "Rubik", "Nunito", "Segoe UI", Arial, sans-serif;
  --r: 28px;
  --wob: 24px;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #072034;
    --card: #0b304f;
    --ink: #eef3fa;
    --muted: #9fb0cb;
    --sky: #0d3a5f;
    --line: #0f4571;
    --peach: #503e02;
    --cream: #092b46;
    --mint: #114040;
    --shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.7);
  }
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
html {
  overflow-x: clip;
  scroll-padding-top: env(safe-area-inset-top, 0px);
  height: 100%;
}
body {
  overflow-x: clip;
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  background: linear-gradient(180deg, #f8efd8 0%, #f8f1e2 50%, #fcf8f0 100%);
}
a {
  color: inherit;
}
button {
  font: inherit;
  cursor: pointer;
}
:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}
h1,
h2,
h3 {
  font-weight: 900;
  line-height: 1.1;
  margin: 0 0 0.3em;
  letter-spacing: -0.01em;
}
h1 {
  font-size: clamp(30px, 3.3vw, 46px);
}
h2 {
  font-size: clamp(28px, 3.4vw, 40px);
}
h3 {
  font-size: 22px;
}
p {
  max-width: 62ch;
  margin: 0 0 0.8em;
}
.lead {
  font-size: 19px;
  color: var(--muted);
}
.hint {
  color: var(--muted);
  font-size: 15px;
}
.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 22px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 12px 24px;
  font-weight: 800;
  text-decoration: none;
  background: var(--blue);
  color: #fff;
}
.btn.mustard {
  background: var(--yellow);
  color: #4a3e3a;
}
.row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

/* шапка */
.bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 22px;
}
.logo {
  text-decoration: none;
  display: flex;
}
.logo .mark {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: linear-gradient(145deg, #7ebbed, #1c7fd0);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 22px;
  box-shadow: 0 8px 16px -8px rgba(92, 78, 66, 0.9);
}
.logo b i {
  font-style: normal;
  color: var(--teal);
}

.view {
  display: none;
}
.view.show {
  display: block;
}

/* ============ ГЛАВНАЯ: всё на одном экране ============ */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto minmax(80px, 0.34fr) 0.66fr 1fr 0.62fr;
  gap: 16px;
  height: calc(100dvh - 100px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  min-height: 620px;
  max-height: 900px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 18px 22px 20px;
}
.t {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  background: var(--card);
  border-radius: var(--r);
  padding: 22px 24px;
  box-shadow: var(--shadow);
  transition:
    transform 0.15s,
    box-shadow 0.15s;
  min-height: 0;
}
a.t:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 44px -22px rgba(92, 78, 66, 0.6);
}
.t h3 {
  margin: 0;
}
.t p {
  margin: 0;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.45;
}
.t .btn {
  align-self: flex-start;
  margin-top: auto;
}
.pop {
  position: absolute;
  top: -30px;
  right: 10px;
  width: 96px;
  height: 96px;
  filter: drop-shadow(0 10px 10px rgba(12, 53, 86, 0.18));
  transition: transform 0.2s;
}
a.t:hover .pop {
  transform: translateY(-4px) rotate(-4deg);
}

/* центр */
.t-hero {
  grid-column: 4/10;
  grid-row: 2/5;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(60% 55% at 0% 0%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 70%),
    radial-gradient(60% 55% at 100% 0%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 70%),
    radial-gradient(120% 90% at 85% 100%, #70b4eb 0%, rgba(112, 180, 235, 0) 60%),
    radial-gradient(75% 70% at 0% 100%, #3494e3 0%, rgba(52, 148, 227, 0.6) 35%, rgba(52, 148, 227, 0) 75%),
    linear-gradient(150deg, #2eb3b1 0%, #1c7fd0 70%);
}
.t-hero h1 {
  color: #fff;
}
.t-hero p {
  color: #e9f3fc;
  max-width: 24ch;
  font-size: 16px;
}
.hero-text {
  position: relative;
  z-index: 3;
}

/* слева */
.t-lesson {
  grid-column: 1/4;
  grid-row: 2/5;
  overflow: hidden;
}
.t-lesson h3 {
  font-size: 24px;
}
.t-lesson .big {
  flex: 1;
  min-height: 90px;
  width: 100%;
  margin: 0 0 8px;
}

/* справа */
.t-streak {
  grid-column: 10/13;
  grid-row: 2;
}
.t-mats {
  grid-column: 10/13;
  grid-row: 3/5;
  background: linear-gradient(160deg, #fef5d9 0%, var(--card) 60%);
}
.t-mats .pop {
  top: -16px;
}
.t-mats p {
  padding-right: 30px;
}

/* практика */
.t-sm {
  grid-column: span 4;
  color: #fff;
  padding: 16px 22px;
}
.kick {
  font-size: 12.5px;
  font-weight: 900;
  opacity: 0.8;
  letter-spacing: 0.02em;
  margin-bottom: -6px;
}
.t-sm {
  gap: 4px;
}
.t-sm h3 {
  color: #fff;
  padding-right: 80px;
}
.t-sm p {
  color: rgba(255, 255, 255, 0.88);
  padding-right: 30px;
}
.t-sm .go {
  margin-top: auto;
  font-weight: 900;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 99px;
  padding: 5px 12px;
  align-self: flex-start;
}
.c-teal {
  background: linear-gradient(150deg, #41cecc, #2aa19f);
}
.c-yellow {
  background: linear-gradient(150deg, #fff0b8, #fbd96a);
}
.c-yellow,
.c-yellow h3 {
  color: #392c01;
}
.c-yellow p {
  color: rgba(57, 44, 1, 0.78);
}
.c-yellow .go {
  background: rgba(255, 255, 255, 0.45);
}

/* плитка «дни подряд» */

/* грамматика: полоска сверху */
.topics {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  padding: 4px 2px;
  mask-image: linear-gradient(90deg, #000 88%, transparent);
}
.topics::-webkit-scrollbar {
  display: none;
}
.topics a {
  flex: none;
  text-decoration: none;
  font-weight: 800;
  font-size: 14.5px;
  padding: 8px 14px;
  border-radius: 99px;
  background: var(--mint);
  color: #196160;
  transition: background 0.12s;
}
.topics a:hover {
  background: #b6eceb;
}
/* игра «найди пару» */

/* выбор языка семьи */
.t-cust {
  grid-column: 7/13;
  grid-row: 1;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-radius: 22px;
  background: linear-gradient(120deg, #daf6f5, var(--card) 70%);
}
.t-cust .gt {
  flex: none;
  text-decoration: none;
}
.t-cust .gt b {
  display: block;
  font-weight: 900;
  font-size: 19px;
  line-height: 1.1;
}
.t-cust .gt small {
  color: var(--muted);
  font-size: 13px;
}
.t-cust .topics a {
  background: #cff2f2;
  color: #196160;
}
.t-cult {
  grid-column: 1/7;
  grid-row: 1;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-radius: 22px;
  background: linear-gradient(120deg, #efe8dd, var(--card) 70%);
}
.t-cult .topics a {
  background: #efe8dd;
  color: #31c0bd;
}
.t-cult .gt {
  flex: none;
  text-decoration: none;
}
.t-cult .gt b {
  display: block;
  font-weight: 900;
  font-size: 19px;
  line-height: 1.1;
}
.t-cult .gt small {
  color: var(--muted);
  font-size: 13px;
}
.soon {
  font-size: 12px;
  font-weight: 800;
  background: var(--yellow);
  color: #392c01;
  border-radius: 99px;
  padding: 2px 9px;
  margin-left: 6px;
  vertical-align: middle;
}
/* упражнения: собери предложение, найди прилагательное */
.pool {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* культура */
.cult {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 22px;
}

/* ---------- игры ---------- */
.gpane {
  display: none;
}
.gpane.on {
  display: block;
}
.road {
  position: relative;
  height: 560px;
  border-radius: 26px;
  overflow: hidden;
  touch-action: manipulation;
  user-select: none;
  background: linear-gradient(90deg, #2eb3b1 0 7%, #5e6b7e 7% 93%, #2eb3b1 93%);
}
.road .lanes {
  position: absolute;
  inset: 0 7%;
  background:
    repeating-linear-gradient(180deg, #fff 0 34px, transparent 34px 70px) calc(33.33% - 3px) 0/6px 100%
      no-repeat,
    repeating-linear-gradient(180deg, #fff 0 34px, transparent 34px 70px) calc(66.66% - 3px) 0/6px 100%
      no-repeat;
}
.road.go .lanes {
  animation: dash 0.6s linear infinite;
}
@keyframes dash {
  to {
    background-position:
      calc(33.33% - 3px) 70px,
      calc(66.66% - 3px) 70px;
  }
}
.signs {
  position: absolute;
  left: 4%;
  right: 4%;
  top: -110px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 8px;
  padding: 0 4px;
}
.sign {
  background: #fff;
  border-radius: 20px;
  padding: 20px 8px;
  min-height: 78px;
  display: grid;
  place-items: center;
  line-height: 1.15;
  text-align: center;
  font-weight: 900;
  font-size: clamp(18px, 2.6vw, 26px);
  color: #4a3e3a;
  box-shadow: 0 8px 0 #c6e1f7;
}
.sign.ok {
  background: #a5e8e7;
}
.sign.bad {
  background: #e4e0d9;
}
.car {
  position: absolute;
  bottom: 26px;
  width: 22%;
  left: calc(7% + 86% / 6 - 11%);
  transition: left 0.25s cubic-bezier(0.3, 1.4, 0.6, 1);
}
.tap {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(86% / 3);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.race-over {
  position: absolute;
  inset: 0;
  background: rgba(12, 53, 86, 0.55);
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  padding: 20px;
}
.race-over b {
  font-size: 30px;
  font-weight: 900;
  display: block;
  margin-bottom: 6px;
}
.stars {
  font-size: 26px;
  letter-spacing: 4px;
  min-height: 1.3em;
}
@media (max-width: 760px) {
  .road {
    height: 420px;
  }
}

/* ---------- читаем и слушаем ---------- */
.c-night {
  background: linear-gradient(150deg, #186db2, #0e3e65);
}
.fcard {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 210px;
  overflow: hidden;
}
.fcard .k {
  font-size: 13px;
  font-weight: 900;
  border-radius: 99px;
  padding: 3px 10px;
  align-self: flex-start;
}
.fcard h3 {
  font-size: 26px;
  margin: 4px 0 0;
}
.fcard p {
  margin: 0;
}
.fcard .row {
  margin-top: auto;
}
.lib h3 {
  margin: 26px 0 12px;
}
/* страница текста */
.reader {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}
.rtext {
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 30px 34px;
  font-size: 22px;
  line-height: 1.7;
  white-space: pre-line;
}
.rtext.big {
  font-size: 27px;
  line-height: 1.8;
}
.rside .panel {
  margin-bottom: 18px;
}
.q li {
  margin-bottom: 8px;
}
/* ночной режим */
/* в дорогу */
.now {
  background: linear-gradient(150deg, #2eb3b1, #1c7fd0);
  color: #fff;
  border-radius: var(--r);
  padding: 26px;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 18px;
}
.now b {
  font-size: 24px;
  display: block;
}
.now small {
  opacity: 0.9;
  font-weight: 700;
}
@media (max-width: 760px) {
  .reader {
    grid-template-columns: 1fr;
  }
  .rtext {
    font-size: 19px;
    padding: 22px;
  }
  .rtext.big {
    font-size: 23px;
  }
}

/* ---------- праздники ---------- */
.holpill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-size: 14.5px;
}
.holpill .e {
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.months {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 18px;
}
.month {
  background: var(--card);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 18px 20px;
  min-height: 110px;
}
.month h3 {
  font-size: 19px;
  margin-bottom: 10px;
  color: var(--blue2);
}
.month.cur {
  outline: 3px solid var(--sky);
}
.month.empty h3 {
  color: var(--muted);
}
.hd {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}
.hd .panel {
  max-width: none;
  margin-bottom: 18px;
}
.hd ul {
  padding-left: 20px;
  margin: 0;
}
.hd li {
  margin-bottom: 6px;
}
.hd .kid {
  background: linear-gradient(150deg, #fdf0c4, #fce28d);
  color: #392c01;
}
@media (max-width: 760px) {
  .hd {
    grid-template-columns: 1fr;
  }
  .holpill small {
    display: none;
  }
}

/* разделы культуры и обычаев */
.secnav {
  margin-bottom: 24px;
}
.secnav a.on {
  background: var(--blue);
  color: #fff;
}
.csec {
  margin-bottom: 34px;
  scroll-margin-top: 20px;
}
.csec h3 {
  font-size: 24px;
  margin-bottom: 4px;
}
.csec > p {
  color: var(--muted);
  margin-bottom: 14px;
}
.csec.hl h3 {
  color: var(--coral);
}
.citems {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.ci {
  background: var(--card);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 18px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ci .e {
  font-size: 40px;
  line-height: 1.1;
}
.ci b {
  font-size: 18px;
}
.ci small {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.4;
}
.ci .soon {
  align-self: flex-start;
  margin: 6px 0 0;
}
.ci.link {
  background: linear-gradient(150deg, #2eb3b1, #1c7fd0);
  color: #fff;
}
.ci.link small {
  color: #efe8dd;
}

/* ---------- окошко праздника ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(12, 53, 86, 0.45);
  backdrop-filter: blur(3px);
}
.modal.on {
  display: flex;
}
.mbox {
  background: var(--card);
  border-radius: 30px;
  max-width: 560px;
  width: 100%;
  max-height: calc(100dvh - 40px);
  overflow: auto;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.45);
}
.mhead {
  background: linear-gradient(150deg, #2eb3b1, #1c7fd0);
  color: #fff;
  padding: 26px 28px 22px;
  display: flex;
  gap: 18px;
  align-items: center;
  position: relative;
}
.mhead .e {
  font-size: 58px;
  line-height: 1;
}
.mhead h3 {
  color: #fff;
  font-size: 28px;
  margin: 0;
}
.mhead small {
  font-weight: 800;
  opacity: 0.9;
}
.mhead .x {
  position: absolute;
  top: 14px;
  right: 14px;
  border: 0;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  border-radius: 99px;
  width: 36px;
  height: 36px;
  font-size: 18px;
}
.mbody {
  padding: 22px 28px 26px;
}
.mbody h4 {
  margin: 14px 0 6px;
  font-size: 16px;
  font-weight: 900;
}
.mbody ul {
  padding-left: 20px;
  margin: 0;
}
.rel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}
.relc {
  display: flex;
  gap: 10px;
  align-items: center;
  text-decoration: none;
  background: var(--cream);
  border-radius: 16px;
  padding: 10px 12px;
  font-weight: 800;
  font-size: 15px;
}
.relc .e {
  font-size: 28px;
}
.relc small {
  display: block;
  font-weight: 700;
  color: var(--muted);
  font-size: 12.5px;
}
/* ---------- рецепты и поделки ---------- */
.badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.bdg {
  font-size: 12.5px;
  font-weight: 800;
  border-radius: 99px;
  padding: 3px 10px;
  background: var(--sky);
  color: var(--blue2);
}
.bdg.h {
  background: #efe8dd;
  color: #31c0bd;
}
.how {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 26px;
  align-items: start;
}
.how .panel {
  max-width: none;
  margin-bottom: 18px;
}
.need label {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px dashed var(--line);
  cursor: pointer;
  font-weight: 700;
}
.need input {
  width: 20px;
  height: 20px;
  accent-color: var(--lime);
}
.need input:checked + span {
  text-decoration: line-through;
  color: var(--muted);
}
.steps {
  counter-reset: st;
  list-style: none;
  padding: 0;
  margin: 0;
}
.steps li {
  counter-increment: st;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.steps li::before {
  content: counter(st);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sky);
  color: var(--blue2);
  display: grid;
  place-items: center;
  font-weight: 900;
}
.who {
  font-size: 12px;
  font-weight: 900;
  border-radius: 99px;
  padding: 2px 9px;
  margin-right: 6px;
}
.who.k {
  background: #cff2f2;
  color: #196160;
}
.who.a {
  background: #efe8dd;
  color: #31c0bd;
}
.vocab {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.vocab span {
  background: #fdf0c4;
  border-radius: 12px;
  padding: 6px 12px;
  font-weight: 800;
}
@media (max-width: 760px) {
  .how {
    grid-template-columns: 1fr;
  }
  .rel {
    grid-template-columns: 1fr;
  }
}

/* о Веронике — просто текст на фоне */
/* подвал */
.site-foot {
  border-top: 1px solid var(--line);
  text-align: left;
  color: var(--muted);
  font-size: 15px;
}
.fwrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 22px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 30px;
}
.fcol {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fcol h4 {
  margin: 0 0 4px;
  color: var(--ink);
  font-weight: 900;
  font-size: 15px;
}
.fcol a {
  text-decoration: none;
  color: var(--muted);
}
.fcol a:hover {
  color: var(--blue2);
}
.fbrand p {
  margin: 0;
}
.social {
  display: flex;
  flex-wrap: wrap;
}
.social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: #a09189;
  background: transparent;
  transition:
    color 0.15s,
    background 0.15s;
}
.social a svg {
  width: 24px;
  height: 24px;
}
.social a:hover {
  color: var(--blue2);
  background: var(--beige-l);
}
.flegal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 30px;
  border-top: 1px solid var(--line);
}
.flegal a {
  color: var(--muted);
}
@media (max-width: 760px) {
  .fwrap {
    grid-template-columns: 1fr 1fr;
  }
  .fbrand {
    grid-column: 1/3;
  }
}

/* ---------- темы упражнений со звёздами ---------- */
.tp {
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 20px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 0;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.12s;
}
.tp:hover {
  transform: translateY(-3px);
}
.tp .e {
  font-size: 34px;
}
.tp b {
  font-size: 19px;
  font-weight: 900;
}
.tp small {
  color: var(--muted);
  font-size: 14px;
}
.tp .lvl {
  font-size: 13px;
  font-weight: 900;
  border-radius: 99px;
  padding: 3px 10px;
  align-self: flex-start;
}
.lvl.new {
  background: var(--sky);
  color: var(--blue2);
}
.lvl.mid {
  background: #fdf0c4;
  color: #876803;
}
.dots {
  display: flex;
  gap: 6px;
  margin: 6px 0 20px;
  flex-wrap: wrap;
}
.dots i {
  width: 26px;
  height: 10px;
  border-radius: 99px;
  background: var(--sky);
}
.dots i.ok {
  background: var(--lime);
}
.dots i.bad {
  background: var(--coral);
}
.dots i.cur {
  background: var(--blue);
}

/* ---------- список тем как в приложении ---------- */
/* ---------- режим упражнения на весь экран ---------- */
.focus {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow: auto;
}
.focus.on {
  display: flex;
}
.fhead {
  padding: 14px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.fhead b {
  font-size: 20px;
  flex: 1;
}
.fhead small {
  display: block;
  font-weight: 700;
  opacity: 0.9;
  font-size: 14px;
}
.fx {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  flex: none;
}
.fbody {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  padding: 22px;
}
.fprog {
  border-radius: 20px;
  padding: 14px 18px;
  margin-bottom: 18px;
}
.fprog .l {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
.fbar {
  height: 10px;
  border-radius: 99px;
  overflow: hidden;
}
.fbar i {
  display: block;
  height: 100%;
  transition: width 0.3s;
}
.fcard {
  background: var(--card);
  border-radius: 24px;
  padding: 22px 24px;
}
.rulebtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
}
/* окошки поверх упражнения */
.fmodal {
  position: fixed;
  inset: 0;
  z-index: 85;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.fmodal.on {
  display: flex;
}
.fm {
  background: #fef9e7;
  border-radius: 30px;
  max-width: 520px;
  width: 100%;
  max-height: calc(100dvh - 40px);
  overflow: auto;
  padding: 26px 26px 24px;
  position: relative;
  text-align: center;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5);
}
.fm .x {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: #fbd96a;
  color: #392c01;
  font-size: 18px;
  font-weight: 900;
}
.fm .tag {
  display: block;
  background: #fbd96a;
  color: #392c01;
  border-radius: 16px;
  padding: 10px;
  font-weight: 900;
  font-size: 19px;
  margin: 12px 0 16px;
}
.fm .rule {
  background: #fff;
  border-radius: 20px;
  padding: 16px 18px;
  text-align: left;
  margin-bottom: 12px;
}
.fm .rule h4 {
  color: #8a6a05;
  margin: 0 0 8px;
  font-size: 17px;
  border-bottom: 2px solid #fce38f;
  padding-bottom: 6px;
}
.fm .rule p {
  margin: 0 0 6px;
  font-size: 17px;
}
.fm .rule b {
  color: #44cfcd;
}
.fm .btns {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* ---------- занятие на сегодня ---------- */
.t-hero {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 26px 26px 22px;
}
.t-hero h1 {
  max-width: none;
}
.t-hero .hero-text p {
  max-width: none;
  margin: 0;
}
.todaycard {
  position: relative;
  z-index: 3;
  background: rgba(255, 255, 255, 0.97);
  color: var(--ink);
  border-radius: 22px;
  padding: 14px 16px 14px;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.4);
}
.todaycard .th {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.todaycard .th b {
  font-size: 18px;
  font-weight: 900;
}
.todaycard .th small {
  color: var(--muted);
  font-weight: 800;
  white-space: nowrap;
}
.todaycard .btn {
  width: 100%;
  justify-content: center;
  padding: 10px 20px;
}

/* кубики занятия на сегодня */
.t-hero {
  gap: 14px !important;
}
.t-hero h1 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.tcount {
  font-size: 16px;
  white-space: nowrap;
  font-weight: 900;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 99px;
  padding: 4px 12px;
}
.todaycard.cubes {
  background: none;
  box-shadow: none;
  padding: 0;
  display: grid;
  gap: 14px;
  flex: 1;
  min-height: 0;
}
.cube {
  position: relative;
  border-radius: 22px;
  padding: 16px 18px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-height: 0;
}
.cube:hover {
  transform: translateY(-3px);
}
.cube .ic {
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1;
  margin-bottom: auto;
}
.cube b {
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 900;
}
.cube small {
  font-weight: 700;
  font-size: 13.5px;
  text-overflow: ellipsis;
}
.cube .ck {
  position: absolute;
  transition: transform 0.25s;
}
.cube.done .ck {
  filter: drop-shadow(0 4px 6px rgba(233, 190, 52, 0.45));
}

/* минуты сегодня + цепочка 5 дней */
.chtxt {
  font-size: 13px;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.3;
}
.chtxt b {
  color: var(--ink);
}

/* ---------- словарик и профиль ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(30px);
  opacity: 0;
  z-index: 120;
  background: #4a3e3a;
  color: #fff;
  font-weight: 800;
  border-radius: 99px;
  padding: 12px 20px;
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.5);
  transition: all 0.3s;
  pointer-events: none;
  text-align: center;
  max-width: 90vw;
}
.toast.on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.dtools {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 20px;
}
.dtools input {
  flex: 1;
  min-width: 200px;
  font: inherit;
  padding: 11px 16px;
  border: 2px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  color: var(--ink);
}
.dgroup h3 {
  font-size: 18px;
  margin: 22px 0 10px;
  color: var(--blue2);
}
.dlist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.dw {
  background: var(--card);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.dw b {
  font-size: 19px;
  font-weight: 900;
  display: block;
}
.dw small {
  color: var(--muted);
  font-size: 14px;
}
.dw .lrn {
  margin-left: auto;
  border: 0;
  border-radius: 99px;
  padding: 6px 12px;
  font-weight: 800;
  font-size: 13px;
  background: var(--sky);
  color: var(--blue2);
  flex: none;
}
.dw.learned {
  background: #ebfafa;
}
.dw.learned .lrn {
  background: var(--lime);
  color: #fff;
}
.empty {
  background: var(--card);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 30px;
  text-align: center;
  color: var(--muted);
}
.sc {
  background: var(--card);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sc .e {
  font-size: 26px;
}
.sc b {
  font-size: 34px;
  font-weight: 900;
  line-height: 1.1;
  color: var(--blue2);
}
.sc small {
  color: var(--muted);
  font-weight: 700;
}

/* ниже первого экрана */

/* путь */
.map {
  position: relative;
  aspect-ratio: 1000/420;
  max-width: 1000px;
  margin: 0 auto;
}
.map svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.stop {
  position: absolute;
  transform: translate(-50%, -34px);
  text-align: center;
  text-decoration: none;
  width: 150px;
}
.stop b {
  display: block;
  font-weight: 900;
  font-size: 16px;
  line-height: 1.15;
}
.stop small {
  color: var(--muted);
  font-size: 13px;
}

footer {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  padding: 6px 20px 28px;
}

/* ============ ВНУТРЕННИЕ СТРАНИЦЫ ============ */
.scallop {
  display: none;
}
.inner {
  background: linear-gradient(150deg, #2eb3b1, #1c7fd0 75%);
  color: #fff;
  padding: 26px 0 30px;
  position: relative;
  overflow: hidden;
}
.inner::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -80px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 0 50px rgba(255, 255, 255, 0.05);
}
.inner h2 {
  color: #fff;
  margin-bottom: 0.1em;
}
.inner .lead {
  color: #e9f3fc;
}
.inner.yel,
.inner.yel h2,
.inner.yel .lead,
.inner.yel .back,
.inner.yel #hwLead {
  color: #392c01 !important;
}
.inner.yel::after {
  border-color: rgba(57, 44, 1, 0.15);
}
.back {
  display: inline-block;
  margin-bottom: 10px;
  text-decoration: none;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 99px;
  padding: 5px 14px;
}
.page {
  padding: 34px 0 70px;
}
.panel {
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 30px;
  max-width: 740px;
}
.progress {
  height: 10px;
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 22px;
  background: var(--sky);
}
.progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #449de5, #2eb3b1);
  transition: width 0.3s;
}
.opts {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}
.opt {
  text-align: left;
  border-radius: 18px;
  padding: 13px 18px;
}
.opt.ok {
  color: #4a3e3a;
}
.opt.bad {
  color: #4a3e3a;
}
.score {
  font-weight: 900;
  font-size: 84px;
  line-height: 1;
  background: linear-gradient(135deg, #449de5, #2eb3b1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
details {
  background: var(--card);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 0 22px;
  margin-bottom: 14px;
  max-width: 780px;
}
summary {
  font-weight: 900;
  font-size: 21px;
  padding: 16px 0;
  cursor: pointer;
}
details div {
  padding-bottom: 18px;
}
.ex {
  background: var(--sky);
  border-radius: 14px;
  padding: 10px 14px;
  margin: 8px 0;
  font-style: italic;
}
.tag {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 800;
  padding: 3px 11px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: middle;
}
.tag.free {
  background: #cff2f2;
  color: #196160;
}
.gap {
  margin: 14px 0;
  font-size: 18px;
}
.gap input {
  font: inherit;
  font-weight: 800;
  width: 3em;
  border: 0;
  border-bottom: 3px solid var(--sky);
  background: transparent;
  color: var(--blue2);
  padding: 2px 4px;
  text-align: center;
}
.gap input:focus {
  border-color: var(--blue);
  outline: none;
}
.gap input.ok {
  border-color: var(--lime);
  color: #1c6e6c;
}
.gap input.bad {
  border-color: var(--coral);
  color: var(--coral);
}
.mats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.cover {
  aspect-ratio: 4/3;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 26px;
  text-align: center;
  padding: 16px;
  color: #4a3e3a;
}
.form {
  max-width: 540px;
}
.form label {
  display: block;
  font-weight: 800;
  margin: 14px 0 4px;
}
.form input,
.form select {
  width: 100%;
  font: inherit;
  padding: 11px 16px;
  border: 2px solid var(--line);
  border-radius: 16px;
  background: var(--cream);
  color: var(--ink);
}
.form input:focus,
.form select:focus {
  border-color: var(--blue);
  outline: none;
}
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
  margin: 0 0 28px;
}
.list {
  background: var(--card);
  border-radius: 22px;
  box-shadow: var(--shadow);
}
.list div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.list div:last-child {
  border-bottom: 0;
}
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
/* календарь и бонусы */
.streak-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 28px;
  align-items: start;
}
.cal {
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 24px;
}
.cal-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.cal-top .num {
  font-weight: 900;
  font-size: 60px;
  line-height: 0.9;
  color: var(--coral);
}
.cal-top .lbl {
  font-weight: 800;
}
.cal-top .month {
  font-weight: 900;
  font-size: 22px;
  color: var(--blue2);
}
.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.days span {
  aspect-ratio: 1;
  display: flex;
  align-items: flex-start;
  padding: 4px 6px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
  background: var(--cream);
}
.days .wd {
  aspect-ratio: auto;
  background: none;
  justify-content: center;
  padding: 0;
}
.days .blank {
  background: none;
}
.days .on {
  background: #efe8dd
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 4l12 12M16 4L4 16' stroke='%23F2564A' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E")
    center 62%/50% no-repeat;
  color: var(--ink);
}
.days .today {
  box-shadow: inset 0 0 0 2px var(--blue);
}
.days .future {
  opacity: 0.4;
}
.cal .hint {
  margin-top: 12px;
}
.bonus {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: center;
  background: var(--card);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.medal {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 20px;
  background: var(--cream);
  color: var(--muted);
}
.bonus.got .medal {
  background: linear-gradient(145deg, #fff0b8, #fbd96a);
  color: #392c01;
}
.bonus.next .medal {
  background: linear-gradient(145deg, #7ebbed, #1c7fd0);
  color: #fff;
}
.bonus.locked {
  opacity: 0.6;
}
.bonus b {
  display: block;
}
.bonus small {
  color: var(--muted);
}
.pbar {
  height: 8px;
  border-radius: 99px;
  overflow: hidden;
  background: var(--sky);
  margin-top: 6px;
}
.pbar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #2eb3b1, #1c7fd0);
}
.linkbtn {
  background: none;
  border: 0;
  padding: 0;
  color: var(--blue2);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- адаптивность ---------- */
@media (max-width: 1060px), (max-height: 620px) {
  .bento {
    height: auto;
    max-height: none;
    grid-template-rows: none;
    grid-template-columns: repeat(6, 1fr);
    gap: 22px 18px;
    padding-top: 34px;
  }
  .t-hero {
    grid-column: 1/7;
    grid-row: auto;
    min-height: 430px;
  }
  .t-lesson {
    grid-column: 1/4;
    grid-row: auto;
    min-height: 330px;
  }
  .t-streak {
    grid-column: 4/7;
    grid-row: auto;
  }
  .t-mats {
    grid-column: 1/7;
    grid-row: auto;
  }
  .t-cult,
  .t-cust {
    grid-column: 1/7 !important;
    grid-row: auto;
  }
  .t-sm {
    grid-column: span 2;
    min-height: 150px;
  }
}
@media (max-width: 640px) {
  .bento {
    grid-template-columns: 1fr 1fr;
    gap: 34px 14px;
  }
  .t-hero,
  .t-lesson,
  .t-streak,
  .t-mats,
  .t-cult,
  .t-cust {
    grid-column: 1/3 !important;
  }
  .t-cult,
  .t-cust {
    flex-wrap: wrap;
  }
  .t-sm:last-child {
    grid-column: 1/3;
  }
  .bar {
    height: auto;
    padding: 10px 16px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .topics {
    order: 3;
    flex-basis: 100%;
  }
  .t-hero {
    min-height: 0;
    padding: 26px 22px;
  }
  .t-lesson {
    min-height: 0;
  }
  .t-lesson .big {
    max-height: 150px;
  }
  .t-sm {
    grid-column: span 1;
    min-height: 140px;
    padding: 44px 16px 16px;
  }
  .t-sm h3 {
    padding-right: 0;
    font-size: 19px;
  }
  .t-sm p {
    display: none;
  }
  .t-sm .pop {
    width: 78px;
    height: 78px;
    top: -34px;
  }
  .streak-grid,
  .split {
    grid-template-columns: 1fr;
  }
  .map {
    aspect-ratio: auto;
    padding-left: 34px;
    border-left: 3px dashed var(--sky);
    margin-left: 30px;
    display: grid;
    gap: 26px;
  }
  .map svg {
    display: none;
  }
  .stop {
    position: static;
    transform: none;
    text-align: left;
    width: auto;
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 2px 14px;
    align-items: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}
/* скорость «Дорожек» */
.wheel {
  width: 100%;
  height: 100%;
  transition: transform 4.2s cubic-bezier(0.15, 0.9, 0.2, 1);
  filter: drop-shadow(0 18px 24px rgba(92, 78, 66, 0.3));
}
.wheel text {
  font-family: var(--sans);
  font-weight: 900;
}
.ord {
  max-width: 760px;
}
/* поле для предложения: белая плашка, как карточки в «Вершках и корешках» */
.ord-line {
  min-height: 48px;
  border: 1px solid #e6e0d6;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 16px;
  padding: 8px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 7px;
  align-items: center;
  box-sizing: border-box;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.ord-line.ok {
  background: #e3f5f5;
  border-color: #45bcc0;
}
.ord-line.bad {
  background: #fdecea;
  border-color: #e6261f;
}
.ord-bank {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 22px;
  margin-top: 2px;
  min-height: 40px;
}
/* строчки идут одна под другой */
.ord-rows {
  display: grid;
  gap: 8px;
}
.ord-row .ord-w:not(button) {
  cursor: default;
}
.ord-fix {
  margin: 6px 0 0;
  font-size: 14px;
  color: #a09189;
}
/* слова: просто жирные и жёлтые */
.ord-w {
  border: 0;
  background: none;
  padding: 4px 2px;
  font: inherit;
  font-weight: 300;
  font-size: clamp(22px, 2.6vw, 28px);
  color: #e2ae1c;
  cursor: pointer;
  transition:
    transform 0.12s,
    color 0.12s;
}
.ord-w:hover:not(:disabled) {
  transform: translateY(-2px);
  color: #c9960c;
}
.ord-w:disabled {
  cursor: default;
}
/* слова в плашке становятся тёмными, обычного размера */
.ord-line .ord-w,
.ord-row:not(.cur) .ord-line .ord-w {
  padding: 2px 0;
  line-height: 1.3;
  font-size: 17px;
  font-weight: 400;
  color: #4a3e3a;
}
.ord-line .ord-w:hover:not(:disabled) {
  color: #86776f;
}
.ord-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
}
.ord-msg {
  margin: 0;
  font-size: 18px;
  color: #4a3e3a;
}
.ord-msg.ok {
  color: #2a9fa3;
}
.ord-msg.bad {
  color: #e6261f;
}
.fnext.ord-next {
  background: #fbd96a;
  margin-left: auto;
}
.fnext.ord-next[hidden] {
  display: none;
}
/* плитка дней подряд (компактная) */
.sk-top {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sk-n {
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
}
.sk-l {
  font-weight: 800;
  font-size: 13px;
  line-height: 1.15;
  color: var(--ink);
}
.sk-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.sk-dots {
  display: flex;
  margin: 0;
}
.sk-dots .sd {
  border-radius: 50%;
  background: var(--beige-l);
  border: 1.5px solid var(--beige);
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 12px;
  color: #fff;
}
.sk-dots .sd.gift {
  border-color: #f2d56b;
  font-size: 13px;
}
.sk-msg {
  font-size: 13px;
  color: var(--muted);
}
.sk-btn {
  margin-top: 4px;
  align-self: flex-start;
  padding: 6px 14px;
  font-size: 14px;
}
.t-streak {
  position: relative;
  overflow: hidden;
  padding: 10px 18px !important;
  gap: 4px !important;
  justify-content: center !important;
  min-height: 0;
}
/* предложения/строки с номерами, караоке */
.rtext .sn {
  border-radius: 10px;
  transition: background 0.2s;
  padding: 0 2px;
  margin: 0 -2px;
}
.rtext .sn.on {
  background: #fff8dc;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.rtext.poem {
  white-space: normal;
  font-size: 25px;
  line-height: 1.6;
}
.rtext.poem .pl {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.28em;
  padding: 2px 0;
}
.rtext.poem .stz {
  height: 0.9em;
}
.rtext.poem .sn.on {
  background: none;
}
.rtext .w {
  border-radius: 8px;
  transition:
    background 0.15s,
    color 0.15s;
  padding: 0 1px;
}
.rtext .w.on {
  background: #fbd96a;
  color: #392c01;
  box-shadow: 0 0 0 3px #fbd96a;
}
.donepop {
  position: fixed;
  inset: 0;
  background: rgba(74, 62, 58, 0.35);
  display: grid;
  place-items: center;
  z-index: 99;
  animation: fadein 0.2s;
}
.donepop > div {
  background: var(--card);
  border-radius: 28px;
  padding: 30px 44px;
  text-align: center;
  box-shadow: var(--shadow);
  display: grid;
  gap: 4px;
}
.donepop span {
  font-size: 54px;
  line-height: 1;
}
.donepop b {
  font-size: 28px;
  font-weight: 900;
}
.donepop small {
  color: var(--muted);
  font-weight: 700;
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* иллюстрации черепашки */
.pop.sprite {
  width: auto;
  object-fit: contain;
}
.sprite-big {
  object-fit: contain;
  object-position: center bottom;
  max-height: 230px;
}
.t-mats h3 {
  padding-right: 0;
}
.t-mats .pop.mats-tur {
  height: 96px;
  top: auto;
  bottom: 16px;
  right: 12px;
  filter: none;
}
.t-lesson #lessonBtn,
.t-mats .btn {
  align-self: center;
}
@media (min-width: 1061px) and (min-height: 621px) {
  .t-sm {
    grid-row: 5;
  }
  .t-mats .pop.mats-tur {
    height: 140px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  a.t-mats:hover .pop.mats-tur {
    transform: translate(-50%, -3px);
  }
}
@media (max-width: 1060px), (max-height: 620px) {
  .t-mats {
    min-height: 240px;
  }
}
/* запись на урок */
.trial {
  display: none;
  background: linear-gradient(150deg, #fff0b8, #fbd96a);
  color: #392c01;
  border-radius: 22px;
  padding: 16px 20px;
  margin-bottom: 18px;
  font-size: 16px;
}
.trial.on {
  display: block;
}
.book {
  gap: 22px;
  align-items: start;
}
.book .panel {
  max-width: none;
}
.social {
  gap: 14px !important;
  margin-top: 10px !important;
}
/* черепашка-помощник */
.helper {
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}
.helper > * {
  pointer-events: auto;
}
.hp-btn {
  border: 0;
  padding: 0;
  background: none;
  margin-right: -18px;
  filter: drop-shadow(0 10px 14px rgba(74, 62, 58, 0.25));
}
.hp-btn img {
  height: 104px;
  width: auto;
  display: block;
}
.hp-btn:hover img {
  transform: translateX(-8px) rotate(-4deg);
}
.hp-bubble {
  background: var(--card);
  color: var(--ink);
  font-weight: 800;
  font-size: 15px;
  padding: 10px 16px;
  border-radius: 18px 18px 4px 18px;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(6px);
  transition: 0.25s;
  pointer-events: none;
}
.hp-bubble.on {
  opacity: 1;
  transform: none;
}
.hp-panel {
  background: var(--card);
  position: relative;
}
.hp-t {
  display: block;
  font-size: 18px;
  font-weight: 900;
  margin: 0 30px 12px 0;
}
.hp-x {
  position: absolute;
  top: 12px;
  right: 12px;
  border: 0;
  background: var(--beige-l);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-weight: 900;
  color: var(--muted);
}
#hpText {
  width: 100%;
  border-radius: 14px;
  padding: 10px 12px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  resize: vertical;
}
@media (max-width: 560px) {
  .hp-btn img {
    height: 84px;
  }
}
/* тени кнопок: чёткий «пол» вместо размытого пятна */
.btn {
  box-shadow:
    0 4px 0 #1668ae,
    0 8px 14px -8px rgba(74, 62, 58, 0.35) !important;
  transition:
    transform 0.12s,
    box-shadow 0.12s;
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 5px 0 #1668ae,
    0 10px 16px -8px rgba(74, 62, 58, 0.35) !important;
}
.btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #1668ae !important;
}
.btn.mustard {
  box-shadow:
    0 4px 0 #e0ba3e,
    0 8px 14px -8px rgba(120, 90, 0, 0.35) !important;
}
.btn.mustard:hover {
  box-shadow:
    0 5px 0 #e0ba3e,
    0 10px 16px -8px rgba(120, 90, 0, 0.35) !important;
}
.btn.mustard:active {
  box-shadow: 0 1px 0 #e0ba3e !important;
}
a.t:hover .btn {
  transform: translateY(-1px);
}
/* помощник: черепашка выглядывает, облачко с хвостиком */
.hp-btn img {
  transform-origin: 100% 100%;
  transition: transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.helper.open .hp-btn:hover img {
  transform: translateX(-26px) rotate(-12deg);
}
.hp-panel {
  transform-origin: 100% 100%;
}
.hp-panel::after {
  content: "";
  position: absolute;
  right: 28px;
  bottom: -14px;
  width: 28px;
  height: 28px;
  background: var(--card);
  border-radius: 0 0 6px 0;
  transform: rotate(45deg) skew(8deg, 8deg);
  box-shadow: 8px 8px 14px -8px rgba(74, 62, 58, 0.18);
}
.hp-panel::before {
  content: "";
  position: absolute;
  right: 4px;
  bottom: -34px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: 0 4px 10px -4px rgba(74, 62, 58, 0.25);
}
@keyframes hpPop {
  from {
    opacity: 0;
    transform: scale(0.6) translate(20px, 20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.hp-bubble {
  margin-right: 34px;
}
/* запись: вход/гость и замок календаря */
.book {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) !important;
}
@media (max-width: 860px) {
  .book {
    grid-template-columns: 1fr !important;
  }
}
/* больше воздуха на главной */
@media (min-width: 1061px) and (min-height: 621px) {
  .bento {
    padding-bottom: 22px !important;
    row-gap: 18px !important;
  }
  .t-sm {
    margin-top: 12px;
  }
}
/* праздник у кнопки «Войти» — просто текст, без плашки */
.holpill {
  background: none !important;
  padding: 4px 6px !important;
  border-radius: 0 !important;
  color: var(--ink) !important;
  font-weight: 800;
}
.holpill .e {
  background: none !important;
  width: auto !important;
  height: auto !important;
  font-size: 18px !important;
}
.holpill small {
  color: var(--muted) !important;
  font-weight: 700 !important;
}
.holpill:hover {
  color: var(--blue2) !important;
}
/* черепашки слева и справа на одной линии */
.t-lesson .sprite-big {
  margin: auto 0 0 !important;
  flex: 0 1 auto !important;
  min-height: 0;
  position: relative;
  top: 0;
}
@media (min-width: 1061px) and (min-height: 621px) {
  .t-mats .pop.mats-tur {
    bottom: 92px !important;
  }
}
.t-lesson #lessonBtn {
  margin-top: 14px !important;
}
/* «Занятие на сегодня»: плашки как часть общего блока, разного размера */
.todaycard.cubes {
  grid-template-columns: repeat(10, 1fr) !important;
  grid-template-rows: 1.15fr 0.85fr !important;
  grid-auto-rows: auto !important;
}
.todaycard.cubes > .cube:nth-child(1) {
  grid-column: 1/7;
  grid-row: 1;
}
.todaycard.cubes > .cube:nth-child(2) {
  grid-column: 7/11;
  grid-row: 1;
}
.todaycard.cubes > .cube:nth-child(3) {
  grid-column: 1/5;
  grid-row: 2;
}
.todaycard.cubes > .cube:nth-child(4) {
  grid-column: 5/11;
  grid-row: 2;
}
.cube {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(2px);
  transition:
    background 0.2s,
    transform 0.15s;
}
.cube:hover {
  background: rgba(255, 255, 255, 0.22) !important;
}
.cube small {
  color: rgba(255, 255, 255, 0.78) !important;
}
.cube.done {
  background: rgba(255, 255, 255, 0.26) !important;
}
.t-lesson {
  background: linear-gradient(160deg, #fef5d9 0%, var(--card) 60%) !important;
}
@media (max-width: 640px) {
  .todaycard.cubes {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
  }
  .todaycard.cubes > .cube {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}
/* шапка крупнее, BRAVO коралловым, «Войти» просто текстом */
.logo b {
  font-size: 32px !important;
  color: #e6261f !important;
}
.logo b i {
  font-size: 20px !important;
}
.logo small {
  font-size: 15.5px !important;
  margin-top: 0;
  font-weight: 400 !important;
  color: #86776f !important;
  line-height: 1.2 !important;
}
/* галочки вместо звёздочек: выглядывают над верхним краем плашки */
.cube .ck {
  display: grid;
  place-items: center;
  font-size: 19px !important;
  font-weight: 900;
  line-height: 1;
  color: #fff !important;
  -webkit-text-stroke: 0 !important;
  filter: none !important;
}
.cube.done .ck {
  border-color: #fff !important;
  color: #fff !important;
  -webkit-text-stroke: 0 !important;
}
.todaycard.cubes {
  padding-top: 14px !important;
}
.cube {
  overflow: visible !important;
  justify-content: flex-end;
}
/* шапка без белой полосы: общий бежевый фон с крестиками */
#v-home .bento {
  margin-bottom: 70px;
}
.logo > span {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}
.logo b,
.logo small {
  white-space: nowrap;
}
.logo small {
  display: inline-block !important;
}
/* праздник — отдельно, над «Обычаями» */
.t-cust {
  position: relative;
  overflow: visible !important;
}
.t-cust .holpill {
  position: absolute;
  right: 10px;
  top: -32px;
  z-index: 2;
}
/* обе кнопки: одинаковый тёмный текст */
/* нижний ряд: три равных окна независимо от колонок выше */
.sm-row {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  min-height: 0;
}
.sm-row .t-sm {
  grid-column: auto !important;
  grid-row: auto !important;
  margin-top: 0 !important;
}
@media (min-width: 1061px) and (min-height: 621px) {
  .sm-row {
    grid-row: 5;
    margin-top: -2px;
  }
}
@media (max-width: 1060px), (max-height: 620px) {
  .sm-row {
    gap: 22px 18px;
    margin-top: 10px;
  }
}
@media (max-width: 640px) {
  .sm-row {
    grid-template-columns: 1fr 1fr;
    gap: 34px 14px;
  }
  .sm-row .t-sm:last-child {
    grid-column: 1/3 !important;
  }
}
/* нижние окна: белый текст, простые картинки внутри плитки */
.t-sm,
.t-sm h3,
.c-yellow,
.c-yellow h3 {
  color: #fff !important;
}
.t-sm p,
.c-yellow p {
  color: rgba(255, 255, 255, 0.9) !important;
}
.c-yellow h3,
.c-yellow p {
  text-shadow: 0 1px 2px rgba(150, 110, 0, 0.35);
}
.t-sm .pop.smi {
  top: 50% !important;
  bottom: auto !important;
  right: 22px !important;
  width: 96px !important;
  height: 96px !important;
  transform: translateY(-50%) !important;
  filter: drop-shadow(0 6px 8px rgba(12, 53, 86, 0.18));
}
.t-sm {
  justify-content: center;
}
/* белый текст на кнопках урока и пособий */
.t-lesson #lessonBtn,
.t-mats .btn {
  color: #fff !important;
}
.t-mats .btn {
  text-shadow: 0 1px 2px rgba(150, 110, 0, 0.45);
}
/* нижние окна: плоские цвета, уже и по центру */
.sm-row .c-teal {
  background: #45bcc0 !important;
}
.sm-row .c-yellow {
  background: #fbd96a !important;
}
.sm-row .c-night {
  background: #3494e3 !important;
}
.sm-row .t-sm::before {
  display: none !important;
}
@media (min-width: 1061px) and (min-height: 621px) {
  .sm-row {
    width: min(100%, 900px);
    justify-self: center;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.sm-row .t-sm .pop.smi {
  width: 80px !important;
  height: 80px !important;
  right: 14px !important;
}
.sm-row .t-sm h3,
.sm-row .t-sm p {
  padding-right: 70px !important;
}
/* белая шапка с воздухом; «Культура» и «Обычаи» временно скрыты */
header {
  background: #fff !important;
  box-shadow: 0 1px 0 var(--line) !important;
}
.t-cult,
.t-cust {
  display: none !important;
}
.hol-row {
  grid-column: 1/-1;
  grid-row: 1;
  display: flex;
}
.hol-row .holpill {
  position: static !important;
}
@media (min-width: 1061px) and (min-height: 621px) {
  .bento {
    padding-top: 22px !important;
  }
}
/* шапка: всё прижато к нижнему краю белой полосы */
header .bar {
  height: 80px !important;
  align-items: last baseline !important;
  padding-bottom: 10px !important;
  padding-top: 0 !important;
  box-sizing: border-box;
  display: flex !important;
  flex-direction: row;
}
.logo,
.bar-right {
  align-self: auto !important;
}
.logo small {
  letter-spacing: 0 !important;
}
/* логотип: более вытянутый по вертикали шрифт */
.logo b {
  line-height: 1.05 !important;
  display: flex !important;
  justify-content: space-between;
  align-items: baseline;
  font-family: "Rubik", "Nunito", "Segoe UI", Arial, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}
.logo b i {
  margin-left: 12px !important;
  font-family: "Rubik", "Nunito", "Segoe UI", Arial, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
}
.cube small {
  white-space: normal !important;
  overflow: visible !important;
}
/* облачко над черепашкой-помощником */
.hp-btn {
  position: relative;
}
.hp-cloud {
  min-width: 34px;
  padding: 0 9px;
  border-radius: 14px;
  background: #fff;
  border: 1.5px solid #d8cfc2;
  color: #86776f;
  font-weight: 800;
  font-size: 15px;
  line-height: 23px;
  text-align: center;
  box-shadow: 0 3px 8px -4px rgba(74, 62, 58, 0.25);
}
.hp-cloud::before,
.hp-cloud::after {
  position: absolute;
  background: #fff;
  border: 1.5px solid #d8cfc2;
  border-radius: 50%;
}
.hp-cloud::before {
  width: 9px;
  height: 9px;
  left: 20px;
  bottom: -10px;
}
.hp-cloud::after {
  width: 5px;
  height: 5px;
  left: 28px;
  bottom: -17px;
}
/* нижние окна: текст ближе к верху */
.sm-row .t-sm {
  justify-content: flex-start !important;
  padding-top: 20px !important;
}
/* тёмно-серый вместо чёрного */
.t-lesson h3,
.t-mats h3 {
  color: #4a3e3a !important;
}
/* три точки BRAVO слева от логотипа */
.logo {
  gap: 6px !important;
  align-items: center !important;
}
.logo-dots {
  width: 50px;
  height: 41px;
  flex: none;
  display: block;
  position: relative;
  top: -5px;
  left: 4px;
}
@media (max-width: 560px) {
  .logo-dots {
    width: 40px;
    height: 38px;
  }
}
/* меню в шапке */
.bar-right {
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.topnav {
  display: flex;
  gap: 16px;
}
.topnav a {
  text-decoration: none;
  color: #86776f;
  font-weight: 400;
  font-size: 15.5px;
  line-height: 1.2;
}
.topnav a:hover {
  color: #e6261f;
}
.topnav a.on {
  color: #e6261f !important;
  font-weight: 400 !important;
}
/* разделы под шапкой — строкой текста */
.hol-row {
  min-width: 0;
}
.hol-row .holpill {
  flex: none;
  white-space: nowrap;
}
.secnav {
  display: flex;
  gap: 22px;
  flex-wrap: nowrap;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
}
.secnav::-webkit-scrollbar {
  display: none;
}
.secnav a {
  text-decoration: none;
  color: #4a3e3a;
  font-weight: 600;
  font-size: 15.5px;
  padding: 2px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  flex: none;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.secnav a:hover {
  color: #1c7fd0;
  border-bottom-color: #2eb3b1;
}
/* белые блоки урока и пособий */
.t-lesson,
.t-mats {
  background: var(--card) !important;
}
/* страницы «О нас», «Услуги», «Блог» */
.info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.info-grid .panel {
  max-width: none;
  margin: 0;
}
.svc {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.svc-go {
  margin-top: auto;
  font-weight: 800;
  color: var(--blue2);
}
@media (max-width: 860px) {
  .info-grid {
    grid-template-columns: 1fr;
  }
  .topnav {
    gap: 14px;
  }
  .topnav a {
    font-size: 15px;
  }
  .secnav {
    gap: 4px 16px;
  }
}
@media (max-width: 560px) {
  .topnav {
    display: none;
  }
}
/* заголовок «Занятие на сегодня» как «Онлайн-занятия» */
.t-hero h1 {
  font-size: 24px !important;
}
/* галочка без кружка: объёмная, пустая или зелёная */
.cube .ck {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
.cube .ck svg {
  display: block;
  overflow: visible;
}
.cube .ck path {
  stroke-linejoin: round;
  filter: drop-shadow(0 3px 3px rgba(12, 53, 86, 0.28));
}
.cube.done .ck {
  transform: none !important;
  box-shadow: none !important;
  background: none !important;
}
/* кнопки лёгкие: мягкая тень как у блоков, без тёмного «пола» */
.btn,
.btn.mustard {
  box-shadow: 0 12px 26px -14px rgba(92, 78, 66, 0.55) !important;
}
.btn:hover,
.btn.mustard:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -14px rgba(92, 78, 66, 0.6) !important;
}
.btn:active,
.btn.mustard:active {
  transform: translateY(1px);
  box-shadow: 0 8px 18px -12px rgba(92, 78, 66, 0.5) !important;
}
/* выполненная галочка — сплошная зелёная */
/* лёгкая полупрозрачная кромка у всех кликабельных элементов, как у плашек в центре */
/* кромка-градиент: снизу светлее, кверху растворяется (кроме плашек в центре) */
.t-lesson #lessonBtn,
.t-mats .btn,
.sm-row .t-sm {
  border: 0 !important;
  position: relative;
}
.t-lesson #lessonBtn,
.t-mats .btn {
  box-shadow: 0 12px 26px -14px rgba(92, 78, 66, 0.55) !important;
}
.t-lesson #lessonBtn:hover,
.t-mats .btn:hover {
  box-shadow: 0 16px 30px -14px rgba(92, 78, 66, 0.6) !important;
}
.sm-row .t-sm {
  box-shadow: 0 18px 40px -22px rgba(92, 78, 66, 0.42) !important;
}
.t-lesson #lessonBtn::after,
.t-mats .btn::after,
.sm-row .t-sm::after {
  content: "";
  display: block !important;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.62),
    rgba(255, 255, 255, 0.28) 45%,
    rgba(255, 255, 255, 0.18)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  width: auto;
  height: auto;
  opacity: 1;
  transform: none;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: transparent;
}
/* неактивная галочка — прозрачная, внутри плашки; выполненная — крупнее, растёт вверх из той же точки */
.cube .ck {
  top: 6px !important;
  right: 14px !important;
  width: 42px !important;
  height: 37px !important;
}
.cube .ck svg {
  width: 100% !important;
  height: 100% !important;
}
.cube .ck path {
  fill: transparent !important;
}
.cube.done .ck {
  top: -7px !important;
  width: 52px !important;
  height: 45px !important;
  right: 14px !important;
}
.cube.done .ck path {
  filter: drop-shadow(0 4px 4px rgba(20, 90, 45, 0.4));
  stroke: rgba(255, 255, 255, 0.6) !important;
  stroke-width: 1.4 !important;
  fill: #34b864 !important;
}
.cube .ck path {
  stroke: rgba(255, 255, 255, 0.6) !important;
  vector-effect: non-scaling-stroke;
  stroke-width: 1.3px !important;
}
.t-lesson #lessonBtn,
.t-mats .btn {
  font-size: 18px !important;
  padding-top: 10px !important;
  padding-bottom: 14px !important;
}
.cube .ck path,
.cube.done .ck path {
  stroke: rgba(255, 255, 255, 0.42) !important;
}
body {
  background-attachment: fixed !important;
}
/* разделы: барабан — крутится только от пальца/мыши, по центру крупнее */
.secnav {
  position: relative;
  height: 44px;
  overflow: hidden !important;
  min-width: 0;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}
.secnav.grabbing {
  cursor: grabbing;
}
.drum {
  position: absolute;
  inset: 0;
}
.t-lesson #lessonBtn {
  background: #3494e3 !important;
}
/* барабан во всю ширину основных блоков, праздник пока скрыт, слова белые */
.hol-row .holpill {
  display: none !important;
}
.secnav {
  flex: 1 1 100% !important;
  width: 100%;
}
.drum a {
  position: absolute;
  top: 50%;
  left: 0;
  white-space: nowrap;
  font-weight: 400 !important;
  font-size: 16px;
  text-decoration: none;
  border: 0 !important;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  -webkit-user-drag: none;
  color: #86776f !important;
  text-shadow: none !important;
}
.drum a:hover {
  color: #1c7fd0 !important;
  text-shadow: none !important;
}
/* плитка «дней подряд»: спокойнее, в цветах сайта */
.sk-msg {
  font-weight: 400 !important;
}
.sk-n {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: #43a8cb !important;
  -webkit-text-fill-color: #43a8cb;
}
.sk-dots .sd.ok {
  background: #45bcc0 !important;
  border-color: transparent !important;
}
.sk-dots .sd {
  width: 20px !important;
  height: 20px !important;
}
.sk-dots {
  gap: 6px !important;
}
.sk-dots .sd.gift {
  background: var(--beige-l) !important;
  border: 1.5px solid var(--beige) !important;
  padding: 0;
  box-shadow: none;
}
.sk-dots .sd.gift svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 2px 3px rgba(92, 78, 66, 0.3));
}
.logo b i,
.fl span {
  color: #45bcc0 !important;
}
/* облачко мысли: три кружка в пропорциях точек BRAVO */
.hp-cloud {
  all: unset;
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.hp-cloud::before,
.hp-cloud::after {
  content: none !important;
  display: none !important;
}
.hp-cloud i {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #d8cfc2;
  box-shadow: none;
  font-style: normal;
}
.hp-cloud .hc3 {
  width: 6px;
  height: 6px;
}
.hp-cloud .hc2 {
  width: 10px;
  height: 10px;
}
/* облачко: ближе к носу черепашонка; при открытии — меню вместо двух верхних кружков */
.hp-cloud .hc3 {
  left: 19px !important;
  top: 6px !important;
}
.hp-cloud .hc2 {
  left: 11px !important;
  top: -9px !important;
}
.hp-cloud .hc1 {
  width: 24px;
  height: 24px;
  color: #b5a9a2;
  font-weight: 400;
  font-size: 15px;
  line-height: 1;
  left: 17px !important;
  top: -40px !important;
  cursor: pointer;
}
.helper.open .hp-cloud {
  opacity: 1 !important;
}
.helper.open .hp-cloud .hc1,
.helper.open .hp-cloud .hc2 {
  opacity: 0;
  transform: scale(0.4);
  transition: 0.2s;
}
.hp-cloud .hc1,
.hp-cloud .hc2 {
  transition: 0.2s;
}
.hp-bubble {
  display: none !important;
}
.hp-panel {
  border: 1px solid #d8cfc2 !important;
  box-shadow: 0 10px 30px -18px rgba(92, 78, 66, 0.35) !important;
}
.hp-panel::before,
.hp-panel::after {
  display: none !important;
  content: none !important;
}
.hp-panel.on {
  animation: hpGrow 0.25s cubic-bezier(0.3, 1.3, 0.5, 1) !important;
  transform-origin: 85% 100%;
}
@keyframes hpGrow {
  from {
    opacity: 0;
    transform: scale(0.3) translate(40px, 40px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* вопрос черепашонку: размытие фона, овальное окошко */
.hp-veil {
  position: fixed;
  inset: 0;
  z-index: 69;
  background: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.hp-veil.on {
  opacity: 1;
  pointer-events: auto;
}
.helper {
  z-index: 71 !important;
}
.hp-panel {
  border-radius: 50% !important;
  display: none;
  align-content: center;
}
.hp-panel.on {
  display: grid !important;
}
.hp-panel.form {
  width: min(340px, calc(100vw - 36px)) !important;
}
.hp-panel .hp-x {
  display: none !important;
}
.hp-cloud i {
  pointer-events: auto;
  cursor: pointer;
}
.helper.open .hp-btn img {
  transform: translateX(-14px) rotate(-8deg) !important;
}
/* овал поменьше и тоньше: два пункта простым текстом, выровнены по левому краю, блок по центру */
.hp-panel {
  width: 250px !important;
  min-height: 0 !important;
  padding: 26px 34px !important;
  justify-items: center;
}
/* облачко вместо овала; два кружка наклоняются вместе с черепашонком */
.hp-cloud {
  transform-origin: 77px 104px;
  transition:
    transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1),
    opacity 0.2s;
}
.helper.open .hp-cloud {
  transform: translateX(-14px) rotate(-8deg);
}
.helper.open .hp-cloud .hc2 {
  opacity: 1 !important;
}
.helper.open .hp-cloud .hc1 {
  opacity: 0 !important;
}
/* меню помощника — как блоки сайта: скруглённый прямоугольник, пункты на светло-бежевых плашках */
.hp-panel:not(.form) {
  min-height: 0 !important;
  width: 250px !important;
  height: auto !important;
  background: #fff !important;
  border: 1px solid #d8cfc2 !important;
  border-radius: 26px !important;
  padding: 16px !important;
  filter: none !important;
  box-shadow: 0 18px 40px -22px rgba(92, 78, 66, 0.42) !important;
}
.hp-panel {
  margin-right: 12px !important;
  margin-bottom: -4px !important;
}
.helper.open .hp-cloud .hc2 {
  transform: translateX(6px) !important;
}
.helper.open .hp-cloud .hc3 {
  transform: translateX(4px) !important;
  transition: transform 0.2s;
}
/* форма вопроса: спокойная и нейтральная */
.hp-panel.form {
  border: 1px solid #d8cfc2 !important;
  box-shadow: 0 18px 40px -22px rgba(92, 78, 66, 0.42) !important;
  border-radius: 26px !important;
}
.hp-panel.form .hp-t {
  font-weight: 400 !important;
  font-size: 17px !important;
  margin: 2px 40px 12px 2px !important;
}
.hp-panel.form .hp-x {
  display: grid !important;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  line-height: 1;
  font-size: 14px;
  top: 14px;
  right: 14px;
  border-radius: 50%;
  background: #fbf7ef;
  color: #86776f;
  font-weight: 400;
}
.hp-send {
  width: 100%;
  justify-content: center;
  margin-top: 12px;
  background: #4a3e3a !important;
  color: #fff !important;
  font-weight: 500;
  box-shadow: 0 10px 22px -14px rgba(74, 62, 58, 0.6) !important;
}
.hp-send:hover {
  background: #5f514b !important;
}
#hpText {
  border: 1px solid #d8cfc2 !important;
  background: #fbf7ef !important;
}
#hpText:focus {
  outline: none;
  border-color: #86776f !important;
}
#hpForm[hidden] {
  display: none !important;
}
.hp-panel.form .hp-t {
  display: none !important;
}
#hpText::placeholder {
  color: #b5a9a2;
  opacity: 1;
}
/* форма: ровные отступы — поле, кнопка и край на одинаковом расстоянии */
.hp-panel.form {
  padding: 18px !important;
  justify-items: stretch !important;
}
.hp-panel.form .hp-send {
  margin-top: 10px !important;
}
#hpText {
  display: block;
}
.hp-panel.form #hpDone {
  margin: 10px 0 0 !important;
}
.hp-panel.form #hpDone:empty {
  display: none;
}
.hp-panel.form #hpForm {
  width: 100%;
  padding-top: 38px !important;
}
/* подвал: логотип в серо-коричневом, соцсети и почта по центру под ним */
.fbrand-in {
  display: inline-flex;
  flex-direction: column;
}
.fl {
  display: flex !important;
  flex-direction: column;
  line-height: 1.05;
  color: #a09189 !important;
  font-family: "Rubik", "Nunito", Arial, sans-serif !important;
}
.fl span {
  display: block;
  color: #a09189 !important;
  font-weight: 500 !important;
}
.fbrand .social {
  gap: 14px !important;
  margin-top: 0 !important;
}
.fmail {
  color: #86776f;
  text-decoration: none;
  font-size: 15px;
  background: none;
  border: 0;
  padding: 2px 4px;
  font: inherit;
  font-size: 15px;
  cursor: copy;
  border-radius: 8px;
  transition: color 0.15s;
}
.fmail:hover,
.fmail.copied {
  color: #4a3e3a;
}
.fbrand .social a {
  cursor: pointer;
}
.fbrand .social a:hover,
.fbrand .social a:active {
  color: #4a3e3a !important;
  background: none !important;
}
/* окно «уйти с сайта?» */
.leave-veil {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none;
  place-items: center;
  padding: 20px;
}
.leave-veil.on {
  display: grid;
  animation: fadein 0.2s;
}
.leave-box {
  width: min(340px, 100%);
  background: #fff;
  border: 1px solid #d8cfc2;
  border-radius: 26px;
  padding: 22px 20px 18px;
  text-align: center;
  box-shadow: 0 18px 40px -22px rgba(92, 78, 66, 0.42);
}
.leave-box p {
  margin: 0 0 16px;
  color: var(--ink);
  font-size: 16px;
  max-width: none;
}
.leave-box .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0;
}
.leave-box button {
  border: 0;
  border-radius: 99px;
  padding: 11px 14px;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
.leave-stay {
  background: #fbf7ef;
  color: var(--ink);
}
.leave-go {
  background: #4a3e3a;
  color: #fff;
}
.leave-go:hover {
  background: #5f514b;
}
/* подвал упрощён: только логотип, соцсети, почта и копирайт — всё по левому краю */
.site-foot .fcol:not(.fbrand),
.flegal a {
  display: none !important;
}
.site-foot .fwrap {
  display: block !important;
}
.fbrand-in {
  align-items: center !important;
}
.fbrand .social {
  justify-content: center !important;
  margin-left: 0 !important;
}
.site-foot .fbrand {
  text-align: center !important;
  display: block !important;
  margin: 0 !important;
}
.fl {
  font-weight: 500 !important;
}
.fl {
  font-size: 20px !important;
}
.fl span {
  font-size: 12px !important;
  margin-top: 1px;
}
/* подвал: соцсети и почта вместе, весь блок ниже */
.fl {
  align-items: center !important;
  margin-bottom: 14px;
}
.fbrand .social {
  margin: 0 !important;
}
.fmail {
  margin-top: 0;
}
.site-foot {
  padding-top: 58px !important;
}
.flegal {
  padding-top: 8px !important;
  font-size: 12px !important;
}
.site-foot {
  padding-bottom: 2px !important;
  margin-bottom: 0 !important;
}
.flegal {
  margin-bottom: 0 !important;
  line-height: 1.3;
}
.fbrand-in {
  gap: 0 !important;
  transform: scale(1.12);
  transform-origin: 50% 50%;
}
/* разделы без цветной шапки: только заголовок и короткая строка */
#v-exercises .inner,
#v-games .inner,
#v-read .inner,
#v-music .inner {
  background: none !important;
  color: var(--ink) !important;
  padding: 34px 0 8px !important;
}
#v-exercises .inner::after,
#v-games .inner::after,
#v-read .inner::after,
#v-music .inner::after {
  display: none !important;
}
#v-exercises .inner .back,
#v-games .inner .back,
#v-read .inner .back,
#v-music .inner .back {
  display: none !important;
}
#v-exercises .inner h2,
#v-games .inner h2,
#v-read .inner h2,
#v-music .inner h2 {
  color: #4a3e3a !important;
  margin: 0;
}
#v-exercises .inner .lead,
#v-games .inner .lead,
#v-read .inner .lead,
#v-music .inner .lead {
  color: #86776f !important;
  margin: 4px 0 0;
  font-size: 16px;
}
#v-exercises .page,
#v-games .page,
#v-read .page,
#v-music .page {
  padding-top: 14px !important;
}
/* темы упражнений: раскрывающиеся группы и плашки с результатом */
.exrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  border-radius: 18px;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: transform 0.12s;
}
.exn {
  font-size: 17px;
}
.exsc {
  color: #86776f;
  font-size: 15px;
  white-space: nowrap;
}
.gstar {
  width: 30px;
  height: 30px;
  flex: none;
  overflow: visible;
}
.gstar path {
  fill: #ffc933;
  stroke: #eba817;
  stroke-width: 2.2;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 3px rgba(235, 168, 23, 0.45));
}
/* подвал всегда прижат к низу окна — без полосы фона под ним */
body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
body > .site-foot {
  margin-top: auto;
}
@media (min-width: 1061px) and (min-height: 621px) {
  #v-home .bento {
    grid-template-columns: repeat(3, calc((100% - 176px) / 12 + 10.67px)) repeat(6, minmax(0, 1fr)) repeat(
        3,
        calc((100% - 176px) / 12)
      ) !important;
  }
}
/* упражнения: простой список тем без категорий */
#exList {
  max-width: none !important;
}
.exlist {
  display: grid;
  gap: 8px;
}
.exrow {
  background: rgba(255, 255, 255, 0.55) !important;
  padding: 11px 18px !important;
  box-shadow: 0 8px 20px -18px rgba(92, 78, 66, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
}
.exrow:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.8) !important;
}
#v-exercises .inner h2,
#v-games .inner h2,
#v-read .inner h2,
#v-music .inner h2 {
  font-size: 24px !important;
}
/* окно правила: бирюзовый (как «Упражнения»), тёмно-коричневый текст, без картинок */
.fmodal {
  background: rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.fm-rule {
  background: #fff !important;
  border: 1px solid #d8cfc2;
  box-shadow: 0 24px 50px -24px rgba(92, 78, 66, 0.45) !important;
  border-radius: 28px !important;
  padding: 26px 24px 22px !important;
}
.fm-rule .rm-cap {
  margin: 2px 0 0;
  color: #86776f;
  font-weight: 400;
  font-size: 16px;
}
.fm-rule .tag {
  background: #45bcc0 !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-radius: 16px !important;
  margin: 12px 0 14px !important;
}
.fm-rule .x {
  background: #e8f6f6 !important;
  color: #2a9fa3 !important;
  font-weight: 400 !important;
  width: 32px !important;
  height: 32px !important;
  font-size: 15px !important;
  display: grid;
  place-items: center;
  padding: 0;
  line-height: 1;
}
.fm-rule .rule {
  background: #f7fbfb !important;
  border: 1px solid #ddefef;
}
.fm-rule .rule h4 {
  color: #4a3e3a !important;
  border-bottom: 1px solid #cdebec !important;
  font-weight: 600;
}
.fm-rule .rule p {
  color: #4a3e3a;
}
.fm-rule .rm-go {
  background: #45bcc0 !important;
  color: #fff !important;
}
.fm-rule .rm-go:hover {
  background: #3bafb3 !important;
}
/* выделения в правилах — алым, корень — дугой */
.fm-rule .rule b {
  color: #e6261f !important;
}
.fm-rule .rule p {
  line-height: 1.6;
}
.fm-rule .rule p:has(.root) {
  line-height: 2.5;
  padding-top: 4px;
}
.root {
  position: relative;
  color: inherit;
  font-weight: inherit;
  display: inline-block;
  line-height: 1.2;
}
.root::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.5em;
  height: 0.55em;
  border: 2px solid #e6261f;
  border-bottom: 0;
  border-radius: 50% 50% 0 0/100% 100% 0 0;
}
/* единая лёгкая кромка и тёплая тень у всех кнопок */
.btn {
  position: relative;
  border: 0 !important;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.62),
    rgba(255, 255, 255, 0.28) 45%,
    rgba(255, 255, 255, 0.18)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.fm-rule .rm-go {
  box-shadow: 0 12px 26px -14px rgba(92, 78, 66, 0.55) !important;
}
/* экран упражнения: бирюзовый, как кнопка «Упражнения», фон как на главной */
.focus {
  background: linear-gradient(180deg, #f8efd8 0%, #f8f1e2 50%, #fcf8f0 100%) !important;
}
.fhead {
  background: #45bcc0 !important;
  color: #fff !important;
  border-radius: 0 0 22px 22px !important;
}
.fhead b {
  color: #fff;
  font-weight: 600 !important;
}
#fxSub {
  display: none !important;
}
.fhead .fx {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
  font-weight: 400 !important;
  font-size: 17px !important;
  width: 36px !important;
  height: 36px !important;
  display: grid;
  place-items: center;
  padding: 0;
  line-height: 1;
}
.fprog {
  background: #fff !important;
  border: 1px solid #bfe6e7 !important;
  box-shadow: 0 10px 24px -20px rgba(92, 78, 66, 0.45);
}
.fprog .l {
  font-weight: 400 !important;
  color: #4a3e3a !important;
}
.fbar {
  background: #eaf7f7 !important;
  border: 0 !important;
}
.fbar i {
  background: #45bcc0 !important;
}
.fcard {
  border: 1px solid #e6e0d6 !important;
  box-shadow: 0 18px 40px -22px rgba(92, 78, 66, 0.42) !important;
  position: relative;
}
.rulebtn {
  position: absolute;
  top: 16px;
  right: 16px;
  background: #f3fafa !important;
  color: #2a9fa3 !important;
  font-weight: 500 !important;
  border-radius: 99px !important;
  padding: 7px 14px !important;
  font-size: 14px;
}
.opt {
  background: #fbf7ef !important;
  border: 1px solid #e6e0d6 !important;
  font-weight: 500 !important;
  color: #4a3e3a !important;
}
.opt:hover {
  border-color: #45bcc0 !important;
}
.opt.ok {
  background: #e3f5f5 !important;
  border-color: #45bcc0 !important;
}
.opt.bad {
  background: #fdecea !important;
  border-color: #e6261f !important;
}
/* стрелка «дальше»: переход к следующему примеру только по нажатию */
.fnext-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}
.fnext {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: #45bcc0;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 12px 26px -14px rgba(92, 78, 66, 0.55);
  transition:
    opacity 0.2s,
    transform 0.15s;
}
.fnext:hover:not(:disabled) {
  transform: translateX(2px);
}
.fnext:disabled {
  opacity: 0.3;
  cursor: default;
  box-shadow: none;
}
/* итог упражнения */
.res-wrap {
  display: grid;
  justify-items: center;
  text-align: center;
  padding: 18px 0 6px;
}
.res-msg {
  font-size: 30px;
  font-weight: 600;
  color: #4a3e3a;
}
.res-sub {
  color: #86776f;
  margin-top: 4px;
}
.res-stars {
  display: flex;
  margin: 22px 0 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.rs {
  width: 30px;
  height: 30px;
  overflow: visible;
}
.rs path {
  fill: #f4efe7;
  stroke: #e2d9cb;
  stroke-width: 2;
  stroke-linejoin: round;
}
.rs.f path {
  fill: #ffc933;
  stroke: #eba817;
  filter: drop-shadow(0 2px 3px rgba(235, 168, 23, 0.4));
}
.res-n {
  color: #86776f;
  font-size: 15px;
}
.res-btns {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
  justify-content: center;
}
.res-again {
  background: #45bcc0 !important;
  color: #fff !important;
}
.res-all {
  background: #fff !important;
  color: #4a3e3a !important;
  border: 1px solid #e6e0d6 !important;
  box-shadow: 0 10px 22px -16px rgba(92, 78, 66, 0.45) !important;
}
.res-stars {
  align-items: center;
  gap: 7px !important;
}
.rd {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--beige-l);
  border: 1.5px solid var(--beige);
  box-sizing: border-box;
}
.rd.f {
  background: #45bcc0;
  border-color: transparent;
}
.res-stars .rs {
  width: 28px;
  height: 28px;
  margin-left: 2px;
}
/* окончание — красный квадратик одного размера; нулевое — пустой квадратик */
.end {
  display: inline-block;
  width: 0.95em;
  height: 1.12em;
  line-height: 1.04em;
  text-align: center;
  vertical-align: baseline;
  border: 2px solid #e6261f;
  border-radius: 2px;
  box-sizing: border-box;
  margin-left: 1px;
  padding: 0;
  color: inherit;
  font-weight: inherit;
}
.end.z {
  margin-left: 2px;
  vertical-align: -0.16em;
}
.fm-rule .rule p:has(.end) {
  line-height: 2.1;
}
/* «Закончить упражнение?» — в стиле окошек помощника */
/* игры: список как в упражнениях */
.g-back {
  display: none;
  border: 0;
  background: none;
  font: inherit;
  color: #86776f;
  padding: 4px 0;
  margin: -4px 0 14px;
  cursor: pointer;
}
.g-back:hover {
  color: #4a3e3a;
}
#v-games:not(.glist) .g-back {
  display: inline-block;
}
#v-games:not(.glist) #gList {
  display: none;
}
#v-games.glist .gpane {
  display: none !important;
}
/* «Вершки и корешки» */
.vk {
  max-width: 820px;
}
.vk-hint {
  color: #86776f;
  margin: 0 0 14px;
}
/* соединённая, но ещё не проверенная пара */
.vk-msg {
  margin: 0;
  font-size: 19px;
  color: #4a3e3a;
}
.vk-again[hidden] {
  display: none;
}
.vk-again {
  margin-left: auto;
  background: #fbd96a !important;
  color: #4a3e3a !important;
}
.exd {
  display: block;
  font-size: 13.5px;
  color: #86776f;
  margin-top: 1px;
}
/* литература: список разделов как в упражнениях */
#v-read .lib h3 {
  display: none;
}
.rd-back {
  display: inline-block !important;
}
.rd-cat {
  font-size: 18px;
  color: #4a3e3a;
  margin: 0 0 10px;
}
#v-read a.exrow {
  text-decoration: none;
}
/* литература: голубой интерфейс, отметки */
#v-text .inner {
  background: #3494e3 !important;
}
#v-text .inner::after {
  border-color: rgba(255, 255, 255, 0.18) !important;
}
.lit-acts {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 4px;
}
.lit-read {
  flex: 1;
  justify-content: center;
  background: #3494e3 !important;
  color: #fff !important;
  font-size: 18px;
}
.lit-ic {
  border-radius: 50%;
  border: 1px solid #e6e0d6;
  background: #fff;
  font-size: 20px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 10px 22px -16px rgba(92, 78, 66, 0.45);
  transition: 0.15s;
}
.lit-ic[data-k="fav"] {
  font-size: 22px;
}
.lit-ic.on {
  filter: none;
  opacity: 1;
}
.lit-ic[data-k="fav"].on {
  color: #e6261f;
  border-color: #f3b3ae;
  background: #fdeeec;
}
/* «Перед сном» и «В дорогу» — как кликабельные плитки */
/* текст: плашка-заголовок как в упражнениях, голубая */
#v-text .inner {
  display: none !important;
}
.rd-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 12px;
}
.rd-head .rd-back {
  margin: 0 !important;
}
.rd-head .rd-cat {
  margin: 0;
  font-size: 18px;
  color: #4a3e3a;
}
/* простые контурные значки */
.lit-ic {
  filter: none !important;
  opacity: 1 !important;
  color: #b5a9a2 !important;
  width: 50px !important;
  height: 50px !important;
}
.lit-ic svg {
  width: 34px;
  height: 34px;
  display: block;
}
.lit-ic.on {
  color: #e6261f !important;
  background: #fff !important;
  border-color: #e6e0d6 !important;
}
.lit-ic.on svg path {
  fill: #e6261f;
}
/* луна и машинка одного визуального размера, одна толщина линии */
/* плеер «В дорогу» — светло-голубой */
/* ночной экран: подписи ближе к своим кнопкам */
@keyframes nudge {
  0%,
  100% {
    transform: none;
  }
  25% {
    transform: translateX(-6px);
  }
  75% {
    transform: translateX(6px);
  }
}
/* строка праздника под барабаном — не сдвигает колонки */
.hol-row {
  flex-direction: column !important;
  gap: 6px !important;
}
.hol-row .secnav {
  height: 36px !important;
  flex: none !important;
  margin: 0 !important;
}
.hol-row {
  height: 52px !important;
  min-height: 0 !important;
  max-height: 52px;
}
.hol-strip {
  display: flex;
  font-size: 14.5px;
  line-height: 1;
  align-items: center;
}
.hs-go {
  border-radius: 99px;
  font: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.hs-go:hover {
  background: rgba(255, 255, 255, 0.85);
  color: #4a3e3a;
}
.hs-year {
  color: #a09189;
  text-decoration: none;
  border-bottom: 1px solid #d8cfc2;
  padding-bottom: 1px;
}
.hs-year:hover {
  color: #4a3e3a;
}
.fm-hol {
  background: #fff !important;
  border: 1px solid #d8cfc2;
  border-radius: 26px !important;
  max-width: 400px !important;
  padding: 24px 24px 20px !important;
  text-align: left !important;
  box-shadow: 0 18px 40px -22px rgba(92, 78, 66, 0.42) !important;
}
.fm-hol .x {
  background: #fbf7ef !important;
  color: #86776f !important;
  font-weight: 400 !important;
  width: 30px !important;
  height: 30px !important;
  font-size: 14px !important;
  display: grid;
  place-items: center;
  padding: 0;
}
.hs-when {
  color: #a09189;
  font-size: 13.5px;
}
.fm-hol h3 {
  margin: 2px 0 8px;
  font-size: 24px;
  color: #4a3e3a;
  font-weight: 600;
}
.fm-hol p {
  margin: 0 0 12px;
  color: #4a3e3a;
  font-size: 15.5px;
  line-height: 1.5;
  max-width: none;
}
.hs-k {
  font-size: 13px;
  color: #a09189;
  margin-bottom: 2px;
}
.hs-all {
  display: inline-block;
  margin-top: 2px;
  color: #86776f;
  font-size: 14.5px;
  text-decoration: none;
  border-bottom: 1px solid #d8cfc2;
}
.hs-all:hover {
  color: #4a3e3a;
}
/* страница «Круглый год» */
/* «Моя полка» */
.shelf {
  position: relative;
}
.books {
  display: flex;
  align-items: flex-end;
  overflow-x: auto;
  scrollbar-width: none;
}
.books::-webkit-scrollbar {
  display: none;
}
.book {
  flex: none;
  position: relative;
  border-radius: 3px 8px 8px 3px;
  background: var(--bg);
  color: var(--fg);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  box-shadow:
    inset 6px 0 0 rgba(0, 0, 0, 0.1),
    inset 7px 0 0 rgba(255, 255, 255, 0.18),
    0 8px 14px -8px rgba(92, 78, 66, 0.55);
  transition: transform 0.18s;
}
.book::before {
  content: "";
  position: absolute;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.35;
}
.book:nth-child(4n + 3) {
  transform: rotate(-2deg);
  transform-origin: bottom left;
}
.book:nth-child(4n + 3):hover {
  transform: translateY(-6px) rotate(-2deg);
}
.bk-t {
  font-size: 12.5px;
  line-height: 1.25;
  font-weight: 600;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bk-a {
  font-size: 11.5px;
  opacity: 0.85;
}
.book.ghost {
  background: transparent;
  border: 1.5px dashed #d8cfc2;
  box-shadow: none;
}
.book.ghost::before {
  display: none;
}
.shelf-hint {
  align-self: center;
  text-align: left;
  margin: 0 0 30px 10px;
  color: #86776f;
  font-size: 15px;
  max-width: 320px;
}
/* строка праздника: только текст, лента разделов скрыта */
.hol-row .secnav {
  display: none !important;
}
.hs-go:hover .hs-arr {
  transform: translateX(3px);
}
@keyframes hsP {
  0% {
    transform: scale(0.4);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}
/* строка праздника справа под меню: три точки BRAVO кружатся, «Покров» тонко и алым */
.hol-strip {
  height: auto !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin-top: 4px;
}
.hs-go {
  background: none !important;
  border: 0 !important;
  padding: 4px 2px !important;
  display: inline-flex;
  align-items: center;
  gap: 0 !important;
  font-size: 17px !important;
  color: #a09189 !important;
  font-weight: 300 !important;
}
.hs-go b {
  color: #e6261f !important;
  font-weight: 300 !important;
  margin-right: 6px;
}
.hs-go:hover b {
  text-decoration: underline;
  text-decoration-color: #e6261f;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.hs-arr {
  line-height: 1;
  transition: transform 0.2s;
  width: 34px;
  height: 12px;
  color: #c9bfb3;
  display: inline-block;
  transform: none !important;
  font-size: 0;
}
.hs-arr svg {
  width: 100%;
  height: 100%;
  display: block;
}
.hol-strip .hs-year {
  color: #86776f;
  font-weight: 300;
  font-size: 17px;
  border: 0;
  text-decoration: none;
}
.hol-strip .hs-year:hover {
  color: #4a3e3a;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.hs-orbit {
  position: relative;
  width: 20px;
  height: 20px;
  flex: none;
  animation: hsSpin 7s linear infinite;
}
.hs-orbit i {
  position: absolute;
  border-radius: 50%;
  left: 50%;
  top: 50%;
}
.hs-orbit i:nth-child(1) {
  width: 8px;
  height: 8px;
  margin: -4px;
  background: #e6261f;
  transform: translate(0, -5.5px);
  animation: hsBl 3.5s ease-in-out infinite;
}
.hs-orbit i:nth-child(2) {
  width: 6.5px;
  height: 6.5px;
  margin: -3.25px;
  background: #fbd96a;
  transform: translate(5px, 3.5px);
  animation: hsBl 3.5s ease-in-out infinite 1.1s;
}
.hs-orbit i:nth-child(3) {
  width: 5.5px;
  height: 5.5px;
  margin: -2.75px;
  background: #3494e3;
  transform: translate(-5px, 3.5px);
  animation: hsBl 3.5s ease-in-out infinite 2.2s;
}
@keyframes hsSpin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes hsBl {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hs-orbit,
  .hs-orbit i {
    animation: none;
  }
}
/* ---------- три точки-раздела ---------- */
.hol-row {
  align-items: center !important;
  justify-content: center !important;
}
.bdots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 34px;
}
.bdot {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: #a09189;
  font-size: 16px;
  font-weight: 300;
  transition: color 0.2s;
}
.bdot:hover {
  color: #4a3e3a;
}
.bdot:hover i {
  transform: scale(1.25);
}
.bdot.on {
  color: #4a3e3a;
}
.bdot i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--c) 0 7.5px, transparent 8px);
  flex: none;
  transition:
    transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1),
    box-shadow 0.25s;
  box-shadow: none;
}
.bdot.on i {
  background: radial-gradient(
    circle,
    var(--c) 0 10.5px,
    #fff 11px 12.2px,
    color-mix(in srgb, var(--c) 55%, transparent) 12.4px 13px,
    transparent 13.2px
  );
}
/* ---------- страницы «Обычаи» и «Культура» ---------- */
.bpage {
  padding-bottom: 30px;
}
.bdots-row {
  margin-top: 0;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.ob-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}
.ob-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  border: 0;
  font: inherit;
  cursor: pointer;
  background: #fbd96a;
  color: #5c4518;
  border-radius: 24px;
  padding: 18px 22px;
  text-decoration: none;
  box-shadow: 0 18px 40px -22px rgba(92, 78, 66, 0.42);
}
.ob-tile:nth-child(2) {
  background: #f7c95b;
}
.ob-tile:nth-child(3) {
  background: #f2bc4e;
}
.ob-tile small {
  opacity: 0.95;
}
.ob-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.62),
    rgba(255, 255, 255, 0.28) 45%,
    rgba(255, 255, 255, 0.18)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.ob-tile:hover {
  transform: translateY(-2px);
}
.bp-h {
  font-size: 24px;
  color: #4a3e3a;
  margin: 0;
}
.bp-lead {
  color: #86776f;
  margin: 4px 0 16px;
}
.ku-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.ku-tile {
  position: relative;
  background: linear-gradient(150deg, #f3736a, #e6261f);
  color: #fff;
  border-radius: 24px;
  padding: 22px 24px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 18px 40px -22px rgba(92, 78, 66, 0.42);
  opacity: 0.9;
}
.ku-tile:nth-child(2),
.ku-tile:nth-child(3) {
  background: linear-gradient(150deg, #f59a8f, #eb5a4f);
}
.ku-tile b {
  font-size: 21px;
}
.ku-tile small {
  font-size: 14.5px;
  opacity: 0.92;
}
.ku-tile i {
  position: absolute;
  right: 18px;
  top: 16px;
  font-style: normal;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 99px;
  padding: 3px 10px;
}
@media (max-width: 820px) {
  .ob-tiles,
  .ku-tiles {
    grid-template-columns: 1fr;
  }
  .bdots {
    gap: 20px;
  }
}
/* ---------- пейджер ---------- */
.pager {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.pg-track {
  display: flex;
  align-items: flex-start;
  will-change: transform;
}
body:not(.pg-mode) .pager {
  display: none;
}
body.pg-mode .pg-track > .view {
  display: block !important;
  flex: 0 0 100%;
  min-width: 0;
  width: 100%;
}
body.pg-mode .pager {
  touch-action: pan-y;
}
.pager a,
.pager img {
  -webkit-user-drag: none;
}
.bdots {
  visibility: hidden;
}
.pg-dots {
  position: absolute;
  left: 0;
  right: 0;
  top: 14px;
  height: 52px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  pointer-events: none;
  z-index: 5;
}
.pg-dot {
  pointer-events: auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: var(--c);
  opacity: 0.55;
  cursor: pointer;
  transition:
    width 0.3s cubic-bezier(0.3, 1.5, 0.5, 1),
    height 0.3s cubic-bezier(0.3, 1.5, 0.5, 1),
    opacity 0.3s;
}
.pg-dot.on {
  width: 20px;
  height: 20px;
  opacity: 1;
  box-shadow: 0 3px 8px -3px rgba(92, 78, 66, 0.45);
}
.pg-dot:hover {
  opacity: 0.9;
}
.pg-arr {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  width: 40px;
  height: 64px;
  border: 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.55);
  color: #86776f;
  display: none;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 20px -14px rgba(92, 78, 66, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition:
    background 0.2s,
    color 0.2s;
}
.pg-arr svg {
  width: 22px;
  height: 22px;
}
.pg-arr:hover {
  background: rgba(255, 255, 255, 0.9);
  color: #4a3e3a;
}
body.pg-mode .pg-arr {
  display: grid;
}
body.pg-mode .pg-arr[hidden] {
  display: none;
}
.pg-l {
  left: 6px;
}
.pg-r {
  right: 6px;
}
@media (hover: none) {
  .pg-arr {
    background: rgba(255, 255, 255, 0.35);
    width: 32px;
    height: 56px;
  }
}
/* на трёх главных экранах страница не прокручивается вниз — только листается вбок (когда всё умещается на экран) */
@media (min-width: 1061px) and (min-height: 621px) {
  html:has(body.pg-mode),
  body.pg-mode {
    overflow: hidden !important;
    overscroll-behavior: none;
    height: 100%;
  }
  body.pg-mode .pager {
    height: calc(100dvh - 80px);
    touch-action: none;
  }
  body.pg-mode .site-foot {
    display: none !important;
  }
}
/* главные экраны без подвала: тонкая строка внизу слева */
body.pg-mode .site-foot {
  display: none !important;
}
.pg-foot {
  position: absolute;
  left: 22px;
  bottom: 4px;
  font-size: 12px;
  color: #b5a9a2;
  display: flex;
  gap: 8px;
  z-index: 3;
}
body:not(.pg-mode) .pg-foot {
  display: none;
}
.pg-foot a {
  color: #a09189;
  text-decoration: none;
  border-bottom: 1px solid #e0d7ca;
}
.pg-foot a:hover {
  color: #4a3e3a;
}
@media (max-width: 1060px), (max-height: 620px) {
  .pg-foot {
    position: static;
    padding: 14px 22px 10px;
  }
}
/* О нас в новом стиле */
#v-about .inner {
  background: none !important;
  color: var(--ink) !important;
  padding: 34px 0 8px !important;
}
#v-about .inner::after,
#v-about .inner .back {
  display: none !important;
}
#v-about .inner h2 {
  color: #4a3e3a !important;
  font-size: 24px !important;
  margin: 0;
}
#v-about .inner .lead {
  color: #86776f !important;
  margin: 4px 0 0;
  font-size: 16px;
}
.ab-mail {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 18px;
  color: #4a3e3a;
  cursor: copy;
}
.ab-mail:hover,
.ab-mail.copied {
  color: #1c7fd0;
}
.ab-social {
  display: flex;
  gap: 14px;
  margin-top: 12px;
}
.ab-social a {
  color: #a09189;
  width: 26px;
  height: 26px;
  display: block;
}
.ab-social a:hover {
  color: #4a3e3a;
}
.ab-social svg {
  width: 100%;
  height: 100%;
}
/* подвал везде — одна тонкая строка на фоне */
.site-foot {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin-top: auto;
}
.site-foot .fwrap:not(.flegal) {
  display: none !important;
}
.site-foot .flegal {
  border: 0 !important;
  padding: 18px 22px 6px !important;
  margin: 0 !important;
  font-size: 12px !important;
  color: #b5a9a2;
  gap: 8px !important;
}
.site-foot .flegal a.fl-contacts {
  display: inline !important;
  color: #a09189;
  text-decoration: none;
  border-bottom: 1px solid #e0d7ca;
}
.fl-sep {
  color: #c9bfb3;
  margin: 0 8px;
}
.site-foot .flegal a.fl-contacts:hover {
  color: #4a3e3a;
}
/* всё чуть выше: меньше отступ сверху на главных экранах */
#v-home .bento {
  padding-top: 14px !important;
}
@media (min-width: 1061px) and (min-height: 621px) {
  #v-home .bento {
    height: calc(100dvh - 124px) !important;
    min-height: 620px;
  }
}
html.vp-fixed #v-home .bento {
  height: 696px !important;
}
/* в повёрнутом iPad весь блок экрана стоит по центру высоты */
html.vp-fixed body.pg-mode .pager {
  --pgoff: max(0px, calc((100dvh - 80px - 740px) / 2 - 20px));
  padding-top: var(--pgoff);
  box-sizing: border-box;
}
html.vp-fixed .pg-dots {
  top: calc(var(--pgoff) + 14px);
}
.bpage {
  padding-top: 14px !important;
}
/* литература: полка-пунктир, одинаковые книжки, значки «перед сном» и «в дорогу» */
.rd-top {
  position: relative;
}
#v-read .inner .lead {
  color: #86776f !important;
}
#v-read:not(.rd-main) .inner .lead {
  visibility: hidden;
}
.shelf-wrap {
  margin: 0 0 20px !important;
}
.books {
  gap: 14px !important;
  padding: 6px 6px 0 !important;
  min-height: 0 !important;
}
.book {
  width: 92px !important;
  height: 124px !important;
  padding: 12px 8px 9px 14px !important;
}
.book .bk-t {
  font-size: 11.5px !important;
  -webkit-line-clamp: 5 !important;
  hyphens: manual;
  -webkit-hyphens: manual;
}
.book .bk-a {
  font-size: 10.5px !important;
  line-height: 1.25;
}
.book::before {
  left: 14px !important;
  right: 8px !important;
  top: 7px !important;
}
.book:nth-child(4n + 3),
.book:nth-child(4n + 3):hover {
  transform: none;
}
.book:hover {
  transform: translateY(-5px) !important;
}
.book.ghost {
  width: 92px !important;
  height: 124px !important;
}
.plank {
  height: 0 !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border-top: 1px dotted #cfc4b5;
  margin-top: 0 !important;
}
/* зафиксированная страница: без прокрутки, строка копирайта внизу */
@media (min-width: 1061px) and (min-height: 621px) {
  html:has(body.lock-page),
  body.lock-page {
    overflow: hidden !important;
    overscroll-behavior: none;
    height: 100%;
  }
  body.lock-page .site-foot {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
  }
  body.lock-page .site-foot .flegal {
    padding: 0 22px 4px !important;
  }
}
/* «Услуги» и «Журнал» — как «О нас»: тёмно-коричневый заголовок, светлый текст, бежевый фон */
#v-services .inner,
#v-blog .inner {
  background: none !important;
  color: var(--ink) !important;
  padding: 34px 0 8px !important;
}
#v-services .inner::after,
#v-blog .inner::after,
#v-services .inner .back,
#v-blog .inner .back {
  display: none !important;
}
#v-services .inner h2,
#v-blog .inner h2 {
  color: #4a3e3a !important;
  font-size: 24px !important;
  margin: 0;
}
#v-services .inner .lead,
#v-blog .inner .lead {
  color: #86776f !important;
  margin: 4px 0 0;
  font-size: 16px;
}
#v-services .page,
#v-blog .page {
  padding-top: 14px !important;
}
#v-services .svc,
#v-about .panel {
  color: #4a3e3a;
}
#v-services .svc h3 {
  color: #4a3e3a !important;
}
#v-services .svc p {
  color: #5f514b !important;
}
#v-services .svc-go {
  color: #86776f !important;
  background: none !important;
  font-weight: 500;
  border-bottom: 1px solid #e0d7ca;
  padding: 0 !important;
  align-self: flex-start;
}
#v-services .svc:hover .svc-go {
  color: #4a3e3a !important;
}
#v-about .inner .lead,
#v-services .inner .lead,
#v-blog .inner .lead {
  max-width: none !important;
}
/* ---------- запись на занятие (zp) ---------- */
.zp {
  padding-top: 30px;
  padding-bottom: 28px;
}
.zp-h {
  font-size: 24px;
  color: #4a3e3a;
  margin: 0 0 10px;
}
.zp-prices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 40px;
  padding: 6px 0 10px;
  border-bottom: 1px solid #e6e0d6;
  margin-bottom: 18px;
  font-size: 14.5px;
  color: #86776f;
}
.zp-pcol p {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 4px;
  max-width: none;
}
.zp-pcol i {
  flex: 1;
  border-bottom: 1px dotted #cfc4b5;
  transform: translateY(-3px);
}
.zp-pcol b {
  color: #4a3e3a;
  font-weight: 500;
  white-space: nowrap;
}
.zp-pcol small {
  color: #86776f;
  font-weight: 400;
}
.zp-grid {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.zp-left {
  display: grid;
  gap: 14px;
}
.zp-cal {
  background: #fff;
  border: 1px solid #e6e0d6;
  border-radius: 24px;
  padding: 14px 16px 12px;
  box-shadow: 0 18px 40px -22px rgba(92, 78, 66, 0.42);
}
.zp-months {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}
.zp-months button {
  border: 1px solid #e6e0d6;
  background: #fbf7ef;
  color: #4a3e3a;
  border-radius: 99px;
  padding: 5px 0;
  font: inherit;
  font-size: 14.5px;
  cursor: pointer;
}
.zp-months button.on {
  background: #4a3e3a;
  border-color: #4a3e3a;
  color: #fff;
}
.zp-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  text-align: center;
}
.zp-days .wd {
  font-size: 12.5px;
  color: #a09189;
  padding: 4px 0;
}
.zp-days .wd.we {
  color: #4a3e3a;
}
.zd {
  height: 36px;
  border: 0;
  background: none;
  border-radius: 12px;
  font: inherit;
  font-size: 15px;
  color: #d2c8bc;
  padding: 0;
}
.zd.free {
  color: #6e625c;
  cursor: pointer;
}
.zd.free.we {
  color: #3f3430;
}
.zd.free:hover {
  background: #fbf3dc;
}
.zd.sel {
  background: #f8e7b5 !important;
  color: #4a3e3a !important;
  font-weight: 700;
}
.zp-side {
  padding-top: 6px;
  min-width: 0;
}
.zp-side p {
  max-width: none;
}
.zp-muted {
  color: #86776f;
  font-size: 15px;
  margin: 0 0 14px;
  max-width: 420px !important;
}
.zp-who {
  font-size: 16px;
  color: #4a3e3a;
  margin: 0 0 10px;
}
.zp-pick:empty {
  display: none;
}
.zp-day {
  font-size: 16px;
  color: #4a3e3a;
  margin: 0 2px 8px;
}
.zp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.zp-chip {
  border: 1px solid #e6e0d6;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 99px;
  padding: 8px 14px;
  font: inherit;
  font-size: 14.5px;
  color: #4a3e3a;
  cursor: pointer;
}
.zp-chip:hover {
  border-color: #efd58a;
}
.zp-chip.on {
  background: #f8e7b5;
  border-color: #efd58a;
  font-weight: 700;
}
.zp-veil {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.zp-veil.on {
  display: grid;
}
.zp-box {
  position: relative;
  width: min(380px, 100%);
  background: #fff;
  border: 1px solid #d8cfc2;
  border-radius: 26px;
  padding: 22px 22px 16px;
  box-shadow: 0 18px 40px -22px rgba(92, 78, 66, 0.42);
}
.zp-box h3 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 500;
  color: #4a3e3a;
}
.zp-box label {
  display: block;
  font-size: 13.5px;
  color: #86776f;
  margin: 8px 0 0;
}
.zp-box input,
.zp-box select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 4px;
  border: 1px solid #e6e0d6;
  background: #fbf7ef;
  border-radius: 12px;
  padding: 9px 12px;
  font: inherit;
  font-size: 15px;
  color: #4a3e3a;
}
.zp-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 0;
  background: #fbf7ef;
  color: #86776f;
  font-size: 14px;
  cursor: pointer;
}
@media (max-width: 760px) {
  .zp-prices {
    grid-template-columns: 1fr;
  }
  .zp-grid {
    grid-template-columns: 1fr;
  }
}
/* ---------- пособия для печати (pp) ---------- */
.pp-wrap {
  padding-top: 34px;
  padding-bottom: 30px;
}
.pp-h {
  font-size: 24px;
  color: #4a3e3a;
  margin: 0;
}
.pp-lead {
  color: #86776f;
  margin: 4px 0 18px;
  font-size: 16px;
  max-width: none;
}
/* О нас, Услуги, Журнал — тексты */
.ab-story {
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: start;
  border-radius: 24px;
}
.ab-main h3 {
  margin: 0 0 10px;
  color: #4a3e3a;
  font-size: 20px;
}
.ab-main p {
  max-width: none;
}
.ab-three {
  margin-bottom: 16px;
}
.ab-three .panel p {
  color: #5f514b;
  line-height: 1.55;
}
.svc-pains {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.svc-pains p {
  margin: 0;
  max-width: none;
  display: grid;
  gap: 3px;
}
.svc-pains b {
  color: #4a3e3a;
  font-weight: 600;
}
@media (max-width: 800px) {
  .ab-story {
    grid-template-columns: 1fr;
  }
  .svc-pains {
    grid-template-columns: 1fr;
  }
}
/* рубрики журнала */
/* пособия: настоящие обложки и содержание */

/* газета v2 */
.wb-pitch {
  max-width: none !important;
  line-height: 1.6;
}
.wb-comm {
  display: block;
  margin: 40px 0 10px;
  padding: 0;
  border: 0;
  max-width: none;
}
.wb-comm p {
  margin: 0;
  color: #5f514b;
  font-size: 15.5px;
  line-height: 1.6;
  max-width: none !important;
  text-align: justify;
  hyphens: auto;
}
.wb-comm.ab-social a {
  display: inline !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  place-items: initial;
}
.wb-comm a {
  color: #4a3e3a;
  text-decoration: none;
  border-bottom: 1px solid #a09189;
  font-weight: 400 !important;
  transition: color 0.15s;
}
.wb-comm a:hover,
.wb-comm a:active,
.wb-comm a:focus {
  color: #e6261f;
  border-bottom-color: #e6261f;
}
.wb-pitch {
  text-align: justify;
  hyphens: auto;
}
.wb-comm b {
  color: #4a3e3a;
  font-weight: 600;
}
@media (max-width: 760px) {
  .wb-comm {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}
/* газета v3: шрифт сайта */
/* газета v4 */
/* услуги / о нас v2 */
#v-services .panel.svc {
  background: #fcf8f1 !important;
}
.svc-pains {
  margin-top: 26px !important;
  gap: 16px 34px !important;
}
.svc-pains p {
  background: none !important;
  padding: 0 0 0 26px !important;
  position: relative;
  border-radius: 0 !important;
}
.svc-pains p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e6261f;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
}
.svc-pains p.y::before {
  background: #fbd96a;
}
.svc-pains p.tq::before {
  background: #45bcc0;
}
.svc-pains p.b::before {
  background: #3494e3;
}
.svc-pains span {
  color: #5f514b !important;
  text-align: justify;
  hyphens: auto;
}
.svc-pains p {
  align-content: start;
}
.ab-story {
  display: block !important;
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 22px !important;
}
.ab-main p {
  text-align: justify;
  hyphens: auto;
}
.ab-three .panel p {
  text-align: justify;
  hyphens: auto;
}
.ab-foot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  color: #a09189;
  font-size: 14px;
  line-height: 1.55;
}
.ab-foot h4 {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: #86776f;
}
.ab-foot p {
  margin: 0 0 6px;
  max-width: none;
  color: #a09189;
}
.ab-foot .ab-mail {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: #86776f;
  cursor: pointer;
  border-bottom: 1px solid #cfc4b5;
  margin-bottom: 8px;
}
.ab-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}
.ab-foot .ab-links a,
.ab-foot .ab-social a {
  display: inline !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: #86776f !important;
  text-decoration: none;
  border-bottom: 1px solid #d9cfc2;
  font-size: 14px;
}
.ab-foot .ab-links a:hover,
.ab-foot .ab-links a:active {
  color: #e6261f !important;
  border-bottom-color: #e6261f;
}
.ab-docs {
  flex-direction: column;
  align-items: flex-start;
}
@media (max-width: 800px) {
  .ab-foot {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}
#v-services h2.svc-top {
  font-family: var(--sans) !important;
  font-size: 15.5px !important;
  font-weight: 400 !important;
  color: #4a3e3a !important;
  letter-spacing: 0;
}
#v-about .inner .back {
  display: none;
}
.ab-sub {
  margin: 0 !important;
  max-width: none !important;
}
.ab-main p {
  color: #4a3e3a !important;
  font-size: 16px;
  line-height: 1.55 !important;
  margin: 0 0 8px !important;
}
.ab-story {
  margin-bottom: 16px !important;
}
#v-about .ab-three .panel {
  background: #fcf8f1 !important;
  padding: 20px 24px !important;
}
#v-about .ab-three .panel h3 {
  margin: 0 0 6px;
}
#v-about .ab-three .panel p {
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}
.ab-foot {
  margin-top: 26px !important;
}
.ab-icons {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.ab-foot .ab-icons a {
  display: grid !important;
  place-items: center;
  border: 0 !important;
  color: #a09189 !important;
}
.ab-foot .ab-icons a:hover {
  color: #e6261f !important;
}
.ab-req {
  max-width: 260px;
}
#v-about .ab-three .panel:nth-child(1) h3 {
  color: #3494e3;
}
#v-about .ab-three .panel:nth-child(2) h3 {
  color: #e6261f;
}
#v-about .ab-three .panel:nth-child(3) h3 {
  color: #e2ae1c;
}
#v-about.show {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
#v-about.show > .page {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  padding-bottom: 10px;
}
#v-about.show > .page > .wrap {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}
#v-about .ab-foot {
  margin-top: auto !important;
  padding-top: 24px;
}
.ab-foot .ab-icons {
  gap: 14px !important;
}
.ab-foot .ab-icons a {
  width: auto !important;
  height: auto !important;
}
.ab-foot .ab-icons a svg {
  width: 18px !important;
  height: 18px !important;
  display: block;
}
#v-services .panel.svc[href="#lesson"] h3 {
  color: #3494e3 !important;
}
#v-services .panel.svc[href="#home"] h3 {
  color: #e6261f !important;
}
#v-services .panel.svc[href="#materials"] h3 {
  color: #e2ae1c !important;
}
.ab-foot .ab-icons a[data-net="Facebook"] {
  margin-left: -4px;
}
/* одинаковые размеры О нас / Услуги */
.ab-hello {
  font-weight: 400;
  margin-bottom: 10px !important;
}
.ab-sub {
  font-size: 15.5px !important;
  color: #86776f !important;
  margin-bottom: 0 !important;
}
#v-about .inner {
  padding-bottom: 0 !important;
}
.ab-main p,
#v-about .ab-three .panel p,
#v-services .panel.svc p,
.svc-pains span {
  font-size: 15.5px !important;
  line-height: 1.55 !important;
}
.svc-pains b {
  font-size: 15.5px;
}
#v-about .ab-three .panel h3,
#v-services .panel.svc h3 {
  font-size: 20px !important;
}
#v-services .panel.svc {
  padding: 20px 24px !important;
}
.ab-top {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 30px;
  align-items: start;
}
.ab-top .ab-story {
  margin: 0 !important;
}
.ab-top .ab-three {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  margin: 0 !important;
}
#v-about .ab-top .ab-three .panel {
  padding: 16px 22px !important;
}
#v-about .ab-top .ab-three .panel h3 {
  font-size: 19px !important;
  margin: 0 0 4px !important;
}
.ab-top .ab-main p {
  margin: 0 0 12px !important;
}
.ab-top .ab-main .ab-sub {
  margin: 0 0 14px !important;
}
#v-about .inner {
  display: none;
}
#v-about .page {
  padding-top: 26px !important;
}
@media (max-width: 900px) {
  .ab-top {
    grid-template-columns: 1fr;
  }
}
/* личный кабинет */
/* профиль */
#v-services h2.svc-top {
  line-height: 1.55 !important;
  margin-top: -6px !important;
}
#v-about .ab-sub {
  line-height: 1.55 !important;
  position: relative;
  top: 2px;
}
/* колесо года */
/* пособия-книжки */
.wb-shelf {
  margin-top: 10px;
}
.wb-books {
  display: flex;
  gap: 26px;
  align-items: flex-end;
  padding: 10px 10px 0;
  flex-wrap: wrap;
}
.wb-book {
  position: relative;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  width: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  transition: transform 0.2s;
}
.wb-book img {
  width: 190px;
  height: 190px;
  object-fit: cover;
  border-radius: 3px 10px 10px 3px;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.04),
    0 14px 22px -12px rgba(92, 78, 66, 0.6);
  position: relative;
}
.wb-book::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 190px;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0));
  z-index: 2;
  pointer-events: none;
}
.wb-book:hover {
  transform: translateY(-8px) rotate(-1.5deg);
}
.wb-bt {
  position: absolute;
  bottom: -26px;
  font-size: 13.5px;
  color: #86776f;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s;
}
.wb-book:hover .wb-bt {
  opacity: 1;
}
.wb-hint {
  color: #a09189;
  font-size: 14px;
  margin: 34px 4px 0;
}
.wb-wrap .wb-books {
  flex-wrap: nowrap;
  justify-content: space-around;
  padding: 26px 10px 8px;
}
.wb-wrap .wb-book,
.wb-wrap .wb-book img {
  width: 200px;
}
.wb-wrap .wb-book img {
  height: 200px;
}
.wb-wrap .wb-book::before {
  height: 200px;
}
.wb-wrap .wb-hint {
  text-align: center;
  margin: 18px auto 0;
  max-width: none;
}
@media (max-width: 900px) {
  .wb-wrap .wb-books {
    flex-wrap: wrap;
    justify-content: center;
  }
}
.wb-flip {
  position: fixed;
  inset: 0;
  z-index: 92;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.wb-flip.on {
  display: grid;
}
.wb-flipbox {
  position: relative;
  background: #fff;
  border: 1px solid #d8cfc2;
  border-radius: 28px;
  padding: 26px;
  box-shadow: 0 24px 50px -24px rgba(92, 78, 66, 0.5);
  width: min(880px, 100%);
}
#wbFlipBody {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
}
.fl-book {
  position: relative;
  perspective: 1400px;
}
.fl-pages {
  position: relative;
  width: 440px;
  height: 440px;
  touch-action: pan-y;
}
.fl-pg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px 14px 14px 4px;
  box-shadow: 0 18px 30px -16px rgba(92, 78, 66, 0.6);
  transform-origin: left center;
  transition:
    transform 0.6s cubic-bezier(0.3, 0.7, 0.3, 1),
    opacity 0.6s;
  backface-visibility: hidden;
  opacity: 0;
  transform: rotateY(12deg);
}
.fl-pg.on {
  opacity: 1;
  transform: none;
  z-index: 2;
}
.fl-pg.past {
  opacity: 0;
  transform: rotateY(-100deg);
}
.fl-ar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  color: #4a3e3a;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 14px -8px rgba(92, 78, 66, 0.6);
  z-index: 3;
}
.fl-ar.l {
  left: -18px;
}
.fl-ar.r {
  right: -18px;
}
.fl-ar:disabled {
  opacity: 0;
  pointer-events: none;
}
.fl-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}
.fl-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e6e0d6;
}
.fl-dots i.on {
  background: #4a3e3a;
}
.fl-info small {
  color: #a09189;
}
.fl-info h3 {
  margin: 2px 0 8px;
  font-size: 24px;
  color: #4a3e3a;
}
.fl-info p {
  color: #5f514b;
  line-height: 1.55;
  margin: 0 0 16px;
  max-width: none;
}
.fl-other {
  display: flex;
  gap: 8px;
  margin-top: 22px;
}
.fl-other img {
  width: 52px;
  height: 52px;
  border-radius: 6px;
  object-fit: cover;
  cursor: pointer;
  opacity: 0.55;
  border: 2px solid transparent;
}
.fl-other img.on {
  opacity: 1;
  border-color: #4a3e3a;
}
@media (max-width: 860px) {
  #wbFlipBody {
    grid-template-columns: 1fr;
  }
  .fl-pages {
    width: min(440px, 78vw);
    height: min(440px, 78vw);
  }
}
/* журнал: газетная вёрстка */

/* ---------- «Обычаи»: карусель праздников ---------- */
/* высота и отступы совпадают с блоками главного экрана: карусель 448px, плашки 126px */
.ob-car {
  position: relative;
  height: 448px;
}
.obc-track {
  position: relative;
  height: 100%;
}
.obc {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(760px, 70%);
  height: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 30px;
  padding: 34px 34px 44px;
  border-radius: 28px;
  color: #4a3e3a;
  box-shadow: 0 18px 40px -22px rgba(92, 78, 66, 0.42);
  transform: translateX(calc(-50% + var(--o) * 150px)) scale(0.86);
  transition:
    transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1),
    opacity 0.45s,
    filter 0.45s;
  overflow: hidden;
  user-select: none;
}
.obc.cur {
  transform: translateX(-50%);
  z-index: 3;
}
/* соседние карточки прячутся под основную */
.obc.side {
  z-index: 2;
  opacity: 0.75;
  filter: saturate(0.8) brightness(1.04);
  cursor: pointer;
}
.obc.side > *,
.obc.far > * {
  visibility: hidden;
}
.obc.far {
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}
.obc-l small {
  font-size: 16px;
  color: #7a6a50;
}
.obc-l h2 {
  font-size: 40px;
  font-weight: 700;
  margin: 4px 0 14px;
  line-height: 1.05;
}
.obc-r {
  display: grid;
  gap: 14px;
  align-content: start;
}
.obc-b span {
  display: block;
  color: #7a6a50;
  margin-bottom: 2px;
}
.obc-b p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.5;
}
.obc-dots {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  gap: 6px;
}
.obc-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(122, 106, 80, 0.25);
  cursor: pointer;
}
.obc-dots i.on {
  background: #7a6a50;
}
.ob-tile {
  min-height: 126px !important;
  height: 126px;
  box-sizing: border-box;
}
@media (max-width: 820px) {
  .ob-car {
    height: 620px;
  }
  .obc {
    width: 86%;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 24px 24px 40px;
  }
}
#v-obychai {
  overflow-x: clip;
}

/* ---------- каталоги «Рецепты», «Поделки», «Забавы» ---------- */
.oc-page {
  padding-top: 26px;
  padding-bottom: 40px;
}
.oc-page .rd-head {
  margin: 4px 0 18px;
}
.rd-head .rd-cat {
  font-weight: 600;
}
.oc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.oc {
  display: flex;
  flex-direction: column;
  background: #fcf8f1;
  border-radius: 22px;
  padding: 18px 22px 20px;
  box-shadow: 0 18px 40px -22px rgba(92, 78, 66, 0.42);
  color: #4a3e3a;
}
.oc-k {
  font-size: 13px;
  color: #e2ae1c;
  font-weight: 600;
  margin-bottom: 8px;
}
.oc-body h5 {
  margin: 8px 0 4px;
  font-size: 13px;
  font-weight: 500;
  color: #86776f;
}
.oc-body ul,
.oc-body ol {
  margin: 0;
  padding-left: 20px;
  font-size: 14.5px;
  line-height: 1.5;
  color: #5f514b;
}
.oc-body li {
  margin-bottom: 3px;
}
.oc-foot {
  padding-top: 12px;
  border-top: 1.5px dotted #cfc4b5;
  display: grid;
  gap: 2px;
}
.oc-foot b {
  font-size: 18px;
  font-weight: 600;
}
.oc-foot span {
  font-size: 14px;
  color: #86776f;
}
@media (max-width: 900px) {
  .oc-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 620px) {
  .oc-grid {
    grid-template-columns: 1fr;
  }
}
.oc-page .rd-back {
  text-decoration: none;
  margin: 0;
}

/* карточка праздника: заголовок сверху слева, описание и справа приметы начинаются на одном уровне */
.obc {
  grid-template-rows: auto 1fr;
  row-gap: 16px;
}
.obc-h {
  grid-column: 1;
  grid-row: 1;
}
.obc-l {
  grid-column: 1;
  grid-row: 2;
}
.obc-r {
  grid-column: 2;
  grid-row: 2;
}
.obc-k {
  display: block;
  margin-bottom: 6px;
}
.obc-h small {
  font-size: 15px;
}
.obc-h h2 {
  font-size: 38px;
  font-weight: 700;
  margin: 2px 0 0;
  line-height: 1.05;
}
.obc-l p {
  font-size: 15px !important;
  line-height: 1.5 !important;
  margin: 0 0 8px !important;
}
.obc-h h2.long {
  font-size: 30px;
}
.oc-need {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: #5f514b;
}
/* одинаковая высота карточек во всех трёх каталогах; разница уходит в пустоту над пунктиром */
.oc {
  min-height: 470px;
  box-sizing: border-box;
}
.oc-grid {
  align-items: stretch !important;
}
.oc-foot {
  margin-top: auto !important;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 12px;
}
.oc-foot > div:first-child {
  display: grid;
  gap: 2px;
}
.oc-body {
  margin-bottom: 14px;
}
.oc-marks {
  display: flex;
  gap: 6px;
}
.oc-m {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #e6e0d6;
  background: #fff;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 8px 16px -12px rgba(92, 78, 66, 0.45);
}
.oc-m svg {
  width: 22px;
  height: 22px;
  overflow: visible;
}
.oc-m path {
  fill: none;
  stroke: #b5a9a2;
  stroke-width: 1.8;
  stroke-linejoin: round;
}
.oc-done path {
  stroke-width: 2.2;
}
.oc-fav.on path {
  fill: #ff5b4f;
  stroke: #d9241c;
}
.oc-done.on path {
  fill: #ffc933;
  stroke: #eba817;
}
/* «Обычаи»: плоский жёлтый, как плашка «Игры» на главной */
.ob-tile,
.ob-tile:nth-child(n) {
  background: #fbd96a !important;
  border-radius: 28px !important;
  color: #4a3e3a !important;
}
.ob-tile::before {
  display: none !important;
}
.ob-tile b {
  font-size: 22px !important;
  font-weight: 900 !important;
  color: #4a3e3a !important;
}
.ob-tile small {
  font-size: 15.5px !important;
  color: #5f514b !important;
}
.obc {
  background: #fbd96a !important;
}
.obc-k {
  font-size: 22px !important;
  font-weight: 900 !important;
}
/* карточка праздника: название и дата бирюзовые, подписи разделов белые */
.obc-h h2 {
  color: var(--hc, #2a9fa3) !important;
}
.obc-h small {
  color: var(--hc, #2a9fa3) !important;
  font-weight: 500;
}
.obc-k,
.obc-b span {
  color: #fff !important;
}
.obc-b span {
  font-weight: 600;
  font-size: 13.5px;
}
.ob-tile b,
.ob-tile small {
  color: #fff !important;
}
.ob-tiles {
  margin: 0 0 16px !important;
}
.ob-car {
  margin-bottom: 0 !important;
}
/* ---------- страница текста ---------- */
.txt-page {
  padding-top: 26px !important;
}
.txt-head {
  margin: 0 0 18px !important;
}
#v-text .rtext {
  background: #fcf8f1 !important;
  font-size: 23px !important;
  line-height: 1.75 !important;
}
#v-text .rtext.poem .sn {
  font-size: 23px !important;
}
.t-play {
  flex: none;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: #3494e3;
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 10px 22px -12px rgba(52, 148, 227, 0.8);
  transition: transform 0.15s;
}
.t-play:hover {
  transform: scale(1.05);
}
.t-play svg {
  width: 30px;
  height: 30px;
  margin-left: 3px;
}
.t-qs {
  margin: 0 0 20px;
}
.t-qs h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  color: #4a3e3a;
}
.t-qs .q {
  margin: 0;
}
#v-text .rside .panel {
  background: #fcf8f1 !important;
}
.txt-head .rd-back {
  text-decoration: none;
  margin: 0;
}
/* страница текста v2: название произведения, автор и наушники внутри блока */
.t-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.t-work {
  margin: 0;
  font-size: 20px !important;
  line-height: 1.3 !important;
  color: #4a3e3a;
}
.t-au {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  font-weight: 300;
  color: #a09189;
  line-height: 1.4;
}
#v-text .t-play {
  margin-top: -4px;
}
#v-text .t-play svg {
  margin: 0;
}
.t-qs h3,
.t-gl h3 {
  margin: 0 0 14px !important;
  font-size: 18px;
  font-weight: 600;
  font-family: var(--sans);
  color: #4a3e3a;
}
.t-qs {
  margin-bottom: 26px !important;
}
.t-gl {
  margin: 0 0 24px;
}
.t-gl p {
  margin: 0 0 6px;
  color: #5f514b;
  max-width: none;
}
.t-gl b {
  color: #3494e3;
}
/* наушники без кружка */
#v-text .t-play {
  width: 56px;
  height: 56px;
  background: none !important;
  box-shadow: none !important;
  color: #3494e3;
}
#v-text .t-play svg {
  width: 46px;
  height: 46px;
}
#v-text .t-play:hover {
  color: #1c7fd0;
}
/* вопросы справа начинаются на уровне названия произведения; название не такое жирное */
#v-text .rside {
  padding-top: 29px;
}
.t-qs h3 {
  line-height: 26px !important;
}
.t-work {
  font-weight: 500 !important;
}
/* список произведений: ♥ и ★ в кружках, как в каталогах «Обычаев» */
.lit-row {
  display: flex !important;
  align-items: center;
  gap: 12px;
}
.lit-row .exn {
  flex: 1;
  text-decoration: none;
  color: inherit;
}
.lit-row .exn:hover {
  color: #1c7fd0;
}
/* ---------- «Весёлый словарик»: плашка справа от полки ---------- */
.shelf-row {
  display: flex;
  align-items: flex-end;
  gap: 24px;
}
.dict-card {
  flex: none;
  width: 220px;
  box-sizing: border-box;
  display: grid;
  gap: 4px;
  justify-items: start;
  background: #fcf8f1;
  border-radius: 22px;
  padding: 18px 20px 20px;
  box-shadow: 0 18px 40px -22px rgba(92, 78, 66, 0.42);
  color: #4a3e3a;
  margin-bottom: 8px;
}
.dict-card b {
  font-size: 18px;
  font-weight: 700;
}
.dict-card small {
  font-size: 14px;
  color: #86776f;
  margin-bottom: 10px;
}
.dict-play {
  border: 0;
  border-radius: 99px;
  padding: 10px 26px;
  background: #e6261f;
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 15.5px;
  cursor: pointer;
  box-shadow: 0 10px 20px -12px rgba(230, 38, 31, 0.8);
  transition:
    transform 0.15s,
    background 0.15s;
}
/* книги стоят над пунктиром на уровне плашки словарика, тень падает на пунктир */
.shelf-row .books {
  padding-bottom: 7px !important;
}
/* полка по центру, шириной в семь книг */
.shelf-row .shelf {
  min-width: 0;
  flex: none !important;
  width: min(100%, 840px);
  margin: 0 auto;
}
.shelf-row .books > :first-child {
  margin-left: auto;
}
.shelf-row .books > :last-child {
  margin-right: auto;
}
.shelf-row .book,
.shelf-row .book.ghost {
  width: 106px !important;
  height: 156px !important;
}
.shelf-row .book:not(.ghost) {
  box-shadow:
    inset 6px 0 0 rgba(0, 0, 0, 0.1),
    inset 7px 0 0 rgba(255, 255, 255, 0.18),
    0 14px 16px -9px rgba(92, 78, 66, 0.5);
}
.shelf-row .dict-card {
  height: 156px;
  margin-bottom: 16px;
  align-content: start;
}
.dict-card .dict-play {
  justify-self: center;
  margin-top: auto;
}
.dict-play:hover {
  background: #c81f19;
  transform: translateY(-2px);
}
@media (max-width: 700px) {
  .shelf-row {
    flex-direction: column;
    align-items: stretch;
  }
  .dict-card {
    width: 100%;
  }
}
/* игра «угадай слово» */
.dict-box {
  width: min(460px, 100%) !important;
  background: #fcf8f1 !important;
  padding: 24px 26px 22px !important;
}
.dict-box h3 {
  margin: 0 0 4px;
  font-size: 18px;
  color: #4a3e3a;
}
.dg-n {
  color: #a09189;
  font-size: 13px;
}
.dg-q {
  font-size: 20px;
  margin: 10px 0 14px;
  color: #4a3e3a;
}
.dg-q b {
  color: #3494e3;
}
.dg-opts {
  display: grid;
  gap: 10px;
}
.dg-o {
  text-align: left;
  border: 1px solid #e6e0d6;
  background: #fff;
  border-radius: 16px;
  padding: 12px 16px;
  font: inherit;
  font-size: 15.5px;
  color: #4a3e3a;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    transform 0.15s;
}
.dg-o:hover:not(.done) {
  border-color: #3494e3;
  transform: translateX(3px);
}
.dg-o.ok {
  background: #e4f6f5;
  border-color: #45bcc0;
}
.dg-o.bad {
  background: #fdeceb;
  border-color: #e6261f;
  animation: dgShake 0.35s;
}
@keyframes dgShake {
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}
.dg-end {
  text-align: center;
  padding: 10px 0 4px;
}
.dg-end b {
  font-size: 24px;
  color: #45bcc0;
}
.dg-end p {
  margin: 6px 0 16px;
  color: #5f514b;
  max-width: none;
}
.dg-again {
  background: #4a3e3a !important;
  color: #fff !important;
}
/* ---------- плашка открытой игры и книги — как в упражнениях ---------- */
.playbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 22px 14px;
  border-radius: 0 0 22px 22px;
  color: #fff;
}
.playbar[hidden] {
  display: none !important;
}
.playbar.k-game {
  background: #fbd96a;
}
.playbar.k-game .pb-t {
  text-shadow: 0 1px 2px rgba(150, 110, 0, 0.35);
}
.playbar.k-book {
  background: #3494e3;
}
.pb-t {
  flex: 1;
  min-width: 0;
}
.pb-t b {
  display: block;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}
.pb-t small {
  display: block;
  font-size: 15px;
  font-weight: 400;
  opacity: 0.92;
  margin-top: 2px;
}
.pb-t small:empty {
  display: none;
}
.playbar .fx {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-weight: 400;
  font-size: 17px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  line-height: 1;
  cursor: pointer;
}
/* пока открыта игра или книга: без шапки сайта и без дублей заголовка */
body.playing > header {
  display: none !important;
}
body.playing #v-games .inner,
body.playing #v-games .g-back,
body.playing #v-text .txt-head,
body.playing #v-text .t-work,
body.playing #v-text .t-au {
  display: none !important;
}
body.playing #v-games .page {
  padding-top: 24px !important;
}
body.playing #v-text .txt-page {
  padding-top: 24px !important;
}
body.playing #v-text .t-top {
  justify-content: flex-end;
}
/* ---------- «Гоночки» — как экран упражнения ---------- */
.rc {
  max-width: 856px;
  margin: 0 auto;
}
.rc-q {
  margin: 0 0 12px;
  text-align: center;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.3;
  color: #4a3e3a;
  min-height: 1.3em;
}
/* общая шкала игр: как в упражнениях, в жёлтом цвете игр */
.g-prog {
  max-width: 856px;
  margin: 0 auto 18px;
  border-color: #f6e3a4 !important;
}
.g-prog .fbar {
  background: #fdf3d3 !important;
}
.g-prog .fbar i {
  background: #fbd96a !important;
}
#v-games.glist .g-prog {
  display: none;
}
/* игры стоят по центру под шкалой, как карточка упражнения */
#v-games:not(.glist) .gpane {
  max-width: 856px;
  margin: 0 auto;
}
#v-games .ord,
#v-games .vk {
  max-width: none;
}
.rc {
  position: relative;
}
.rc-main {
  display: flex;
  justify-content: center;
}
#g-race .road {
  width: min(100%, 640px);
  height: 410px;
  border-radius: 24px;
  background: #d8cfc2;
  box-shadow: 0 18px 40px -22px rgba(92, 78, 66, 0.42);
}
/* границы дороги — тонкие линии по краям */
#g-race .lanes::before,
#g-race .lanes::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #fbf7ef;
  opacity: 0.9;
}
#g-race .lanes::before {
  left: -2px;
}
#g-race .lanes::after {
  right: -2px;
}
#g-race .signs {
  top: 22px;
  left: 7%;
  right: 7%;
  padding: 0 8px;
  gap: 0 14px;
}
#g-race .car {
  filter: drop-shadow(3px 8px 7px rgba(74, 62, 58, 0.38));
  bottom: 26px;
  width: 16%;
  left: calc(7% + 3 * 86% / 6 - 8%);
}
#g-race .sign {
  box-shadow: 0 8px 0 #cfc4b5;
  font-weight: 600;
  font-size: clamp(15px, 1.9vw, 21px);
  padding: 16px 10px;
  hyphens: auto;
}
#g-race .sign.ok {
  background: #fdf0c4;
}
#g-race .sign.bad {
  background: #efe8dd;
  color: #a09189;
}
#g-race .race-over {
  background: rgba(74, 62, 58, 0.38);
}
#g-race .race-over b {
  font-weight: 600;
}
/* скорость: слева, сразу под шкалой заданий */
.rc-speed {
  display: flex;
  gap: 14px;
  margin: -12px 0 2px 2px;
}
.rc-speed button {
  border: 0;
  background: none;
  padding: 2px 0;
  font: inherit;
  font-size: 13px;
  font-weight: 300;
  color: #c4b8ae;
  cursor: pointer;
}
.rc-speed button:hover {
  color: #86776f;
}
.rc-speed button.on {
  color: #86776f;
}
#g-race .race-over p {
  color: #fff;
  margin: 0 auto 16px;
  max-width: 320px;
}
@media (max-width: 760px) {
  #g-race .road {
    height: 440px;
  }
  .rc-q {
    font-size: 22px;
  }
  #g-race .sign {
    font-size: 14px;
    padding: 12px 6px;
    border-radius: 16px;
  }
  #g-race .signs {
    gap: 0 8px;
    padding: 0 4px;
  }
}

.vk-msg.ok {
  color: #2a9fa3;
}
/* после проверки: «Верно 4 из 6» и под ним «Играть ещё раз», по центру */
.ord-foot.done {
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.ord-foot.done .vk-again {
  margin-left: 0;
  font-size: 19px;
  padding: 16px 36px;
}
.ord-foot.done .vk-msg,
.ord-foot.done .vk-msg.ok,
.ord-foot.done .ord-msg {
  font-size: 15px;
  color: #a09189;
}
.race-foot[hidden] {
  display: none;
}
/* «Поехали!» такая же, как «Играть ещё раз» */
.vk-again.race-go {
  margin-left: 0;
  font-size: 19px;
  padding: 16px 36px;
}
.ord-foot.done .vk-again,
.vk-again.race-go {
  min-width: 228px;
  justify-content: center;
  text-align: center;
}
/* слова для выбора стоят вплотную под плашкой: одна группа */
.ord-bank .ord-w {
  padding: 0 2px;
  line-height: 1.15;
}
/* упражнения «Подчеркни…» (члены предложения) */
.fcard.ulcard {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 0 30px !important;
  overflow: visible !important;
}
.ul-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.ul-top .vk-hint {
  margin: 0;
}
.ul-top .rulebtn {
  position: static;
}
.ul-cur {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  padding: 4px 0;
}
.ul-cur .ul-b {
  border: 0;
  background: none;
  padding: 0 1px 6px;
  font: inherit;
  font-weight: 300;
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.2;
  color: #2a9fa3;
  cursor: pointer;
  transition: color 0.12s;
}
.ul-cur .ul-b:hover {
  color: #1f7f82;
}
.ul-line {
  font-size: 17px;
  color: #4a3e3a;
  gap: 2px 5px;
}
/* линии: подлежащее одной, сказуемое двумя, определение волной, дополнение пунктиром */
.ul-w .ul-tx,
.rule .ul-w {
  text-decoration-line: underline;
  text-decoration-skip-ink: none;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
}
.ul-s .ul-tx,
.rule .ul-s {
  text-decoration-style: solid;
}
.ul-p .ul-tx,
.rule .ul-p {
  text-decoration-style: double;
  text-decoration-thickness: 1.5px;
}
.ul-a .ul-tx,
.rule .ul-a {
  text-decoration-style: wavy;
  text-underline-offset: 4px;
}
.ul-o .ul-tx,
.rule .ul-o {
  text-decoration-style: dashed;
}
.ul-cur .ul-w .ul-tx {
  text-decoration-thickness: 2px;
}
/* стрелка и «Ещё раз» в упражнениях бирюзовые */
.fcard.ulcard .fnext {
  background: #45bcc0;
}
.fcard.ulcard .ul-again {
  background: #45bcc0 !important;
  color: #fff !important;
}
/* упражнения: белые блоки-разделы, внутри темы со сдвигом вправо */
.exgrp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: 1px solid #efe9df;
  background: #fff;
  border-radius: 18px;
  padding: 14px 20px;
  font: inherit;
  font-size: 18px;
  color: #4a3e3a;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 24px -20px rgba(92, 78, 66, 0.55);
}
.exgrp i {
  font-style: normal;
  font-size: 22px;
  color: #a09189;
  transition: transform 0.2s;
}
.exgrp.open i {
  transform: rotate(90deg);
}
.exsub {
  display: grid;
  gap: 8px;
  margin: 0 0 6px 36px;
}
/* обстоятельство: линия «точка — тире» (рисуем картинкой, в CSS такого вида подчёркивания нет) */
.ul-c .ul-tx,
.rule .ul-c {
  text-decoration: none !important;
  padding-bottom: 3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='4'%3E%3Crect x='0' y='1' width='9' height='2' rx='1' fill='%234A3E3A'/%3E%3Ccircle cx='13.5' cy='2' r='1.3' fill='%234A3E3A'/%3E%3C/svg%3E")
    repeat-x left bottom / 18px 4px;
}
.ul-cur .ul-c .ul-tx {
  padding-bottom: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='4'%3E%3Crect x='0' y='1' width='9' height='2' rx='1' fill='%232A9FA3'/%3E%3Ccircle cx='13.5' cy='2' r='1.3' fill='%232A9FA3'/%3E%3C/svg%3E");
}
/* «Порядок слов» в упражнениях: слова бирюзовые */
.fcard.ulcard .ord-bank .ord-w {
  color: #2a9fa3;
}
.fcard.ulcard .ord-bank .ord-w:hover {
  color: #1f7f82;
}
/* суффикс: «домик» сверху */
.suf {
  position: relative;
  display: inline-block;
  line-height: 1.2;
}
.suf::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: -0.55em;
  height: 0.5em;
  background:
    linear-gradient(
        to top left,
        transparent calc(50% - 1px),
        #e6261f calc(50% - 1px),
        #e6261f calc(50% + 1px),
        transparent calc(50% + 1px)
      )
      left / 50% 100% no-repeat,
    linear-gradient(
        to top right,
        transparent calc(50% - 1px),
        #e6261f calc(50% - 1px),
        #e6261f calc(50% + 1px),
        transparent calc(50% + 1px)
      )
      right / 50% 100% no-repeat;
}
.fm-rule .rule p:has(.suf) {
  line-height: 2.5;
  padding-top: 4px;
}
/* «Гласные и согласные»: буквы слова, подчёркнутые гласные */
.lt-cur {
  display: flex;
  gap: 2px;
  padding: 4px 0;
}
.lt-cur .lt-b {
  border: 0;
  background: none;
  padding: 0 3px 6px;
  font: inherit;
  font-weight: 300;
  font-size: clamp(30px, 3.4vw, 38px);
  line-height: 1.2;
  color: #2a9fa3;
  cursor: pointer;
}
.lt-cur .lt-b:hover {
  color: #1f7f82;
}
.lt-line {
  font-size: 19px;
  color: #4a3e3a;
  gap: 0 !important;
  letter-spacing: 1px;
}
.lt-b.on {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  text-decoration-skip-ink: none;
}
/* «Паровозики»: паровоз и два вагончика в каждой строке, вид сверху, под ними рельсы */
.tr-rows {
  display: grid;
  gap: 10px;
}
.tr-row {
  position: relative;
  display: flex;
  align-items: center;
  padding: 6px 0;
}
.tr-row::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 26px;
  transform: translateY(-50%);
  border-top: 2px solid #cfc4b5;
  border-bottom: 2px solid #cfc4b5;
  background: repeating-linear-gradient(90deg, transparent 0 14px, #e3dacd 14px 20px);
  z-index: 0;
}
.tr-loco {
  position: relative;
  z-index: 1;
  width: 64px;
  height: 40px;
  flex: none;
  filter: drop-shadow(2px 5px 5px rgba(74, 62, 58, 0.28));
}
.tr-hook {
  position: relative;
  z-index: 1;
  width: 12px;
  height: 4px;
  flex: none;
  background: #4a3e3a;
  border-radius: 2px;
}
.tr-car {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  min-height: 46px;
  border: 2px solid #e9c455;
  background: #fdf1c9;
  border-radius: 10px;
  padding: 8px 14px;
  font: inherit;
  font-size: 16px;
  color: #4a3e3a;
  text-align: center;
  cursor: pointer;
  box-shadow: 2px 6px 10px -6px rgba(74, 62, 58, 0.45);
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
/* рёбра крыши вагончика */
.tr-car::before {
  content: "";
  position: absolute;
  inset: 4px 8px;
  border-radius: 6px;
  background: repeating-linear-gradient(90deg, transparent 0 16px, rgba(255, 255, 255, 0.28) 16px 18px);
  pointer-events: none;
}
.tr-car span {
  position: relative;
}
.tr-car:hover:not(:disabled) {
  transform: translateY(-2px);
}
.tr-car.sel {
  transform: translateY(-4px) scale(1.02);
  box-shadow:
    0 0 0 3px #fbd96a,
    2px 12px 16px -8px rgba(74, 62, 58, 0.5);
}
.tr-car:disabled {
  cursor: default;
}
.tr-row.ok .tr-car {
  background: #e3f5f5;
  border-color: #45bcc0;
}
.tr-row.bad .tr-car {
  background: #fdecea;
  border-color: #e6261f;
}
.vk.tr .ord-foot {
  margin-top: 20px;
}
/* «Собери слово» */
.wd-def {
  margin: 0 0 6px;
  font-size: 16px;
  color: #86776f;
}
.wd-line {
  gap: 1px !important;
}
.ord-row:not(.cur) .wd-line {
  justify-content: space-between;
}
.wd-line .wd-w {
  font-size: 18px;
  letter-spacing: 1px;
  color: #4a3e3a;
}
.wd-line .wd-d {
  font-size: 13.5px;
  color: #a09189;
  text-align: right;
}
.wd-l {
  border: 0;
  background: none;
  padding: 2px 0;
  margin-right: 1px;
  font: inherit;
  font-size: 18px;
  letter-spacing: 0;
  color: #4a3e3a;
  cursor: pointer;
}
.wd-bank {
  gap: 2px 18px !important;
}
.wd-bank .ord-w {
  font-size: clamp(26px, 3vw, 32px);
}
.wd .ord-rows {
  gap: 8px;
}
/* вагончики жёлтые; между левым и правым сцепка появляется, когда ряд собран */
.tr-car {
  border-color: #e9c455 !important;
  background: #fdf1c9 !important;
}
.tr-row.ok .tr-car {
  background: #e3f5f5 !important;
  border-color: #45bcc0 !important;
}
.tr-row.bad .tr-car {
  background: #fdecea !important;
  border-color: #e6261f !important;
}
.tr-mid {
  width: 28px;
  opacity: 0;
  transition: opacity 0.2s;
}
.tr-row.on .tr-mid {
  opacity: 1;
}
/* подсказка в «Собери слово» и вопрос в «Гоночках»: одинаково — по центру, тёмным, полужирным, одного размера */
.rc-q,
.wd-def {
  text-align: center !important;
  font-size: 21px !important;
  font-weight: 500 !important;
  line-height: 1.3;
  color: #4a3e3a !important;
}
.wd-def {
  margin: 4px 0 12px !important;
}
/* «Собери слово»: буквы всегда одного цвета, без подсветки при наведении и нажатии */
.wd-bank .ord-w,
.wd-bank .ord-w:hover,
.wd-bank .ord-w:active,
.wd-bank .ord-w:focus {
  color: #e2ae1c !important;
  transform: none !important;
  outline: none;
}
.wd-l,
.wd-l:hover,
.wd-l:active,
.wd-l:focus {
  color: #4a3e3a !important;
  outline: none;
}
/* «Гоночки»: широкая дорога, таблички цвета газеты, тонкий шрифт без переносов */
#g-race .road {
  width: 100% !important;
}
#g-race .car {
  width: 11% !important;
  left: calc(7% + 3 * 86% / 6 - 5.5%);
}
#g-race .sign {
  background: #fcf8f1 !important;
  box-shadow: 0 6px 14px -8px rgba(74, 62, 58, 0.35) !important;
  font-weight: 400 !important;
  font-size: 17px !important;
  line-height: 1.25;
  padding: 14px 12px !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  word-break: normal;
  overflow-wrap: normal;
  min-height: 68px;
}
#g-race .sign.ok {
  background: #e3f5f5 !important;
}
#g-race .sign.bad {
  background: #fdecea !important;
}
@media (max-width: 760px) {
  #g-race .sign {
    font-size: 14px !important;
  }
}
/* таблички «Гоночек» — как плашки в упражнениях: белая с тонкой рамкой; верно — зелёная, неверно — красная */
#g-race .sign {
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid #e6e0d6;
  border-radius: 16px !important;
  box-shadow: none !important;
  color: #4a3e3a !important;
}
#g-race .sign.ok {
  background: #e3f5f5 !important;
  border-color: #45bcc0 !important;
  color: #4a3e3a !important;
}
#g-race .sign.bad {
  background: #fdecea !important;
  border-color: #e6261f !important;
  color: #4a3e3a !important;
}
/* «Гоночки»: косая разметка на обочинах (по две полоски, потом промежуток).
   Рисуем сплошным градиентом без плиток, поэтому линии без обрывов;
   во время езды сдвигаем на один повтор (160px) — зацикливание незаметно */
#g-race .road::before,
#g-race .road::after {
  content: "";
  position: absolute;
  top: -160px;
  bottom: 0;
  width: 7%;
  pointer-events: none;
  --st: rgba(251, 247, 239, 0.5);
}
#g-race .road::before {
  left: 0;
  background: repeating-linear-gradient(
    45deg,
    var(--st) 0 2.5px,
    transparent 2.5px 14px,
    var(--st) 14px 16.5px,
    transparent 16.5px 113.137px
  );
}
#g-race .road::after {
  right: 0;
  background: repeating-linear-gradient(
    -45deg,
    var(--st) 0 2.5px,
    transparent 2.5px 14px,
    var(--st) 14px 16.5px,
    transparent 16.5px 113.137px
  );
}
#g-race .road.go::before,
#g-race .road.go::after {
  animation: shoulder 1.368s linear infinite;
}
@keyframes shoulder {
  to {
    transform: translateY(160px);
  }
}
/* «Гоночки»: все линии дороги одного тона и толщины (мягкий белый, не яркий) */
#g-race .road {
  --line: rgba(251, 247, 239, 0.7);
}
#g-race .road .lanes {
  background:
    repeating-linear-gradient(180deg, var(--line) 0 34px, transparent 34px 70px) calc(33.33% - 1.5px) 0 / 3px
      100% no-repeat,
    repeating-linear-gradient(180deg, var(--line) 0 34px, transparent 34px 70px) calc(66.66% - 1.5px) 0 / 3px
      100% no-repeat;
}
#g-race .road.go .lanes {
  animation: dash3 0.6s linear infinite;
}
@keyframes dash3 {
  to {
    background-position:
      calc(33.33% - 1.5px) 70px,
      calc(66.66% - 1.5px) 70px;
  }
}
#g-race .lanes::before,
#g-race .lanes::after {
  width: 3px !important;
  background: var(--line) !important;
  opacity: 1 !important;
}
#g-race .lanes::before {
  left: -1.5px !important;
}
#g-race .lanes::after {
  right: -1.5px !important;
}
#g-race .road::before,
#g-race .road::after {
  --st: var(--line);
}
/* заставка «Гоночек»: затемнение поверх всей дороги, включая обочины; строчка в одну линию */
#g-race .race-over {
  z-index: 5;
}
#g-race .race-over p {
  white-space: nowrap;
  max-width: none !important;
  line-height: 1.3;
}
/* «Гоночки»: таблички как вагончики — светло-жёлтые, с рамкой и бледными полосками */
#g-race .sign {
  position: relative;
  isolation: isolate;
  background: #fdf1c9 !important;
  border: 2px solid #e9c455 !important;
  border-radius: 10px !important;
  box-shadow: 2px 6px 10px -6px rgba(74, 62, 58, 0.45) !important;
}
#g-race .sign::before {
  content: "";
  position: absolute;
  inset: 4px 8px;
  border-radius: 6px;
  background: repeating-linear-gradient(90deg, transparent 0 16px, rgba(255, 255, 255, 0.28) 16px 18px);
  pointer-events: none;
  z-index: -1;
}
#g-race .sign.ok {
  background: #e3f5f5 !important;
  border-color: #45bcc0 !important;
}
#g-race .sign.bad {
  background: #fdecea !important;
  border-color: #e6261f !important;
}
/* ответы в одно слово: таблички ниже, слово чуть крупнее */
#g-race .sign {
  min-height: 54px;
  padding: 10px 12px !important;
  font-size: 19px !important;
}
/* «Вагончики» и таблички «Гоночек»: простые плашки цвета газеты (без полосок и тени) */
.tr-car,
#g-race .sign {
  background: #fcf8f1 !important;
  border: 1px solid #e6e0d6 !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}
.tr-car::before,
#g-race .sign::before {
  display: none !important;
}
.tr-car.sel {
  border-color: #e9c455 !important;
  box-shadow: 0 0 0 2px #fbd96a !important;
}
.tr-row.ok .tr-car,
#g-race .sign.ok {
  background: #e3f5f5 !important;
  border-color: #45bcc0 !important;
}
.tr-row.bad .tr-car,
#g-race .sign.bad {
  background: #fdecea !important;
  border-color: #e6261f !important;
}
/* красная точка над «Журналом»: в журнале есть что-то новое */
/* журнал: заголовок выпуска «№ 1 · Осень 2026» без слова «Выпуск» */
/* «Сундучки» */
.ch .ord-foot {
  margin-top: 18px;
}
/* выпуск, который готовится: закрытые блоки чуть темнее газеты, без текста; большая печать */
/* «Собери слово»: буквы по центру; если их много, переносятся рядами, тоже по центру */
.wd-bank {
  justify-content: center;
  gap: 6px 18px !important;
  max-width: 760px;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* упражнения с выбором: без белой подложки, варианты — газетные плашки */
.fcard.ulcard .opt {
  background: #fcf8f1 !important;
  border: 1px solid #e6e0d6 !important;
  box-shadow: none !important;
}
.fcard.ulcard .opt:hover:not(:disabled) {
  border-color: #45bcc0 !important;
}
.fcard.ulcard .opt.ok {
  background: #e3f5f5 !important;
  border-color: #45bcc0 !important;
}
.fcard.ulcard .opt.bad {
  background: #fdecea !important;
  border-color: #e6261f !important;
}
/* «Собери слово»: тонкая стрелка «стереть» в плашке */
.wd-del {
  margin-left: auto;
  border: 0;
  background: none;
  padding: 6px 2px 6px 10px;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: #86776f;
}
.wd-del svg {
  width: 26px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wd-del:hover:not(:disabled) {
  color: #4a3e3a;
}
.wd-del:disabled {
  opacity: 0.35;
  cursor: default;
}
/* № 1: разделы, которые ещё не вышли, — пустые плашки и «строчки» цвета закрытого выпуска */
/* доска объявлений: одна записка, остальные кнопки приколоты как попало */
/* упражнения: условие бледное, сам вопрос — как в «Гоночках» и «Собери слово»; в плашках тонкий шрифт */
.fcard.ulcard .opt {
  font-weight: 400 !important;
  font-size: 17px !important;
  color: #4a3e3a !important;
}
/* доска объявлений № 1: без подложки, записка и кнопки прямо на странице */
/* доска объявлений: заголовок обычными буквами, без полоски справа */
/* расстояние от вопроса до плашек — как в «Собери слово» */
.fcard.ulcard .ex-q {
  margin: 10px 0 18px !important;
  margin-bottom: 6px !important; /* + 6px промежутка карточки = 12px, как в «Собери слово» */
}
.fcard.ulcard .ex-q + .opts {
  margin-top: 0 !important;
}
/* буквы в плашке «Собери слово»: область нажатия больше, чтобы букву было легко убрать */
.cur .wd-line .wd-l {
  padding: 10px 4px !important;
  margin: -10px -2px !important;
  min-width: 18px;
  position: relative;
}
/* № 1: доска объявлений — заголовок крупнее, верх вровень с плашкой слева; записка ставится скриптом */
/* запись: выбор часового пояса */
.zp-tz {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
  font-size: 13px;
  color: #86776f;
}
.zp-tz select {
  font: inherit;
  font-size: 15px;
  color: #4a3e3a;
  background: #fcf8f1;
  border: 1px solid #e6e0d6;
  border-radius: 12px;
  padding: 9px 12px;
  max-width: 360px;
  cursor: pointer;
}
.zp-who small {
  font-size: 13px;
  color: #86776f;
}
/* часовой пояс — над календарём */
.zp-tzbox .zp-tz {
  margin: 0 0 12px;
}
.zp-tzbox .zp-tz select {
  width: 100%;
  max-width: none;
}
.zp-day small {
  font-size: 13px;
  color: #86776f;
}
/* пояс рядом с выбранным временем — тем же размером, чтобы не пропустить */
.zp-who small {
  font-size: inherit !important;
  color: inherit !important;
}
/* № 1: пустые плашки ниже */
/* запись: пояс и календарь ниже цен, календарь вплотную к поясу; день и слоты справа */
.zp-tzbox {
  width: 340px;
  margin-top: 30px;
}
.zp-tzbox .zp-tz {
  margin: 0 0 8px !important;
}
.zp-tzbox .zp-tz select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  background: #fcf8f1
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18'%3E%3Cpath d='M2 7l4-4 4 4M2 11l4 4 4-4' fill='none' stroke='%2386776f' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 14px center / 10px 15px;
}
.zp-right {
  min-width: 0;
}
.zp-right .zp-pick {
  margin: 0;
}
.zp-right .zp-side {
  padding-top: 0;
}
.zp-right .zp-day {
  margin: 0 0 12px;
}
.zp-right .zp-pick + .zp-side:not(:empty) {
  margin-top: 14px;
}
.zp-day small {
  font-size: inherit !important;
  color: inherit !important;
}
/* «Предмет», «Действие», «Признак»: слово обводится тонкой закруглённой рамочкой, без заливки
   (подчёркивание оставлено для членов предложения); рамка не сдвигает слова */
.ul-x .ul-tx {
  text-decoration: none !important;
  position: relative;
  display: inline-block;
}
.ul-x .ul-tx::before {
  content: "";
  position: absolute;
  inset: -1px -6px -2px;
  border: 1.5px solid currentColor;
  border-radius: 12px;
  pointer-events: none;
}
.ul-cur .ul-x .ul-tx::before {
  inset: 0 -8px -3px;
  border-radius: 14px;
}
.fcard.ulcard .ul-cur {
  padding-left: 8px;
}
.ul-line .ul-b.ul-x {
  margin: 0 6px;
}
/* «Новое»: бирюзовая точка справа сверху (js/36-new.js) */
.nw {
  position: relative;
}
.nw-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #45bcc0;
  box-shadow: 0 0 0 2px #fff;
  pointer-events: none;
  z-index: 3;
}
a.t .nw-dot {
  top: 14px;
  right: 14px;
  width: 14px !important;
  height: 14px !important;
  box-shadow: 0 0 0 3px #fff !important;
}
/* «Вагончики»: готовая сцепка между началом и концом — красная, сразу видно, что собрано */
.tr-row.on .tr-mid {
  background: #e6261f;
}
/* «Гоночки»: машинка с тенью внутри рисунка (без CSS-фильтра, иначе при переезде тянется след);
   рисунок шире на место под тень, кузов стоит там же; при нажатии дорожка не подсвечивается */
#g-race .car {
  filter: none !important;
  width: calc(11% * 92 / 80) !important;
  transform: translateY(calc(12 / 142 * 100%));
  will-change: left, bottom;
}
#g-race .tap,
#g-race .tap:hover,
#g-race .tap:active,
#g-race .tap:focus {
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}
/* «Сундучки»: открытые сундучки сверху, яркие, без подложки; слова ложатся под подпись */
/* «Гоночки»: на машинку можно нажать — она поедет быстрее (дорога бежит быстрее) */
#g-race .car {
  z-index: 4;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
#g-race .road.go.boost::before,
#g-race .road.go.boost::after {
  animation-duration: 0.45s;
}
#g-race .road.go.boost .lanes {
  animation-duration: 0.2s;
}
/* «Сундучки» сбоку: подпись на внутренней стороне крышки, под сундучком — «один» / «много» */
/* «Одуванчик»: слова сверху без плашек; внизу цветок — серединка с подписью, лучики и плашки-лепестки */
.dn-words {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 22px;
  max-width: 760px;
  margin: 4px auto 6px;
}
.dn-w {
  border: 0;
  background: none;
  padding: 6px 2px;
  font: inherit;
  font-size: 20px;
  color: #4a3e3a;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.dn-flower {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 560 / 330;
  margin: 0 auto;
}
.dn-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.dn-rays line {
  stroke: #e9c455;
  stroke-width: 2.5;
  stroke-linecap: round;
}
.dn-core,
.dn-p {
  position: absolute;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.dn-core {
  z-index: 2;
  background: #fbd96a;
  color: #4a3e3a;
  font-weight: 600;
  font-size: 16px;
  padding: 10px 18px;
  border-radius: 99px;
  box-shadow: 2px 6px 10px -6px rgba(74, 62, 58, 0.45);
}
.dn-p {
  z-index: 1;
  border: 1px solid #e6e0d6;
  background: #fcf8f1;
  border-radius: 16px;
  padding: 8px 16px;
  font: inherit;
  font-size: 17px;
  color: #4a3e3a;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.dn-p.ok {
  background: #e3f5f5;
  border-color: #45bcc0;
}
.dn-p.bad {
  background: #fdecea;
  border-color: #e6261f;
}
.dn-p:disabled,
.dn-w:disabled {
  cursor: default;
}
.dn .ord-foot {
  margin-top: 6px;
}
/* «Одуванчик»: слова жёлтые и тонкие, как буквы в «Собери слово»; серединка — просто жёлтый кружок */
.dn-w {
  font-weight: 300 !important;
  font-size: clamp(22px, 2.6vw, 28px) !important;
  color: #e2ae1c !important;
}
.dn-core {
  width: 52px;
  height: 52px;
  padding: 0 !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 38% 35%, #fce28d, #fbd96a 55%, #e9c455) !important;
  box-shadow: 2px 6px 10px -5px rgba(74, 62, 58, 0.45) !important;
}
@media (max-width: 600px) {
  .dn-p {
    font-size: 12.5px !important;
    padding: 4px 7px !important;
    border-radius: 10px !important;
  }
  .dn-core {
    width: 40px;
    height: 40px;
  }
}
/* лист одуванчика: силуэт с зубцами и светлая жилка */
/* «Одуванчик» сверху: без стебля, поле цветка квадратнее */
.dn-flower {
  aspect-ratio: 560 / 360 !important;
}
/* «Ромашка»: лепестки повёрнуты по лучам, их поворот задаётся прямо в разметке */
.dn-flower .dn-p {
  transform: none;
  z-index: 1;
}
/* «Он, она, оно»: три простых домика, под каждым подпись рода и разложенные слова */
.dn-w.sel {
  color: #c8930f !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
/* «Вопросы обстоятельства»: вопрос в плашке, ответ после тире бледнее, пропуск — линия */
.wq-line {
  justify-content: space-between;
  gap: 4px 16px !important;
}
.wq-line .wq-a {
  font-weight: 600;
}
.wq-line .wq-r {
  font-size: 15px;
  color: #a09189;
}
.wq-gap {
  display: inline-block;
  width: 70px;
  height: 1em;
  border-bottom: 2px dashed #45bcc0;
  vertical-align: -3px;
}
.wq-bank {
  justify-content: center;
  gap: 6px 22px !important;
}
/* «Правда или нет?»: карточка со словом и значением, под ней галочка и крестик */
.tf-card {
  max-width: 560px;
  min-height: 190px;
  margin: 10px auto 0;
  padding: 26px 30px;
  background: #fcf8f1;
  border: 1px solid #e6e0d6;
  border-radius: 22px;
  box-shadow: 0 14px 30px -20px rgba(92, 78, 66, 0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.tf-card.ok {
  background: #e3f5f5;
  border-color: #45bcc0;
}
.tf-card.bad {
  background: #fdecea;
  border-color: #e6261f;
}
.tf-w {
  font-size: 30px;
  font-weight: 600;
  color: #4a3e3a;
}
.tf-d {
  margin: 10px 0 0;
  font-size: 20px;
  line-height: 1.4;
  color: #4a3e3a;
}
.tf-real {
  margin: 12px 0 0;
  font-size: 15px;
  color: #86776f;
}
.tf-btns {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-top: 22px;
}
.tf-btns[hidden] {
  display: none;
}
.tf-b {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 0;
  font-size: 34px;
  line-height: 1;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 12px 22px -12px rgba(74, 62, 58, 0.55);
  transition:
    transform 0.12s,
    opacity 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.tf-yes {
  background: #45bcc0;
}
.tf-no {
  background: #e6261f;
}
.tf-b:hover:not(:disabled) {
  transform: translateY(-2px);
}
.tf-b:disabled {
  opacity: 0.35;
  cursor: default;
}
.tf-b.on {
  opacity: 1;
  outline: 4px solid rgba(74, 62, 58, 0.18);
}
.tf .ord-foot {
  margin-top: 14px;
}
/* «Найди слова»: квадрат 8 × 8 из букв цвета газеты, рядом подсказки */
.fw-wrap {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
}
.fw-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  width: min(420px, 100%);
  padding: 10px;
  background: #fcf8f1;
  border: 1px solid #e6e0d6;
  border-radius: 18px;
  box-shadow: 0 14px 30px -22px rgba(92, 78, 66, 0.45);
}
.fw-c {
  aspect-ratio: 1;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font: inherit;
  font-size: clamp(17px, 2.4vw, 23px);
  color: #4a3e3a;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}
.fw-c.sel {
  background: #fbd96a;
}
.fw-c.found {
  cursor: default;
}
.fw-clues {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  max-width: 360px;
  counter-reset: fw;
}
.fw-clues li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 16px;
  line-height: 1.4;
  color: #4a3e3a;
}
.fw-clues li.done {
  color: #86776f;
}
.fw-clues li.done b {
  color: #4a3e3a;
  font-weight: 600;
}
.fw-sw {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  border: 1.5px solid #d8cfc2;
  transform: translateY(1px);
}
.fw-clues li.done .fw-sw {
  border-color: transparent;
}
/* экран итога в играх — жёлтый, как всё в разделе игр */
.g-res {
  margin-top: 10px;
}
.g-res .res-again {
  background: #fbd96a !important;
  color: #4a3e3a !important;
}
.g-res .rd.f {
  background: #fbd96a !important;
}
/* «Собери слово» и «Найди слова»: буквы одного размера и одной толщины */
.wd-bank .ord-w,
.fw-c {
  font-size: 26px !important;
  font-weight: 300 !important;
}
/* список игр: строка — название (открывает игру), счёт и сердечко «любимая игра» */
.g-row {
  display: flex !important;
  align-items: center;
  gap: 14px;
}
.g-row .g-open {
  flex: 1;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
/* список игр: метка «Новинка» вместо сердечка */
.g-new {
  flex: none;
  padding: 5px 10px;
  border-radius: 99px;
  background: #d4efef;
  color: #1f7f82;
  font-size: 13px;
  font-weight: 500;
}
.g-gap {
  flex: none;
  width: 36px;
}
/* под списком игр место, чтобы нижние сердечки можно было прокрутить выше черепашки */
#gList {
  padding-bottom: 90px;
}
/* «Кроссворд»: клетки цвета газеты с номерами, подсказки рядом, внизу буквы */
.cw-wrap {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
}
.cw-grid {
  display: grid;
  gap: 3px;
  width: 100%;
  flex: 1 1 320px;
}
.cw-x {
  aspect-ratio: 1;
}
.cw-c {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid #e6e0d6;
  border-radius: 8px;
  background: #fcf8f1;
  font: inherit;
  font-size: 22px;
  font-weight: 300;
  color: #4a3e3a;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cw-c i {
  position: absolute;
  top: 2px;
  left: 4px;
  font-style: normal;
  font-size: 10px;
  color: #a09189;
}
.cw-c.sel {
  background: #fdf0c4;
  border-color: #e9c455;
}
.cw-c.ok {
  background: #d4efef;
  border-color: #45bcc0;
}
.cw-c.bad {
  background: #fbdcd9;
  border-color: #e6261f;
}
.cw-clues {
  flex: 1 1 280px;
  max-width: 400px;
}
.cw-clues h4 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: #86776f;
}
.cw-clues ol {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 6px;
}
.cw-clues li {
  font-size: 16px;
  line-height: 1.4;
  color: #4a3e3a;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 8px;
}
.cw-clues li.sel {
  background: #fdf0c4;
}
.cw-clues li.done {
  color: #a09189;
  text-decoration: line-through;
  cursor: default;
}
.cw-bank-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 18px;
  min-height: 44px;
}
.cw-bank {
  margin: 0 !important;
}
.cw-bank {
  flex: 0 1 auto !important;
  justify-content: center;
}
.cw-side {
  flex: 1 1 280px;
  max-width: 400px;
}
.cw-side .cw-clues {
  max-width: none;
}
.cw-side .cw-bank-row {
  justify-content: flex-start;
  margin-top: 6px;
}
/* «Правда или нет?» в общем стиле: слово — как вопрос в «Гоночках», значение мельче и тоньше;
   ответы — две плашки цвета газеты «Правда» / «Неправда», как варианты в упражнениях */
.tf-card,
.tf-card.ok,
.tf-card.bad {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  min-height: 150px;
  padding: 8px 0 !important;
}
.tf-w {
  font-size: 21px !important;
  font-weight: 500 !important;
  color: #4a3e3a !important;
}
.tf-d {
  font-size: 18px !important;
  font-weight: 300;
  color: #5f514b !important;
  margin-top: 8px !important;
}
.tf-btns {
  gap: 16px !important;
  margin-top: 6px !important;
}
.tf-b,
.tf-yes,
.tf-no {
  width: auto !important;
  height: auto !important;
  min-width: 200px;
  padding: 14px 24px !important;
  border-radius: 16px !important;
  background: #fcf8f1 !important;
  border: 1px solid #e6e0d6 !important;
  box-shadow: none !important;
  color: #4a3e3a !important;
  font: inherit;
  font-size: 17px !important;
  outline: none !important;
  opacity: 1 !important;
}
.tf-b:hover:not(:disabled) {
  border-color: #e9c455 !important;
  transform: none !important;
}
.tf-b.ok {
  background: #e3f5f5 !important;
  border-color: #45bcc0 !important;
}
.tf-b.bad {
  background: #fdecea !important;
  border-color: #e6261f !important;
}
/* «Ребусы»: сам ребус крупно по центру — буквы, картинки, запятые; ниже плашка для ответа и буквы */
.rb-pic {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 150px;
  margin: 10px 0 18px;
}
.rb-t {
  font-size: 46px;
  font-weight: 500;
  letter-spacing: 2px;
  color: #4a3e3a;
}
.rb-comma {
  font-size: 64px;
  font-weight: 600;
  line-height: 0.6;
  color: #4a3e3a;
  align-self: flex-start;
  margin-top: 10px;
}
.rb-img svg {
  display: block;
  width: 120px;
  height: 120px;
  filter: drop-shadow(2px 6px 6px rgba(74, 62, 58, 0.18));
}
.rb-cur {
  max-width: 520px;
  margin: 0 auto;
}
.rb-line.ok {
  background: #e3f5f5;
  border-color: #45bcc0;
}
.rb-line.bad {
  background: #fdecea;
  border-color: #e6261f;
}
.rb-fix:empty {
  display: none;
}

/* «Ребус»: разбор после проверки, убранные буквы зачёркнуты */
.rb-ex {
  margin: 14px 0 0;
  text-align: center;
  font-size: 22px;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--ink, #4a3e3a);
}
.rb-ex:empty {
  display: none;
}
.rb-ex s {
  color: #e6261f;
  text-decoration-thickness: 2px;
}

/* ---------- журнал-лента: новое сверху, прокрутка внутри листа ---------- */
/* журнал-лента v2: ряды из широких и узких записей, заголовок сезона шрифтом сайта */
/* ребус в журнале — небольшой */
/* мягкое появление при прокрутке */

/* «Ромашка»: цветок заходит под нижний ряд слов, клики по словам проходят сквозь пустое поле цветка */
.dn-words {
  position: relative;
  z-index: 2;
  align-content: flex-start;
}
.dn-flower {
  pointer-events: none;
}
.dn-flower .dn-p {
  pointer-events: auto;
}
/* «Ромашка»: слова в два ряда на всю ширину, цветок и стрелка выше */
.dn-words {
  max-width: none;
  gap: 4px 18px;
}
.dn .ord-foot {
  margin-top: -44px;
  position: relative;
  z-index: 3;
}

/* журнал: без линеек — записи держатся на воздухе между ними */
/* «Читать дальше» / «Свернуть» — тонкая галочка */

/* журнал: мозаика в три колонки */

/* «Читать дальше» / «Свернуть» — в правом углу под текстом */

/* таймер праздника в шапке: отдельная плашка, не похожая на пункты меню */
.bar-right {
  display: flex;
  align-items: center;
  gap: 18px;
}
.hdr-hol {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #f3e2b0;
  background: #fff8e2;
  border-radius: 99px;
  padding: 5px 14px 5px 8px;
  font: inherit;
  color: #4a3e3a;
  cursor: pointer;
  line-height: 1.1;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 0.2s,
    transform 0.2s;
}
.hdr-hol:hover {
  background: #fdf0c6;
  transform: translateY(-1px);
}
.hdr-hol .e {
  font-size: 20px;
  line-height: 1;
}
.hdr-hol .hh-t {
  display: flex;
  flex-direction: column;
}
.hdr-hol b {
  font-size: 13.5px;
  font-weight: 600;
  color: #e6261f;
}
.hdr-hol small {
  font-size: 11.5px;
  color: #86776f;
}
@media (max-width: 700px) {
  .bar-right {
    gap: 10px;
  }
  .hdr-hol {
    padding: 4px 10px 4px 6px;
  }
  .hdr-hol .e {
    font-size: 17px;
  }
}
@media (max-width: 700px) {
  .hdr-hol {
    margin: 2px 0 6px;
  }
}

/* таймер праздника в шапке — без плашки, только текст с картинкой */
.hdr-hol,
.hdr-hol:hover {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  transform: none !important;
  text-decoration: none;
}
.hdr-hol:hover b {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* «Новое» на плитках главной — красный флажок с двумя зубчиками, свисает с верхнего края над картинкой */
a.t .nw-dot {
  top: 0 !important;
  right: 36px !important;
  width: 14px !important;
  height: 22px !important;
  border-radius: 0 !important;
  background: #e6261f !important;
  box-shadow: none !important;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
}
.hdr-hol:hover b {
  text-decoration: none;
  color: #c41d17;
}

/* флажок «новое»: цвет как у BRAVO в логотипе, широкий, зубчики внизу закруглённые */
a.t .nw-dot {
  width: 26px !important;
  height: 26px !important;
  right: 30px !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M0 0H30V24.5Q30 29 26 27.2L17 22.6Q15 21.6 13 22.6L4 27.2Q0 29 0 24.5Z' fill='%23E6261F'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat !important;
  clip-path: none !important;
}

/* флажок: чуть светлее, сверху светлая полоска (как обводка плитки), маленькая тень; правый край — над серединой ластика карандаша */
a.t .nw-dot {
  right: 42px !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M0 0H30V24.5Q30 29 26 27.2L17 22.6Q15 21.6 13 22.6L4 27.2Q0 29 0 24.5Z' fill='%23EE4E44'/%3E%3Crect width='30' height='2.8' fill='%23fff' fill-opacity='.35'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat !important;
  filter: drop-shadow(0 2px 2px rgba(74, 62, 58, 0.22));
}

/* «Покров» в шапке крупнее; значок праздника — простой рисунок */
.hdr-hol b {
  font-size: 16px !important;
}
.hdr-hol .e svg {
  display: block;
  width: 26px;
  height: 26px;
  filter: drop-shadow(0 2px 2px rgba(74, 62, 58, 0.15));
}

/* перед праздником в шапке — просто красный кружок, как точки BRAVO */
.hdr-hol .hh-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e6261f;
  flex: none;
  align-self: center;
  margin-top: -14px;
}
@media (min-width: 701px) {
  .bar-right {
    gap: 34px;
  }
}
@media (max-width: 700px) {
  .hdr-hol {
    margin: 2px 0 12px !important;
  }
}
/* телефон: шапка вырастает под строку праздника */
@media (max-width: 700px) {
  header .bar {
    height: auto !important;
    min-height: 80px;
    flex-wrap: wrap;
  }
  .hdr-hol {
    margin: 6px 0 0 !important;
  }
}
/* кружок перед праздником: по центру между двумя строчками, со спокойной светлой обводкой (не мигает) */
.hdr-hol .hh-dot {
  margin-top: 0 !important;
  align-self: center !important;
  width: 9px !important;
  height: 9px !important;
  box-shadow: 0 0 0 3.5px rgba(230, 38, 31, 0.18);
  margin-left: 3px;
}

.hdr-hol .hh-dot {
  width: 11px !important;
  height: 11px !important;
  margin: -4px 0 0 -2px !important;
}

/* часовой пояс: своя кнопка и список, раскрывается поверх плашки на всю её ширину */
.zp-tzw {
  position: relative;
}
.zp-tzbtn {
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 15px;
  color: #4a3e3a;
  border: 1px solid #e6e0d6;
  border-radius: 12px;
  padding: 9px 38px 9px 12px;
  cursor: pointer;
  background: #fcf8f1
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18'%3E%3Cpath d='M2 7l4-4 4 4M2 11l4 4 4-4' fill='none' stroke='%2386776f' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 14px center / 10px 15px;
  -webkit-tap-highlight-color: transparent;
}
.zp-tzbtn:focus,
.zp-tzbtn:focus-visible {
  outline: none;
}
.zp-tzbtn:focus-visible {
  border-color: #cfc4b5;
}
.zp-tzlist {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: 320px;
  overflow-y: auto;
  background: #fcf8f1;
  border: 1px solid #e6e0d6;
  border-radius: 12px;
  box-shadow: 0 18px 30px -18px rgba(92, 78, 66, 0.45);
  scrollbar-width: thin;
  scrollbar-color: #d8cfc2 transparent;
  animation: zpDrop 0.18s ease-out;
  transform-origin: top center;
}
@keyframes zpDrop {
  from {
    opacity: 0;
    transform: scaleY(0.92);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.zp-tzlist li {
  font-size: 15px;
  color: #4a3e3a;
  padding: 8px 10px;
  border-radius: 9px;
  cursor: pointer;
}
.zp-tzlist li:hover {
  background: #f3ece0;
}
.zp-tzlist li.on {
  background: #fbe9a8;
}
.zp-soon {
  line-height: 1.55;
  max-width: 440px;
}
/* шапка: «О нас · Услуги · Журнал» по низу вровень с «Родной язык, культура и обычаи детям»;
   точка «новое» у «Журнала» — на одной линии с кружком праздника */
@media (min-width: 701px) {
  .topnav {
    position: relative;
    top: 7.8px;
  }
}
/* помощник: сразу форма с подписью «Есть вопрос или хочешь сообщить об ошибке? Напиши нам» */
.hp-panel.form .hp-t {
  display: block !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 1.4;
  color: #4a3e3a;
  margin: 4px 40px 12px 2px !important;
}
.hp-panel.form #hpForm {
  padding-top: 0 !important;
}

/* ---------- «Словарик»: две карточки — открытая и закрытая знаком вопроса; бирюзовый ---------- */
.playbar.k-dict {
  background: #45bcc0;
}
body.playing #v-words .page {
  padding-top: 22px;
}
.dk {
  max-width: 856px;
}
.dk-prog .fbar i {
  background: #45bcc0 !important;
}
.dk-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin: 18px 0 8px;
  perspective: 1200px;
}
.dk-card {
  position: relative;
  min-height: 210px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  padding: 22px 24px;
  text-align: center;
  font: inherit;
  color: #4a3e3a;
}
.dk-open {
  background: #fcf8f1;
  border: 1px solid #e6e0d6;
}
.dk-shut {
  border: 0;
  cursor: pointer;
  background: linear-gradient(145deg, #5ccaca, #38b3b8);
  box-shadow: 0 16px 28px -18px rgba(46, 158, 162, 0.9);
  transition:
    transform 0.5s cubic-bezier(0.3, 0.7, 0.3, 1),
    background 0.01s 0.25s,
    box-shadow 0.3s;
  -webkit-tap-highlight-color: transparent;
}
.dk-shut:hover:not(.flip) {
  transform: translateY(-3px);
}
.dk-q {
  font-size: 72px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  text-shadow: 0 2px 4px rgba(20, 90, 92, 0.25);
  transition: opacity 0.01s 0.25s;
}
.dk-in {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px 24px;
  opacity: 0;
  transform: rotateY(180deg);
  transition: opacity 0.01s 0.25s;
}
.dk-shut.flip {
  transform: rotateY(180deg);
  background: #eef9f9;
  box-shadow: inset 0 0 0 1.5px #45bcc0;
  cursor: default;
}
.dk-shut.flip .dk-q {
  opacity: 0;
}
.dk-shut.flip .dk-in {
  opacity: 1;
}
.dk-shut:disabled {
  color: inherit;
}
.dk-w {
  font-size: 34px;
  font-weight: 700;
  color: #4a3e3a;
}
.dk-d {
  font-size: 19px;
  line-height: 1.45;
  color: #5f514b;
}
.dk-btns {
  margin-top: 16px !important;
}
.dk-btns[hidden] {
  display: none !important;
}
#dkRes {
  margin-top: 26px;
}
@media (max-width: 640px) {
  .dk-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .dk-card {
    min-height: 150px;
  }
  .dk-w {
    font-size: 28px;
  }
  .tf-b.dk-yes,
  .tf-b.dk-no {
    min-width: 0 !important;
    flex: 1;
  }
}
/* «Словарик» — голубой, как «Литература» */
.playbar.k-dict {
  background: #3494e3;
}
.dk-prog .fbar i {
  background: #3494e3 !important;
}
.dk-shut {
  background: linear-gradient(145deg, #5aa9ec, #2f88d8);
  box-shadow: 0 16px 28px -18px rgba(42, 120, 200, 0.9);
}
.dk-q {
  text-shadow: 0 2px 4px rgba(20, 70, 130, 0.25);
}
.dk-shut.flip {
  background: #eef5fd;
  box-shadow: inset 0 0 0 1.5px #3494e3;
}
/* экран итога «Словарика» и чтения — голубой, как «Литература» */
#dkRes .res-again {
  background: #3494e3 !important;
  color: #fff !important;
}
#dkRes .rd.f {
  background: #3494e3 !important;
}

/* плашка открытой игры, книги, словарика — закреплена наверху экрана и не дёргается при прокрутке */
.playbar {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  transform: translateZ(0);
}
body.playing {
  padding-top: var(--pbh, 64px);
}

/* помощник: подсказка прямо в поле (бледная, исчезает при вводе), рамка поля мягкая */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.hp-panel.form .hp-t {
  display: block !important;
}
.hp-panel.form #hpForm {
  padding-top: 38px !important;
}
#hpText {
  border: 1px solid #ebe4d8 !important;
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  line-height: 1.45;
  color: #4a3e3a;
}
#hpText:focus {
  border-color: #d8cfc2 !important;
}
#hpText::placeholder {
  color: #bcb1a8;
}
/* «Обычаи»: название и дата праздника — красные, как BRAVO в логотипе */
.obc .obc-h h2,
.obc .obc-h small {
  color: #e6261f !important;
}
/* помощник: срез черепашки — точно по краю экрана, без тени у среза; облачко чуть выше */
.hp-btn {
  filter: none !important;
  margin-right: -21px !important;
}
.hp-btn img {
  filter: drop-shadow(-4px 8px 8px rgba(74, 62, 58, 0.16));
  clip-path: inset(-30px 0 -30px -30px);
}
.hp-cloud .hc3 {
  top: -4px !important;
}
.hp-cloud .hc2 {
  top: -20px !important;
}
.hp-cloud .hc1 {
  top: -52px !important;
}
/* «Онлайн-занятия»: черепашка левее */
.t-lesson .sprite-big {
  left: -18px;
}

/* ---------- черепашка-помощник: крупнее и «живая» (js/37-turtle-live.js) ---------- */
.hp-btn .tt {
  position: relative;
  display: block;
  height: 150px;
  transform-origin: 100% 100%;
  transition: transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.hp-btn .tt-body {
  position: relative;
  display: block;
  height: 100%;
  transform-origin: 100% 85%;
}
.hp-btn .tt img {
  height: 150px !important;
  width: auto;
  display: block;
  transform: none !important;
}
.hp-btn .tt-live {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.hp-btn:hover .tt {
  transform: translateX(-8px) rotate(-4deg);
}
.helper.open .hp-btn .tt,
.helper.open .hp-btn:hover .tt {
  transform: translateX(-14px) rotate(-8deg);
}
@media (max-width: 600px) {
  .hp-btn .tt,
  .hp-btn .tt img {
    height: 116px !important;
  }
}

/* помощник: средний размер между прежним и крупным */
.hp-btn .tt,
.hp-btn .tt img {
  height: 126px !important;
}
@media (max-width: 600px) {
  .hp-btn .tt,
  .hp-btn .tt img {
    height: 104px !important;
  }
}

/* лапки держатся за стенку неподвижно: в качающемся слое на их месте «окошко», сверху — неподвижные лапки */
.hp-btn .tt-body {
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20352%20440%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cmask%20id%3D%22m%22%3E%3Crect%20x%3D%22-10%22%20y%3D%22-10%22%20width%3D%22372%22%20height%3D%22460%22%20fill%3D%22%23fff%22/%3E%3Cpath%20d%3D%22M300%204%20L318%202%20L338%2010%20L348%2030%20L350%2052%20L344%2062%20L346%2082%20L338%2098%20L326%20104%20L326%20142%20L318%20142%20L308%20124%20L298%20110%20L288%2098%20L280%2088%20L275%2070%20L276%2042%20L284%2020%20Z%20M298%20256%20L315%20258%20L326%20266%20L334%20286%20L334%20312%20L332%20338%20L322%20354%20L312%20366%20L295%20376%20L275%20372%20L262%20360%20L255%20340%20L253%20315%20L258%20292%20L268%20274%20L282%20262%20Z%22%20fill%3D%22%23000%22%20stroke%3D%22%23fff%22%20stroke-width%3D%223%22%20stroke-linejoin%3D%22round%22/%3E%3C/mask%3E%3C/defs%3E%3Crect%20width%3D%22352%22%20height%3D%22440%22%20fill%3D%22%23000%22%20mask%3D%22url%28%23m%29%22/%3E%3C/svg%3E")
    0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20352%20440%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cmask%20id%3D%22m%22%3E%3Crect%20x%3D%22-10%22%20y%3D%22-10%22%20width%3D%22372%22%20height%3D%22460%22%20fill%3D%22%23fff%22/%3E%3Cpath%20d%3D%22M300%204%20L318%202%20L338%2010%20L348%2030%20L350%2052%20L344%2062%20L346%2082%20L338%2098%20L326%20104%20L326%20142%20L318%20142%20L308%20124%20L298%20110%20L288%2098%20L280%2088%20L275%2070%20L276%2042%20L284%2020%20Z%20M298%20256%20L315%20258%20L326%20266%20L334%20286%20L334%20312%20L332%20338%20L322%20354%20L312%20366%20L295%20376%20L275%20372%20L262%20360%20L255%20340%20L253%20315%20L258%20292%20L268%20274%20L282%20262%20Z%22%20fill%3D%22%23000%22%20stroke%3D%22%23fff%22%20stroke-width%3D%223%22%20stroke-linejoin%3D%22round%22/%3E%3C/mask%3E%3C/defs%3E%3Crect%20width%3D%22352%22%20height%3D%22440%22%20fill%3D%22%23000%22%20mask%3D%22url%28%23m%29%22/%3E%3C/svg%3E")
    0 0 / 100% 100% no-repeat;
}
.hp-btn .tt-paws {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hp-btn .tt-body {
  transform-origin: 100% 50% !important;
}

/* качается только внутренний слой; «окошко» под лапки стоит на месте */
.hp-btn .tt-move {
  position: relative;
  display: block;
  height: 100%;
}
.hp-btn .tt-body {
  transform: none !important;
}
/* помощник: картинка внутри «живой» черепашки никогда не двигается сама — наклон только у всей .tt,
   иначе веки и улыбка съезжают; тень — у всей черепашки целиком, а не у картинки под маской */
.helper .hp-btn .tt img,
.helper .hp-btn:hover .tt img,
.helper.open .hp-btn .tt img,
.helper.open .hp-btn:hover .tt img {
  transform: none !important;
  transition: none !important;
  filter: none !important;
  clip-path: none !important;
}
.hp-btn .tt {
  filter: drop-shadow(-4px 8px 8px rgba(74, 62, 58, 0.16));
}
.helper.open .hp-cloud {
  transform: translateX(-14px) rotate(-8deg);
}

/* пузырьки мысли над черепашкой: между «мыслями» их нет; появляются по очереди, верхний всплывает и лопается */
.helper:not(.open) .hp-cloud i {
  opacity: 0;
}
.helper:not(.open) .hp-cloud.bub .hc3 {
  animation: bub3 3.6s ease-out both;
}
.helper:not(.open) .hp-cloud.bub .hc2 {
  animation: bub2 3.6s ease-out both;
}
.helper:not(.open) .hp-cloud.bub .hc1 {
  animation: bub1 3.6s ease-out both;
}
@keyframes bub3 {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }
  9% {
    opacity: 1;
    transform: scale(1.1);
  }
  14%,
  72% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.6);
  }
}
@keyframes bub2 {
  0%,
  13% {
    opacity: 0;
    transform: scale(0.2);
  }
  23% {
    opacity: 1;
    transform: scale(1.1);
  }
  28%,
  76% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.6);
  }
}
@keyframes bub1 {
  0%,
  27% {
    opacity: 0;
    transform: translateY(0) scale(0.2);
  }
  38% {
    opacity: 1;
    transform: translateY(-2px) scale(1.08);
  }
  44% {
    opacity: 1;
    transform: translateY(-3px) scale(1);
  }
  72% {
    opacity: 1;
    transform: translateY(-12px) scale(1.02);
  }
  78% {
    opacity: 0.6;
    transform: translateY(-14px) scale(1.45);
  }
  84%,
  100% {
    opacity: 0;
    transform: translateY(-15px) scale(1.7);
  }
}
@media (prefers-reduced-motion: reduce) {
  .helper:not(.open) .hp-cloud i {
    opacity: 1;
    animation: none !important;
  }
}

/* логотип по-русски: «Наследие детям» мельче и ближе к «БРАВО», подпись крупнее */
.logo b {
  justify-content: flex-start !important;
}
.logo b i {
  font-size: 20px !important;
  margin-left: 3px !important;
}
.logo small {
  font-size: 15.5px !important;
  letter-spacing: 0;
}
/* верхняя строка и кружочки ближе к подписи */
.logo b {
  margin-bottom: -4px !important;
}
.logo .logo-dots {
  transform: translateY(2px);
}

/* логотип крупнее: растёт вверх и вправо, нижняя строка на прежнем месте */
.logo {
  gap: 10px !important;
}
.logo-dots {
  width: 56px !important;
  height: 46px !important;
}
.logo b {
  font-size: 36px !important;
}
.logo b i {
  font-size: 22px !important;
  margin-left: 10px !important;
}
.logo small {
  letter-spacing: 0.01em !important;
}
@media (max-width: 560px) {
  .logo-dots {
    width: 44px !important;
    height: 40px !important;
  }
  .logo b {
    font-size: 30px !important;
  }
  .logo b i {
    font-size: 19px !important;
    margin-left: 8px !important;
  }
}
.logo b {
  margin-bottom: 0 !important;
}
@media (max-width: 700px) {
  header .bar {
    padding-top: 6px !important;
  }
}
.logo b i {
  margin-left: 6px !important;
}

/* ---------- «Услуги»: портал — круглая прорезь в фоне, из неё к нам выходит черепашка ---------- */
.svc-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
}
#v-services .svc-hero h2.svc-top {
  font-size: clamp(22px, 2.6vw, 32px) !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  max-width: 620px;
  text-wrap: balance;
  margin: 0 0 18px !important;
}
.portal {
  width: 360px;
  margin: 70px 10px 8px 0;
  position: relative;
  z-index: 2;
}
.portal svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.pt-turtle {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
#v-services.show .pt-turtle {
  animation:
    ptRise 1s cubic-bezier(0.25, 1.35, 0.5, 1) both,
    ptBreathe 3.6s ease-in-out 1s infinite;
}
@keyframes ptRise {
  from {
    transform: translateY(150px);
  }
  to {
    transform: none;
  }
}
@keyframes ptBreathe {
  0%,
  100% {
    transform: none;
  }
  50% {
    transform: translateY(-5px);
  }
}
@media (max-width: 700px) {
  .svc-hero {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }
  .portal {
    width: 280px;
    margin: 50px 0 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #v-services.show .pt-turtle {
    animation: none;
  }
}

/* ---------- «Услуги»: большая дыра рваной бумаги справа на 2/3, черепашка выходит, плашки висят поверх ---------- */
.svc-stage {
  position: relative;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  min-height: 60cqw;
  padding-top: 8cqw;
}
.svc-stage .portal {
  position: absolute;
  top: -2cqw;
  right: -3cqw;
  width: 66cqw;
  margin: 0;
  z-index: 1;
}
.svc-stage .portal svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
#v-services .svc-stage h2.svc-top {
  position: relative;
  z-index: 2;
  width: 36cqw;
  font-size: clamp(26px, 3.4cqw, 44px) !important;
  line-height: 1.18 !important;
  font-weight: 800 !important;
  text-wrap: balance;
  margin: 0 !important;
}
.svc-stage .info-grid {
  position: relative;
  z-index: 3;
  margin-top: auto;
}
.svc-stage .panel.svc {
  box-shadow: 0 26px 40px -22px rgba(92, 70, 40, 0.5) !important;
}
#v-services .inner {
  overflow: visible !important;
}
@media (max-width: 760px) {
  .svc-stage {
    min-height: 0;
    padding-top: 0;
  }
  .svc-stage .portal {
    position: relative;
    top: 0;
    right: 0;
    width: 104%;
    margin: -10px -2% -38%;
    order: 2;
  }
  #v-services .svc-stage h2.svc-top {
    width: auto;
    order: 1;
    margin-top: 8px !important;
  }
  .svc-stage .info-grid {
    order: 3;
  }
}
.svc-stage {
  padding-top: 11cqw;
  min-height: 66cqw;
}
.svc-stage .portal {
  top: 3cqw;
}
#v-services .inner,
#v-services .page {
  background: transparent !important;
}
#v-services {
  background: linear-gradient(180deg, #f6ecd9 0%, #f3ede4 45%, #efece7 100%);
}
@media (max-width: 760px) {
  .svc-stage {
    padding-top: 0;
    min-height: 0;
  }
  .svc-stage .portal {
    top: 0;
  }
}

/* «Услуги»: слоган, три плашки внизу, крупные заголовки по центру */
.svc-head {
  position: relative;
  z-index: 2;
  width: 38cqw;
  display: grid;
  gap: 16px;
}
#v-services .svc-stage h2.svc-top {
  width: auto;
  font-size: clamp(30px, 4.4cqw, 58px) !important;
  line-height: 1.08 !important;
}
.svc-sub {
  font-size: clamp(16px, 1.5cqw, 19px);
  line-height: 1.5;
  color: #6f625b;
  max-width: 34ch;
  margin: 0;
}
.svc-stage .info-grid {
  gap: 20px !important;
}
.svc-stage .panel.svc {
  text-align: center;
  padding: 26px 30px 24px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.svc-stage .panel.svc h3 {
  font-size: clamp(24px, 2.4cqw, 30px) !important;
  margin: 0 0 4px !important;
  line-height: 1.15;
}
.svc-stage .panel.svc p {
  margin: 0 !important;
  max-width: 34ch;
}
.svc-stage .panel.svc .svc-go {
  margin-top: auto;
  padding-top: 8px;
}
@media (max-width: 760px) {
  .svc-head {
    width: auto;
    order: 1;
    margin-top: 8px;
  }
}
/* всё в один экран: дыра по высоте окна, плашки внизу видны сразу */
@media (min-width: 761px) {
  .svc-stage {
    min-height: calc(100dvh - 120px);
    padding-top: 5vh;
    padding-bottom: 24px;
  }
  .svc-stage .portal {
    top: 0;
    width: min(62cqw, calc(100dvh - 190px));
    right: 0;
  }
  .svc-stage .panel.svc {
    padding: 20px 26px 18px !important;
  }
  .svc-stage .panel.svc p {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }
}
.svc-stage .panel.svc .svc-go {
  align-self: center;
}
@media (max-width: 760px) {
  #v-services .svc-head h2.svc-top {
    order: 0;
    margin-top: 0 !important;
  }
}
/* «Услуги»: плашки выше, заголовки крупнее; слоган — фирменным бирюзовым */
@media (min-width: 761px) {
  .svc-stage .panel.svc {
    min-height: 290px;
    justify-content: flex-start;
    padding-top: 30px !important;
  }
}
.svc-stage .panel.svc h3 {
  font-size: clamp(26px, 2.9cqw, 36px) !important;
  margin-bottom: 8px !important;
}
#v-services .svc-stage h2.svc-top {
  color: #2a9fa3 !important;
}
#v-services .svc-stage .panel.svc h3 {
  font-size: clamp(26px, 2.9cqw, 36px) !important;
  line-height: 1.15 !important;
  margin-bottom: 8px !important;
}
@media (min-width: 761px) and (max-height: 780px) {
  .svc-stage .panel.svc {
    min-height: 0;
  }
  .svc-stage .info-grid {
    margin-top: 28px;
  }
}
/* «Покров» в шапке крупнее */
@media (min-width: 701px) {
  .hdr-hol b {
    font-size: 19px !important;
  }
  .hdr-hol small {
    font-size: 13.5px !important;
  }
  .hdr-hol .hh-dot {
    width: 12px !important;
    height: 12px !important;
  }
}
@media (min-width: 701px) {
  .topnav {
    top: 10.3px !important;
  }
}
/* «Услуги»: верх плашек на прежнем уровне, низ поднят — ссылка сразу под текстом; ниже сразу виден первый ряд */
@media (min-width: 761px) {
  .svc-stage {
    min-height: 0 !important;
    padding-bottom: 0 !important;
  }
  .svc-head {
    min-height: calc(100dvh - 434px - 5vh);
    align-content: start;
  }
  .svc-stage .info-grid {
    margin-top: 0 !important;
  }
  .svc-stage .panel.svc {
    min-height: 0 !important;
    padding: 24px 26px 22px !important;
  }
}
#v-services .svc-stage .panel.svc h3 {
  font-size: clamp(21px, 2.1cqw, 26px) !important;
  margin-bottom: 4px !important;
}
#v-services .svc-stage .panel.svc .svc-go {
  margin-top: 6px;
  padding-top: 0;
  align-self: center;
}
#v-services .svc-stage .panel.svc:hover .svc-go {
  color: #86776f !important;
  border-bottom-color: #cbbfae;
}
#v-services .svc-stage + *,
#v-services .page {
  padding-top: 0;
}
@media (min-width: 761px) {
  .svc-stage .svc-head {
    padding-bottom: 22px;
    box-sizing: border-box;
  }
}
/* логотип: слова качаются, как поплавки */
.logo .lg-word {
  display: inline-block;
  transform-origin: 50% 85%;
  will-change: transform;
}
/* нажатие без тёмного квадрата: кнопки и плашки мягко продавливаются */
html {
  -webkit-tap-highlight-color: transparent;
}
a,
button {
  -webkit-tap-highlight-color: transparent;
}
:focus:not(:focus-visible) {
  outline: none;
}
.is-pressed {
  scale: 0.95;
  translate: 0 2px;
  transition:
    scale 0.1s ease-out,
    translate 0.1s ease-out !important;
}
.press-back {
  transition:
    scale 0.4s cubic-bezier(0.3, 1.8, 0.5, 1),
    translate 0.4s cubic-bezier(0.3, 1.8, 0.5, 1) !important;
}
a.t.is-pressed,
a.panel.is-pressed {
  scale: 0.97;
}
a.t.t-sm.is-pressed,
.cube.is-pressed {
  scale: 0.95;
  translate: 0 3px;
}
/* «Услуги»: «Записаться», «Открыть», «Смотреть пособия» — на одном уровне */
#v-services .svc-stage .info-grid {
  align-items: stretch !important;
}
#v-services .svc-stage .panel.svc .svc-go {
  margin-top: auto !important;
}
#v-services .svc-stage .panel.svc p {
  margin-bottom: 8px !important;
}
/* «Услуги»: крупный слоган в две строки шире плашки, плашки выше, все три ряда «Если…» входят в экран; справа — воздух */
@media (min-width: 761px) {
  .svc-stage {
    padding-top: 3.2vh !important;
  }
  .svc-stage .svc-head {
    min-height: 0 !important;
    width: min(64cqw, 820px) !important;
    padding-bottom: 3.4vh !important;
    gap: 12px !important;
  }
  #v-services .svc-stage h2.svc-top {
    font-size: clamp(34px, 4.6cqw, 62px) !important;
    line-height: 1.06 !important;
    text-wrap: balance;
  }
  .svc-sub {
    max-width: 52ch !important;
  }
  .svc-stage .panel.svc {
    padding: 20px 24px 18px !important;
  }
  #v-services .inner {
    padding-bottom: 0 !important;
  }
  #v-services .page {
    padding-top: 0 !important;
  }
  .svc-pains {
    margin-top: 28px !important;
    gap: 12px 34px !important;
  }
}
@media (min-width: 761px) {
  .svc-stage {
    padding-top: 2.2vh !important;
  }
  .svc-sub {
    max-width: 72ch !important;
  }
  .svc-stage .panel.svc p {
    max-width: 44ch !important;
  }
}
@media (min-width: 761px) {
  #v-services .svc-stage .panel.svc p {
    max-width: 44ch !important;
  }
}
@media (min-width: 761px) {
  .svc-stage .svc-head {
    width: min(80cqw, 980px) !important;
    padding-bottom: 2.6vh !important;
  }
  .svc-pains {
    margin-top: 22px !important;
  }
}
@media (max-width: 760px) {
  .svc-sub br {
    display: none;
  }
  .svc-stage .svc-head {
    margin-bottom: 18px;
  }
}
/* большие плашки урока и пособий стоят на месте — двигается и нажимается только кнопка */
a.t.t-lesson,
a.t.t-mats,
a.t.t-lesson:hover,
a.t.t-mats:hover {
  transform: none !important;
  translate: none !important;
  scale: none !important;
}
a.t.t-lesson:hover,
a.t.t-mats:hover {
  box-shadow: var(--shadow) !important;
}
a.t.t-lesson:hover .pop,
a.t.t-lesson:hover img,
a.t.t-mats:hover img {
  transform: none !important;
}
@media (max-width: 1060px), (max-height: 620px) {
  a.t-mats:hover .pop.mats-tur {
    transform: translateX(-50%) !important;
  }
}
/* иконки на нижних плашках: чуть крупнее, без лишнего вокруг */
@media (min-width: 761px) {
  .sm-row .t-sm .pop.smi {
    width: 100px !important;
    height: 100px !important;
    right: 6px !important;
  }
  .sm-row .t-sm h3,
  .sm-row .t-sm p {
    padding-right: 86px !important;
  }
}
/* «Услуги»: восемь пунктов пользы (по четыре с каждой стороны) над тремя плашками */
.svc-pains p.g::before {
  background: #f5953a;
}
.svc-pains p.p::before {
  background: #ea6699;
}
.svc-stage .svc-benefits {
  position: relative;
  z-index: 2;
  margin: 0 0 30px !important;
  gap: 14px 48px !important;
}
.svc-benefits span {
  text-align: left !important;
  hyphens: manual !important;
}
.svc-benefits p::before {
  top: 5px !important;
}
@media (min-width: 761px) {
  .svc-stage .svc-head {
    padding-bottom: 26px !important;
  }
}
@media (max-width: 760px) {
  .svc-stage .svc-benefits {
    order: 2;
    grid-template-columns: 1fr !important;
  }
  .svc-stage .info-grid {
    order: 3;
  }
}
@media (min-width: 761px) {
  .svc-stage .svc-benefits {
    margin-top: max(20px, calc(55dvh - 400px)) !important;
  }
}
/* пункты пользы тише плашек: светлее текст, кружочки меньше и мягче */
#v-services .svc-benefits span {
  color: #978a82 !important;
}
.svc-benefits p::before {
  width: 10px !important;
  height: 10px !important;
  top: 6px !important;
  opacity: 0.75;
  box-shadow: none !important;
}
/* пункты пользы свободнее: выше, шире, больше воздуха до плашек */
@media (min-width: 761px) {
  .svc-stage .svc-benefits {
    margin-top: max(12px, 3vh) !important;
    margin-bottom: max(40px, 7vh) !important;
    gap: max(22px, 3.4vh) 88px !important;
  }
}

/* ================= проба нового дизайна (#try): на весь экран, плоские картинки ================= */
.try-promo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0 0 22px;
  padding: 14px 18px;
  border: 2px dashed #f1c7d8;
  border-radius: 18px;
  background: #fff7fa;
}
.try-promo b {
  color: #ea6699;
  margin-right: 6px;
}
.try-promo a {
  color: #4a3e3a;
  text-decoration: none;
  border-bottom: 1px solid #e3cbd4;
}
#v-try {
  position: relative;
  padding: 0 !important;
}
.try-top {
  position: absolute;
  z-index: 6;
  top: 16px;
  left: 24px;
  right: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
.try-top > * {
  pointer-events: auto;
}
#v-try .back {
  margin: 0 !important;
  background: rgba(255, 255, 255, 0.85) !important;
  color: #4a3e3a !important;
}
.try-tabs {
  display: flex;
  gap: 6px;
}
.try-tabs a {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px dashed rgba(74, 62, 58, 0.35);
  color: #4a3e3a;
  background: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  font-size: 14px;
}
.try-tabs a.on {
  border-style: solid;
  border-color: #4a3e3a;
  background: #fff;
}
.tp {
  position: relative;
  overflow: hidden;
  min-height: calc(100dvh - 80px);
  --gy: calc(100vw * 124 / 1440);
}
.tp-deco {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
}
#v-try .tr-title {
  font-family: "Caveat", "Rubik", sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(44px, 5vw, 76px) !important;
  line-height: 1 !important;
  color: #3a302d !important;
  margin: 0 0 10px !important;
  letter-spacing: 0 !important;
}
.hl {
  position: relative;
  z-index: 0;
  padding: 0 12px;
  white-space: nowrap;
}
.hl::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -4px;
  right: -8px;
  top: 18%;
  bottom: 0;
  background: #fbd96a;
  border-radius: 40% 18% 46% 12% / 60% 30% 70% 40%;
  transform: rotate(-3deg);
  opacity: 0.85;
}
.hl-blue::before {
  background: #a9d6f3;
}
.hl-teal::before {
  background: #a6e1e2;
}
.tr-sub {
  color: #6f625b;
  margin: 0 0 22px;
  font-size: 17px;
}
.tr-n {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  display: inline-grid;
  place-items: center;
}
.tr-slot {
  display: inline-grid;
  place-items: center;
  min-width: 100px;
  height: 40px;
  padding: 0 12px;
  border: 2px dashed #9fcbe9;
  border-radius: 12px;
  background: #fff;
  font-weight: 600;
  font-size: 17px;
  color: #3494e3;
  cursor: pointer;
}
.tr-slot.full {
  border-style: solid;
  border-color: #3494e3;
  background: #eef6fd;
}
.tr-chip {
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border: 0;
}
.tr-chip.on {
  outline: 3px solid #3a302d;
  outline-offset: 3px;
}
.tr-chip.used {
  opacity: 0.25;
  pointer-events: none;
}
.tr-slot.ok,
.tp3-house.ok .tp3-win {
  background: #eaf8ef !important;
  border-color: #5bbf83 !important;
  color: #2f8a55 !important;
}
.tr-slot.bad,
.tp3-house.bad .tp3-win {
  background: #fff0f3 !important;
  border-color: #ef8aa6 !important;
  color: #c2386f !important;
  animation: trShake 0.35s;
}
@keyframes trShake {
  25% {
    translate: -4px 0;
  }
  75% {
    translate: 4px 0;
  }
}
.tr-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.tr-msg {
  margin: 0;
  color: #6f625b;
  font-size: 16px;
}
.tr-msg b {
  color: #2f8a55;
}
.tr-btns {
  display: flex;
  gap: 10px;
}
.tr-check {
  margin-left: auto;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 0;
  background: #fbd96a;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow:
    0 4px 0 #e0ba3e,
    0 12px 20px -10px rgba(120, 90, 0, 0.5);
  cursor: pointer;
}
.tr-check svg {
  width: 30px;
  height: 30px;
}
.tr-msg:empty + .tr-check,
.tr-check:only-child {
  margin-left: auto;
}

/* 1 — небо, белая клякса, слова-облачка */
.tp1 {
  background: linear-gradient(180deg, #cfe8f7 0%, #e6f4fc 70%);
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: center;
  gap: 2vw;
  padding: 76px 4vw calc(var(--gy) + 10px);
}
.tp1-blob {
  position: relative;
  z-index: 2;
  background: #fff;
  padding: 48px 64px 40px 60px;
  border-radius: 58% 42% 52% 48% / 46% 54% 46% 54%;
  border-radius: 64px 120px 90px 140px / 90px 70px 120px 80px;
  box-shadow: 0 30px 60px -40px rgba(20, 80, 120, 0.45);
}
.tp1-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.tp1-list li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  font-size: 19px;
  color: #3a302d;
}
.tp1-list small {
  color: #9a8d84;
  font-size: 16px;
}
.tp1-list small::before {
  content: "— ";
}
.tp1-clouds {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px 30px;
  padding: 20px 0 90px;
}
.tp1-cloud {
  position: relative;
  background: #fff;
  color: #3a302d;
  font-size: 22px;
  padding: 18px 30px 14px;
  border-radius: 999px;
  box-shadow: 0 14px 24px -16px rgba(20, 80, 120, 0.5);
  animation: tpFloat 4s ease-in-out infinite;
}
.tp1-cloud::before,
.tp1-cloud::after {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 50%;
  z-index: -1;
}
.tp1-cloud::before {
  width: 44px;
  height: 44px;
  top: -18px;
  left: 18%;
}
.tp1-cloud::after {
  width: 34px;
  height: 34px;
  top: -12px;
  right: 22%;
}
.tp1-cloud.k1 {
  animation-delay: -1s;
  translate: 0 30px;
}
.tp1-cloud.k2 {
  animation-delay: -2s;
  translate: 20px -10px;
}
.tp1-cloud.k3 {
  animation-delay: -3s;
  translate: -10px 24px;
}
@keyframes tpFloat {
  50% {
    transform: translateY(-8px);
  }
}
.tp1-arrow {
  position: absolute;
  left: -60px;
  bottom: 0;
  width: 170px;
}

/* 2 — поезда: жёлтая полоса слева, рельсы справа */
.tp2 {
  background: linear-gradient(100deg, #fbd96a 0 33%, #fffaf0 33%);
  display: grid;
  grid-template-columns: 30% 1fr;
  gap: 5vw;
  padding: 76px 4vw 60px;
}
.tp2-side {
  position: relative;
  z-index: 2;
  padding-top: 30px;
}
#v-try .tp2-title {
  font-family: "Rubik", sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  font-size: clamp(44px, 5.4vw, 84px) !important;
  line-height: 0.92 !important;
  color: #3a302d !important;
  margin: 0 0 22px !important;
}
.tp2-note {
  font-family: "Caveat", "Rubik", sans-serif;
  font-size: 26px;
  line-height: 1.15;
  color: #5c4a2a;
  margin: 0 0 16px;
  max-width: 16em;
}
.tp2-tip {
  display: inline-block;
  font-size: 15.5px;
  font-weight: 600;
  background: #fff;
  border-radius: 999px;
  padding: 8px 16px;
  margin: 0;
  color: #3a302d;
}
.tp2-tur {
  display: block;
  width: min(100%, 300px);
  margin-top: 30px;
}
.tp2-rails {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 4.2vh;
  align-content: center;
}
.tp2-cargo {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.tp2-box {
  background: #f3e3c9;
  color: #5c4a2a;
  font-size: 17px;
  padding: 8px 16px;
  border-radius: 6px;
  box-shadow:
    inset 0 -3px 0 rgba(92, 74, 42, 0.15),
    0 6px 10px -8px rgba(92, 74, 42, 0.6);
  background-image: linear-gradient(
    90deg,
    transparent 44%,
    rgba(255, 255, 255, 0.55) 44% 56%,
    transparent 56%
  );
}
.tp2-cars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding-bottom: 8px;
  background: repeating-linear-gradient(90deg, #8a7a6c 0 18px, transparent 18px 28px) left bottom / 100% 4px
    no-repeat;
  flex-wrap: wrap;
}
.tp2-car {
  position: relative;
  padding: 8px 8px 16px;
  border-radius: 10px;
  background: #fff;
  border: 2.5px solid #d9cbbd;
}
.tp2-train:nth-child(1) .tp2-car {
  border-color: #f2a3a0;
  background: #fff3f2;
}
.tp2-train:nth-child(2) .tp2-car {
  border-color: #a9d0f2;
  background: #f1f8fe;
}
.tp2-train:nth-child(3) .tp2-car {
  border-color: #9fdadc;
  background: #effafa;
}
.tp2-car .tr-slot {
  min-width: 84px;
  height: 36px;
  font-size: 16.5px;
}
.tp2-car i {
  position: absolute;
  bottom: -9px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #3a302d;
  box-shadow:
    inset 0 0 0 4px #3a302d,
    inset 0 0 0 8px #fff;
  left: 14px;
}
.tp2-car i + i {
  left: auto;
  right: 14px;
}
.tp2-end {
  font-size: 30px;
  font-weight: 800;
  color: #b9aa9c;
  align-self: center;
}
.tp2-loco {
  width: 96px;
  margin-left: 4px;
  order: 99;
}
.tp2 .tr-foot {
  margin-top: 0;
}

/* 3 — улица с домиками */
.tp3 {
  background: linear-gradient(180deg, #e8f5fb 0%, #fdfbf6 60%);
  padding: 76px 4vw 0;
  display: flex;
  flex-direction: column;
}
.tp3-head {
  position: relative;
  z-index: 2;
  max-width: 760px;
}
.tp3 > .tr-foot {
  position: absolute;
  z-index: 3;
  top: 90px;
  right: 4vw;
  margin: 0;
  max-width: 440px;
  justify-content: flex-end;
}
.tp3-street {
  position: relative;
  z-index: 2;
  margin-top: auto;
  margin-bottom: calc(var(--gy) - 2px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2.2vw;
  padding: 30px 7vw 0;
}
.tp3-house {
  flex: 1 1 0;
  max-width: 220px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.tp3-house:nth-child(2) .tp3-wall {
  min-height: 250px;
}
.tp3-house:nth-child(4) .tp3-wall {
  min-height: 280px;
}
.tp3-roof {
  position: relative;
  height: 70px;
  margin: 0 -14px;
  background: var(--roof);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  display: grid;
  place-items: end center;
  padding-bottom: 10px;
}
.tp3-roof b {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  color: var(--roof);
  display: grid;
  place-items: center;
  font-size: 15px;
}
.tp3-wall {
  background: var(--wall);
  min-height: 220px;
  padding: 20px 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.tp3-win {
  width: 100%;
  background: #fff;
  border: 5px solid #fff;
  outline: 3px solid var(--roof);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  padding: 4px;
}
.tp3-opt {
  font: inherit;
  font-size: 18px;
  padding: 8px 4px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  border-bottom: 2px dotted #cfc4b8;
  cursor: pointer;
  color: #3a302d;
}
.tp3-opt.on {
  background: #fff3b0;
  border-bottom-color: #e2ae1c;
  font-weight: 700;
  box-shadow: 0 0 18px #ffe58a;
}
.tp3-door {
  margin-top: auto;
  width: 44px;
  height: 64px;
  border-radius: 22px 22px 0 0;
  background: var(--roof);
  opacity: 0.85;
}

@media (max-width: 760px) {
  .try-top {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    padding: 12px 16px 0;
  }
  .tp {
    min-height: 0;
  }
  .tp1,
  .tp2 {
    grid-template-columns: 1fr;
    padding: 16px 16px calc(var(--gy) + 20px);
  }
  .tp1 {
    padding-top: 10px;
  }
  .tp1-blob {
    padding: 30px 24px;
    border-radius: 40px 60px 50px 70px;
  }
  .tp1-clouds {
    order: -1;
    padding: 24px 0 10px;
    gap: 22px 16px;
  }
  .tp1-cloud {
    font-size: 18px;
    padding: 12px 20px 10px;
  }
  .tp1-arrow {
    display: none;
  }
  .tp2 {
    background: linear-gradient(180deg, #fbd96a 0 330px, #fffaf0 330px);
    gap: 26px;
  }
  .tp2-side {
    padding-top: 6px;
  }
  .tp2-tur {
    display: none;
  }
  .tp3 {
    padding: 16px 16px 0;
  }
  .tp3 > .tr-foot {
    position: static;
    margin: 10px 0;
  }
  .tp3-street {
    flex-wrap: wrap;
    padding: 10px 0 0;
    gap: 16px 12px;
  }
  .tp3-house {
    flex: 1 1 40%;
  }
  .tp3-wall,
  .tp3-house:nth-child(n) .tp3-wall {
    min-height: 170px;
  }
}
.tp2-rails {
  padding-right: 70px;
}
.tp1 .tr-foot {
  margin-right: 10px;
}
@media (max-width: 760px) {
  .tp2-rails {
    padding-right: 0;
  }
}
.tr-check[hidden] {
  display: none !important;
}
.tr-btns {
  margin-left: auto;
}
/* упражнение на весь экран: без шапки, подвала и помощника */
body.try-full > header,
body.try-full .site-foot,
body.try-full #helper {
  display: none !important;
}
body.try-full {
  padding-top: 0 !important;
}
body.try-full main,
body.try-full #v-try {
  margin: 0 !important;
  max-width: none !important;
  border-radius: 0 !important;
}
body.try-full .tp {
  min-height: 100dvh;
}
body.try-full .tp1,
body.try-full .tp2,
body.try-full .tp3 {
  padding-top: 72px;
}
#v-try .tp {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* 4 — «книжка»: пятно краски слева, белый лист справа */
.tp4 {
  background: #fdfaf5;
  display: grid;
  grid-template-columns: 46% 1fr;
  padding: 0;
}
.tp4-paint,
.tp4-art {
  position: absolute;
  left: 0;
  top: 0;
  width: 48%;
  height: 100%;
  pointer-events: none;
}
.tp4-sheet {
  grid-column: 2;
  position: relative;
  z-index: 2;
  padding: 90px 5vw 70px 3vw;
  align-self: center;
}
#v-try .tp4-title {
  font-size: clamp(50px, 5.6vw, 84px) !important;
  transform: rotate(-3deg);
  transform-origin: left bottom;
  margin-bottom: 18px !important;
}
.brush {
  position: relative;
  z-index: 0;
  white-space: nowrap;
  padding: 0 14px;
}
.brush::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -10px;
  right: -14px;
  top: 14%;
  bottom: -2%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 80' preserveAspectRatio='none'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05 0.6' numOctaves='2' seed='4'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='14'/%3E%3C/filter%3E%3Cpath filter='url(%23r)' d='M8 30C60 14 180 8 292 16C296 34 290 52 286 62C200 70 90 76 14 70C6 56 4 42 8 30Z' fill='%23a9d6f3'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
}
.tp4 .tr-sub {
  font-size: 18px;
  margin-bottom: 28px;
}
.tp4-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 22px;
}
.tp4-list li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 20px;
  color: #3a302d;
}
.tp4-list small {
  color: #a0938a;
  font-size: 16px;
}
.tp4-list small::before {
  content: "— ";
}
.tp4 .tr-slot {
  border: 2px solid #a9d6f3;
  border-radius: 10px;
  background: #fff;
  min-width: 108px;
}
.tp4 .tr-slot.full {
  background: #eef6fd;
  border-color: #3494e3;
}
.tp4-chips {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 12px 14px;
  margin-top: 34px;
}
.tp4-chip {
  font-size: 19px;
  font-weight: 500;
  padding: 10px 28px;
  border-radius: 12px;
  background: #e3f1fb;
  color: #2f5f86;
}
.tp4-chip:nth-child(2) {
  background: #fde3ec;
  color: #a33d66;
}
.tp4-chip:nth-child(3) {
  background: #fff1c9;
  color: #8a6400;
}
.tp4-chip:nth-child(4) {
  background: #dff4f4;
  color: #1f7d80;
}
.tp4-bush {
  position: absolute;
  right: -40px;
  bottom: -60px;
  width: 240px;
  pointer-events: none;
}
@media (max-width: 760px) {
  .tp4 {
    grid-template-columns: 1fr;
  }
  .tp4-paint,
  .tp4-art {
    position: relative;
    width: 100%;
    height: 420px;
    grid-row: 1;
  }
  .tp4-art {
    position: absolute;
    top: 0;
  }
  .tp4-sheet {
    grid-column: 1;
    padding: 24px 18px 80px;
  }
  .tp4-bush {
    width: 150px;
  }
}
.tp4-bush {
  right: -80px;
  bottom: -100px;
}

/* ================= проба новой главной (#home2) ================= */
.h2-stage {
  position: relative;
  overflow: hidden;
  min-height: calc(100dvh - 80px);
  background: linear-gradient(180deg, #f8f1e6 0 74%, #efe2cc 74%);
  display: grid;
  grid-template-columns: minmax(240px, 25%) 1fr minmax(240px, 23%);
  gap: 26px;
  padding: 34px 3vw 40px;
  align-items: stretch;
}
.h2-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.h2-arch {
  position: absolute;
  bottom: 26%;
  border-radius: 999px 999px 0 0;
  box-shadow:
    inset -26px 0 34px rgba(0, 0, 0, 0.07),
    inset 10px 0 18px rgba(255, 255, 255, 0.35),
    22px 0 40px -20px rgba(120, 90, 40, 0.25);
}
.h2-arch.a1 {
  left: -3%;
  width: 26%;
  height: 64%;
  background: linear-gradient(90deg, #fde596, #fbd96a 40%, #f2c94c);
}
.h2-arch.a2 {
  right: -4%;
  width: 18%;
  height: 78%;
  background: linear-gradient(90deg, #b9dcf6, #8cc9ec 45%, #6fb5e4);
}
.h2-arch.a3 {
  left: 30%;
  width: 12%;
  height: 30%;
  bottom: 26%;
  background: linear-gradient(90deg, #ffd0dd, #f7b4cb 50%, #ee9db9);
  opacity: 0.8;
}
.h2-blob {
  position: absolute;
  border-radius: 50%;
}
.h2-blob.b1 {
  width: 140px;
  height: 140px;
  background: #fbd96a;
  left: -40px;
  top: 30px;
  opacity: 0.9;
}
.h2-blob.b2 {
  width: 90px;
  height: 90px;
  background: #f7b4cb;
  right: 22%;
  bottom: 8%;
}
.h2-blob.b3 {
  width: 60px;
  height: 60px;
  background: #a6e1e2;
  left: 27%;
  top: 12%;
}
.h2-doodle {
  position: absolute;
  left: 19%;
  top: 14%;
  width: 70px;
}
.h2-hello {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
}
.h2-hello h1 {
  font-size: clamp(44px, 4.6vw, 68px);
  font-weight: 800;
  margin: 10px 0 6px;
  color: #3a302d;
}
.h2-hello p {
  font-size: 19px;
  color: #4a3e3a;
  margin: 0;
  max-width: 14em;
}
.h2-bubble {
  position: relative;
  align-self: flex-end;
  margin: 18px 0 -30px;
  width: 150px;
  height: 120px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 18px;
  background: #fff;
  border-radius: 50%;
  font-family: "Caveat", "Rubik", sans-serif;
  font-size: 21px;
  line-height: 1.05;
  color: #3a302d;
  transform: rotate(-8deg);
  box-shadow: 0 10px 22px -14px rgba(92, 70, 40, 0.5);
  z-index: 3;
}
.h2-bubble::after {
  content: "";
  position: absolute;
  left: 26px;
  bottom: -10px;
  border: 12px solid transparent;
  border-top-color: #fff;
  transform: rotate(28deg);
}
.h2-tur {
  margin-top: auto;
  width: 108%;
  max-width: 360px;
  filter: drop-shadow(0 18px 18px rgba(92, 70, 40, 0.3));
}
.h2-main {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 18px;
  background: linear-gradient(160deg, #4aa6ee, #2f86d8);
  border-radius: 30px;
  padding: 22px 24px 24px;
  box-shadow:
    0 30px 50px -30px rgba(30, 90, 160, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.h2-today-h {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
  font-size: 22px;
}
.h2-today .cube {
  min-height: 120px;
}
.h2-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.h2-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 18px;
  border-radius: 20px;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 14px 24px -16px rgba(0, 0, 0, 0.45);
}
.h2-tile b {
  font-size: 20px;
}
.h2-tile small {
  font-size: 13.5px;
  opacity: 0.9;
}
.h2-tile.c-teal {
  background: #45bcc0;
}
.h2-tile.c-yellow {
  background: #f2c94c;
}
.h2-tile.c-blue {
  background: #fff;
  color: #3494e3;
}
.h2-tile.c-blue small {
  color: #6f625b;
}
.h2-side {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 18px;
}
.h2-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px 20px 22px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  color: #3a302d;
  box-shadow: 0 24px 40px -28px rgba(92, 70, 40, 0.5);
  overflow: hidden;
}
.h2-card img {
  position: absolute;
  right: -10px;
  top: 6px;
  height: 58%;
  filter: drop-shadow(0 10px 10px rgba(92, 70, 40, 0.25));
}
.h2-card b {
  display: block;
  font-size: 21px;
}
.h2-card small {
  display: block;
  color: #6f625b;
  font-size: 14.5px;
  margin-top: 4px;
  max-width: 15em;
}
.h2-card .btn {
  align-self: flex-start;
  color: #fff !important;
}
@media (max-width: 1000px) {
  .h2-stage {
    grid-template-columns: 1fr;
  }
  .h2-hello {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
  }
  .h2-tur {
    width: 180px;
  }
  .h2-bubble {
    display: none;
  }
  .h2-row {
    grid-template-columns: 1fr;
  }
}

/* ================= «День в музее» (#try) ================= */
.mu {
  min-height: 100dvh !important;
  padding: 96px 4vw 40px !important;
  display: block !important;
  position: relative;
}
.mu-bar {
  position: absolute;
  z-index: 8;
  top: 14px;
  left: 18px;
  right: 18px;
  height: 58px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 8px 0 10px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  box-shadow: 0 10px 24px -18px rgba(74, 62, 58, 0.6);
}
.mu-home {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #3494e3;
  background: #eef6fd;
}
.mu-home svg {
  width: 22px;
}
.mu-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  gap: 0;
}
.mu-logo i {
  display: inline-block;
  border-radius: 50%;
}
.mu-logo .r {
  width: 16px;
  height: 16px;
  background: #e6261f;
}
.mu-logo .y {
  width: 11px;
  height: 11px;
  background: #fbd96a;
  margin: -10px 0 0 -2px;
}
.mu-logo .b {
  width: 8px;
  height: 8px;
  background: #3494e3;
  margin: 8px 6px 0 -8px;
}
.mu-logo b {
  color: #e6261f;
  font-weight: 800;
  font-size: 20px;
}
.mu-crumb {
  color: #6f625b;
  font-size: 15px;
}
.mu-prog {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #6f625b;
  font-size: 14px;
}
.mu-prog span {
  margin-right: 6px;
}
.mu-prog i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #c9dff2;
}
.mu-prog i.cur {
  border-color: #3494e3;
  border-width: 4px;
}
.mu-prog i.done {
  background: #3494e3;
  border-color: #3494e3;
}
.mu-next {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fbd96a;
  color: #3494e3;
  display: grid;
  place-items: center;
  box-shadow: 0 3px 0 #e0ba3e;
}
.mu-next svg {
  width: 22px;
}
.mu-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.mu-bg .ar {
  position: absolute;
  bottom: 0;
  border-radius: 999px 999px 0 0;
  box-shadow:
    inset -22px 0 30px rgba(0, 0, 0, 0.06),
    inset 10px 0 16px rgba(255, 255, 255, 0.3);
}
.mu-in {
  position: relative;
  z-index: 3;
}
.mu-head {
  text-align: center;
  margin-bottom: 22px;
}
.paint {
  position: relative;
  z-index: 0;
  padding: 0 26px;
  white-space: nowrap;
}
.paint::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 8% -6px -4% -6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 80' preserveAspectRatio='none'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04 0.5' numOctaves='2' seed='9'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='12'/%3E%3C/filter%3E%3Cpath filter='url(%23r)' d='M10 22C80 6 200 4 290 14C296 36 292 58 284 68C190 78 80 78 12 70C4 54 4 38 10 22Z' fill='%23fff'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
}
.paint.p-blue::before {
  filter: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 80' preserveAspectRatio='none'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04 0.5' numOctaves='2' seed='9'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='12'/%3E%3C/filter%3E%3Cpath filter='url(%23r)' d='M10 22C80 6 200 4 290 14C296 36 292 58 284 68C190 78 80 78 12 70C4 54 4 38 10 22Z' fill='%23a9d6f3'/%3E%3C/svg%3E");
}
.mu .tr-sub {
  color: #3a302d;
  margin-top: 8px;
}
.mu .tr-foot {
  max-width: 900px;
  margin: 26px auto 0;
}
.mu-ic {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.mu-tut {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  width: 250px;
  pointer-events: none;
}
.mu-tut img {
  display: block;
  width: 170px;
  margin: 0 -20px -40px auto;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.18));
}
.mu-tut p {
  position: absolute;
  right: 150px;
  bottom: 120px;
  width: 140px;
  margin: 0;
  padding: 16px 14px;
  background: #fff;
  border-radius: 50%;
  text-align: center;
  font-family: "Caveat", "Rubik", sans-serif;
  font-size: 19px;
  line-height: 1.05;
  color: #3a302d;
  transform: rotate(-6deg);
  box-shadow: 0 10px 20px -14px rgba(0, 0, 0, 0.4);
}

/* 1 — коралловый зал */
.mu1 {
  background: #f39a94;
}
.mu1 .ar1 {
  left: -6%;
  width: 22%;
  height: 70%;
  background: linear-gradient(90deg, #8cc9ec, #6fb5e4);
}
.mu1 .ar2 {
  left: 16%;
  width: 66%;
  height: 86%;
  background: linear-gradient(90deg, #f7aaa4, #f4a19b 50%, #ee918b);
}
.mu1 .ar3 {
  right: -3%;
  width: 14%;
  height: 52%;
  background: linear-gradient(90deg, #fde596, #f2c94c);
}
.mu1-rows {
  display: grid;
  gap: 22px;
  max-width: 760px;
  margin: 0 auto;
}
.mu1-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  gap: 28px;
}
.mu1-row .mu-ic {
  height: 110px;
}
.mu1-letters,
.mu1-boxes {
  display: flex;
  gap: 8px;
}
.mu1-boxes {
  margin-top: 10px;
}
.mu1-l,
.mu1-b {
  width: 46px;
  height: 48px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font: inherit;
  font-size: 22px;
  color: #3a302d;
}
.mu1-l {
  border: 0;
  background: #fdf6ec;
  box-shadow: 0 3px 0 #e4cdb3;
  cursor: pointer;
}
.mu1-l.used {
  opacity: 0.3;
  pointer-events: none;
}
.mu1-b {
  background: rgba(255, 255, 255, 0.85);
  border: 2px dashed #fff;
  cursor: pointer;
  font-weight: 600;
}
.mu1-row.ok .mu1-b {
  background: #eaf8ef;
  border: 2px solid #5bbf83;
  color: #2f8a55;
}
.mu1-row.bad .mu1-b {
  background: #fff0f3;
  border: 2px solid #c2386f;
  animation: trShake 0.35s;
}
.mu1 .tr-msg,
.mu3 .tr-msg {
  color: #3a302d;
  font-weight: 600;
}

/* 2 — голубой зал с картинкой слева, вопросы справа */
.mu2 {
  background: linear-gradient(90deg, #5fade9 0 54%, #fbf6ee 54%);
  display: grid !important;
  grid-template-columns: 54% 1fr;
  padding-left: 0 !important;
  padding-right: 3vw !important;
}
.mu2-scene {
  position: relative;
  align-self: end;
}
.mu2-scene svg {
  display: block;
  width: 100%;
  max-height: calc(100dvh - 120px);
}
.mu2-in {
  padding-left: 3vw;
  align-self: center;
}
.mu2-in .mu-head {
  text-align: left;
}
.mu2-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px;
}
.mu2-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.mu2-list p {
  margin: 4px 0 8px;
  font-size: 18px;
  color: #3a302d;
}
.mu2-gap {
  display: inline-block;
  min-width: 60px;
  border-bottom: 2px dotted #9fcbe9;
  text-align: center;
  color: #3494e3;
  font-weight: 700;
}
.mu2-opts {
  display: flex;
  gap: 8px;
}
.mu2-opts button {
  font: inherit;
  font-size: 15.5px;
  padding: 6px 16px;
  border: 0;
  border-radius: 10px;
  background: #e3f1fb;
  color: #2f5f86;
  cursor: pointer;
}
.mu2-opts button.on {
  background: #3494e3;
  color: #fff;
}
.mu2-list li.ok .mu2-gap {
  color: #2f8a55;
  border-color: #5bbf83;
}
.mu2-list li.bad .mu2-gap {
  color: #c2386f;
  border-color: #ef8aa6;
  animation: trShake 0.35s;
}
.mu2 .mu-tut {
  display: none;
}

/* 3 — бирюзовый, белые ряды */
.mu3 {
  background: #45bcc0;
}
.mu3 .ar4 {
  right: -6%;
  width: 34%;
  height: 80%;
  background: linear-gradient(90deg, #6fd0d3, #5ac6ca);
}
.mu3-rows {
  display: grid;
  gap: 16px;
  max-width: 720px;
  margin: 0 auto;
}
.mu3-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  background: #fff;
  border-radius: 22px;
  padding: 12px 18px 12px 34px;
}
.mu3-row .tr-n {
  position: absolute;
  left: -15px;
  top: 50%;
  translate: 0 -50%;
  width: 36px;
  height: 36px;
  border: 3px solid #fff;
}
.mu3-it {
  height: 96px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  cursor: pointer;
  padding: 8px;
}
.mu3-it.on {
  background: #fff6c9;
  box-shadow: inset 0 0 0 3px #f2c94c;
}
.mu3-row.ok .mu3-it.on {
  background: #eaf8ef;
  box-shadow: inset 0 0 0 3px #5bbf83;
}
.mu3-row.bad .mu3-it.on {
  background: #fff0f3;
  box-shadow: inset 0 0 0 3px #ef8aa6;
  animation: trShake 0.35s;
}

/* 4 — «Отлично!» */
.mu4 {
  background: #f8f1e6;
  display: grid !important;
  place-items: center;
}
.mu4 .ar5 {
  left: -4%;
  width: 28%;
  height: 70%;
  background: linear-gradient(90deg, #fde596, #f2c94c);
}
.mu4 .ar6 {
  right: -4%;
  width: 24%;
  height: 84%;
  background: linear-gradient(90deg, #b9dcf6, #6fb5e4);
}
.mu4-confetti i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 12px;
  height: 18px;
  border-radius: 3px;
  background: var(--c);
  transform: rotate(var(--r));
  animation: muConf 3s ease-in-out infinite alternate;
}
@keyframes muConf {
  to {
    translate: 0 14px;
    rotate: 40deg;
  }
}
.mu4-in {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 26px;
  margin-right: 18vw;
}
.mu4-bubble {
  width: 320px;
  height: 260px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  box-shadow: 0 24px 40px -26px rgba(92, 70, 40, 0.5);
  transform: rotate(-4deg);
}
.mu4-bubble svg {
  width: 56px;
}
.mu4-bubble p {
  margin: 0;
  color: #6f625b;
}
.mu4-btns {
  display: grid;
  gap: 12px;
  min-width: 300px;
}
.mu4-btns .btn {
  text-align: center;
  justify-content: center;
}
.mu4-btns .ghost {
  background: #fff !important;
  color: #3494e3 !important;
  box-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.3) !important;
}
.mu4-tur {
  position: absolute;
  z-index: 2;
  right: 8vw;
  bottom: 0;
  height: 74%;
  filter: drop-shadow(0 20px 20px rgba(92, 70, 40, 0.3));
}
@media (max-width: 760px) {
  .mu {
    padding: 84px 14px 160px !important;
  }
  .mu-crumb,
  .mu-logo b {
    display: none;
  }
  .mu-bar {
    gap: 10px;
  }
  .mu1-row {
    grid-template-columns: 70px 1fr;
    gap: 12px;
  }
  .mu1-row .mu-ic {
    height: 70px;
  }
  .mu1-l,
  .mu1-b {
    width: 34px;
    height: 38px;
    font-size: 18px;
  }
  .mu2 {
    grid-template-columns: 1fr;
    background: #fbf6ee;
    padding: 84px 14px 30px !important;
  }
  .mu2-scene {
    background: #5fade9;
    border-radius: 24px;
  }
  .mu2-in {
    padding: 20px 0 0;
  }
  .mu3-it {
    height: 64px;
  }
  .mu4-in {
    margin: 0;
  }
  .mu4-tur {
    height: 34%;
    right: 0;
  }
  .mu-tut {
    width: 150px;
  }
  .mu-tut img {
    width: 110px;
  }
  .mu-tut p {
    display: none;
  }
}
.h2-today .cube {
  position: relative;
}
.h2-ic {
  position: absolute;
  right: 14px;
  top: 50%;
  translate: 0 -50%;
  width: 34%;
  max-width: 120px;
  filter: drop-shadow(0 8px 8px rgba(0, 30, 80, 0.2));
}
.h2-today .cube .ck {
  display: none;
}
.h2-doodle {
  left: 21%;
  top: 4%;
}
.h2-card img {
  height: 52%;
}
.h2-card b {
  max-width: 9em;
}
.mu .tr-sub {
  text-align: center;
}
.mu2-in .tr-sub {
  text-align: left;
}
#v-try .mu .tr-title {
  font-size: clamp(40px, 4.4vw, 64px) !important;
}
#v-try .mu2 .tr-title {
  font-size: clamp(34px, 3.3vw, 50px) !important;
}
.mu .tr-foot {
  justify-content: center;
}
.mu .tr-check {
  margin-left: 0;
}
#v-try .mu4 .tr-title {
  font-size: 54px !important;
  margin: 4px 0 !important;
}
.mu3-it .mu-ic {
  height: 80px;
}
.h2-card img {
  height: 46%;
  top: 0;
}
.h2-mats img {
  height: 40%;
  right: -6px;
}
.h2-card > span:not(.btn) {
  position: relative;
  z-index: 1;
}
.mu .mu-head .tr-sub {
  margin-left: auto;
  margin-right: auto;
}
.mu2-in .mu-head .tr-sub {
  margin-left: 0;
}
@media (min-width: 1001px) {
  .h2-stage {
    padding-right: calc(3vw + 70px);
  }
}
@media (max-width: 700px) {
  .h2-ic {
    top: 12px;
    translate: none;
    width: 38px;
  }
  .h2-doodle {
    display: none;
  }
}

/* ================= проба новой структуры: #home3, #ex3, #read3 ================= */
body.h3-on {
  background: #fbf7f0;
}
#v-home3,
#v-ex3,
#v-read3 {
  background: #fbf7f0;
  padding-bottom: 50px;
}
.h3-hand {
  font-family: "Caveat", "Rubik", sans-serif !important;
  font-weight: 700 !important;
}
.h3-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 26px;
  border-radius: 999px;
  background: linear-gradient(180deg, #3d9cf0, #2580dc);
  color: #fff !important;
  font-weight: 600;
  text-decoration: none;
  box-shadow:
    0 10px 20px -10px rgba(37, 128, 220, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.h3-btn svg {
  width: 20px;
}
.h3-hero {
  position: relative;
  height: min(58vh, 560px);
  min-height: 380px;
  background: #cfe6f5 center 40% / cover no-repeat;
}
.h3-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 70px;
  background: linear-gradient(transparent, #fbf7f0);
}
.h3-today {
  position: absolute;
  z-index: 2;
  right: 4vw;
  top: 50%;
  translate: 0 -50%;
  width: min(340px, 34vw);
  background: rgba(255, 255, 255, 0.96);
  border-radius: 24px;
  padding: 18px 18px 20px;
  box-shadow: 0 30px 50px -28px rgba(20, 50, 90, 0.55);
}
.h3-today-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.h3-today-h b {
  font-size: 18px;
}
.h3-time {
  font-size: 13px;
  color: #8a7d74;
}
.h3-today img {
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  border-radius: 14px;
}
.h3-today h3 {
  font-family: "Caveat", "Rubik", sans-serif;
  font-size: 34px;
  margin: 10px 0 4px;
  color: #3a302d;
}
.h3-today p {
  margin: 0 0 14px;
  font-size: 14.5px;
  color: #6f625b;
  line-height: 1.45;
}
.h3-today .h3-btn {
  width: 100%;
}
.h3-wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 3vw;
  position: relative;
  z-index: 2;
}
.h3-rowhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 18px 0 12px;
}
.h3-rowhead h2 {
  margin: 0 !important;
  font-size: 22px !important;
  color: #3a302d;
}
.h3-rowhead h2.h3-hand {
  font-size: 36px !important;
}
.h3-nav {
  display: flex;
  gap: 8px;
}
.h3-nav button,
.e3-back {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: #2a4d7a;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}
.h3-nav button svg,
.e3-back svg {
  width: 20px;
}
.h3-nav button[data-dir="-1"] svg,
.e3-back svg {
  transform: scaleX(-1);
}
.h3-stories {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 19%);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 2px 14px;
  scrollbar-width: none;
}
.h3-stories::-webkit-scrollbar {
  display: none;
}
.h3-story {
  scroll-snap-align: start;
  position: relative;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: #3a302d;
  box-shadow: 0 16px 28px -22px rgba(92, 70, 40, 0.6);
}
.h3-story img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.h3-num {
  position: absolute;
  left: 12px;
  top: calc(100% - 72px);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
}
.h3-st {
  display: block;
  padding: 10px 14px 14px 48px;
  min-height: 64px;
}
.h3-st b {
  display: block;
  font-size: 15.5px;
}
.h3-st small {
  color: #8a7d74;
  font-size: 13px;
}
.h3-mid {
  display: grid;
  grid-template-columns: minmax(260px, 27%) 1fr;
  gap: 22px;
  margin-top: 10px;
}
.h3-lesson {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 22px 24px;
  background: linear-gradient(160deg, #eaf5fd, #fff 70%);
  border-radius: 26px;
  text-decoration: none;
  color: #3a302d;
  box-shadow: 0 20px 34px -26px rgba(37, 100, 160, 0.6);
}
.h3-lesson img {
  width: 120px;
  margin: -6px 0 -10px;
}
.h3-lesson b {
  font-size: 30px;
  color: #2580dc;
}
.h3-lesson p {
  margin: 4px 0 0;
  font-size: 14.5px;
  color: #6f625b;
  line-height: 1.45;
}
.h3-lesson .h3-btn {
  margin-top: auto;
}
.h3-right .h3-rowhead {
  margin-top: 0;
}
.h3-more {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #2580dc;
  text-decoration: none;
  font-size: 14.5px;
}
.h3-more svg {
  width: 16px;
}
.h3-sections {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
}
.h3-sec,
.e3-tile {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: #3a302d;
  text-align: center;
  font-size: 13.5px;
  box-shadow: 0 10px 20px -16px rgba(92, 70, 40, 0.6);
}
.h3-sec img,
.e3-tile img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 0.85;
  object-fit: cover;
}
.h3-sec span,
.e3-tile span {
  display: block;
  padding: 7px 4px 9px;
}
.h3-big {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 14px;
  margin-top: 16px;
}
.h3-bigbtn {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 90px 18px 20px;
  border-radius: 20px;
  color: #fff;
  text-decoration: none;
  min-height: 96px;
  box-shadow: 0 16px 26px -18px rgba(0, 0, 0, 0.5);
}
.h3-bigbtn b {
  font-size: 21px;
}
.h3-bigbtn small {
  opacity: 0.92;
  font-size: 13px;
}
.h3-bigbtn svg {
  position: absolute;
  right: 12px;
  top: 50%;
  translate: 0 -50%;
  width: 70px;
}
.h3-bigbtn.c-teal {
  background: linear-gradient(160deg, #4fc7cb, #2fa8ac);
}
.h3-bigbtn.c-red {
  background: linear-gradient(160deg, #f06a64, #e6261f);
}
.h3-bigbtn.c-lilac {
  background: linear-gradient(160deg, #b9a4ef, #9b84e0);
}
.h3-bottom {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 30%);
  gap: 22px;
  margin-top: 16px;
}
.h3-journal {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.h3-post {
  position: relative;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: #3a302d;
  box-shadow: 0 10px 20px -16px rgba(92, 70, 40, 0.6);
}
.h3-post img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.h3-tag {
  position: absolute;
  left: 8px;
  top: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  color: #c76a14;
}
.h3-post b {
  display: block;
  padding: 8px 10px 2px;
  font-size: 13.5px;
  line-height: 1.3;
}
.h3-post small {
  display: block;
  padding: 0 10px 10px;
  color: #a0938a;
  font-size: 12px;
}
.h3-mats {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px;
  border-radius: 26px;
  background: linear-gradient(140deg, #dff1fb, #bfe1f6);
  text-decoration: none;
  color: #3a302d;
  overflow: hidden;
  align-self: end;
}
.h3-mats b {
  font-size: 24px;
}
.h3-mats p {
  margin: 6px 0 14px;
  font-size: 14px;
  color: #4a5b6a;
}
.h3-mats img {
  width: 48%;
  margin: -20px -30px -30px 0;
  border-radius: 10px;
}

/* «Упражнения и игры» */
.e3 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 3vw 40px;
}
.e3-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 120px;
}
.e3-head h2 {
  margin: 0 !important;
  font-size: 36px !important;
  color: #3a302d;
}
.e3-head p {
  margin: 4px 0 0;
  color: #6f625b;
}
.e3-kids {
  margin-left: auto;
  width: 220px;
  border-radius: 20px;
  -webkit-mask: radial-gradient(ellipse at center, #000 55%, transparent 72%);
  mask: radial-gradient(ellipse at center, #000 55%, transparent 72%);
}
.e3-tabs {
  display: flex;
  gap: 10px;
  margin: 8px 0 20px;
}
.e3-tabs a {
  padding: 11px 26px;
  border-radius: 999px;
  background: #eaf3fb;
  color: #2a4d7a;
  text-decoration: none;
  font-weight: 600;
}
.e3-tabs a.on {
  background: linear-gradient(180deg, #3d9cf0, #2580dc);
  color: #fff;
}
.e3 {
  display: flex;
  flex-direction: column;
}
.e3-block {
  order: 3;
}
.e3-block.first {
  order: 2;
}
.e3-head,
.e3-tabs {
  order: 0;
}
.e3-pick {
  order: 1;
  background: #fff;
  border-radius: 22px;
  padding: 18px 20px;
  margin-bottom: 18px;
  box-shadow: 0 14px 30px -24px rgba(92, 70, 40, 0.6);
}
.e3-pick h3,
.e3-block h3 {
  margin: 0 0 12px;
  font-size: 22px;
  color: #3a302d;
}
.e3-block {
  margin-bottom: 22px;
}
.e3-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
}
.e3-grid.gram .e3-tile img {
  aspect-ratio: 16 / 9;
}
.e3-tile {
  position: relative;
}
.e3-tile.on {
  outline: 3px solid #2580dc;
}
.e3-new {
  display: inline-grid;
  place-items: center;
  margin-left: 6px;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #e6261f;
  color: #fff;
  font-style: normal;
  font-size: 12px;
}
.e3-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
}
.e3-ex {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 8px 8px;
  border-radius: 16px;
  background: #f6f1e8;
  text-decoration: none;
  color: #3a302d;
}
.e3-ex img {
  width: 64px;
  height: 54px;
  object-fit: cover;
  border-radius: 10px;
}
.e3-ex b {
  display: block;
}
.e3-ex small {
  color: #8a7d74;
}
.e3-ex svg {
  width: 18px;
  margin-left: auto;
  color: #2580dc;
}
.e3-soon {
  margin: 0;
  color: #8a7d74;
}

/* чтение */
.r3 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 22px 3vw;
}
.r3-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #6f625b;
}
.r3-prog {
  display: flex;
  gap: 6px;
  margin-left: 12px;
}
.r3-prog i {
  width: 46px;
  height: 7px;
  border-radius: 99px;
  background: #d9e7f3;
}
.r3-prog i.on {
  background: #2580dc;
}
.r3-main {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 30px;
  margin-top: 16px;
}
.r3-title {
  font-size: 60px !important;
  margin: 0 0 10px !important;
  color: #3a302d;
}
.r3-modes {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.r3-modes button {
  font: inherit;
  padding: 8px 18px;
  border-radius: 12px;
  border: 0;
  background: #fff;
  color: #6f625b;
  cursor: pointer;
  box-shadow: 0 6px 12px -10px rgba(0, 0, 0, 0.4);
}
.r3-modes button.on {
  background: #fff3c9;
  color: #8a6400;
}
.r3-text {
  background: #fff;
  border-radius: 24px;
  padding: 24px 28px;
  font-size: 20px;
  line-height: 1.55;
  color: #3a302d;
  box-shadow: 0 16px 30px -26px rgba(92, 70, 40, 0.6);
}
.r3-text p {
  margin: 0;
}
.r3-q {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.r3-q button {
  font: inherit;
  font-size: 14.5px;
  padding: 10px 16px;
  border-radius: 14px;
  border: 0;
  background: #fff;
  color: #3a302d;
  cursor: pointer;
  box-shadow: 0 6px 14px -10px rgba(0, 0, 0, 0.35);
}
.r3-q button::before {
  content: "💬 ";
}
.r3-pic {
  width: 100%;
  border-radius: 24px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.r3-dict {
  margin-top: 14px;
  background: #eaf5fd;
  border-radius: 20px;
  padding: 16px 20px;
}
.r3-dict b {
  display: block;
  color: #2580dc;
  margin-bottom: 6px;
}
.r3-dict p {
  margin: 4px 0;
  font-size: 15px;
  color: #4a5b6a;
}
.r3-dict span {
  font-weight: 700;
  color: #3a302d;
}

/* «Где что находится?» с картинкой-фоном */
.mu2-scene img {
  display: block;
  width: 100%;
  height: calc(100dvh - 120px);
  object-fit: cover;
  object-position: 40% 50%;
  border-radius: 0 28px 28px 0;
}
.mu2 {
  background: #fbf6ee !important;
  padding-top: 84px !important;
}

@media (max-width: 900px) {
  .h3-today {
    position: relative;
    right: auto;
    top: auto;
    translate: none;
    width: auto;
    margin: 0 16px;
  }
  .h3-hero {
    height: auto;
    padding-top: 52vw;
    background-size: 100% auto;
    background-position: top;
    min-height: 0;
  }
  .h3-hero::after {
    display: none;
  }
  .h3-mid,
  .h3-bottom,
  .r3-main {
    grid-template-columns: 1fr;
  }
  .h3-sections {
    grid-template-columns: repeat(4, 1fr);
  }
  .h3-big {
    grid-template-columns: 1fr;
  }
  .h3-journal {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 62%;
    overflow-x: auto;
  }
  .h3-stories {
    grid-auto-columns: 72%;
  }
  .e3-kids {
    display: none;
  }
  .mu2-scene img {
    height: 260px;
    border-radius: 20px;
  }
}
.mu2-scene {
  align-self: center !important;
}
.mu2-scene img {
  height: auto !important;
  aspect-ratio: auto;
  border-radius: 0 28px 28px 0;
}
.h3-st small {
  display: block;
  line-height: 1.35;
}
.h3-lesson {
  flex-direction: column;
  justify-content: center;
}
.h3-lesson img {
  width: 140px;
  align-self: center;
}
.h3-lesson b {
  font-size: 32px;
  line-height: 1;
}
.h3-mats {
  display: grid;
  grid-template-columns: 1fr 40%;
}
.h3-mats img {
  width: 150%;
  margin: 0 -40% 0 0;
}
.h3-mats .h3-btn {
  white-space: nowrap;
  padding: 12px 20px;
}
@media (max-width: 900px) {
  .mu2-scene img {
    border-radius: 20px;
  }
}
.h3-lesson {
  justify-content: flex-start;
  padding-right: 22px;
}
.h3-lesson img {
  position: absolute;
  right: 6px;
  top: -18px;
  width: 104px;
  margin: 0;
}
.h3-lesson b {
  display: block;
  max-width: 7.5em;
  font-size: 30px;
}
.topnav .old-home {
  color: #a0938a !important;
}
/* новая главная: узкая широкая картинка сверху, крупнее «Занятие на сегодня», замочки, рукописные заголовки */
.h3-hero {
  height: clamp(300px, 40vw, 470px) !important;
  min-height: 0 !important;
  background-size: cover !important;
  background-position: center 58% !important;
}
.h3-today {
  top: 46% !important;
  padding: 20px 20px 22px !important;
}
.h3-today-h b {
  font-size: 22px !important;
}
.h3-today img {
  aspect-ratio: 16 / 7 !important;
}
.h3-teal {
  color: #2a9fa3 !important;
}
.h3-red {
  color: #e6261f !important;
  font-size: 34px !important;
}
.h3-story.locked {
  cursor: default;
}
.h3-story.locked img,
.h3-story.locked .h3-st,
.h3-story.locked .h3-num {
  filter: blur(3px) grayscale(0.5);
  opacity: 0.55;
}
.h3-lock {
  position: absolute;
  left: 50%;
  top: 34%;
  translate: -50% -50%;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #8a7d74;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.45);
}
.h3-lock svg {
  width: 22px;
}
.h3-lesson b {
  font-family: "Rubik", sans-serif !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  color: #3a302d !important;
  max-width: 9em !important;
  line-height: 1.2 !important;
}
.h3-lesson img {
  width: 130px !important;
  top: -26px !important;
  right: 0 !important;
}
.h3-lesson {
  padding-right: 150px !important;
}
.h3-lesson img {
  top: auto !important;
  bottom: 74px !important;
  right: 8px !important;
  width: 140px !important;
}
.h3-lesson .h3-btn {
  margin-right: -128px;
}
@media (max-width: 900px) {
  .h3-lesson {
    padding-right: 130px !important;
  }
  .h3-lesson img {
    width: 120px !important;
  }
  .h3-lesson .h3-btn {
    margin-right: -108px;
  }
}
/* поиск в шапке — синий кружок с лупой */
.topnav .hdr-search {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #eaf3fb;
  color: #2580dc !important;
  display: inline-grid !important;
  place-items: center;
  padding: 0 !important;
  align-self: center;
  margin-top: -6px;
}
.topnav .hdr-search svg {
  width: 18px;
  height: 18px;
}
/* широкая картинка целиком: дети на камнях, кит посередине, море под плашкой */
@media (min-width: 901px) {
  .h3-hero {
    height: auto !important;
    aspect-ratio: 1974 / 588;
    background-size: 100% 100% !important;
    background-position: center !important;
  }
  .h3-hero::after {
    display: none;
  }
  .h3-today {
    top: 6.8% !important;
    bottom: 2% !important;
    translate: none !important;
    right: 2.4% !important;
    width: 29.6% !important;
    display: flex;
    flex-direction: column;
    padding: 1.3vw 1.4vw 1.4vw !important;
  }
  .h3-today img {
    flex: 1 1 auto;
    min-height: 0;
    aspect-ratio: auto !important;
    height: 0;
  }
  .h3-today h3 {
    font-size: clamp(24px, 2.1vw, 34px) !important;
    margin: 0.6vw 0 2px !important;
  }
  .h3-today p {
    font-size: clamp(12.5px, 1vw, 14.5px) !important;
    margin-bottom: 0.9vw !important;
  }
  .h3-today .h3-btn {
    padding: 0.8vw 20px;
  }
}
@media (max-width: 900px) {
  .h3-hero {
    background-size: auto 100% !important;
    background-position: left center !important;
    padding-top: 0 !important;
    height: 260px !important;
  }
  .h3-today {
    margin-top: -30px !important;
  }
}
@media (min-width: 901px) {
  .h3-today {
    background: #fff !important;
    top: 5.4% !important;
    bottom: 1.2% !important;
    right: 1.7% !important;
    width: 30.8% !important;
  }
}
@media (max-width: 900px) {
  .h3-hero {
    height: auto !important;
    padding-top: 56vw !important;
    background-size: auto 56vw !important;
    background-position: left top !important;
    background-color: transparent !important;
  }
  .h3-today {
    margin-top: -24px !important;
  }
}
/* заставка */
.intro {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: auto;
}
.intro-bg {
  position: absolute;
  inset: 0;
  background: #fbf7f0;
}
.intro-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: flex;
  align-items: center;
  gap: 2vw;
}
.intro-dots {
  width: min(30vw, 34vh);
  height: auto;
  overflow: visible;
  transform-origin: 0 0;
}
.intro-word {
  font-family: "Rubik", "Nunito", sans-serif;
  font-weight: 800;
  color: #e6261f;
  font-size: min(15vw, 22vh);
  line-height: 1;
  transform-origin: 0 0;
  white-space: nowrap;
}
.intro-word i {
  display: inline-block;
  font-style: normal;
}
/* большие кнопки на новой главной: прежние иконки и тонкая светлая кромка снизу, мягкая тень */
.h3-bigbtn {
  border: 0 !important;
  box-shadow: 0 18px 40px -22px rgba(92, 78, 66, 0.42) !important;
  overflow: visible;
}
.h3-bigbtn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.62),
    rgba(255, 255, 255, 0.28) 45%,
    rgba(255, 255, 255, 0.18)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.h3-bigbtn svg.h3-ic {
  width: 92px !important;
  height: 92px;
  right: 6px !important;
  filter: drop-shadow(0 6px 8px rgba(12, 53, 86, 0.18));
}
.h3-bigbtn.c-teal {
  background: #45bcc0 !important;
}
.h3-bigbtn.c-red {
  background: #3494e3 !important;
}
.h3-bigbtn {
  padding-right: 104px !important;
}
/* истории — только картинки, без подписей */
.h3-story .h3-st,
.h3-story .h3-num {
  display: none !important;
}
.h3-story img {
  aspect-ratio: 4 / 3 !important;
}
/* три кнопки одинаковые и вместе с разделами по высоте равны плашке записи */
.h3-mid {
  align-items: stretch !important;
}
.h3-right {
  display: flex;
  flex-direction: column;
}
.h3-big {
  flex: 1;
  grid-template-columns: repeat(3, 1fr) !important;
  align-items: stretch;
}
.h3-bigbtn {
  min-height: 0 !important;
  justify-content: flex-start;
}
@media (max-width: 900px) {
  .h3-big {
    grid-template-columns: 1fr !important;
  }
}
.h3-story .h3-lock {
  top: 50% !important;
}
/* красный флажок «новое» на больших кнопках — как на старой главной */
.h3-bigbtn .nw-dot {
  top: 0 !important;
  right: 104px !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M0 0H30V24.5Q30 29 26 27.2L17 22.6Q15 21.6 13 22.6L4 27.2Q0 29 0 24.5Z' fill='%23EE4E44'/%3E%3Crect width='30' height='2.8' fill='%23fff' fill-opacity='.35'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat !important;
  filter: drop-shadow(0 2px 2px rgba(74, 62, 58, 0.22));
  z-index: 3;
}
.h3-stories {
  margin-top: 6px;
}
/* плашка урока как на старой главной: заголовок, подпись, черепашка по центру, кнопка */
.h3-lesson {
  padding: 22px 22px 24px !important;
  align-items: stretch;
}
.h3-lesson img {
  position: static !important;
  order: 2;
  width: auto !important;
  height: 0;
  flex: 1 1 auto;
  min-height: 120px;
  object-fit: contain;
  align-self: center;
  margin: 4px 0 !important;
}
.h3-lesson > div {
  order: 1;
}
.h3-lesson .h3-btn {
  order: 3;
  margin-right: 0 !important;
}
.h3-lesson b {
  max-width: none !important;
}
/* стрелки ленты — в строке над картинками, без лишнего отступа */
.h3-wrap > .h3-rowhead:first-child {
  margin: 14px 0 8px;
  justify-content: flex-end;
}
.h3-wrap > .h3-rowhead:first-child {
  height: 0;
  margin: 0;
  position: relative;
  z-index: 3;
}
.h3-wrap > .h3-rowhead:first-child .h3-nav {
  position: absolute;
  left: -18px;
  right: -18px;
  top: 104px;
  justify-content: space-between;
  pointer-events: none;
}
.h3-wrap > .h3-rowhead:first-child .h3-nav button {
  pointer-events: auto;
}
.h3-stories {
  margin-top: 22px !important;
}
/* «вошёл» ребёнок: кружок с портретом и имя справа в шапке (пока для вида) */
.hdr-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 18px;
  padding: 3px 12px 3px 3px;
  border-radius: 999px;
  background: #fff;
  box-shadow:
    0 4px 12px -8px rgba(74, 62, 58, 0.5),
    inset 0 0 0 1px #eee5d9;
  text-decoration: none;
  color: #3a302d;
  font-weight: 600;
  font-size: 15px;
  align-self: center;
}
.hdr-user img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px #fbd96a;
}
@media (max-width: 700px) {
  .hdr-user span {
    display: none;
  }
  .hdr-user {
    padding: 3px;
    margin-left: 8px;
  }
}
/* дни подряд над лентой историй */
.h3-wrap > .h3-rowhead:first-child {
  height: auto !important;
  margin: 18px 0 0 !important;
  justify-content: flex-start !important;
}
.h3-wrap > .h3-rowhead:first-child .h3-nav {
  top: calc(100% + 98px) !important;
}
.h3-stories {
  margin-top: 14px !important;
}
.h3-streak {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 18px;
  grid-column: auto !important;
  width: auto !important;
  min-height: 0 !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  background: #fff !important;
}
.h3-streak .sk-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.h3-streak .sk-msg {
  margin: 0 !important;
}
.h3-streak .sk-btn {
  margin: 0 !important;
}
.hdr-user {
  min-width: 150px;
  padding-right: 22px !important;
  margin-left: 26px;
}
.hdr-user span {
  flex: 1;
}
@media (min-width: 901px) {
  .hdr-user {
    margin-right: -20px;
  }
}

/* ===== шапка: логотип без подписи слева, меню по центру, подпись справа; всё по нижнему краю ===== */
header .logo small {
  display: none !important;
}
header .bar {
  align-items: flex-end !important;
}
header .bar-right {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-left: 40px;
}
header .topnav {
  position: static !important;
  top: auto !important;
  margin: 0 auto;
}
.hdr-tag {
  color: #6f625b;
  font-size: 15px;
  white-space: nowrap;
  line-height: 1.2;
  padding-bottom: 2px;
}
@media (max-width: 900px) {
  .hdr-tag {
    display: none;
  }
}

/* ===== главная: «Покров» слева на картинке, профиль и занятие справа ===== */
.h3-hero {
  position: relative;
}
.h3-hol {
  position: absolute;
  z-index: 2;
  left: 2.4%;
  top: 6%;
}
.h3-hol .hdr-hol {
  display: inline-flex !important;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 999px;
  padding: 8px 18px 8px 12px;
  box-shadow: 0 10px 24px -14px rgba(20, 50, 90, 0.55);
  margin: 0 !important;
}
.h3-hol .hdr-hol[hidden] {
  display: none !important;
}
@media (min-width: 901px) {
  .h3-side {
    position: absolute;
    z-index: 2;
    right: 1.7%;
    top: 4%;
    bottom: 3%;
    width: 30.8%;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .h3-side .h3-today {
    position: static !important;
    width: auto !important;
    flex: 1;
    min-height: 0;
    translate: none !important;
  }
  .h3-side .h3-today img {
    aspect-ratio: 16 / 5 !important;
    height: auto !important;
    flex: none !important;
  }
}
.h3-prof {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  padding: 10px 16px 10px 10px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 22px;
  text-decoration: none;
  color: #3a302d;
  box-shadow: 0 16px 30px -22px rgba(20, 50, 90, 0.55);
}
.h3-prof img {
  grid-row: span 2;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 6px #fbd96a;
  margin: 4px;
}
.h3-pname {
  font-weight: 700;
  font-size: 19px;
}
.h3-pstat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-size: 13.5px;
}
.h3-pstat b {
  font-weight: 600;
  color: #2580dc;
}
.h3-pstat small {
  width: 100%;
  color: #8a7d74;
  font-size: 12.5px;
}
.h3-dots {
  display: inline-flex;
  gap: 4px;
}
.h3-dots i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #eee6da;
}
.h3-dots i.ok {
  background: #45bcc0;
}
.h3-dots i.gift {
  background: #fbd96a;
  box-shadow: 0 0 0 2px #fff3c4;
}
.h3-dots i.gift.ok {
  background: #e6261f;
}

/* под картинкой — две узкие плашки (пока заглушки) */
.h3-strips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 18px 0 6px;
}
.h3-strip {
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 22px;
  border-radius: 18px;
  background: #fff;
  border: 1.5px dashed #e3d8c8;
  color: #b3a597;
  font-size: 14px;
}
/* плашка урока — на чистом белом */
.h3-lesson {
  background: #fff !important;
}
/* стрелки историй — по краям ленты */
.h3-strow {
  height: 0 !important;
  margin: 26px 0 0 !important;
  position: relative;
  z-index: 3;
}
.h3-strow .h3-nav {
  position: absolute;
  left: -18px;
  right: -18px;
  top: 90px;
  justify-content: space-between;
  pointer-events: none;
}
.h3-strow .h3-nav button {
  pointer-events: auto;
}
.h3-strow + .h3-stories {
  margin-top: 0 !important;
}
@media (max-width: 900px) {
  .h3-side {
    margin: -24px 16px 0;
    position: relative;
    z-index: 2;
    display: grid;
    gap: 10px;
  }
  .h3-side .h3-today {
    margin: 0 !important;
  }
  .h3-strips {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 901px) {
  .h3-side .h3-today {
    top: auto !important;
    bottom: auto !important;
    right: auto !important;
    left: auto !important;
    display: flex !important;
    flex-direction: column;
    padding: 14px 16px 16px !important;
  }
  .h3-side .h3-today img {
    aspect-ratio: 16 / 4.2 !important;
    object-fit: cover;
  }
  .h3-side .h3-today h3 {
    margin: 8px 0 2px !important;
    font-size: clamp(22px, 1.9vw, 30px) !important;
  }
  .h3-side .h3-today p {
    margin-bottom: auto !important;
    padding-bottom: 8px;
  }
  .h3-side .h3-today-h {
    margin-bottom: 8px !important;
  }
  .h3-side .h3-today-h b {
    font-size: clamp(16px, 1.4vw, 21px) !important;
  }
  .h3-prof {
    padding: 6px 14px 6px 8px;
  }
  .h3-prof img {
    width: 48px;
    height: 48px;
  }
}
.h3-hol .hdr-hol {
  background: rgba(255, 255, 255, 0.94) !important;
  padding: 8px 18px 8px 12px !important;
  border-radius: 999px !important;
}
@media (min-width: 901px) {
  .h3-hero {
    min-height: 500px;
    background-size: cover !important;
    background-position: left center !important;
  }
  .h3-side {
    width: max(30.8%, 360px) !important;
  }
}
.h3-prof {
  background: #fff !important;
}
.h3-side .h3-today {
  background: #fff !important;
}
@media (min-width: 901px) {
  .h3-hero {
    min-height: 510px !important;
  }
}
@media (min-width: 901px) {
  .h3-hero {
    aspect-ratio: auto !important;
    height: max(510px, 29.8vw) !important;
  }
}
@media (max-width: 900px) {
  .h3-side .h3-today {
    position: static !important;
    translate: none !important;
    top: auto !important;
    margin: 0 !important;
    width: auto !important;
  }
  .h3-side {
    margin: -24px 16px 0 !important;
  }
}

/* ===== шапка v2: слева «Покров», по центру меню, справа логотип с подписью ===== */
header .bar {
  display: flex !important;
  align-items: flex-end !important;
}
header .logo {
  order: 3;
  margin-left: auto;
}
header .logo small {
  display: block !important;
}
header .bar-right {
  order: 1;
  flex: 1;
  display: flex !important;
  align-items: flex-end !important;
  margin: 0 30px 0 0 !important;
  justify-content: flex-start !important;
}
header .bar-right .hdr-hol {
  order: 0;
  margin: 0 !important;
  padding-bottom: 2px;
}
header .bar-right .hdr-hol .hh-dot {
  margin-right: 10px !important;
}
header .topnav {
  order: 1;
  margin: 0 auto !important;
  padding-bottom: 2px;
}
@media (max-width: 900px) {
  header .bar-right {
    display: none !important;
  }
}

/* ===== картинка снова узкая и во всю ширину ===== */
@media (min-width: 901px) {
  .h3-hero {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1974 / 588 !important;
    background-size: 100% 100% !important;
  }
  .h3-side {
    top: 3% !important;
    bottom: 3% !important;
    width: 30.8% !important;
  }
  .h3-side .h3-today {
    height: 100%;
    padding: 0.9vw 1.1vw 1vw !important;
    gap: 0;
  }
  .h3-side .h3-tpic {
    flex: 1 1 0 !important;
    min-height: 0;
    height: 0 !important;
    width: 100%;
    object-fit: cover;
    border-radius: 12px;
    aspect-ratio: auto !important;
  }
  .h3-side .h3-today h3 {
    margin: 0.5vw 0 0 !important;
    font-size: clamp(18px, 1.6vw, 26px) !important;
  }
  .h3-side .h3-today p {
    font-size: clamp(11.5px, 0.85vw, 13.5px) !important;
    margin: 2px 0 0.6vw !important;
    padding: 0;
    line-height: 1.35;
  }
  .h3-side .h3-today .h3-btn {
    padding: 0.55vw 20px !important;
  }
}
/* тонкая строка профиля внутри карточки */
.h3-today .h3-prof {
  background: none !important;
  box-shadow: none !important;
  padding: 0 0 0.6vw !important;
  margin-bottom: 0.6vw;
  border-bottom: 1px solid #f0e8dc;
  border-radius: 0;
  column-gap: 10px;
}
.h3-today .h3-prof img {
  width: 40px !important;
  height: 40px !important;
  margin: 3px !important;
}
.h3-pline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.h3-pstat {
  flex-direction: column;
  align-items: flex-start !important;
  gap: 0 !important;
}
.h3-pstat small {
  margin-top: -1px;
  font-size: 11.5px !important;
}
.h3-today .h3-prof {
  grid-template-columns: auto auto 1fr;
  grid-template-rows: auto;
}
.h3-today .h3-prof img {
  grid-row: auto;
}
/* «Занятие на сегодня» — крупно, оранжевым, как «Наследие детям» */
.h3-today .h3-today-h b {
  color: #f5953a !important;
  font-size: clamp(18px, 1.55vw, 23px) !important;
  font-weight: 700;
}
.h3-today .h3-today-h {
  margin-bottom: 0.5vw !important;
}
/* карточка занятия: уже, по высоте — по содержимому, правый край — по линии контента */
@media (min-width: 901px) {
  .h3-side {
    width: min(330px, 27%) !important;
    right: max(2%, calc((100vw - 1320px) / 2 + 3vw)) !important;
    bottom: auto !important;
    top: 50% !important;
    translate: 0 -50%;
  }
  .h3-side .h3-today {
    height: auto !important;
    padding: 14px 16px 16px !important;
  }
  .h3-side .h3-tpic {
    flex: none !important;
    height: auto !important;
    aspect-ratio: 16 / 7 !important;
  }
  .h3-side .h3-today p {
    font-size: 12.5px !important;
    margin: 2px 0 10px !important;
  }
  .h3-side .h3-today h3 {
    font-size: 22px !important;
    margin: 8px 0 0 !important;
  }
  .h3-side .h3-today .h3-btn {
    padding: 10px 20px !important;
  }
  .h3-today .h3-prof {
    padding-bottom: 8px !important;
    margin-bottom: 8px !important;
  }
  .h3-today .h3-today-h b {
    font-size: 20px !important;
  }
}
@media (min-width: 901px) {
  .h3-hero {
    aspect-ratio: auto !important;
    height: max(400px, calc(100vw * 588 / 1974)) !important;
    background-size: cover !important;
    background-position: left center !important;
  }
}
.h3-pline {
  white-space: nowrap;
}
.h3-pline b {
  font-size: 13px;
}
.h3-today .h3-prof {
  grid-template-columns: auto auto 1fr !important;
}
@media (max-width: 900px) {
  header .bar-right {
    display: flex !important;
    flex: none;
    margin: 0 12px 0 0 !important;
  }
  header .bar-right .topnav {
    display: none !important;
  }
  header .logo small {
    font-size: 12px !important;
  }
}
/* карточка занятия шире (до шарика логотипа), чуть ниже края картинки, крупнее заголовки */
@media (min-width: 901px) {
  .h3-side {
    top: 5% !important;
    translate: none !important;
    bottom: auto !important;
  }
  .h3-hero {
    margin-bottom: 40px;
  }
  .h3-side .h3-today {
    padding: 18px 22px 20px !important;
  }
  .h3-today .h3-today-h b {
    font-size: 26px !important;
  }
  .h3-side .h3-today h3 {
    font-size: 32px !important;
    margin-top: 12px !important;
  }
  .h3-side .h3-today p {
    font-size: 14.5px !important;
    margin: 4px 0 14px !important;
  }
  .h3-side .h3-tpic {
    aspect-ratio: 16 / 5.2 !important;
  }
  .h3-side .h3-today .h3-btn {
    padding: 12px 20px !important;
  }
}
@media (min-width: 901px) {
  .h3-today .h3-today-h b {
    font-size: clamp(20px, 1.75vw, 25px) !important;
    white-space: nowrap;
  }
  .h3-time {
    white-space: nowrap;
  }
  .h3-strips {
    margin-top: 64px !important;
  }
}

/* главная, 1 октября: «Твоё занятие сегодня» крупнее и с воздухом сверху; строка «дней подряд» крупнее и дальше от лица;
   фон-картинка тянется ниже карточки */
.h3-today .h3-prof {
  column-gap: 16px !important;
  padding-bottom: 12px !important;
  margin-bottom: 16px !important;
}
.h3-today .h3-prof img {
  margin-right: 4px !important;
}
.h3-pline {
  gap: 10px !important;
}
.h3-pline b {
  font-size: 16px !important;
}
.h3-pstat small {
  font-size: 14px !important;
  margin-top: 2px !important;
}
.h3-dots {
  gap: 6px !important;
}
.h3-dots i {
  width: 15px !important;
  height: 15px !important;
}
.h3-today .h3-today-h {
  margin-top: 4px !important;
  margin-bottom: 10px !important;
}
.h3-today .h3-today-h b {
  font-size: clamp(22px, 2vw, 28px) !important;
}
.h3-hero {
  background-position: left top !important;
}

/* карточка занятия: компактнее сверху, картинка видна целиком, больше воздуха перед кнопкой */
@media (min-width: 901px) {
  .h3-today .h3-prof {
    padding-bottom: 6px !important;
    margin-bottom: 6px !important;
  }
  .h3-pstat small {
    margin-top: -4px !important;
    line-height: 1.1;
  }
  .h3-today .h3-today-h {
    margin: 0 0 6px !important;
    align-items: baseline !important;
  }
  .h3-today .h3-today-h b {
    font-size: clamp(18px, 1.5vw, 22px) !important;
    color: #e2ae1c !important;
  }
  .h3-today .h3-time {
    font-size: 12px !important;
    color: #a0938a;
  }
  .h3-side .h3-tpic {
    aspect-ratio: 278 / 132 !important;
    object-fit: cover;
    object-position: center;
  }
  .h3-side .h3-today h3 {
    margin-top: 10px !important;
  }
  .h3-side .h3-today p {
    margin: 4px 0 22px !important;
  }
}
@media (min-width: 901px) {
  .h3-side .h3-today img.h3-tpic {
    flex: none !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 278 / 132 !important;
  }
}

/* главная: под картинкой сразу Упражнения/Литература/Музыка, ниже — все разделы */
.h3-right .h3-big {
  flex: none !important;
  margin: 0 0 18px !important;
}
.h3-right .h3-bigbtn {
  min-height: 130px !important;
}
.h3-right .h3-rowhead {
  margin: 0 0 12px !important;
}
.h3-sections {
  flex: 1;
  align-content: end;
}
@media (min-width: 901px) {
  .h3-mid {
    margin-top: 70px !important;
  }
}
/* флажок «новое» — между словом и иконкой */
.h3-bigbtn .nw-dot {
  right: 96px !important;
}
@media (min-width: 901px) {
  .h3-mid {
    margin-top: 36px !important;
  }
}
.h3-strow {
  margin-top: 30px !important;
}
/* «Все разделы» — выше и размером как «В музее»; равные промежутки; заголовок урока — оранжевый */
@media (min-width: 901px) {
  .h3-mid {
    column-gap: 14px !important;
    gap: 14px !important;
  }
  .h3-right .h3-big {
    margin: 0 0 6px !important;
  }
  .h3-right .h3-rowhead {
    margin: 0 0 10px !important;
  }
  .h3-right .h3-rowhead h2 {
    font-size: 32px !important;
    line-height: 1.1 !important;
  }
}
.h3-lesson b {
  color: #e68e0c !important;
  font-size: clamp(18px, 1.5vw, 22px) !important;
  font-family: Rubik, Nunito, "Segoe UI", Arial, sans-serif !important;
  line-height: 1.25 !important;
}
@media (min-width: 901px) {
  .h3-right .h3-big {
    flex: 1 !important;
  }
  .h3-right .h3-sections {
    flex: none !important;
  }
}
@media (min-width: 901px) {
  .h3-right .h3-big {
    margin-bottom: 14px !important;
  }
  .h3-right .h3-rowhead {
    margin-bottom: 8px !important;
  }
}
/* верхний ряд поднят: плашка урока и кнопки растянуты вверх, низ (иконки разделов) на месте;
   черепашка по пояс выглядывает из-за кнопки */
.h3-right .h3-rowhead h2 {
  color: #3a302d !important;
}
@media (min-width: 901px) {
  .h3-mid {
    margin-top: 10px !important;
  }
  .h3-lesson {
    min-height: 358px;
    position: relative;
  }
  .h3-lesson img {
    min-height: 150px !important;
    object-position: center bottom !important;
    margin: 6px 0 -26px !important;
    max-width: 92%;
  }
  .h3-lesson .h3-btn {
    position: relative;
    z-index: 2;
  }
}
@media (min-width: 901px) {
  .h3-hero {
    margin-bottom: 14px !important;
  }
}
@media (min-width: 901px) {
  .h3-lesson img {
    margin: 0 0 -46px !important;
    max-width: 100% !important;
  }
}
/* появление шапки после шариков: слова меню по очереди, «Покров» последним */
header.hdr-pre .topnav a,
header.hdr-pre .hdr-hol {
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}
header.hdr-pre.hdr-in .topnav a,
header.hdr-pre.hdr-in .hdr-hol {
  opacity: 1;
  transform: none;
}
header.hdr-pre.hdr-in .topnav a:nth-child(1) { transition-delay: 0s; }
header.hdr-pre.hdr-in .topnav a:nth-child(2) { transition-delay: 0.12s; }
header.hdr-pre.hdr-in .topnav a:nth-child(3) { transition-delay: 0.24s; }
header.hdr-pre.hdr-in .topnav a:nth-child(4) { transition-delay: 0.36s; }
header.hdr-pre.hdr-in .topnav a:nth-child(5) { transition-delay: 0.48s; }
header.hdr-pre.hdr-in .topnav a:nth-child(6) { transition-delay: 0.6s; }
header.hdr-pre.hdr-in .hdr-hol { transition-delay: 1.1s; }
/* кнопки ниже, «Все разделы» поднимаются; плашка урока — только заголовок и черепашка */
@media (min-width: 901px) {
  .h3-right .h3-big {
    flex: none !important;
  }
  .h3-right .h3-bigbtn {
    min-height: 112px !important;
  }
  .h3-lesson {
    min-height: 0 !important;
  }
}
@media (min-width: 901px) {
  .h3-lesson img {
    margin: 2px 0 -16px !important;
  }
}
.h3-lesson img {
  -webkit-mask-image: linear-gradient(#000 88%, transparent);
  mask-image: linear-gradient(#000 88%, transparent);
}
/* заголовки плашек одним шрифтом и крупнее; «Твоё занятие сегодня» и «Онлайн-урок» — чёрные */
@media (min-width: 901px) {
  .h3-today .h3-today-h b,
  .h3-lesson b,
  .h3-bigbtn b,
  .h3-mats b {
    font-family: Rubik, Nunito, "Segoe UI", Arial, sans-serif !important;
    font-size: clamp(22px, 1.75vw, 26px) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
  }
  .h3-right .h3-rowhead {
    margin-bottom: 22px !important;
  }
  .h3-lesson img {
    margin: 4px 0 -30px !important;
  }
}
.h3-today .h3-today-h b,
.h3-lesson b {
  color: #3a302d !important;
}
.h3-lesson img {
  -webkit-mask-image: linear-gradient(#000 93%, rgba(0, 0, 0, 0.6)) !important;
  mask-image: linear-gradient(#000 93%, rgba(0, 0, 0, 0.6)) !important;
}
@media (min-width: 901px) {
  .h3-right .h3-rowhead {
    margin-bottom: 30px !important;
  }
  .h3-lesson img {
    margin: 0 0 -40px !important;
  }
}
/* кнопки «Продолжить», «Записаться», «Выбрать» — крупнее; «Пособия БРАВО» в одну строку;
   «Все разделы» ближе к своим иконкам; подписи иконок светлее, но жирнее */
@media (min-width: 901px) {
  .h3-today .h3-btn,
  .h3-lesson .h3-btn,
  .h3-mats .h3-btn {
    font-size: 19px !important;
  }
  .h3-mats b {
    white-space: nowrap;
  }
  .h3-mats > div {
    flex: none !important;
    min-width: max-content;
  }
  .h3-right .h3-big {
    margin-bottom: 30px !important;
  }
  .h3-right .h3-rowhead {
    margin-bottom: 14px !important;
  }
}
.h3-sec span {
  color: #8f847d !important;
  font-weight: 600 !important;
}
@media (min-width: 901px) {
  .h3-mats > div {
    min-width: 0 !important;
    width: 230px !important;
    flex: 0 0 230px !important;
  }
}
/* высота цветных кнопок — по первому экрану (считается в fitSide) */
@media (min-width: 901px) {
  .h3-right .h3-bigbtn {
    min-height: var(--bigH, 112px) !important;
  }
}
@media (min-width: 901px) {
  .h3-right .h3-rowhead {
    margin-bottom: 24px !important;
  }
}
.h3-bigbtn .nw-dot {
  right: 44px !important;
}
/* флажок чуть левее, чтобы не заходил на карандаш; нотка левее */
.h3-bigbtn .nw-dot {
  right: 66px !important;
}
.h3-bigbtn.c-lilac svg.h3-ic {
  right: 22px !important;
}
/* синие кнопки — с такой же лёгкой белой каёмкой снизу, как у цветных плашек */
.h3-btn {
  position: relative;
}
.h3-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.62),
    rgba(255, 255, 255, 0.28) 45%,
    rgba(255, 255, 255, 0.18)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
/* подписи на цветных плашках — как текст под «В музее» */
@media (min-width: 901px) {
  .h3-bigbtn small {
    font-size: 15px !important;
    line-height: 1.35 !important;
  }
}
/* тень под синими кнопками — мягкая серая, как у плашек, без голубого */
.h3-btn,
.h3-btn:hover,
.h3-btn:focus-visible {
  box-shadow: 0 12px 24px -14px rgba(92, 78, 66, 0.45) !important;
}
.h3-bigbtn.is-pressed {
  scale: 0.97;
  translate: 0 3px;
}
/* «Онлайн-урок» — по центру плашки по горизонтали */
.h3-lesson > div {
  text-align: center;
  align-self: stretch;
}
/* флажок «новое» — почти у правого края плашки, крупнее */
.h3-bigbtn .nw-dot {
  right: 18px !important;
  width: 32px !important;
  height: 34px !important;
}
/* надпись на синих кнопках — чуть выше */
.h3-today .h3-btn,
.h3-lesson .h3-btn,
.h3-mats .h3-btn {
  padding-top: 10px !important;
  padding-bottom: 14px !important;
}
/* «Твоё занятие сегодня», «Онлайн-урок», «Пособия БРАВО» — мягкий коричнево-чёрный, чуть светлее */
.h3-today .h3-today-h b,
.h3-lesson b,
.h3-mats b {
  color: #594b45 !important;
}
/* заголовок над лентой историй — как «Журнал» */
.h3-sthead {
  margin: 44px 0 14px !important;
}
.h3-sthead + .h3-strow {
  margin-top: 0 !important;
}
/* карточка занятия: больше воздуха между полоской профиля и «Твоё занятие сегодня» */
@media (min-width: 901px) {
  .h3-today .h3-today-h {
    margin-top: 18px !important;
  }
}
/* флажок: правый край — над левым краем верхушки карандаша */
.h3-bigbtn .nw-dot {
  right: 49px !important;
}
/* под «Музыкой» — белая плашка «Пособия БРАВО» с лежащей черепашкой; «Все разделы» — в один ряд под двумя кнопками */
.h3-under {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: start;
}
.h3-secwrap {
  grid-column: span 2;
  min-width: 0;
}
.h3-secwrap .h3-sections {
  grid-template-columns: repeat(8, 1fr) !important;
  gap: 8px !important;
}
.h3-secwrap .h3-sec span {
  font-size: 11px !important;
  padding-left: 2px;
  padding-right: 2px;
  white-space: nowrap;
}
.h3-mats2 {
  min-height: 300px;
}
.h3-mats2 img {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  margin: 10px 0 14px !important;
  min-height: 0 !important;
  height: auto !important;
  flex: 0 0 auto !important;
  width: 92% !important;
  max-width: 92% !important;
}
.h3-mats2 > div {
  text-align: center;
}
.h3-mats2 .h3-btn {
  margin-top: auto !important;
}
.h3-bottom {
  grid-template-columns: 1fr !important;
}
@media (max-width: 900px) {
  .h3-under {
    grid-template-columns: 1fr;
  }
  .h3-secwrap {
    grid-column: auto;
  }
  .h3-secwrap .h3-sections {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}
.h3-secwrap .h3-sec span {
  font-size: 10.5px !important;
  letter-spacing: -0.2px;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* плашки урока и пособий — как на старой главной: те же надписи, черепашки и размеры;
   урок — слева сверху, пособия — ниже, под «Музыкой», по её правому краю */
@media (min-width: 901px) {
  .h3-mid {
    align-items: start !important;
  }
  .h3-mid > .h3-lesson {
    height: 506px !important;
    min-height: 0 !important;
  }
  .h3-mats2 {
    height: 408px !important;
    min-height: 0 !important;
  }
}
.h3-lesson > div,
.h3-mats2 > div {
  text-align: left !important;
}
.h3-lesson p {
  display: block !important;
  font-size: 15.5px !important;
  color: #86776f !important;
  margin: 6px 0 0 !important;
}
.h3-lesson img,
.h3-mats2 img {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  margin: 14px 0 !important;
  min-height: 0 !important;
  height: 0 !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}
.h3-lesson .h3-btn {
  margin-top: 0 !important;
}
@media (min-width: 901px) {
  .h3-mats2 b {
    font-size: 22px !important;
    white-space: nowrap;
  }
}
/* урок вытянут вниз до низа плашки пособий */
@media (min-width: 901px) {
  .h3-mid > .h3-lesson {
    height: auto !important;
    align-self: stretch !important;
  }
}
/* разделы между плашками: прежний размер, подпись сверху слева узкой полоской — как библиотечный каталог */
.h3-secwrap .h3-sections {
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
  gap: 10px !important;
}
.h3-sec {
  display: flex !important;
  flex-direction: column;
}
.h3-sec span,
.h3-secwrap .h3-sec span {
  order: -1;
  text-align: left !important;
  font-size: 12.5px !important;
  line-height: 1.1 !important;
  padding: 4px 10px 3px !important;
  letter-spacing: 0;
  white-space: nowrap;
}
/* головы черепашек одного размера (масштаб картинок одинаковый) */
@media (min-width: 901px) {
  .h3-mid > .h3-lesson img {
    max-height: 266px !important;
    align-self: center;
    margin: auto 0 !important;
  }
}
/* журнал внизу пока спрятан */
.h3-bottom {
  display: none !important;
}
/* меню шапки — ровно посередине страницы */
@media (min-width: 901px) {
  header .bar {
    position: relative;
  }
  header .topnav {
    position: absolute !important;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0 !important;
  }
}
/* меню — по нижней линии вровень с «Родной язык, культура и обычаи» */
@media (min-width: 901px) {
  header .topnav {
    transform: translate(-50%, calc(-50% + 12.3px)) !important;
  }
}

/* ===== главная v4: четыре плашки от края до края, ниже — «Все разделы», урок · разделы · пособия ===== */
.h3-big4 {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px !important;
  margin: 0 !important;
}
.h3-big4 .h3-bigbtn {
  min-height: var(--bigH, 170px) !important;
  padding-top: 52px !important;
}
.h3-bigbtn.c-yellow {
  background: #f2c94c !important;
}
.h3-allhead {
  margin: 30px 0 14px !important;
}
.h3-mid2 {
  display: grid !important;
  grid-template-columns: 300px 1fr 300px !important;
  gap: 22px !important;
  align-items: stretch !important;
  margin-top: 0 !important;
}
.h3-mid2 > .h3-lesson {
  height: auto !important;
  min-height: 0 !important;
}
.h3-mid2 .h3-mats2 {
  height: auto !important;
  min-height: 0 !important;
}
.h3-mid2 .h3-sections {
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
  gap: 12px !important;
  align-content: start !important;
}
.h3-mid2 .h3-sec span {
  order: -1;
  text-align: left !important;
  font-size: 12.5px !important;
  line-height: 1.1 !important;
  padding: 4px 10px 3px !important;
  white-space: nowrap;
}
.h3-mid2 > .h3-lesson img {
  max-height: 266px !important;
}
.h3-mid2 .h3-mats2 img {
  max-height: 172px !important;
}
@media (max-width: 900px) {
  .h3-big4 {
    grid-template-columns: 1fr 1fr !important;
  }
  .h3-big4 .h3-bigbtn {
    min-height: 120px !important;
    padding-top: 40px !important;
  }
  .h3-mid2 {
    grid-template-columns: 1fr !important;
  }
  .h3-mid2 .h3-sections {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}
/* шапка: больше белого сверху, меню и подпись логотипа чуть крупнее */
@media (min-width: 901px) {
  header .bar {
    height: 104px !important;
    padding-bottom: 14px !important;
  }
  header .logo small,
  header .topnav a {
    font-size: 17px !important;
  }
}
.h3-allhead h2 {
  color: #3a302d !important;
  font-size: 32px !important;
}
@media (min-width: 901px) {
  header .topnav {
    transform: translate(-50%, calc(-50% + 13.2px)) !important;
  }
  .h3-big4 .h3-bigbtn svg.h3-ic {
    top: calc(50% + 14px) !important;
  }
}
@media (min-width: 901px) {
  .h3-mid2 {
    grid-template-columns: 320px 1fr 320px !important;
    grid-auto-rows: 490px;
  }
  .h3-mid2 > .h3-lesson,
  .h3-mid2 .h3-mats2 {
    height: 490px !important;
  }
  .h3-mid2 .h3-mats2 img {
    max-height: 174px !important;
  }
}
.h3-mid2 .h3-btn {
  white-space: nowrap;
  justify-content: center;
}
.h3-mid2 .h3-mats2 b {
  font-size: clamp(22px, 1.75vw, 26px) !important;
}
@media (max-width: 900px) {
  .h3-big4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .h3-big4 .h3-bigbtn {
    padding: 34px 12px 14px 14px !important;
    min-height: 130px !important;
  }
  .h3-big4 .h3-bigbtn b {
    font-size: 19px !important;
  }
  .h3-big4 .h3-bigbtn small {
    font-size: 13px !important;
    max-width: 70%;
  }
  .h3-big4 .h3-bigbtn svg.h3-ic {
    width: 56px !important;
    height: 56px !important;
    right: 4px !important;
    top: auto !important;
    bottom: 6px;
    translate: none !important;
  }
  .h3-mid2 > .h3-lesson img,
  .h3-mid2 .h3-mats2 img {
    height: 200px !important;
    flex: none !important;
  }
  .h3-mid2 .h3-sections {
    order: 3;
  }
}
/* три плашки по центру, прежнего размера; текст чуть выше */
@media (min-width: 901px) {
  .h3-big4 {
    grid-template-columns: repeat(3, minmax(0, 298px)) !important;
    justify-content: center !important;
  }
  .h3-big4 .h3-bigbtn {
    padding-top: 42px !important;
  }
}
/* ===== первый экран: шапка, картинка с карточкой занятия, три плашки — и всё; ниже только истории ===== */
.h3-allhead,
.h3-mid2 {
  display: none !important;
}
@media (min-width: 901px) {
  header .bar {
    height: 92px !important;
  }
  .h3-big4 {
    margin-top: 42px !important;
  }
  .h3-big4 .h3-bigbtn {
    min-height: 134px !important;
    padding-top: 34px !important;
  }
  /* истории: четыре крупные картинки во всю ширину контента */
  .h3-stories {
    grid-auto-columns: calc((100% - 48px) / 4) !important;
  }
  .h3-sthead {
    margin-top: 56px !important;
  }
}
@media (min-width: 901px) {
  .h3-sthead {
    margin-top: 100px !important;
  }
}
/* «Уроки» — крупная черепашка с ноутбуком слева от календаря; «Пособия» — лежащая черепашка справа сверху */
body.no-helper #helper {
  display: none !important;
}
@media (min-width: 901px) {
  .zp-grid {
    grid-template-columns: 240px 340px minmax(0, 1fr) !important;
    align-items: end;
  }
  .zp-grid > .zp-right {
    align-self: start;
  }
}
.zp-tur {
  display: block;
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: contain;
  pointer-events: none;
}
.pp-head {
  display: flex;
  align-items: center;
  gap: 30px;
}
.pp-head > div {
  flex: 1;
  min-width: 0;
}
.pp-tur {
  flex: 0 0 auto;
  width: 260px;
  height: auto;
}
@media (max-width: 900px) {
  .zp-tur {
    max-height: 200px;
    width: auto;
    margin: 0 auto;
  }
  .pp-head {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .pp-tur {
    width: 200px;
    align-self: center;
  }
}
@media (min-width: 901px) {
  .zp-grid {
    align-items: start !important;
  }
  .zp-grid > .zp-tur {
    align-self: end;
    margin-top: -60px;
  }
  .zp-tzbox {
    margin-left: 268px !important;
  }
}
/* мягкая рассеянная тень под черепашками — как под календарём, чтобы чувствовалась поверхность */
.tur-floor {
  position: relative;
  display: block;
}
.tur-floor img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}
.tur-floor::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 8%;
  bottom: -4px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(92, 78, 66, 0.3), rgba(92, 78, 66, 0.12) 55%, rgba(92, 78, 66, 0));
  filter: blur(4px);
}
.pp-tur.tur-floor::after {
  left: 4%;
  right: 4%;
  bottom: -2px;
  height: 30px;
}
@media (min-width: 901px) {
  .zp-tur.tur-floor {
    max-height: none;
  }
  .zp-tur.tur-floor img {
    max-height: 360px;
    width: auto;
    margin: 0 auto;
  }
}
.tur-floor::after {
  background: radial-gradient(closest-side, rgba(92, 78, 66, 0.4), rgba(92, 78, 66, 0.16) 55%, rgba(92, 78, 66, 0));
}
.zp-tur.tur-floor::after {
  left: 14%;
  right: 0;
  bottom: -6px;
  height: 24px;
}
.pp-tur.tur-floor::after {
  bottom: 4%;
  height: 26px;
  left: 2%;
  right: 3%;
}
/* «Уроки»: пара строк о живом занятии под заголовком */
.zp-intro {
  color: #86776f;
  font-size: 16px;
  line-height: 1.6;
  max-width: 820px;
  margin: 6px 0 18px;
}
/* «Пособия»: текст заканчивается раньше, черепашке свободнее */
@media (min-width: 901px) {
  .pp-head > div {
    flex: 0 1 820px !important;
  }
  .pp-head .pp-tur {
    margin-left: auto;
  }
}
.pp-head .pp-lead {
  text-align: left !important;
}
/* главная: плашки «Упражнения», «Литература», «Музыка» по очереди приподнимаются — волна, как на стадионе */
@keyframes h3Wave {
  0%,
  14%,
  100% {
    transform: translateY(0);
  }
  6% {
    transform: translateY(-12px);
  }
}
.h3-big4 .h3-bigbtn {
  animation: h3Wave 6s ease-in-out 1.6s infinite;
}
.h3-big4 .h3-bigbtn:nth-child(2) {
  animation-delay: 1.85s;
}
.h3-big4 .h3-bigbtn:nth-child(3) {
  animation-delay: 2.1s;
}
.h3-big4:hover .h3-bigbtn {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .h3-big4 .h3-bigbtn {
    animation: none;
  }
}
.zp-intro {
  max-width: none !important;
}
@media (min-width: 901px) {
  .pp-head > div {
    flex: 0 1 863px !important;
  }
}
/* полки «Пособия» и «Литература»: без пунктира, со стрелками в белых кружках, как у историй */
.sc-box {
  position: relative;
}
.sc-nav {
  position: absolute;
  left: -18px;
  right: -18px;
  top: 50%;
  translate: 0 -50%;
  justify-content: space-between;
  pointer-events: none;
  z-index: 3;
}
.sc-nav button {
  pointer-events: auto;
  cursor: pointer;
}
.sc-track {
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.sc-track::-webkit-scrollbar {
  display: none;
}
.wb-wrap .wb-books.sc-track {
  flex-wrap: nowrap !important;
  padding-bottom: 26px !important;
}
.shelf-row .books.sc-track {
  padding-bottom: 22px !important;
}
.wb-wrap .wb-hint {
  margin-top: 10px !important;
}
@media (max-width: 900px) {
  .sc-nav {
    left: -6px;
    right: -6px;
  }
}
/* «прорезь»: тень вокруг каждой карточки, ровно срезанная сверху и снизу краем ленты,
   а по бокам — у крайних карточек — мягко тает (лента шире на поля тени) */
.h3-stories,
.wb-wrap .wb-books.sc-track,
.shelf-row .books.sc-track {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  margin-left: -30px !important;
  margin-right: -30px !important;
  padding: 12px 30px 12px !important;
  scroll-padding: 0 30px;
}
.h3-story {
  box-shadow: 0 4px 26px -2px rgba(92, 78, 66, 0.34) !important;
}
.wb-wrap .wb-book img {
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.04),
    0 4px 26px -2px rgba(92, 78, 66, 0.34) !important;
}
.shelf-row .book:not(.ghost) {
  box-shadow:
    inset 6px 0 0 rgba(0, 0, 0, 0.1),
    inset 7px 0 0 rgba(255, 255, 255, 0.18),
    0 4px 22px -2px rgba(92, 78, 66, 0.34) !important;
}
.wb-wrap .wb-book:hover {
  transform: translateY(-4px) rotate(-1deg);
}
.h3-stories,
.wb-wrap .wb-books.sc-track,
.shelf-row .books.sc-track {
  margin-left: -16px !important;
  margin-right: -16px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  scroll-padding: 0 16px;
}
/* «Упражнения»: новое — жирный цветной «!» слева от стрелки раздела и от числа упражнений темы */
.nw-bang {
  margin-left: auto;
  margin-right: 12px;
  color: #e6261f;
  font-weight: 900;
  font-size: 20px;
  line-height: 1;
  font-style: normal;
}
.exrow.nw .exsc {
  color: #e6261f;
  font-weight: 700;
}
.exrow .exsc {
  font-size: 14px;
}
/* отступ между плитками тем и списком грамматики */
.ex-topics {
  margin-bottom: 44px !important;
}
/* тетради: тонкий корешок и прошивка тремя стежками в цвет квадрата на обложке */
.wb-wrap .wb-book::before {
  width: 4px !important;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0)) !important;
}
.wb-wrap .wb-book::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 0;
  width: 3px;
  height: 200px;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(var(--st), var(--st)) 0 22% / 3px 22px no-repeat,
    linear-gradient(var(--st), var(--st)) 0 50% / 3px 22px no-repeat,
    linear-gradient(var(--st), var(--st)) 0 78% / 3px 22px no-repeat;
  border-radius: 2px;
  opacity: 0.9;
}
/* ленты (истории, пособия, полка): тень только снизу, сверху без среза */
.h3-story {
  box-shadow: 0 14px 22px -12px rgba(92, 78, 66, 0.5) !important;
}
.wb-wrap .wb-book img {
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.04),
    0 14px 22px -12px rgba(92, 78, 66, 0.55) !important;
}
.shelf-row .book:not(.ghost) {
  box-shadow:
    inset 6px 0 0 rgba(0, 0, 0, 0.1),
    inset 7px 0 0 rgba(255, 255, 255, 0.18),
    0 14px 16px -9px rgba(92, 78, 66, 0.5) !important;
}
.h3-stories,
.wb-wrap .wb-books.sc-track,
.shelf-row .books.sc-track {
  padding-top: 4px !important;
  padding-bottom: 16px !important;
}
.wb-wrap .wb-books.sc-track {
  padding-top: 14px !important;
}
/* прошивка — по самому краю тетради */
.wb-wrap .wb-book::after {
  left: 1px !important;
}
/* закрытые истории: без тёмных углов и двойной тени — размытая картинка строго внутри скругления */
.h3-story {
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.h3-story.locked img {
  border-radius: inherit;
  transform: scale(1.08);
  opacity: 1 !important;
  filter: blur(3px) grayscale(0.5) brightness(1.12) saturate(0.85) !important;
}
.h3-story.locked::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.4);
  pointer-events: none;
}
.h3-story.locked .h3-lock {
  z-index: 2;
}
.h3-story {
  -webkit-mask-image: none !important;
}
.h3-story.locked img {
  transform: scale(1.06);
  clip-path: inset(3% round 18px);
}
.h3-story.locked::after {
  border-radius: inherit;
}
/* ===== «Упражнения»: темы — лента со стрелками и срезанной снизу тенью ===== */
.ex-topics-box {
  margin: 4px 0 40px;
}
.ex-topics-box .ex-topics {
  display: flex !important;
  gap: 12px !important;
  margin: 0 -16px !important;
  padding: 4px 16px 16px !important;
  overflow-x: auto;
  overflow-y: hidden;
}
.ex-topics-box .h3-sec {
  flex: 0 0 140px;
  box-shadow: 0 14px 22px -12px rgba(92, 78, 66, 0.5) !important;
}
.ex-topics-box .sc-nav {
  top: 46%;
}
/* ===== история ===== */
#v-story {
  background: #fbf7f0;
  padding: 26px 16px 60px;
}
.st-card {
  max-width: 1196px;
  margin: 0 auto;
  background: #fff;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 22px 44px -26px rgba(92, 78, 66, 0.45);
}
.st-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 26px;
}
.st-back {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #3a302d;
  background: #f4efe7;
}
.st-back svg {
  width: 20px;
  transform: scaleX(-1);
}
.st-meta {
  font-weight: 600;
  color: #594b45;
  font-size: 16px;
}
.st-prog {
  flex: 0 0 180px;
  height: 8px;
  border-radius: 99px;
  background: #d9e8f8;
  overflow: hidden;
}
.st-prog i {
  display: block;
  height: 100%;
  background: #3494e3;
  border-radius: inherit;
}
/* сцена: тёплая комната у бабушки — стена, окно, пол */
.st-scene {
  position: relative;
  min-height: 560px;
  padding: 34px 44px 40px;
  background:
    radial-gradient(circle at 78% 30%, rgba(255, 236, 190, 0.9), rgba(255, 236, 190, 0) 34%),
    linear-gradient(#f6e8d2 0 74%, #e9cfa9 74% 75.5%, #e2c194 75.5%);
}
.st-scene::before {
  /* окно с рамой */
  content: "";
  position: absolute;
  right: 9%;
  top: 9%;
  width: 230px;
  height: 250px;
  border-radius: 115px 115px 10px 10px;
  background:
    linear-gradient(90deg, transparent 47.5%, #fff 47.5% 52.5%, transparent 52.5%),
    linear-gradient(transparent 52%, #fff 52% 56%, transparent 56%),
    linear-gradient(#cfe6f6, #f3f8e9);
  box-shadow:
    0 0 0 12px #fff,
    0 18px 30px -18px rgba(92, 78, 66, 0.5);
}
.st-scene::after {
  /* подоконник с геранью */
  content: "";
  position: absolute;
  right: calc(9% - 26px);
  top: calc(9% + 262px);
  width: 282px;
  height: 14px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 8px 14px -8px rgba(92, 78, 66, 0.5);
}
.st-title {
  font-family: Caveat, Rubik, sans-serif;
  font-size: 64px;
  line-height: 1;
  color: #3a302d;
  margin: 0 0 14px;
  transform: rotate(-4deg);
  transform-origin: left;
  display: inline-block;
}
.st-text {
  position: relative;
  z-index: 1;
  max-width: 520px;
  font-size: 19px;
  line-height: 1.55;
  color: #4a3e3a;
  margin: 0 0 20px;
}
.st-dots {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 10px;
}
.st-dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: var(--c);
  color: #fff;
  font: 700 16px Rubik, sans-serif;
  cursor: pointer;
  opacity: 0.55;
  box-shadow: 0 8px 14px -8px rgba(92, 78, 66, 0.6);
}
.st-dot.on {
  opacity: 1;
  outline: 3px solid #fff;
  outline-offset: -1px;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 35%, transparent), 0 8px 14px -8px rgba(92, 78, 66, 0.6);
}
.st-dot:not([disabled]):not(.on) {
  opacity: 0.85;
}
.st-dot[disabled] {
  background: #e7ddd0;
  color: #b5a79c;
  opacity: 1;
  cursor: default;
  box-shadow: none;
}
.st-kids {
  position: absolute;
  left: 40%;
  bottom: 22px;
  display: flex;
  align-items: flex-end;
  gap: 30px;
  translate: -50% 0;
}
.st-kids img {
  height: 300px;
  width: auto;
}
.st-vanya {
  height: 292px !important;
}
.st-say {
  position: absolute;
  left: 55%;
  bottom: 300px;
  max-width: 210px;
  background: #fff;
  border-radius: 22px;
  padding: 14px 18px;
  font-size: 16px;
  line-height: 1.35;
  color: #3a302d;
  box-shadow: 0 14px 24px -16px rgba(92, 78, 66, 0.6);
}
.st-say::after {
  content: "";
  position: absolute;
  left: 22px;
  bottom: -10px;
  border: 10px solid transparent;
  border-top-color: #fff;
  border-bottom: 0;
}
.st-go {
  position: absolute !important;
  right: 44px;
  bottom: 36px;
  width: auto !important;
  padding-left: 30px !important;
  padding-right: 30px !important;
}
@media (max-width: 900px) {
  .st-scene {
    padding: 22px 20px 30px;
    min-height: 0;
  }
  .st-scene::before,
  .st-scene::after {
    display: none;
  }
  .st-title {
    font-size: 44px;
  }
  .st-kids {
    position: static;
    translate: none;
    justify-content: center;
    margin-top: 20px;
  }
  .st-kids img {
    height: 190px !important;
  }
  .st-say {
    position: static;
    margin: 14px 0;
  }
  .st-go {
    position: static !important;
    display: inline-flex !important;
  }
  .st-prog {
    flex-basis: 80px;
  }
}
.st-title {
  font-family: Caveat, Rubik, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}
.st-kids {
  gap: 6px;
}
/* ===== тетради: тонкий корешок, прошивка — три узких стежка со скруглёнными концами ===== */
.wb-wrap .wb-book::after {
  display: none !important;
}
.wb-st {
  position: absolute;
  left: 2px;
  top: 0;
  bottom: 0;
  width: 2px;
  z-index: 3;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 14% 0;
}
.wb-st b {
  display: block;
  width: 2px;
  height: 20px;
  border-radius: 2px;
  background: var(--st);
  opacity: 0.9;
}
.wb-wrap .wb-book .wb-st {
  height: 200px;
  bottom: auto;
}
/* окно тетради */
.fl-ar,
.fl-dots,
.fl-other {
  display: none !important;
}
.fl-book {
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  perspective: 1600px;
  display: block;
}
.fl-pages {
  display: block;
  position: relative;
  width: 440px;
  height: 440px;
  border-radius: 4px 14px 14px 4px;
  box-shadow: 0 18px 30px -16px rgba(92, 78, 66, 0.6);
  transform-style: preserve-3d;
}
.fl-under,
.fl-leaf,
.fl-leaf img,
.fl-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px 14px 14px 4px;
}
.fl-under {
  object-fit: cover;
}
.fl-leaf {
  transform-origin: left center;
  transform-style: preserve-3d;
  transition:
    transform 0.9s cubic-bezier(0.45, 0.05, 0.2, 1),
    opacity 0.25s 0.62s;
  z-index: 2;
}
.fl-leaf img {
  object-fit: cover;
  backface-visibility: hidden;
}
.fl-back {
  transform: rotateY(180deg);
  backface-visibility: hidden;
  background: linear-gradient(90deg, #efe9df, #fbf8f3 30%);
}
.fl-book.open .fl-leaf {
  transform: rotateY(-178deg);
  opacity: 0;
}
.fl-book:not(.open) .fl-leaf {
  transition:
    transform 0.9s cubic-bezier(0.45, 0.05, 0.2, 1),
    opacity 0.2s;
}
/* тень корешка у страницы */
.fl-pages::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 7px;
  z-index: 3;
  border-radius: 4px 0 0 4px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0));
  pointer-events: none;
}
.fl-pages .wb-st {
  left: 3px;
  width: 3px;
  padding: 15% 0;
}
.fl-pages .wb-st b {
  width: 3px;
  height: 40px;
}
@media (max-width: 860px) {
  .fl-pages {
    width: min(440px, 78vw);
    height: min(440px, 78vw);
  }
}
.fl-leaf {
  transition:
    transform 0.9s cubic-bezier(0.45, 0.05, 0.2, 1),
    visibility 0s 0.9s !important;
}
.fl-book.open .fl-leaf {
  opacity: 1 !important;
  visibility: hidden;
}
.fl-book:not(.open) .fl-leaf {
  visibility: visible;
  transition:
    transform 0.9s cubic-bezier(0.45, 0.05, 0.2, 1),
    visibility 0s 0s !important;
}
.fl-back {
  box-shadow: inset -18px 0 24px -18px rgba(92, 78, 66, 0.35);
}
.fl-pages .wb-st,
.fl-pages .wb-st b {
  width: 2px;
}

/* ===== история на весь экран: без шапки и черепашки, сцена до подвала ===== */
body.st-full > header {
  display: none !important;
}
body.st-full {
  padding-top: 0 !important;
}
#v-story {
  padding: 0 !important;
  background: #e2c194;
}
body.st-full main {
  margin: 0 !important;
  max-width: none !important;
}
.st-card {
  max-width: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: calc(100dvh - 44px);
  display: flex;
  flex-direction: column;
  background: #f6e8d2;
}
.st-bar {
  padding: 0 !important;
  background: #fff;
  display: block !important;
}
.st-bar-in {
  max-width: 1196px;
  margin: 0 auto;
  padding: 22px 16px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.st-h {
  font: 900 24px Rubik, Nunito, "Segoe UI", Arial, sans-serif;
  color: #4a3e3a;
  margin: 0;
}
.st-meta {
  display: flex !important;
  align-items: center;
  gap: 14px;
  font-weight: 400 !important;
  color: #86776f !important;
  font-size: 15px !important;
  margin-top: 4px;
}
.st-x {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(74, 62, 58, 0.08);
  color: #4a3e3a;
  font-size: 17px;
  text-decoration: none;
  flex: none;
}
.st-scene {
  flex: 1;
  padding: 0 !important;
  min-height: 0 !important;
  background:
    radial-gradient(circle at 76% 26%, rgba(255, 236, 190, 0.9), rgba(255, 236, 190, 0) 32%),
    linear-gradient(#f6e8d2 0 66%, #e9cfa9 66% 67.2%, #e2c194 67.2%) !important;
  display: flex;
}
.st-scene::before,
.st-scene::after {
  display: none !important;
}
.st-in {
  position: relative;
  width: 100%;
  max-width: 1196px;
  margin: 0 auto;
  padding: 34px 16px 0;
  min-height: 640px;
}
/* окно с подоконником */
.st-in::before {
  content: "";
  position: absolute;
  right: 7%;
  top: 7%;
  width: 230px;
  height: 250px;
  border-radius: 115px 115px 10px 10px;
  background:
    linear-gradient(90deg, transparent 47.5%, #fff 47.5% 52.5%, transparent 52.5%),
    linear-gradient(transparent 52%, #fff 52% 56%, transparent 56%),
    linear-gradient(#cfe6f6, #f3f8e9);
  box-shadow:
    0 0 0 12px #fff,
    0 18px 30px -18px rgba(92, 78, 66, 0.5);
}
.st-in::after {
  content: "";
  position: absolute;
  right: calc(7% - 26px);
  top: calc(7% + 262px);
  width: 282px;
  height: 14px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 8px 14px -8px rgba(92, 78, 66, 0.5);
}
.st-kids {
  left: 34% !important;
  bottom: 30px !important;
}
.st-say {
  left: 46% !important;
  bottom: 320px !important;
}
.st-go {
  position: static !important;
  margin-top: 4px;
}
/* место для наклеек — на песочном полу справа */
.st-stick {
  position: absolute;
  right: 16px;
  bottom: 30px;
  width: 400px;
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}
.st-stick b {
  font: 700 18px Rubik, sans-serif;
  color: #6b4f33;
}
.st-stick small {
  font-size: 14px;
  color: #7a5c3e;
}
.st-slots {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  width: 100%;
}
.st-slot {
  aspect-ratio: 1;
  background: rgba(255, 248, 236, 0.5);
  border: 2px dashed rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 3px 8px -4px rgba(107, 79, 51, 0.35);
}
.st-slot.s0 { border-radius: 58% 42% 55% 45% / 47% 58% 42% 53%; transform: rotate(-6deg); }
.st-slot.s1 { border-radius: 45% 55% 40% 60% / 55% 45% 58% 42%; transform: rotate(5deg) translateY(4px); }
.st-slot.s2 { border-radius: 52% 48% 60% 40% / 42% 52% 48% 58%; transform: rotate(-3deg); }
.st-slot.s3 { border-radius: 40% 60% 48% 52% / 58% 40% 60% 42%; transform: rotate(7deg) translateY(3px); }
.st-slot.s4 { border-radius: 60% 40% 52% 48% / 46% 60% 40% 54%; transform: rotate(-5deg); }
.st-slot.s5 { border-radius: 48% 52% 42% 58% / 54% 44% 56% 46%; transform: rotate(4deg) translateY(4px); }
@media (max-width: 900px) {
  .st-in {
    min-height: 0;
    padding-bottom: 30px;
  }
  .st-in::before,
  .st-in::after {
    display: none;
  }
  .st-stick {
    position: static;
    width: 100%;
    margin-top: 20px;
  }
  .st-scene {
    background: #f6e8d2 !important;
  }
}
.st-stick .st-go {
  position: relative !important;
}
.st-in {
  padding-top: 44px;
}
.st-stick .st-go {
  right: auto !important;
  bottom: auto !important;
}
/* история v3 */
.st-bar {
  background: #fbf7f0 !important;
}
.st-bar-in {
  display: block !important;
  padding: 20px 16px 16px !important;
}
.st-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.st-meta {
  margin-top: 6px !important;
}
.st-title {
  font-size: 84px !important;
  margin-bottom: 18px !important;
}
.st-text {
  font-size: 23px !important;
  line-height: 1.6 !important;
  max-width: 600px !important;
}
.st-dots {
  gap: 18px !important;
}
.st-dot {
  width: 52px !important;
  height: 52px !important;
  font-size: 19px !important;
}
/* окно — только полупрозрачная рама на бежевом, без стекла */
.st-in::before {
  background:
    linear-gradient(90deg, transparent 47.5%, rgba(255, 255, 255, 0.45) 47.5% 52.5%, transparent 52.5%),
    linear-gradient(transparent 52%, rgba(255, 255, 255, 0.45) 52% 56%, transparent 56%) !important;
  box-shadow: 0 0 0 12px rgba(255, 255, 255, 0.4) !important;
}
.st-in::after {
  background: rgba(255, 255, 255, 0.4) !important;
  box-shadow: none !important;
}
/* наклейки: пять крупных прорезей прямо на границе стены и пола */
.st-stick {
  top: calc(66% - 58px);
  bottom: auto !important;
  width: auto !important;
  justify-items: end !important;
  text-align: right !important;
  gap: 14px !important;
}
.st-slots {
  grid-template-columns: repeat(5, 104px) !important;
  gap: 26px !important;
  width: auto !important;
}
.st-slot {
  border-width: 5px !important;
  border-color: rgba(255, 255, 255, 0.9) !important;
  background: rgba(255, 248, 236, 0.45) !important;
  box-shadow: inset 0 3px 7px -4px rgba(107, 79, 51, 0.28) !important;
}
.st-stick small {
  font-size: 16px !important;
  margin-top: 4px;
}
.st-kids {
  left: 30% !important;
}
.st-say {
  left: 41% !important;
}
@media (max-width: 900px) {
  .st-title {
    font-size: 56px !important;
  }
  .st-text {
    font-size: 19px !important;
  }
  .st-slots {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 12px !important;
  }
  .st-stick {
    justify-items: center !important;
    text-align: center !important;
  }
}
@media (min-width: 901px) {
  .st-slots {
    grid-template-columns: repeat(5, 96px) !important;
    gap: 20px !important;
  }
  .st-kids {
    left: 25% !important;
  }
  .st-say {
    left: 35% !important;
  }
  .st-stick {
    top: calc(66% - 52px);
  }
}
/* история: текст крупный, для детского чтения — тот же шрифт, что в книгах; кнопка выше и ближе к подписи */
.st-text {
  font-family: Rubik, Nunito, "Segoe UI", Arial, sans-serif !important;
  font-size: 29px !important;
  line-height: 1.6 !important;
  max-width: 660px !important;
  color: #4a3e3a !important;
}
.st-title {
  margin-bottom: 10px !important;
}
@media (min-width: 901px) {
  .st-stick {
    top: calc(66% - 84px) !important;
    gap: 6px !important;
  }
  .st-stick small {
    margin-top: 10px !important;
  }
  .st-stick .st-go {
    margin-top: 4px !important;
  }
}
@media (max-width: 900px) {
  .st-text {
    font-size: 23px !important;
  }
}
/* наклейки: полученная — яркая, на месте прорези */
.st-slot {
  display: grid;
  place-items: center;
  font-size: 46px;
  line-height: 1;
}
.st-slot.got {
  background: #fff !important;
  border: 5px solid #fff !important;
  box-shadow: 0 10px 18px -10px rgba(107, 79, 51, 0.55) !important;
}
.st-rule {
  margin: 10px 0 0;
  display: grid;
  gap: 2px;
  justify-items: end;
  color: #6b4f33;
}
.st-rule b {
  font: 700 19px Rubik, sans-serif;
}
.st-rule span {
  font-size: 15px;
  color: #7a5c3e;
}
.st-stick small {
  display: none;
}
/* лента историй: в уголке картинки — четыре «лунки» глав */
.h3-chs {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 6px 12px -8px rgba(0, 0, 0, 0.45);
}
.h3-chs i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(92, 78, 66, 0.12);
  box-shadow: inset 0 2px 3px rgba(92, 78, 66, 0.3);
}
.h3-chs i.on {
  background: #f5953a;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}
@media (max-width: 900px) {
  .st-rule {
    justify-items: center;
  }
  .st-slot {
    font-size: 30px;
  }
}
/* лунки глав на картинке: без плашки; собранная — белая, пустая — белый ободок с лёгкой дымкой */
.h3-chs {
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  gap: 7px !important;
  right: 14px !important;
  bottom: 14px !important;
}
.h3-chs i {
  width: 16px !important;
  height: 16px !important;
  background: rgba(255, 255, 255, 0.28) !important;
  border: 2px solid #fff;
  box-sizing: border-box;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25) !important;
}
.h3-chs i.on {
  background: #fff !important;
}
/* окно тетради v2: без анимации и звука */
.fl-pg1 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px 14px 14px 4px;
}
.fl-dots2 {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.fl-dots2 i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e6e0d6;
}
.fl-dots2 i.on {
  background: #4a3e3a;
}
.fl-buy {
  display: inline-flex !important;
  width: auto !important;
  margin: 4px 0 26px;
  padding: 12px 30px !important;
  border: 0;
  cursor: pointer;
  font: inherit;
}
.fl-all {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.fl-th {
  position: relative;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 3px 8px 8px 3px;
  opacity: 0.6;
  box-shadow: 0 8px 12px -8px rgba(92, 78, 66, 0.6);
}
.fl-th img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}
.fl-th .wb-st {
  left: 1px;
  padding: 18% 0;
}
.fl-th .wb-st b {
  height: 8px;
  width: 2px;
}
.fl-th.on {
  opacity: 1;
  outline: 2px solid #4a3e3a;
  outline-offset: 3px;
}
.fl-buy {
  font-family: Rubik, Nunito, "Segoe UI", Arial, sans-serif !important;
  font-weight: 600 !important;
  font-size: 17px !important;
  color: #fff !important;
}
/* история: экран целиком, подвал прямо на песочном полу, без полосок */
body.st-full {
  background: #e2c194 !important;
  overflow-x: hidden;
}
body.st-full main,
body.st-full #v-story,
body.st-full .st-card {
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  max-width: none !important;
}
body.st-full .st-card {
  min-height: 100dvh !important;
}
body.st-full .site-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent !important;
  border: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 12px !important;
  z-index: 2;
}
body.st-full .site-foot,
body.st-full .site-foot a {
  color: rgba(107, 79, 51, 0.7) !important;
}
body.st-full {
  position: relative;
  min-height: 100dvh;
}
@media (min-width: 901px) {
  .st-kids {
    bottom: 0 !important;
  }
  .st-kids img {
    height: 280px !important;
  }
  .st-stick {
    top: calc(66% - 72px) !important;
  }
}
/* прорезь под наклейку — светлая, непрозрачная, одинаковая на стене и на полу */
.st-slot {
  background: #f8efe1 !important;
}
.st-slot.got {
  background: #fff !important;
}
.st-hint {
  color: #86776f;
  font-size: 15px;
}
.st-hint::before {
  content: "·";
  margin-right: 10px;
}
/* «Упражнения»: плашка темы, если пришёл из истории */
.ex-thm {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border-radius: 20px;
  padding: 12px 18px 12px 12px;
  margin: 0 0 18px;
  box-shadow: 0 14px 22px -16px rgba(92, 78, 66, 0.5);
}
.ex-thm[hidden] {
  display: none;
}
.ex-thm img {
  width: 64px;
  height: 54px;
  object-fit: cover;
  border-radius: 12px;
}
.ex-thm span {
  flex: 1;
  display: grid;
  gap: 2px;
}
.ex-thm b {
  color: #4a3e3a;
  font-size: 17px;
}
.ex-thm small {
  color: #86776f;
  font-size: 14px;
}
.ex-thm a {
  color: #3494e3;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
/* итог упражнения: строка про наклейку */
.res-thm {
  margin: 4px auto 16px;
  color: #86776f;
  font-size: 16px;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 4px;
}
.res-thm.got b {
  color: #4a3e3a;
  font-size: 19px;
}
.res-thm .res-stk {
  font-size: 44px;
  line-height: 1;
}
.res-thm a {
  color: #3494e3;
  font-weight: 600;
  text-decoration: none;
}
.st-in {
  padding-left: 44px !important;
  padding-right: 44px !important;
}
.st-bar-in {
  padding-left: 44px !important;
  padding-right: 44px !important;
}
.st-stick {
  right: 44px !important;
}
@media (min-width: 901px) {
  .st-kids img {
    height: min(280px, 34vh) !important;
  }
}
body.st-full .site-foot .fwrap,
body.st-full .site-foot .flegal {
  justify-content: flex-end !important;
  text-align: right !important;
}
body.st-full .site-foot {
  text-align: right !important;
}
/* подпись над кнопкой в истории */
.st-call {
  margin: 8px 0 0;
  font: 600 17px Rubik, sans-serif;
  color: #6b4f33;
}
/* копирайт: на истории — там же, где везде, слева внизу; дети стоят чуть выше него */
body.st-full .site-foot,
body.st-full .site-foot .fwrap,
body.st-full .site-foot .flegal {
  text-align: left !important;
  justify-content: flex-start !important;
}
@media (min-width: 901px) {
  .st-kids {
    bottom: 34px !important;
    left: 30% !important;
  }
}
/* «Упражнения»: темы — пять плиток слева; справа черепашка выглядывает из-за края с подсказкой */
#v-exercises,
#v-music {
  position: relative;
}
.ex-topics-box {
  max-width: 764px;
}
.ex-tur {
  position: absolute;
  right: 0;
  top: 18px;
  z-index: 5;
}
.ex-tur-btn {
  position: relative;
  display: block;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}
.ex-tur-btn img {
  display: block;
  height: 190px;
  width: auto;
  transition: transform 0.3s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.ex-tur-btn:hover img,
.ex-tur.open .ex-tur-btn img {
  transform: translateX(-8px) rotate(-3deg);
}
.ex-tur-bang {
  position: absolute;
  left: -14px;
  top: 2px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #f5953a;
  color: #fff;
  font: 900 26px Rubik, sans-serif;
  border: 3px solid #fff;
  box-shadow: 0 8px 16px -8px rgba(92, 78, 66, 0.7);
  animation: exBang 2.4s ease-in-out infinite;
}
.ex-tur.open .ex-tur-bang {
  animation: none;
  opacity: 0;
  transform: scale(0.5);
  transition: 0.2s;
}
@keyframes exBang {
  0%,
  70%,
  100% {
    transform: scale(1);
  }
  80% {
    transform: scale(1.18) rotate(-8deg);
  }
  90% {
    transform: scale(0.96) rotate(5deg);
  }
}
.ex-tur-cloud {
  position: absolute;
  right: calc(100% + 14px);
  top: 4px;
  width: 300px;
  background: #fff;
  border-radius: 24px;
  padding: 18px 20px 16px;
  box-shadow: 0 18px 34px -18px rgba(92, 78, 66, 0.55);
  color: #4a3e3a;
  opacity: 0;
  transform: translateX(14px) scale(0.92);
  transform-origin: right top;
  pointer-events: none;
  transition:
    opacity 0.2s,
    transform 0.3s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.ex-tur-cloud::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 36px;
  border: 10px solid transparent;
  border-left-color: #fff;
  border-right: 0;
}
.ex-tur.open .ex-tur-cloud {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.ex-tur-cloud b {
  display: block;
  font-size: 17px;
  margin-bottom: 8px;
}
.ex-tur-cloud p {
  margin: 4px 0;
  font-size: 15.5px;
  display: flex;
  gap: 8px;
  align-items: center;
}
@media (max-width: 900px) {
  .ex-tur {
    top: 6px;
  }
  .ex-tur-btn img {
    height: 120px;
  }
  .ex-tur-cloud {
    width: 240px;
    top: calc(100% + 6px);
    right: 8px;
  }
  .ex-tur-cloud::after {
    display: none;
  }
}
/* главная: у черепашки яркий «?» — хочется нажать */
.helper .hp-btn::after {
  content: "?";
  position: absolute;
  left: -16px;
  top: -10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #f5953a;
  color: #fff;
  font: 900 21px Rubik, sans-serif;
  border: 3px solid #fff;
  box-shadow: 0 8px 16px -8px rgba(92, 78, 66, 0.7);
  animation: exBang 2.4s ease-in-out infinite;
  z-index: 3;
  pointer-events: none;
}
.helper.open .hp-btn::after {
  opacity: 0;
  animation: none;
}
/* история: текст слева, картинка справа (или наоборот), наклейки по центру внизу, кнопка справа внизу */
@media (min-width: 901px) {
  .st-in.txt-l .st-kids {
    left: auto !important;
    right: 60px !important;
    bottom: calc(34% - 6px) !important;
    translate: none !important;
  }
  .st-in.txt-l .st-kids img {
    height: min(300px, 36vh) !important;
  }
  .st-in.txt-r .st-title,
  .st-in.txt-r .st-text,
  .st-in.txt-r .st-dots {
    margin-left: auto !important;
  }
  .st-in.txt-r .st-kids {
    left: 60px !important;
    right: auto !important;
    bottom: calc(34% - 6px) !important;
    translate: none !important;
  }
  .st-in.txt-r::before {
    right: auto;
    left: 7%;
  }
  .st-slots-c {
    position: absolute;
    left: 50%;
    translate: -50% 0;
    top: calc(66% + 28px);
    z-index: 1;
  }
  .st-stick {
    top: auto !important;
    bottom: 64px !important;
  }
}
.st-slots-c {
  display: grid;
  grid-template-columns: repeat(5, 96px);
  gap: 20px;
}
@media (max-width: 900px) {
  .st-slots-c {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 12px !important;
    margin-top: 20px;
  }
}
@media (min-width: 901px) {
  .st-kids {
    z-index: 2;
  }
  .st-slots-c {
    left: 42%;
    grid-template-columns: repeat(5, clamp(64px, 6.6vw, 96px)) !important;
    gap: clamp(12px, 1.4vw, 20px) !important;
  }
  .st-call {
    max-width: 230px;
    text-align: right;
    line-height: 1.3;
  }
}
@media (min-width: 901px) {
  .st-text {
    max-width: min(660px, 52vw) !important;
  }
}
/* «Упражнения»: черепашка того же размера, что на главной; над головой «i»; облачко — овал под ней */
.ex-tur-btn img {
  height: 126px !important;
}
.ex-tur {
  top: 30px !important;
}
.ex-tur-bang {
  left: -16px !important;
  top: -10px !important;
  width: 36px !important;
  height: 36px !important;
  font: italic 900 21px Georgia, "Times New Roman", serif !important;
}
.ex-tur-cloud {
  right: 0 !important;
  top: calc(100% + 18px) !important;
  width: 330px !important;
  padding: 34px 40px 38px !important;
  border-radius: 50% !important;
  background: #f6eedb !important;
  border: 2px solid #e3d3b2;
  text-align: center;
  color: #6b4f33 !important;
  font-family: Caveat, Rubik, sans-serif;
  transform-origin: 80% 0 !important;
  transform: translateY(-10px) scale(0.92) !important;
}
.ex-tur.open .ex-tur-cloud {
  transform: none !important;
}
.ex-tur-cloud::after {
  right: 52px !important;
  top: -12px !important;
  border: 12px solid transparent !important;
  border-bottom-color: #f6eedb !important;
  border-top: 0 !important;
  filter: drop-shadow(0 -2px 0 #e3d3b2);
}
.ex-tur-cloud b {
  font-family: Caveat, Rubik, sans-serif !important;
  font-weight: 700 !important;
  font-size: 26px !important;
  color: #5a4130;
  margin-bottom: 6px !important;
}
.ex-tur-cloud p {
  display: block !important;
  font-family: Caveat, Rubik, sans-serif !important;
  font-weight: 600;
  font-size: 19px !important;
  margin: 3px 0 !important;
}
.ex-tur-cloud {
  width: 400px !important;
  padding: 28px 54px 32px !important;
  top: calc(100% + 14px) !important;
}
.ex-tur-cloud::after {
  top: -11px !important;
  right: 56px !important;
}
.ex-tur-cloud::after {
  right: 34% !important;
  top: -12px !important;
  filter: none !important;
}
.ex-tur-cloud::before {
  content: "";
  position: absolute;
  right: calc(34% - 2px);
  top: -15px;
  border: 14px solid transparent;
  border-bottom-color: #e3d3b2;
  border-top: 0;
}
@media (min-width: 901px) {
  .st-slots-c {
    left: 50% !important;
    grid-template-columns: repeat(5, clamp(80px, 8vw, 116px)) !important;
    gap: clamp(14px, 1.6vw, 24px) !important;
    top: calc(66% + 22px) !important;
  }
  .st-call {
    max-width: none !important;
    white-space: nowrap;
  }
}
.st-call {
  font: 400 15px Rubik, Nunito, "Segoe UI", Arial, sans-serif !important;
  color: #6b4f33 !important;
  margin: 0 0 4px !important;
}
.st-slot {
  font-size: 54px !important;
}
@media (min-width: 901px) {
  .st-slots-c {
    grid-template-columns: repeat(5, clamp(72px, 7.2vw, 104px)) !important;
    gap: clamp(14px, 1.5vw, 22px) !important;
  }
  .st-call {
    white-space: normal !important;
    max-width: 200px !important;
    text-align: right;
    line-height: 1.35 !important;
    margin-bottom: 8px !important;
  }
}
/* ===== пузырьки мысли у черепашки: третий, верхний — рыжий кружок с белым «?» ===== */
.helper .hp-btn::after {
  content: none !important;
}
.hp-cloud .hc1 {
  width: 34px !important;
  height: 34px !important;
  left: 10px !important;
  top: -60px !important;
  background: #f5953a !important;
  border: 3px solid #fff !important;
  color: #fff !important;
  font: 900 19px Rubik, sans-serif !important;
  box-shadow: 0 8px 14px -8px rgba(92, 78, 66, 0.7) !important;
}
.hp-cloud .hc2 {
  width: 13px !important;
  height: 13px !important;
  border-color: #e7d9c6 !important;
}
.hp-cloud .hc3 {
  width: 8px !important;
  height: 8px !important;
  border-color: #e7d9c6 !important;
}
/* «Упражнения»: та же живая черепашка, того же размера, только вверху справа; в верхнем пузырьке — «i» */

body.hp-ex .hp-cloud .hc1 {
  font-size: 0 !important;
}
body.hp-ex .hp-cloud .hc1::after {
  content: "i";
  font: italic 900 20px Georgia, "Times New Roman", serif;
  color: #fff;
}

.ex-tur-btn {
  display: none !important;
}
.ex-tur {
  position: fixed !important;
  right: 16px !important;
  top: 268px !important;
  z-index: 72 !important;
}
body:not(.hp-ex) .ex-tur {
  display: none;
}
.ex-tur-cloud {
  top: 0 !important;
}
.focus.on ~ #helper,
body:has(.focus.on) #helper {
  display: none !important;
}
/* «Упражнения»: то же окно помощника, но вместо формы — подсказка про награды; окно под черепашкой */
#hpTip {
  display: none;
  padding: 6px 8px 4px;
}
body.hp-ex #hpTip {
  display: block;
}
body.hp-ex #hpForm {
  display: none !important;
}
.hp-tip-t {
  display: block;
  font: 700 28px Caveat, Rubik, sans-serif;
  color: #4a3e3a;
  margin: 0 0 8px;
}
#hpTip p {
  margin: 4px 0;
  font: 400 16px Rubik, Nunito, "Segoe UI", Arial, sans-serif;
  color: #86776f;
  text-align: left;
}



#hpTip .hp-tip-t {
  font-size: 30px;
  line-height: 1.05;
}

#hpTip .hp-tip-t {
  padding-right: 34px;
}
/* копирайт: всегда закреплён в левом нижнем углу экрана, тёмный — виден на любом фоне */
.site-foot .flegal {
  position: fixed !important;
  left: 22px !important;
  bottom: 10px !important;
  right: auto !important;
  top: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  max-width: none !important;
  z-index: 60;
  color: #2b2421 !important;
  pointer-events: auto;
}
.site-foot .flegal,
.site-foot .flegal a,
.site-foot .flegal span {
  color: #2b2421 !important;
}
.focus.on ~ * .flegal,
body:has(.focus.on) .site-foot .flegal,
body.try-full .site-foot .flegal {
  display: none !important;
}
body.st-full .site-foot {
  position: static !important;
}

/* «Упражнения»: окно подсказки — над черепашкой, как на главной; шире влево, строки не переносятся */
body.hp-ex .hp-panel {
  width: 360px !important;
  max-width: calc(100vw - 40px);
}
#hpTip p,
#hpTip .hp-tip-t {
  white-space: nowrap;
}
#hpTip .hp-tip-t {
  padding-right: 36px;
}
body.hp-ex .hp-panel {
  width: 410px !important;
}
#hpTip .hp-tip-t {
  font-size: 28px !important;
}
/* «Мои темы» — по центру, той же ширины и на той же высоте, что «Моя полка» в литературе */
.ex-topics-box {
  max-width: 840px !important;
  margin: 0 auto 40px !important;
}
.ex-topics-box .h3-sec {
  flex: 0 0 calc((100% - 48px) / 5) !important;
}
/* окно подсказки — по ширине текста, без лишнего запаса */
body.hp-ex .hp-panel {
  width: max-content !important;
}
/* темы — той же ширины, что книги на полке (106px), и с тем же промежутком (14px) */
.ex-topics-box .ex-topics {
  gap: 14px !important;
}
.ex-topics-box .h3-sec {
  flex: 0 0 106px !important;
}
.ex-topics-box .h3-sec span {
  font-size: 11.5px !important;
  padding: 4px 8px 3px !important;
}
.ex-topics-box {
  margin-bottom: 66px !important;
}
/* флажок «новое» — чуть выступает над верхним краем плашки */
.h3-bigbtn .nw-dot {
  top: -7px !important;
}
/* темы: без белой полоски — плитка целиком светло-бежевая, подпись тёмная, как «Упражнения» */
.ex-topics-box .h3-sec {
  background: #f8f4ec !important;
}
.ex-topics-box .h3-sec span {
  background: transparent !important;
  color: #4a3e3a !important;
  font-weight: 700 !important;
}
/* «Упражнения · Литература · Музыка» — переход между разделами без возврата на главную */
.sec-tabs {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 14px;
}
.sec-tabs > * {
  font-size: inherit;
  line-height: inherit;
}
.sec-tabs a,
.sec-tabs .sec-off {
  font-weight: 400 !important;
  color: #4a3e3a;
  text-decoration: none;
  opacity: 0.75;
}
.sec-tabs a:hover {
  opacity: 1;
}
.sec-tabs .sec-off {
  opacity: 0.4;
  cursor: default;
}
.sec-tabs .on {
  font-weight: 900;
  color: #4a3e3a;
}
.sec-tabs i {
  font-style: normal;
  font-weight: 400;
  color: #b5a79c;
}
/* копирайт: на страницах с «замком» прокрутки (литература и др.) — без лишнего отступа, там же, где везде */
body.lock-page .site-foot .flegal,
body .site-foot .flegal {
  padding: 0 !important;
  left: 22px !important;
  bottom: 10px !important;
}
/* подсказки черепашки: своя на каждом экране */
.hp-tip {
  display: none !important;
  padding: 6px 8px 4px;
}
body[data-hp-sec="exercises"] #hpTip,
body[data-hp-sec="read"] #hpTipRead,
body[data-hp-sec="music"] #hpTipMusic {
  display: block !important;
}
.hp-tip p,
.hp-tip .hp-tip-t {
  white-space: nowrap;
}
.hp-tip p {
  margin: 4px 0;
  font: 400 16px Rubik, Nunito, "Segoe UI", Arial, sans-serif;
  color: #86776f;
}
.hp-tip .hp-tip-t {
  display: block;
  font: 700 28px Caveat, Rubik, sans-serif;
  color: #4a3e3a;
  margin: 0 0 8px;
  padding-right: 36px;
}
/* «Литература» на одной странице: узкая белая плашка раздела, под ней — широкие светлые строки */
.rd-acc {
  display: grid;
  gap: 10px;
}
.rd-grp {
  width: min(420px, 100%) !important;
  justify-content: flex-start !important;
  gap: 12px;
}
.rd-grp .exsc {
  margin-left: auto;
}
.rd-grp i {
  font-style: normal;
  font-size: 22px;
  color: #a09189;
  transition: transform 0.2s;
}
.rd-grp.open i {
  transform: rotate(90deg);
}
.rd-sub {
  margin: 0 0 8px;
}
.rd-sub .lit-row {
  background: #f8f4ec !important;
  border: 1px solid #efe9df;
  border-radius: 16px;
}
.rd-sub .lit-row .exn {
  display: grid;
  gap: 2px;
}
.rd-sub .lit-row .exd {
  display: block;
  color: #a09189;
  font-size: 14px;
}
/* «Литература»: плашка раздела во всю ширину, как в «Упражнениях»; список — со сдвигом вправо */
.rd-grp {
  width: 100% !important;
}
.rd-sub {
  margin-top: 0 !important;
  margin-left: 36px !important;
}
/* стрелки лент — в одном и том же месте в «Упражнениях» и «Литературе» */
.sc-box > .sc-nav {
  top: 84px !important;
  translate: 0 -50% !important;
}
/* темы по высоте — по центру стрелок; список ниже остаётся на месте */
.ex-topics-box .ex-topics {
  padding-top: 29px !important;
}
.ex-topics-box {
  margin-bottom: 41px !important;
}
/* лунки глав: без backdrop-filter — на iPad/Safari он мигает и пропадает в прокручиваемой ленте */
.h3-chs {
  z-index: 2 !important;
  transform: translateZ(0);
  pointer-events: none;
}
.h3-chs i {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(255, 255, 255, 0.35) !important;
}
.h3-chs i.on {
  background: #fff !important;
}
/* логотип: шарики и «Наследие детям» — мягким цветным карандашом, с просветами */
header .logo-dots g {
  filter: url(#pencil);
}
header .logo b i {
  filter: url(#pencilTxt);
}
/* главная: четыре плашки — Игры, Упражнения, Литература, Музыка */
@media (min-width: 901px) {
  .h3-big4 {
    grid-template-columns: repeat(4, minmax(0, 272px)) !important;
  }
}
.h3-bigbtn.c-yellow {
  background: #f2c94c !important;
}
/* «Продолжаем актуальную историю» под заголовком карточки занятия */
.h3-cont {
  margin: -4px 0 8px !important;
  font-size: 14px !important;
  color: #86776f !important;
}
body[data-hp-sec="games"] #hpTipGames {
  display: block !important;
}
/* «Упражнения»: выбор по темам пока спрятан — темы появятся, когда накопятся истории */
#exTopics {
  display: none !important;
}
#v-exercises .exlist,
#v-music .exlist {
  margin-top: 30px;
}
/* карточка занятия компактнее: подпись сразу под заголовком, крупнее; шапка ниже — плашки снова в экране */
.h3-side .h3-today .h3-today-h {
  margin: 4px 0 0 !important;
}
.h3-side .h3-today p.h3-cont {
  margin: 0 0 12px !important;
  font-size: 17px !important;
  line-height: 1.3 !important;
  color: #86776f !important;
}
@media (min-width: 901px) {
  header .bar {
    height: 80px !important;
  }
  .h3-big4 {
    margin-top: 26px !important;
  }
}
/* подзаголовок карточки чуть крупнее; на невысоких экранах карточка компактнее, чтобы плашки разделов помещались целиком */
.h3-side .h3-today p.h3-cont { font-size: 19px !important; }
@media (min-width: 901px) and (max-height: 880px) {
  header .bar { height: 72px !important; }
  .h3-side { margin-top: -10px !important; }
  .h3-side .h3-today img.h3-tpic { height: 128px !important; aspect-ratio: auto !important; object-fit: cover !important; }
  .h3-side .h3-btn { margin-top: 12px !important; }
  .h3-big4 { margin-top: 20px !important; }
}
@media (min-width: 901px) and (max-height: 760px) {
  .h3-side .h3-today img.h3-tpic { height: 96px !important; }
  .h3-big4 { margin-top: 14px !important; }
}
@media (min-width: 901px) and (max-height: 880px) {
  .h3-side .h3-today p:not(.h3-cont) { margin-bottom: 8px !important; }
  .h3-side .h3-today img.h3-tpic { height: 140px !important; }
}
@media (min-width: 901px) and (max-height: 760px) {
  .h3-side .h3-today img.h3-tpic { height: 104px !important; }
}
/* всё чуть ниже: шапка и карточка возвращаются ближе к прежнему месту */
@media (min-width: 901px) and (max-height: 880px) {
  header .bar { height: 78px !important; }
  .h3-side { margin-top: 0 !important; }
  .h3-big4 { margin-top: 22px !important; }
}
@media (min-width: 901px) and (max-height: 760px) {
  header .bar { height: 72px !important; }
  .h3-side { margin-top: -10px !important; }
  .h3-big4 { margin-top: 14px !important; }
}
/* история «В музее»: светлая стена галереи и паркет */
.st-scene.st-museum {
  background:
    radial-gradient(circle at 76% 24%, rgba(255, 246, 222, 0.95), rgba(255, 246, 222, 0) 34%),
    linear-gradient(#eeeae0 0 66%, #d9c6a6 66% 67.2%, #c9a77a 67.2%) !important;
}
/* в музее вместо окна — картина в золотой раме, без подоконника */
.st-museum .st-in::before {
  width: 250px !important;
  height: 190px !important;
  top: 9% !important;
  border-radius: 4px !important;
  background:
    radial-gradient(ellipse at 30% 70%, rgba(120, 160, 120, 0.35), transparent 55%),
    radial-gradient(ellipse at 70% 30%, rgba(150, 190, 220, 0.45), transparent 60%),
    linear-gradient(#f4ecd8, #e8dcc0) !important;
  box-shadow:
    0 0 0 10px #d8b25a,
    0 0 0 13px #b88d35,
    0 22px 30px -16px rgba(92, 78, 66, 0.45) !important;
}
.st-museum .st-in::after { display: none !important; }

/* ===== «Твоё занятие сегодня»: 9 заданий вперемешку, без шапки сайта ===== */
body.td-full > header { display: none !important; }
body.td-full { padding-top: 0 !important; background: #f6efe4 !important; }
body.td-full main { margin: 0 !important; max-width: none !important; padding: 0 !important; }
#v-today { padding: 0 !important; }
.td { min-height: 100dvh; display: flex; flex-direction: column; color: #3b302c; }
.td-bar { background: #fbf6ef; }
.td-bar-in { max-width: 1108px; margin: 0 auto; padding: 18px 16px 16px; }
.td-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.td-h { margin: 0; font-size: 22px; font-weight: 700; color: #3b302c; }
.td-h span { font-weight: 400; color: #86776f; }
.td-x {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(74, 62, 58, 0.08); color: #4a3e3a; font-size: 17px; text-decoration: none; flex: none;
}
.td-dots { display: flex; gap: 8px; margin-top: 12px; }
.td-dot {
  flex: 1; max-width: 72px; height: 8px; border-radius: 4px;
  background: color-mix(in srgb, var(--c) 22%, #fff);
}
.td-dot.on { background: color-mix(in srgb, var(--c) 55%, #fff); box-shadow: 0 0 0 2px var(--c) inset; }
.td-dot.ok { background: var(--c); }
.td-dot.bad { background: repeating-linear-gradient(45deg, var(--c) 0 4px, color-mix(in srgb, var(--c) 35%, #fff) 4px 8px); }
.td-main { flex: 1; display: flex; justify-content: center; padding: 34px 16px 70px; }
.td-card {
  width: 100%; max-width: 720px; background: #fff; border-radius: 26px;
  padding: 26px 34px 30px; box-shadow: 0 18px 40px -26px rgba(92, 78, 66, 0.45);
  border-top: 8px solid var(--c, #f5953a);
}
.td-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.td-subj {
  background: var(--c); color: #fff; font-weight: 700; font-size: 14px;
  padding: 5px 13px; border-radius: 999px; letter-spacing: 0.02em;
}
.td-num { font-size: 14px; color: #a0938a; }
.td-pic { font-size: 64px; line-height: 1; text-align: center; margin: 22px 0 6px; }
.td-q { font-size: 28px; line-height: 1.3; text-align: center; margin: 8px 0 22px; font-weight: 700; color: #3b302c; }
.td-opts { display: grid; gap: 12px; }
.td-opt {
  font: inherit; font-size: 21px; text-align: center; padding: 15px 18px; border-radius: 16px;
  background: #fbf6ef; border: 2px solid #ece2d4; color: #3b302c; cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.td-opt:hover:not([disabled]) { border-color: var(--c); background: #fff; }
.td-opt:active:not([disabled]) { transform: scale(0.98); }
.td-opt[disabled] { cursor: default; }
.td-opt.ok { background: #e4f5e1; border-color: #6cbf5f; color: #2f6b27; }
.td-opt.bad { background: #fde7e6; border-color: #ec7a72; color: #9b3029; }
.td-opt.off { opacity: 0.55; }
.td-after { min-height: 10px; display: grid; justify-items: center; gap: 14px; margin-top: 6px; }
.td-why { margin: 0; font-size: 17px; line-height: 1.45; text-align: center; color: #5c4e47; }
.td-why.ok b { color: #3f8c35; }
.td-why.bad b { color: #c2453c; }
.td-next, .td-res-btns .h3-btn { min-width: 220px; justify-content: center; gap: 10px; }
/* итог */
.td-res { text-align: center; border-top-color: #f2c94c; }
.td-res-h { font-size: 30px; margin: 4px 0 12px; }
.td-stars { display: flex; justify-content: center; gap: 6px; font-size: 30px; color: #e9e0d3; }
.td-stars .on { color: #f2b521; }
.td-res-n { margin: 8px 0 14px; font-size: 18px; color: #86776f; }
.td-subjs { list-style: none; padding: 0; margin: 0 auto 20px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.td-subjs li {
  display: flex; gap: 8px; align-items: center; padding: 7px 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--c) 14%, #fff); font-size: 15px;
}
.td-subjs li span { color: var(--c); font-weight: 700; }
.td-stick { background: #f6efe4; border-radius: 20px; padding: 18px 16px 16px; margin-bottom: 22px; }
.td-stick-h { margin: 0 0 12px; font-size: 19px; }
.td-slots { position: static !important; display: flex !important; justify-content: center; gap: 12px; transform: none !important; }
.td-slots .st-slot { width: 62px !important; height: 62px !important; font-size: 32px; }
.td-stick-s { margin: 12px 0 0; font-size: 15px; color: #86776f; }
.td-res-btns { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.td-again { font: inherit; font-size: 16px; background: none; border: 0; color: #86776f; text-decoration: underline; cursor: pointer; }
body.td-full .site-foot { background: transparent !important; border: 0 !important; }
@media (max-width: 600px) {
  .td-card { padding: 20px 18px 24px; border-radius: 20px; }
  .td-q { font-size: 23px; }
  .td-opt { font-size: 19px; }
  .td-slots .st-slot { width: 48px !important; height: 48px !important; font-size: 24px; }
}
.td-main { align-items: flex-start; }
button.h3-btn.td-next { border: 0 !important; font: inherit; font-weight: 700; cursor: pointer; }
.td-slots .st-slot {
  border-radius: 50% !important; border: 3px dashed rgba(255, 255, 255, 0.95) !important;
  background: #efe4d3 !important; box-shadow: none !important; display: grid !important; place-items: center;
  transform: none !important; clip-path: none !important;
}
.td-slots .st-slot.got { border: 3px solid #fff !important; background: #fff !important; box-shadow: 0 6px 14px -8px rgba(92, 78, 66, 0.5) !important; }
/* занятие дня пройдено: зелёная галочка на картинке карточки */
.h3-side .h3-today { position: relative; }
.h3-today .td-badge {
  position: absolute; z-index: 2; margin: 0;
  display: inline-flex; align-items: center; gap: 6px;
  background: #4caf50; color: #fff; font-weight: 700; font-size: 14px;
  padding: 5px 12px 5px 8px; border-radius: 999px; box-shadow: 0 4px 10px -4px rgba(40, 90, 40, 0.5);
}
.h3-today .td-badge svg { width: 18px; height: 18px; }
.h3-today { display: flex; flex-direction: column; }
/* внутри игры черепашка-помощник не нужна (как в упражнениях и при чтении) */
body.playing #helper { display: none !important; }
/* «Пройдено» — светлая плашка справа от названия занятия */
.h3-side .h3-today h3 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.h3-today h3 .td-badge {
  position: static; margin: 0; padding: 4px 11px 4px 8px; gap: 5px;
  background: #e3f3df; color: #3f8a3a; font-size: 14px; font-weight: 600;
  box-shadow: none; line-height: 1.2; letter-spacing: 0;
}
.h3-today h3 .td-badge svg { width: 15px; height: 15px; }
/* истории на главной: без отметок собранных глав — актуальная история открыта, остальные просто под замком */
.h3-story .h3-chs { display: none !important; }
.h3-prof .h3-kid { font-size: 19px !important; color: #3b302c !important; font-weight: 700; }
.h3-today h3 .td-badge { padding: 4px 11px !important; }
/* имя ребёнка — жёлтым, как ободок аватарки, по нижнему краю кружка */
.h3-side .h3-prof { align-items: flex-end !important; }
.h3-prof .h3-pstat { align-self: flex-end !important; margin-bottom: 2px !important; }
.h3-prof .h3-kid { color: #f0c24b !important; font-size: 20px !important; line-height: 1 !important; }
/* «15 мин» убрали; заголовок чуть ниже, подпись мельче и вплотную */
.h3-today .h3-time { display: none !important; }
.h3-side .h3-today .h3-today-h { margin: 10px 0 0 !important; }
.h3-side .h3-today p.h3-cont { font-size: 17px !important; margin: 0 0 12px !important; }
/* «пройдено»: строчными, обычным шрифтом, текст на одной линии с «В музее» */
.h3-side .h3-today h3 { align-items: baseline !important; }
.h3-today h3 .td-badge {
  font-weight: 400 !important; font-size: 15px !important; text-transform: lowercase;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  padding: 3px 10px !important; align-self: baseline !important; display: inline-block !important;
}
/* «пройдено» — тем же шрифтом, что описание под заголовком */
.h3-today h3 .td-badge { font-family: Rubik, Nunito, "Segoe UI", Arial, sans-serif !important; font-size: 14.5px !important; font-weight: 400 !important; letter-spacing: normal !important; }
/* «пройдено» — рядом с «Твоё занятие сегодня»: пройдено занятие дня, а не вся тема */
.h3-side .h3-today .h3-today-h { display: flex !important; align-items: baseline !important; justify-content: flex-start !important; gap: 10px; }
.h3-today .h3-today-h .td-badge {
  position: static; margin: 0; box-shadow: none; display: inline-block;
  background: #e3f3df; color: #3f8a3a; border-radius: 999px; padding: 3px 10px;
  font-family: Rubik, Nunito, "Segoe UI", Arial, sans-serif; font-size: 14.5px; font-weight: 400; text-transform: lowercase; line-height: 1.2;
}
.h3-side .h3-today .h3-today-h { flex-wrap: wrap; row-gap: 4px; }
/* без подписи «Продолжаем актуальную историю»: под заголовком сразу картинка */
.h3-side .h3-today p.h3-cont { display: none !important; }
.h3-side .h3-today .h3-today-h { margin-bottom: 12px !important; }
/* картинка занятия выше — вместо убранной подписи, чтобы низ не подтягивался вверх */
@media (min-width: 901px) {
  .h3-side .h3-today img.h3-tpic { aspect-ratio: 278 / 146 !important; }
}
@media (min-width: 901px) and (max-height: 880px) {
  .h3-side .h3-today img.h3-tpic { height: 160px !important; aspect-ratio: auto !important; }
}
@media (min-width: 901px) and (max-height: 760px) {
  .h3-side .h3-today img.h3-tpic { height: 122px !important; }
}
/* копирайт: только «© BRAVO Heritage for Kids», чёрный, закреплён слева внизу на всех экранах и никогда не прячется */
.flegal.fl-fixed {
  position: fixed !important; left: 22px !important; bottom: 10px !important; right: auto !important; top: auto !important;
  z-index: 9999 !important; display: block !important; visibility: visible !important; opacity: 1 !important;
  margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; width: auto !important;
  color: #2b2421 !important; font-size: 12px !important; line-height: 1.2 !important; pointer-events: none;
  transform: none !important;
}
.flegal.fl-fixed span { color: #2b2421 !important; }
body:has(.focus.on) .flegal.fl-fixed, body.st-full .flegal.fl-fixed, body.td-full .flegal.fl-fixed { display: block !important; color: #2b2421 !important; }
@media (max-width: 600px) { .flegal.fl-fixed { left: 12px !important; bottom: 6px !important; font-size: 11px !important; } }

/* ===== игры: монохромный музейный фон своего цвета + персонаж ===== */
.gbg { display: none; }
body[data-game] .gbg { display: block; position: fixed; inset: 0; z-index: 0; pointer-events: none; }
body[data-game] { background: var(--gbg, #f6efe4) !important; }
body[data-game] main, body[data-game] #v-games, body[data-game] #v-games .page, body[data-game] #v-games .wrap { background: transparent !important; }
body[data-game] #v-games .gpane { position: relative; z-index: 1; }
body[data-game] > header, body[data-game] .gtop, body[data-game] .fbar { z-index: 2; }
.gbg-o {
  position: absolute; right: 3vw; bottom: 4vh; width: min(30vw, 420px); height: min(46vh, 420px);
  background: no-repeat right bottom / contain; opacity: 0.9;
}
.gbg-c { position: absolute; left: 3vw; bottom: 4vh; height: min(40vh, 330px); width: auto; }
body[data-game="rb"]   { --gbg: #fbf0d6; --gink: #e2b55a;  }
body[data-game="cw"]   { --gbg: #ece4fb; --gink: #a993e0;  }
body[data-game="fw"]   { --gbg: #dfedfb; --gink: #8db6e3;  }
body[data-game="race"] { --gbg: #fbe3e3; --gink: #e9a0a6;  }
body[data-game="vk"]   { --gbg: #e2f1de; --gink: #93c58d;  }
body[data-game="word"] { --gbg: #fde9d2; --gink: #ecb078;  }
body[data-game="tf"]   { --gbg: #dfedfb; --gink: #8db6e3;  }
body[data-game="dand"] { --gbg: #fbe3e3; --gink: #e9a0a6;  }
/* на узких экранах персонаж меньше и предмет бледнее, чтобы не мешать заданию */
@media (max-width: 1100px) { .gbg-c { height: min(26vh, 200px); left: 2vw; } .gbg-o { width: 24vw; opacity: 0.5; } }
@media (max-width: 700px) { .gbg-c { height: 120px; opacity: 0.9; } .gbg-o { display: none; } }
body[data-game="rb"] .gbg-o { background-image: url(../img/gbg/b-rb.webp); }
body[data-game="cw"] .gbg-o { background-image: url(../img/gbg/b-cw.webp); }
body[data-game="fw"] .gbg-o { background-image: url(../img/gbg/b-fw.webp); }
body[data-game="race"] .gbg-o { background-image: url(../img/gbg/b-race.webp); }
body[data-game="vk"] .gbg-o { background-image: url(../img/gbg/b-vk.webp); }
body[data-game="word"] .gbg-o { background-image: url(../img/gbg/b-word.webp); }
body[data-game="tf"] .gbg-o { background-image: url(../img/gbg/b-tf.webp); }
body[data-game="dand"] .gbg-o { background-image: url(../img/gbg/b-dand.webp); }
@media (max-width: 700px) { body[data-game] .gbg-c { display: none; } }

/* ===== основные цвета заданий (пастель) ===== */
:root { --pc0: #fbefd6; --pc1: #ebe3fb; --pc2: #dcedfb; --pc3: #fbe2e2; --pc4: #e1f1de; --pc5: #fde9cf; }
.focus[data-pc="0"] { background: var(--pc0) !important; }
.focus[data-pc="1"] { background: var(--pc1) !important; }
.focus[data-pc="2"] { background: var(--pc2) !important; }
.focus[data-pc="3"] { background: var(--pc3) !important; }
.focus[data-pc="4"] { background: var(--pc4) !important; }
.focus[data-pc="5"] { background: var(--pc5) !important; }
body.td-full[data-tdpc="0"] { background: var(--pc0) !important; }
body.td-full[data-tdpc="1"] { background: var(--pc1) !important; }
body.td-full[data-tdpc="2"] { background: var(--pc2) !important; }
body.td-full[data-tdpc="3"] { background: var(--pc3) !important; }
body.td-full[data-tdpc="4"] { background: var(--pc4) !important; }
body.td-full[data-tdpc="5"] { background: var(--pc5) !important; }
body.td-full .td-bar { background: rgba(255, 255, 255, 0.55); }
/* игры: пока только цвет, без персонажей и предметов */
body[data-game] .gbg { display: none !important; }
body[data-game="rb"]   { --gbg: var(--pc0); }
body[data-game="cw"]   { --gbg: var(--pc1); }
body[data-game="fw"]   { --gbg: var(--pc2); }
body[data-game="race"] { --gbg: var(--pc3); }
body[data-game="vk"]   { --gbg: var(--pc4); }
body[data-game="word"] { --gbg: var(--pc5); }
body[data-game="tf"]   { --gbg: var(--pc2); }
body[data-game="dand"] { --gbg: var(--pc3); }
/* «Музыка»: список будущих упражнений */
#v-music .mu-list { display: grid; gap: 10px; margin-top: 30px; }
#v-music .mu-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border-radius: 16px; padding: 14px 20px; box-shadow: 0 10px 22px -18px rgba(92, 78, 66, 0.5); cursor: default; }
#v-music .mu-row .exn { display: flex; flex-direction: column; gap: 2px; font-size: 17px; color: #3b302c; }
#v-music .mu-row .exd { font-size: 13.5px; color: #a0938a; }
#v-music .mu-soon { font-size: 13px; color: #a07ee0; background: #efe8fb; border-radius: 999px; padding: 4px 11px; flex: none; }

/* ===== главная: карточка ребёнка, плашки «урок» и «пособия», три раздела ===== */
.h3-today-old { display: none !important; }
.h3-prof .h3-pstat { display: flex; flex-direction: column; gap: 3px; }
.h3-prof .h3-days { font-size: 13.5px; color: #86776f; font-weight: 400; }
.h3-kidcard .h3-new-l {
  align-self: flex-start; margin: 14px 0 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: #f5953a;
}
.h3-big4 .h3-hide { display: none !important; }
@media (min-width: 901px) { .h3-big4 { grid-template-columns: repeat(3, minmax(0, 300px)) !important; justify-content: center; } }
/* плашки для родителей — поверх картинки слева внизу */
.h3-hero { position: relative; }
.h3-cta { position: absolute; left: max(16px, calc(50% - 600px)); bottom: 26px; display: flex; gap: 14px; z-index: 3; }
.h3-ctab {
  display: flex; align-items: center; gap: 12px; width: 300px; padding: 10px 16px 10px 10px;
  background: rgba(255, 255, 255, 0.95); border-radius: 20px; text-decoration: none; color: #3b302c;
  box-shadow: 0 14px 30px -18px rgba(40, 40, 60, 0.6); transition: transform 0.15s;
}
.h3-ctab:hover { transform: translateY(-2px); }
.h3-ctab img { width: 70px; height: 62px; object-fit: contain; flex: none; }
.h3-ctab span { display: flex; flex-direction: column; gap: 4px; }
.h3-ctab b { font-size: 16px; line-height: 1.2; }
.h3-ctab small { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; }
.h3-ctab small svg { width: 16px; height: 16px; }
.h3-ctab.c-lesson small { color: #f5953a; }
.h3-ctab.c-pdf small { color: #3494e3; }
@media (max-width: 1100px) { .h3-cta { flex-direction: column; } .h3-ctab { width: 270px; } }
@media (max-width: 900px) { .h3-cta { position: static; padding: 14px 16px 0; flex-direction: column; } .h3-ctab { width: auto; } }
/* истории: просто текст — без глав, наклеек и перехода к упражнениям */
#v-story .st-meta, #v-story .st-dots, #v-story .st-slots, #v-story .st-stick { display: none !important; }
.h3-side .h3-today.h3-today-old, .h3-side .h3-today-old[hidden] { display: none !important; }
.h3-prof .h3-pstat { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; }
.h3-prof .h3-pline { line-height: 1 !important; }
.h3-prof .h3-days { display: block; line-height: 1.1; }
.h3-cta { bottom: 34px; }
@media (max-width: 900px) {
  .h3-cta { position: static !important; padding: 16px 16px 0 !important; gap: 12px; }
  .h3-big4 .h3-bigbtn.c-lilac { grid-column: 1 / -1; }
}

/* ===== общий экран упражнений (музыка, упражнения к тексту) ===== */
.qz { display: none; position: fixed; inset: 0; z-index: 95; overflow: auto; flex-direction: column; color: #3b302c; background: var(--pc2); }
.qz.on { display: flex; }
.qz[data-pc="0"] { background: var(--pc0); --qzc: #e2a93a; }
.qz[data-pc="1"] { background: var(--pc1); --qzc: #9b7fe0; }
.qz[data-pc="2"] { background: var(--pc2); --qzc: #3494e3; }
.qz[data-pc="3"] { background: var(--pc3); --qzc: #e2737f; }
.qz[data-pc="4"] { background: var(--pc4); --qzc: #5fae57; }
.qz[data-pc="5"] { background: var(--pc5); --qzc: #e8913a; }
.qz .td-bar { background: rgba(255, 255, 255, 0.55); }
.qz .td-card { --c: var(--qzc); }
.qz .td-subj { background: var(--qzc); }
.qz-r { display: flex; align-items: center; gap: 10px; }
.qz-back { font: inherit; font-size: 15px; font-weight: 700; color: #3b302c; background: #fff; border: 0; border-radius: 999px; padding: 9px 16px; cursor: pointer; box-shadow: 0 6px 14px -10px rgba(60, 50, 40, 0.6); }
.qz-q { margin-top: 18px !important; }
.qz-ord { display: grid; gap: 8px; margin-bottom: 14px; }
.qz-slot { display: flex; gap: 12px; align-items: center; min-height: 52px; padding: 10px 16px; border-radius: 14px; background: #fff; border: 2px solid #ece2d4; font-size: 18px; line-height: 1.35; }
.qz-slot b { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--qzc); color: #fff; font-size: 14px; }
.qz-slot.qz-empty { border-style: dashed; background: transparent; }
.qz-slot.ok { border-color: #6cbf5f; background: #e4f5e1; }
.qz-slot.fix { border-color: #ec7a72; background: #fff4f3; }
.qz-chips { display: grid; gap: 10px; }
.qz-chips .td-opt { text-align: left; font-size: 18px; }
body.qz-on #helper { display: none !important; }
body.qz-on { overflow: hidden; }
#v-music .mu-row { cursor: pointer; width: 100%; text-align: left; font: inherit; border: 0; }
#v-music .mu-row:hover { box-shadow: 0 12px 26px -16px rgba(92, 78, 66, 0.55); }
#v-music .mu-sc { font-size: 14px; color: #86776f; flex: none; }
#v-music .mu-sc.full { color: #e2a93a; font-weight: 700; }
#v-music .mu-go { font-size: 22px; color: #b9aca2; }
.qz .qz-x { border: 0 !important; }
.lx-gap { display: inline-block; min-width: 70px; border-bottom: 3px solid var(--qzc, #3494e3); color: transparent; margin: 0 4px; }
.lx-hint { font-size: 14px; color: #86776f; margin: 14px 0 8px; line-height: 1.4; }
.qz button.h3-btn { border: 0 !important; font: inherit; font-weight: 700; cursor: pointer; }

/* ===== «Родной язык»: курс — блоки и уроки ===== */
.crs-list .exgrp > span:first-child { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.crs-bn { font-style: normal; display: inline-grid; place-items: center; min-width: 26px; height: 26px; border-radius: 50%; background: #45bcc0; color: #fff; font-size: 13px; font-weight: 700; align-self: center; }
.crs-lv { font-size: 13px; color: #a0938a; font-weight: 400; }
.crs-prog { margin-left: auto; margin-right: 10px; font-size: 13px; color: #a0938a; }
.crs-ln { font-style: normal; color: #a0938a; font-size: 13px; margin-right: 10px; }
.crs-row.locked { opacity: 0.55; cursor: not-allowed; }
.crs-lock { color: #b9aca2; display: inline-flex; }
.crs-row .gstar { width: 22px; height: 22px; fill: #f2b521; }
/* окно урока */
.lsn { display: none; position: fixed; inset: 0; z-index: 90; overflow: auto; flex-direction: column; color: #3b302c; background: var(--pc2); }
.lsn.on { display: flex; }
.lsn[data-pc="0"] { background: var(--pc0); --lc: #e2a93a; } .lsn[data-pc="1"] { background: var(--pc1); --lc: #9b7fe0; }
.lsn[data-pc="2"] { background: var(--pc2); --lc: #3494e3; } .lsn[data-pc="3"] { background: var(--pc3); --lc: #e2737f; }
.lsn[data-pc="4"] { background: var(--pc4); --lc: #5fae57; } .lsn[data-pc="5"] { background: var(--pc5); --lc: #e8913a; }
.lsn .td-bar { background: rgba(255, 255, 255, 0.55); }
.lsn .lsn-x { border: 0; cursor: pointer; }
.lsn-main { width: 100%; max-width: 1108px; margin: 0 auto; padding: 30px 16px 70px; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.lsn-rule { background: #fff; border-radius: 28px; padding: 30px 36px 34px; box-shadow: 0 20px 44px -28px rgba(92, 78, 66, 0.5); border-top: 10px solid var(--lc); }
.lsn-tag { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lsn-tag span { background: var(--lc); color: #fff; font-weight: 700; font-size: 14px; padding: 5px 14px; border-radius: 999px; }
.lsn-tag small { color: #a0938a; font-size: 14px; }
.lsn-rule h3 { font-size: 34px; line-height: 1.15; margin: 16px 0 14px; }
.lsn-txt { font-size: 22px; line-height: 1.55; margin: 0; }
.lsn-x2 { margin: 14px 0 0; padding-left: 22px; font-size: 19px; line-height: 1.6; }
.lsn-ex { margin-top: 20px; background: #fbf6ef; border-radius: 18px; padding: 16px 20px; }
.lsn-ex b { display: block; font-size: 14px; color: var(--lc); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.lsn-ex p { margin: 0; font-size: 20px; line-height: 1.5; }
.lsn-side { background: rgba(255, 255, 255, 0.7); border-radius: 24px; padding: 22px 22px 24px; }
.lsn-side h4 { margin: 0 0 12px; font-size: 18px; }
.lsn-h2 { margin-top: 22px !important; }
.lsn-ts { display: grid; gap: 10px; }
.lsn-t { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; font: inherit; font-size: 17px; text-align: left; background: #fff; border: 2px solid transparent; border-radius: 16px; padding: 14px 16px; cursor: pointer; box-shadow: 0 8px 18px -14px rgba(92, 78, 66, 0.6); color: #3b302c; }
.lsn-t:hover { border-color: var(--lc); }
.lsn-t i { font-style: normal; font-weight: 700; color: var(--lc); font-size: 15px; flex: none; }
.lsn-t .gstar { width: 24px; height: 24px; fill: #f2b521; flex: none; }
.lsn-none { font-size: 15px; color: #86776f; line-height: 1.5; margin: 0; }
.lsn-st { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 15px; color: #6f625b; }
.lsn-st li span { display: block; line-height: 1.4; }
.lsn-st li small { color: #b0a49b; font-size: 12px; }
body.lsn-on { overflow: hidden; } body.lsn-on #helper { display: none !important; }
@media (max-width: 900px) { .lsn-main { grid-template-columns: 1fr; } .lsn-rule { padding: 22px 20px 24px; } .lsn-rule h3 { font-size: 27px; } .lsn-txt { font-size: 19px; } }
.qz-slot { font: inherit; text-align: left; width: 100%; color: #3b302c; }
.qz-back1 { cursor: pointer; }
.qz-back1:hover { border-color: var(--qzc); }
.qz-right { margin-top: 14px; background: #f3fbf1; border-radius: 14px; padding: 12px 16px; font-size: 16px; }
.qz-right b { display: block; margin-bottom: 6px; color: #3f8c35; }
.qz-right p { margin: 4px 0; display: flex; gap: 10px; }
.qz-right i { font-style: normal; color: #3f8c35; font-weight: 700; }
/* музыка: урок-рассказ перед упражнениями */
.mu-txt p { font-size: 19px; line-height: 1.6; margin: 0 0 12px; }
.mu-txt b { color: #3b302c; }
.mu-listen { margin-top: 16px; background: #fbf6ef; border-radius: 14px; padding: 12px 16px; font-size: 15px; color: #86776f; }
.mu-mem { margin: 0 0 18px; padding-left: 20px; display: grid; gap: 8px; font-size: 16px; line-height: 1.45; }
.mu-lsn .mu-start { border: 0; font: inherit; font-weight: 700; cursor: pointer; width: 100%; justify-content: center; }
.mu-best { margin: 10px 0 0; font-size: 14px; color: #86776f; text-align: center; }
@media (max-width: 900px) { .mu-txt p { font-size: 17px; } }
.mu-lsn .lsn-side { position: sticky; top: 16px; }
/* музыкальные сказки — каждая своим блоком */
.mu-tale { display: flex; gap: 16px; background: #fbf6ef; border-radius: 20px; padding: 16px 18px; margin: 14px 0; }
.mu-em { font-size: 38px; line-height: 1; flex: none; }
.mu-tale h4 { margin: 2px 0 4px; font-size: 22px; }
.mu-tale p { font-size: 17px !important; line-height: 1.55 !important; margin: 0 0 8px !important; }
.mu-meta { color: #86776f; font-size: 15px !important; }
.mu-fact { background: #fff; border-radius: 12px; padding: 8px 12px; font-size: 15.5px !important; margin: 4px 0 0 !important; }
#v-music .mu-gh { margin: 18px 4px 2px; font-size: 15px; font-weight: 700; color: #a07ee0; letter-spacing: 0.03em; text-transform: uppercase; }
#v-music .mu-gh:first-child { margin-top: 0; }

/* ===== «Литература»: познавательные уроки (тот же вид, что в «Музыке») ===== */
.lit-know { margin-top: 34px; }
.lit-know-h { font-size: 24px; margin: 0 0 14px 4px; color: #3b302c; }
#litLessons { display: grid; gap: 10px; }
#litLessons .mu-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border-radius: 16px; padding: 14px 20px; box-shadow: 0 10px 22px -18px rgba(92, 78, 66, 0.5); cursor: pointer; width: 100%; text-align: left; font: inherit; border: 0; }
#litLessons .mu-row:hover { box-shadow: 0 12px 26px -16px rgba(92, 78, 66, 0.55); }
#litLessons .mu-row .exn { display: flex; flex-direction: column; gap: 2px; font-size: 17px; color: #3b302c; }
#litLessons .mu-row .exd { font-size: 13.5px; color: #a0938a; }
#litLessons .mu-sc { font-size: 14px; color: #86776f; flex: none; }
#litLessons .mu-sc.full { color: #e2a93a; font-weight: 700; }
#litLessons .mu-go { font-size: 22px; color: #b9aca2; }
#litLessons .mu-gh { margin: 18px 4px 2px; font-size: 15px; font-weight: 700; color: #3494e3; letter-spacing: 0.03em; text-transform: uppercase; }
#litLessons .mu-gh:first-child { margin-top: 0; }
#litLessons .mu-row { background: #fff !important; }

/* ---------- урок-презентация: тёплые слайды в рамке, цветное пятно с картинкой, схемы и стрелочки ---------- */
.lsn.mu-deck { background: #f6f0e6; }
.sl { --b: #e6dcf7; --a: #8b6fd6; flex: 1 0 auto; min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 22px; box-sizing: border-box; color: #2f2a2a; font-family: Rubik, Nunito, "Segoe UI", Arial, sans-serif; }
.sl-lilac { --b: #e4d9f8; --a: #8467d4; } .sl-blue { --b: #d7e6f8; --a: #3d82d4; } .sl-sky { --b: #d6e9f7; --a: #3a78c4; }
.sl-sun { --b: #fbe7ae; --a: #d99a1e; } .sl-coral { --b: #fbd9cf; --a: #e0603c; } .sl-mint { --b: #d5eedf; --a: #34a26c; }
.sl-card { position: relative; width: 100%; max-width: 1120px; min-height: min(660px, calc(100vh - 44px)); background: #fffdf8; border: 10px solid #232021; border-radius: 34px; box-shadow: 0 24px 50px -26px rgba(40, 30, 20, 0.55); display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); grid-template-rows: 1fr auto; overflow: hidden; animation: slIn 0.35s ease both; }
@keyframes slIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sl-art { position: relative; grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; padding: 40px 50px 40px 30px; }
.sl-blob { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--b); }
.sl-art-in { position: relative; width: 100%; display: flex; justify-content: center; }
.sl-fig { display: inline-flex; }
.sl-fig .pst-pic { width: min(300px, 100%); height: auto; filter: drop-shadow(0 10px 0 rgba(255, 255, 255, 0.6)); }
.sl-stage { width: min(380px, 100%); height: auto; }
.sl-bigemo { font-size: 150px; line-height: 1; transform: rotate(-8deg); }
.sl-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; align-items: end; width: 100%; }
.sl-trio .pst-pic { width: 100%; }
.sl-main { padding: 26px 40px 10px 10px; display: flex; flex-direction: column; min-width: 0; }
.sl-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.sl .sl-x { width: 42px; height: 42px; border-radius: 50%; border: 2px solid #232021; background: #fff; color: #232021; font-size: 16px; cursor: pointer; }
.sl-num { font-size: 15px; color: #6b625c; }
.sl-t { font-family: Caveat, Rubik, sans-serif; font-weight: 700; font-size: clamp(44px, 4.6vw, 64px); line-height: 1.02; margin: 4px 0 6px; color: #232021; }
.sl-t mark { background: var(--b); color: inherit; padding: 0 14px 2px; border-radius: 22px 30px 18px 34px; display: inline-block; transform: rotate(-2deg); }
.sl-sub { font-size: 18px; color: #5c534e; margin: 4px 0 18px; }
.sl-body { flex: 1; }
.sl-p { font-size: 19px; line-height: 1.55; margin: 0 0 16px; }
.sl-small { font-size: 16px; color: #5c534e; margin-top: 18px; }
.sl-note { margin: 18px 0 0; background: #fff; border: 2px dashed var(--a); border-radius: 18px; padding: 12px 16px; font-size: 17px; line-height: 1.5; }
.sl-box { border: 2px dashed var(--a); border-radius: 18px; padding: 12px 16px; background: #fff; display: flex; flex-direction: column; gap: 4px; }
.sl-box b { font-family: Caveat, Rubik, sans-serif; font-size: 30px; line-height: 1; color: var(--a); }
.sl-box span { font-size: 16px; line-height: 1.45; }
.sl-box small { font-size: 14px; color: #6b625c; }
.sl-tree { display: flex; flex-direction: column; align-items: center; }
.sl-root { background: var(--a); color: #fff; font-weight: 600; font-size: 18px; padding: 10px 22px; border-radius: 999px; position: relative; margin-bottom: 30px; }
.sl-root::after { content: ""; position: absolute; left: 25%; right: 25%; top: 100%; height: 22px; border: 2.5px solid var(--a); border-bottom: 0; border-radius: 16px 16px 0 0; }
.sl-branches { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; width: 100%; }
.sl-flow { display: flex; align-items: flex-start; gap: 4px; }
.sl-step { flex: 1 1 0; min-width: 0; position: relative; background: #fff; border: 2px dashed var(--a); border-radius: 18px; padding: 16px 12px 14px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sl-step i, .sl-list li::before { width: 30px; height: 30px; border-radius: 50%; background: var(--a); color: #fff; font-style: normal; font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.sl-step i { position: absolute; top: -14px; left: -10px; }
.sl-step em { font-style: normal; font-size: 40px; line-height: 1.1; }
.sl-step b { font-family: Caveat, Rubik, sans-serif; font-size: 25px; color: var(--a); line-height: 1; }
.sl-step span { font-size: 15px; line-height: 1.4; }
.sl-arr { width: 46px; height: 24px; flex: none; color: var(--a); align-self: center; }
.sl-arr-d { width: 24px; height: 34px; color: var(--a); margin: 2px 0 2px 4px; }
.sl-list { list-style: none; counter-reset: sl; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.sl-list li { counter-increment: sl; display: flex; gap: 14px; align-items: flex-start; font-size: 19px; line-height: 1.45; }
.sl-list li::before { content: counter(sl); margin-top: 1px; }
.sl-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.sl-pair u { text-decoration: none; background: var(--b); padding: 0 4px; border-radius: 6px; }
.sl-match { display: flex; flex-direction: column; gap: 14px; }
.sl-row { display: flex; align-items: center; gap: 8px; }
.sl-who { border: 2px dashed var(--a); background: #fff; border-radius: 14px; padding: 10px 14px; font-weight: 600; font-size: 18px; min-width: 150px; text-align: center; }
.sl-what { flex: 1; min-width: 0; background: var(--b); border-radius: 14px; padding: 10px 14px; font-size: 18px; }
.sl-nav { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 30px 26px 10px; }
.sl-prev, .sl-next { flex: none; width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer; font-size: 34px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; padding-bottom: 4px; }
.sl-prev { background: #fff; border: 2px solid #232021; color: #232021; }
.sl-prev[disabled] { opacity: 0.25; cursor: default; }
.sl-next { background: var(--a); color: #fff; box-shadow: 0 8px 18px -8px var(--a); }
.sl-dots { display: flex; gap: 8px; }
.sl-dot { width: 11px; height: 11px; border-radius: 50%; border: 0; padding: 0; background: #ddd5cc; cursor: pointer; }
.sl-dot.on { background: var(--a); width: 28px; border-radius: 99px; }
.mu-lsn .sl-go { width: auto; flex: none; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 19px; color: #fff; background: var(--a); padding: 16px 26px; border-radius: 999px; box-shadow: 0 10px 22px -10px var(--a); }
body:has(.mu-deck.on) .flegal.fl-fixed { display: none !important; }
@media (max-width: 820px) {
  .sl { padding: 0; align-items: stretch; }
  .sl-card { border-width: 0; border-radius: 0; min-height: 100vh; min-height: 100dvh; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  .sl-art { grid-row: 1; padding: 64px 30px 26px; min-height: 200px; }
  .sl-blob { transform: scaleY(1); }
  .sl-stage { width: 260px; }
  .sl-art .sl-fig .pst-pic { width: 170px; }
  .sl-art .sl-trio .pst-pic { width: 100%; }
  .sl-trio .pst-pic { max-height: 140px; }
  .sl-bigemo { font-size: 110px; }
  .sl-main { grid-row: 2; padding: 6px 20px 10px; }
  .sl-top { position: absolute; top: 14px; left: 16px; right: 16px; }
  .sl-t { font-size: 44px; }
  .sl-flow { flex-direction: column; align-items: stretch; gap: 0; }
  .sl-flow .sl-arr { transform: rotate(90deg); margin: 6px auto; }
  .sl-step { flex-direction: row; text-align: left; gap: 12px; }
  .sl-step span { flex: 1; }
  .sl-branches, .sl-pair { gap: 10px; }
  .sl-list li { font-size: 17px; }
  .sl-p { font-size: 17px; }
  .sl-who { min-width: 0; font-size: 16px; padding: 8px 10px; }
  .sl-row .sl-arr { width: 30px; }
  .sl-box b { font-size: 25px; }
  .sl-box span { font-size: 15px; }
  .sl-prev, .sl-next { width: 52px; height: 52px; }
  .sl-dots { gap: 6px; }
  .mu-lsn .sl-go { font-size: 16px; padding: 14px 18px; }
  .sl-what { font-size: 16px; }
  .sl-nav { grid-column: 1; grid-row: 3; position: sticky; bottom: 0; background: linear-gradient(rgba(255, 253, 248, 0), #fffdf8 30%); padding: 18px 16px 18px; }
}

/* ---------- урок одним экраном (карточка с пятнами) ---------- */
.bd-card { display: flex; flex-direction: column; padding: 18px 40px 22px; box-sizing: border-box; }
.bd-deco { position: absolute; pointer-events: none; z-index: 0; }
.bd-d1 { width: 300px; right: -90px; top: -110px; }
.bd-d2 { width: 260px; left: -120px; bottom: -120px; }
.bd-card > *:not(.bd-deco) { position: relative; z-index: 1; }
.bd-top { display: flex; align-items: center; gap: 14px; }
.bd-tag { font-size: 14px; font-weight: 600; color: #6b5fa8; background: #fff; border: 2px solid #e4d9f8; padding: 6px 14px; border-radius: 999px; }
.bd-head { max-width: 860px; }
.bd .sl-t { margin: 10px 0 8px; --b: #e4d9f8; }
.bd-txt { font-size: 19px; line-height: 1.55; margin: 0; }
.bd-chip { background: #ffe7a6; padding: 1px 8px; border-radius: 10px; font-weight: 600; white-space: nowrap; }
.bd-lead { margin: 10px 0 0; font-size: 19px; font-weight: 600; }
.bd-items { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: end; margin-top: 6px; }
.bd-it { margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.bd-who { display: flex; flex-direction: column; align-items: center; }
.bd-who span { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.bd-who small { font-size: 15px; color: #6b625c; }
.bd-who b { font-size: 28px; font-weight: 700; color: #232021; }
.bd-and { font-family: Caveat, Rubik, sans-serif; font-size: 20px; color: #6b625c; }
.bd-who.two { flex-direction: row; align-items: flex-end; gap: 8px; }
.bd-who.two .bd-and { padding-bottom: 4px; }
.bd-it .sl-arr-d { color: var(--ink); margin: 2px 0; }
.bd-pic { position: relative; width: min(210px, 25vh); height: min(190px, 23vh); display: flex; align-items: center; justify-content: center; }
.bd-blob { position: absolute; inset: 0; width: 100%; height: 100%; }
.bd-pic .sl-fig { position: relative; }
.bd-pic .pst-pic { width: auto; height: min(170px, 20vh); filter: none; }
.bd-it figcaption { margin-top: 10px; background: #fff; border: 2px dashed var(--ink); border-radius: 16px; padding: 6px 16px 8px; font-family: Caveat, Rubik, sans-serif; font-weight: 700; font-size: 28px; line-height: 1.05; color: #232021; white-space: nowrap; }
.bd-it figcaption small { display: block; font-family: Rubik, sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.bd-foot { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 14px; }
.bd-best { font-size: 15px; color: #6b625c; }
.bd .sl-go { --a: #34a26c; }
@media (max-width: 820px) {
  .bd-card { padding: 16px 18px 0; min-height: 100vh; min-height: 100dvh; }
  .bd .sl-t { font-size: 44px; }
  .bd-txt, .bd-lead { font-size: 17px; }
  .bd-d1 { width: 200px; right: -70px; top: -80px; }
  .bd-items { grid-template-columns: 1fr; gap: 14px; margin-top: 14px; }
  .bd-it { display: grid; grid-template-columns: 130px 1fr; grid-template-areas: "pic who" "pic cap"; column-gap: 14px; text-align: left; align-items: center; }
  .bd-it .sl-arr-d { display: none; }
  .bd-pic { grid-area: pic; width: 130px; height: 120px; }
  .bd-pic .pst-pic { height: 106px; }
  .bd-who { grid-area: who; align-items: flex-start; align-self: end; }
  .bd-who.two { flex-direction: column; align-items: flex-start; gap: 0; }
  .bd-pic { width: 130px; height: 120px; }
  .bd-pic .pst-pic { height: 106px; }
  .bd-who span { align-items: flex-start; }
  .bd-who b { font-size: 22px; }
  .bd-it figcaption { grid-area: cap; align-self: start; justify-self: start; font-size: 22px; padding: 4px 12px 6px; margin-top: 6px; }
  .bd-foot { position: sticky; bottom: 0; margin: 10px -18px 0; padding: 16px 18px 18px; background: linear-gradient(rgba(255, 253, 248, 0), #fffdf8 35%); }
}
@media (max-width: 1100px) and (min-width: 821px) { .bd-it figcaption { font-size: 24px; padding: 4px 12px 6px; } }
@media (max-width: 820px) { .bd-it figcaption { white-space: normal; } }

/* «Родной язык»: окно урока без правой панели — только правило (и кнопки упражнений, если они есть) */
.lsn-main.lsn-one { grid-template-columns: minmax(0, 1fr); max-width: 1108px; padding-top: 12px; }
.lsn-one .lsn-txt { font-size: 24px; line-height: 1.6; }
.lsn-one .lsn-txt i { font-style: normal; font-weight: 700; color: var(--lc); letter-spacing: 0.04em; }
.lsn-ts-in { margin-top: 24px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.lsn-ts-in .lsn-t { background: #fbf6ef; box-shadow: none; }
.lsn-ts-in .lsn-t:hover { border-color: var(--lc); }

/* «Родной язык»: урок без белой плашки — большой рукописный заголовок, пример, фиолетовая плашка с главным, кнопка под правый палец */
.lsn-plain { padding: 8px 0 0; }
.lsn-chip { display: inline-block; background: var(--lc); color: #fff; font-weight: 600; font-size: 14px; padding: 5px 14px; border-radius: 999px; margin-bottom: 32px; }
.lsn-big { font-family: Caveat, Rubik, sans-serif; font-weight: 700; font-size: clamp(52px, 6vw, 78px); line-height: 1.02; color: #3a302d; margin: 0 0 52px; transform: rotate(-2deg); transform-origin: left center; }
.lsn-plain .lsn-txt { font-size: 28px; line-height: 1.65; margin: 0; max-width: 820px; }
.lsn-plain .lsn-txt i { font-style: normal; font-weight: 700; color: var(--lc); letter-spacing: 0.04em; white-space: nowrap; }
.lsn-key { margin-top: 28px; max-width: 820px; background: color-mix(in srgb, var(--lc) 40%, #fff); border-radius: 26px; padding: 22px 30px 36px; font-size: 30px; line-height: 1.6; color: #3a302d; }
.lsn-key b { color: color-mix(in srgb, var(--lc) 80%, #000); }
.lsn-one .lsn-go { justify-self: end; margin: 46px 0 18vh 0; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 20px; padding: 18px 28px; border-radius: 999px; color: #fff; background: var(--lc); box-shadow: 0 14px 26px -12px var(--lc); display: inline-flex; gap: 10px; align-items: center; }
.lsn-one .lsn-go:hover { filter: brightness(1.05); }
@media (max-width: 760px) {
  .lsn-plain { padding: 4px 0 0; }
  .lsn-big { font-size: 50px; }
  .lsn-plain .lsn-txt { font-size: 22px; }
  .lsn-key { font-size: 23px; padding: 16px 20px 28px; }
  .lsn-big { margin-bottom: 36px; }
  .lsn-chip { margin-bottom: 24px; }
  .lsn-one .lsn-go { margin: 36px 0 16vh; font-size: 18px; padding: 16px 22px; }
}
.td-h .crs-hole { width: 26px; height: 26px; vertical-align: -5px; margin: 0 4px 0 2px; }
.lsn-key + .lsn-key { margin-top: 16px; }
.lsn-kh { display: block; font-size: 0.72em; font-weight: 700; color: color-mix(in srgb, var(--lc) 75%, #000); margin-bottom: 6px; letter-spacing: 0.01em; }
.lsn-vow { color: #d0473a; font-weight: 700; }
.lsn-cons { color: #2f63b8; font-weight: 700; }
.lsn .td-h span { white-space: nowrap; }
/* звуковая схема: слово — бусины-звуки — сколько букв и звуков */
.lsn-sch { display: grid; grid-template-columns: 100px auto 1fr; align-items: center; gap: 8px 18px; padding: 10px 0; }
.lsn-sch + .lsn-sch { border-top: 2px dashed color-mix(in srgb, var(--lc) 35%, transparent); }
.lsn-w { font-size: 1.05em; font-weight: 700; color: #3a302d; }
.lsn-beads { display: flex; gap: 8px; flex-wrap: wrap; }
.lsn-bead { font-style: normal; font-weight: 700; font-size: 0.8em; min-width: 52px; height: 52px; padding: 0 6px; box-sizing: border-box; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: #2f63b8; border: 3px solid #2f63b8; }
.lsn-bead.v { color: #d0473a; border-color: #d0473a; }
.lsn-cnt { font-size: 0.7em; font-weight: 600; color: #3a302d; line-height: 1.3; }
.lsn-cnt small { display: block; font-weight: 400; font-size: 0.85em; color: #5c534e; }
@media (max-width: 760px) {
  .lsn-sch { grid-template-columns: 1fr; gap: 8px; }
  .lsn-bead { min-width: 44px; height: 44px; }
}
/* «Примеры» — молочная плашка под правилом */
.lsn-plain .lsn-ex { margin-top: 28px; max-width: 820px; background: #fffdf9; border-radius: 26px; padding: 20px 30px 34px; }
.lsn-plain .lsn-ex > b { font-size: 14px; margin-bottom: 10px; }
.lsn-exb { font-size: 28px; line-height: 1.6; color: #3a302d; }
.lsn-exb i { font-style: normal; font-weight: 700; color: var(--lc); letter-spacing: 0.04em; white-space: nowrap; }
.lsn-exl { display: block; }
.lsn-exb .lsn-sch + .lsn-sch { border-top-color: #eadfcf; }
@media (max-width: 760px) {
  .lsn-plain .lsn-ex { padding: 16px 20px 28px; }
  .lsn-exb { font-size: 22px; }
}
.lsn-exb i.lsn-bead { color: #2f63b8; letter-spacing: 0; } .lsn-exb i.lsn-bead.v { color: #d0473a; }
/* звуковая схема: одна строка — слово, звуки в скобках, сколько букв и звуков */
.lsn-exb .lsn-sch { display: grid; grid-template-columns: 90px 220px 1fr; align-items: baseline; gap: 4px 18px; padding: 4px 0; border: 0 !important; }
.lsn-exb .lsn-w { font-size: 1em; font-weight: 600; }
.lsn-snd { font-weight: 700; color: var(--lc); letter-spacing: 0.02em; white-space: nowrap; }
.lsn-exb .lsn-cnt { font-size: 0.72em; font-weight: 500; color: #6b5f58; }
@media (max-width: 760px) { .lsn-exb .lsn-sch { grid-template-columns: 64px 1fr; } .lsn-exb .lsn-cnt { grid-column: 2; } }
.lsn-exb:has(.lsn-sch) { line-height: 1.35; }
.lsn-plain .lsn-ex:has(.lsn-sch) { padding: 16px 30px 22px; }
.lsn-exb .lsn-sch { padding: 3px 0; }

/* «Обведи букву» */
.tr-wrap { position: relative; display: flex; justify-content: center; margin: 6px 0 4px; }
.tr-cv { width: min(330px, 78vw); aspect-ratio: 124 / 178; background: #fff; border-radius: 26px; box-shadow: 0 14px 30px -20px rgba(92, 78, 66, 0.5); touch-action: none; cursor: crosshair; }
.tr-ok { position: absolute; top: 14px; left: 50%; transform: translateX(-50%) scale(0.8); background: #43a85a; color: #fff; font-weight: 700; padding: 6px 16px; border-radius: 999px; opacity: 0; transition: 0.25s; pointer-events: none; }
.tr-ok.on { opacity: 1; transform: translateX(-50%) scale(1); }
.tr-foot { justify-content: space-between; }
.tr-clear { border: 0; background: #fff; color: #6b5f58; font: inherit; font-size: 16px; padding: 10px 18px; border-radius: 999px; cursor: pointer; box-shadow: 0 6px 14px -10px rgba(92, 78, 66, 0.6); }
/* кнопка «Играть» во всех уроках «Родного языка» — всегда в одном месте экрана, под правый палец */
.lsn-one .lsn-go { position: fixed; right: max(20px, calc(50vw - 600px)); bottom: 32px; margin: 0; z-index: 3; }
.lsn-plain { padding-bottom: 120px; }
@media (max-width: 760px) { .lsn-one .lsn-go { right: 16px; bottom: 24px; margin: 0; } }

/* ---------- 5 звёзд + корона: в списке уроков и внизу урока ---------- */
.crs-stars { display: inline-flex; align-items: center; gap: 3px; flex: none; }
.crs-st { width: 18px; height: 18px; fill: none; stroke: #cfc6bf; stroke-width: 1.8; }
.crs-st.on { fill: #f5b82e; stroke: #e4a414; }
.crs-cr { width: 26px; height: 22px; margin-left: 4px; fill: none; stroke: #cfc6bf; stroke-width: 1.8; }
.crs-cr.on { fill: #f5b82e; stroke: #e4a414; }
.lsn-games { position: fixed; right: max(20px, calc(50vw - 600px)); bottom: 28px; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: rgba(255, 255, 255, 0.72); border-radius: 999px; box-shadow: 0 12px 28px -18px rgba(60, 40, 30, 0.6); backdrop-filter: blur(6px); }
.lsn-g { position: relative; width: 60px; height: 60px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: var(--lc); color: #fff; display: inline-flex; align-items: center; justify-content: center; font: inherit; box-shadow: 0 8px 16px -10px var(--lc); transition: transform 0.15s; }
.lsn-g:hover { transform: translateY(-2px); }
.lsn-g-em { font-size: 26px; line-height: 1; }
.lsn-g-n { position: absolute; left: -2px; top: -4px; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: #6b5f58; font-size: 12px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); }
.lsn-g .crs-st { position: absolute; right: -6px; bottom: -6px; width: 26px; height: 26px; fill: #fff; stroke: #cfc6bf; }
.lsn-g .crs-st.on { fill: #f5b82e; stroke: #e4a414; }
.lsn-g.soon { background: transparent; border: 2.5px dashed color-mix(in srgb, var(--lc) 45%, #fff); box-shadow: none; cursor: default; }
.lsn-g.soon .lsn-g-n { position: static; background: none; box-shadow: none; color: color-mix(in srgb, var(--lc) 60%, #888); font-size: 16px; }
.lsn-crown { width: 72px; height: 66px; display: grid; place-items: center; margin-left: 4px; }
.lsn-crown .crs-cr { width: 60px; height: 50px; margin: 0; stroke-width: 1.6; }
.lsn-crown.on .crs-cr { filter: drop-shadow(0 4px 8px rgba(228, 164, 20, 0.5)); }
.lsn-plain { padding-bottom: 140px; }
@media (max-width: 760px) {
  .lsn-games { right: 50%; transform: translateX(50%); bottom: 16px; gap: 7px; padding: 8px 10px; }
  .lsn-g { width: 46px; height: 46px; }
  .lsn-g-em { font-size: 20px; }
  .lsn-g .crs-st { width: 20px; height: 20px; }
  .lsn-crown { width: 52px; height: 48px; }
  .lsn-crown .crs-cr { width: 44px; height: 36px; }
}

/* звёзды в списке уроков: крупнее, свободнее, не в самом углу; корона больше */
.crs-stars { gap: 8px; margin-right: 10px; }
.crs-st { width: 25px; height: 25px; fill: none; stroke: #d6ccc3; stroke-width: 2; }
.crs-st.on { fill: #f6b92b; stroke: #f6b92b; }
.crs-cr { width: 36px; height: 30px; margin-left: 10px; stroke: #d6ccc3; stroke-width: 1.7; }
.crs-cr.on { fill: #f6b92b; stroke: #f6b92b; }
/* урок: правило чуть выше, внизу ряд из пяти плашек-игр */
.lsn-main.lsn-one { padding-top: 6px; }
.lsn-chip { margin-bottom: 20px; }
.lsn-big { margin-bottom: 34px; }
.lsn-gbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 26px; z-index: 3; width: min(1076px, calc(100vw - 32px)); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.lsn-gbar .lsn-t { background: #fffdf9; box-shadow: 0 10px 22px -16px rgba(60, 40, 30, 0.55); min-height: 62px; }
.lsn-gbar .lsn-t i { font-style: normal; font-weight: 700; color: var(--lc); white-space: nowrap; }
.lsn-gbar .lsn-t:hover { border-color: var(--lc); }
.lsn-gbar .lsn-t.soon { background: rgba(255, 255, 255, 0.45); box-shadow: none; color: #a0948c; cursor: default; border: 2px dashed rgba(160, 148, 140, 0.35); }
.lsn-gbar .lsn-t.soon i { color: #b4a9a2; font-weight: 500; }
.lsn-gbar .gstar { width: 26px; height: 26px; }
.lsn-plain { padding-bottom: 130px; }
@media (max-width: 760px) {
  .lsn-gbar { bottom: 12px; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
  .lsn-gbar .lsn-t { flex: 0 0 62%; scroll-snap-align: start; }
}
/* номера блоков «Родного языка» — разноцветные, цвета фонов уроков */
.crs-bn[data-c="0"] { background: #9b7fe0; } .crs-bn[data-c="1"] { background: #e2737f; } .crs-bn[data-c="2"] { background: #3494e3; }
.crs-bn[data-c="3"] { background: #5fae57; } .crs-bn[data-c="4"] { background: #e8913a; } .crs-bn[data-c="5"] { background: #e2a93a; }
.crs-list .exsub { margin-right: 36px; } /* уроки внутри блока — отступ и слева, и справа */
/* крестик в уроках и играх «Родного языка», «Литературы», «Музыки» — в правом верхнем углу экрана */
.lsn .td-x, .qz .qz-x { position: fixed; top: 18px; right: 20px; z-index: 6; }
.qz .qz-r { padding-right: 52px; }
@media (max-width: 760px) { .lsn .td-x, .qz .qz-x { top: 14px; right: 12px; } .lsn .td-h { padding-right: 44px; } }
.lsn .td-x { top: calc(var(--lsn-bar-h, 60px) / 2 - 20px); }
/* шапка урока: название блока — цветом кружка; заголовок чуть ниже; игры выше, три последние — под замком */
.lsn .td-h .lsn-bt { font-weight: 500; }
.lsn-chip { margin-bottom: 34px; }
.lsn-gbar { bottom: 64px; }
.lsn-gbar .lsn-t.locked { background: rgba(255, 255, 255, 0.55); color: #9a8f88; box-shadow: none; border: 2px solid rgba(160, 148, 140, 0.18); cursor: pointer; }
.lsn-gbar .lsn-t.locked svg { width: 18px; height: 18px; color: #b9aea7; flex: none; }
.lsn-plain { padding-bottom: 170px; }
@media (max-width: 760px) { .lsn-gbar { bottom: 40px; } }
.lsn-plain .lsn-chip { display: table; }
.lsn-plain .lsn-chip { margin-bottom: 50px; } .lsn-plain .lsn-big { width: fit-content; } @media (max-width: 760px) { .lsn-plain .lsn-chip { margin-bottom: 30px; } }
.crs-list .exsub { margin-right: 0; } /* уроки в блоке — правый край ровно с блоками */
.crs-bn[data-c="5"] { background: #f9cf45; } /* жёлтый как в логотипе БРАВО */

/* ---------- выравнивание уроков по разделам: «Родной язык» — слева, «Литература» — по центру, «Музыка» — справа ---------- */
.lsn-al-c .lsn-plain { text-align: center; }
.lsn-al-c .lsn-plain .lsn-chip, .lsn-al-c .lsn-big, .lsn-al-c .lsn-txt, .lsn-al-c .lsn-ex { margin-left: auto; margin-right: auto; }
.lsn-al-c .lsn-big { transform-origin: center; }
.lsn-al-r .lsn-plain { text-align: right; }
.lsn-al-r .lsn-plain .lsn-chip, .lsn-al-r .lsn-big, .lsn-al-r .lsn-txt, .lsn-al-r .lsn-ex { margin-left: auto; margin-right: 0; }
.lsn-al-r .lsn-big { transform-origin: right center; }
.lsn-al-c .lsn-ex, .lsn-al-r .lsn-ex { text-align: left; }
/* рассказ урока в молочной плашке: значок, заголовок, текст */
.lsn-tl { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 10px 0; font-size: 20px; line-height: 1.5; }
.lsn-tl + .lsn-tl { border-top: 2px dashed #efe5d8; }
.lsn-tl-em { font-size: 30px; line-height: 1.2; text-align: center; }
.lsn-tl b { display: block; font-size: 21px; margin-bottom: 2px; color: #3a302d; }
.lsn-tl small { display: block; margin-top: 6px; font-size: 17px; color: #6b5f58; }
.lsn-exb .mu-tale { font-size: 20px; }
.lsn-exb > p { font-size: 22px; line-height: 1.55; margin: 0 0 10px; }
/* пять плашек-игр: крупнее и выше от нижнего края */
.lsn-gbar { bottom: max(56px, 9vh); gap: 14px; }
.lsn-gbar .lsn-t { min-height: 86px; padding: 18px 22px; font-size: 19px; border-radius: 22px; }
.lsn-gbar .lsn-t i { font-size: 18px; }
.lsn-gbar .gstar { width: 32px; height: 32px; }
.lsn-gbar .lsn-t.locked svg { width: 20px; height: 20px; }
.lsn-plain { padding-bottom: 240px; }
@media (max-width: 760px) {
  .lsn-gbar { bottom: 28px; }
  .lsn-gbar .lsn-t { min-height: 74px; font-size: 17px; flex-basis: 66%; }
  .lsn-tl { grid-template-columns: 34px 1fr; font-size: 18px; }
  .lsn-tl b { font-size: 19px; }
}
/* в плашке с рассказом жирный текст — обычный жирный, не подпись «ПРИМЕРЫ» */
.lsn-exb b { display: inline; font-size: inherit; text-transform: none; letter-spacing: normal; margin: 0; color: inherit; font-weight: 700; }
.lsn-exb .lsn-tl b { display: block; font-size: 21px; margin-bottom: 2px; }
.lsn-exb .mu-tale h4 { margin: 0 0 4px; font-size: 21px; }
/* под рядом игр — мягкая подложка, чтобы текст урока не просвечивал */
.lsn-gbar { padding: 12px; margin: 0; background: rgba(255, 255, 255, 0.38); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 30px; box-sizing: border-box; width: min(1100px, calc(100vw - 24px)); }
.lsn-gbar .lsn-t.soon, .lsn-gbar .lsn-t.locked { background: rgba(255, 255, 255, 0.82); }
.lsn-exb .lsn-tl b { display: inline; font-size: inherit; margin: 0; }
.lsn-exb .lsn-tl b.lsn-tl-h { display: block; font-size: 21px; margin-bottom: 2px; }
/* уроки внутри раздела — тонкие полупрозрачные плашки, как в «Родном языке» (и в «Литературе», и в «Музыке») */
.crs-list .exsub .crs-row { background: rgba(255, 255, 255, 0.55) !important; border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 18px; padding: 11px 18px; min-height: 54px; box-sizing: border-box; }
#litLessons .crs-list .exsub .crs-row, #muList .crs-list .exsub .crs-row { background: rgba(255, 255, 255, 0.55) !important; border: 1px solid rgba(255, 255, 255, 0.7) !important; box-shadow: 0 8px 20px -18px rgba(92, 78, 66, 0.5); border-radius: 18px; padding: 11px 18px; }
/* «Литература» и «Музыка»: рассказ урока — просто текст на фоне, без рамок и плашек */
.lsn-flow { max-width: 820px; font-size: 22px; line-height: 1.6; color: #3a302d; }
.lsn-al-c .lsn-flow { margin: 0 auto; }
.lsn-al-r .lsn-flow { margin-left: auto; }
.lsn-flow p { margin: 0 0 14px; }
.lsn-flow h4 { font-size: 23px; margin: 22px 0 4px; }
.lsn-flow .mu-tale { display: block; background: none; border: 0; box-shadow: none; padding: 0; margin: 0 0 14px; }
.lsn-flow .mu-tale .mu-em { display: none; }
.lsn-flow .mu-tale h4 { margin: 22px 0 4px; font-size: 23px; }
.lsn-flow .mu-tale p { margin: 0 0 8px; font-size: 22px; }
.lsn-flow .mu-fact { background: none; padding: 0; color: inherit; }
.lsn-al-c .lsn-big, .lsn-al-r .lsn-big { margin-top: 26px; }
@media (max-width: 760px) { .lsn-flow, .lsn-flow .mu-tale p { font-size: 19px; } .lsn-flow h4, .lsn-flow .mu-tale h4 { font-size: 20px; } }
.lsn-flow .mu-tale > div { max-width: none !important; }
.lsn-flow .mu-tale p, .lsn-flow .mu-tale .mu-fact { font-size: 22px !important; line-height: 1.6; }
@media (max-width: 760px) { .lsn-flow .mu-tale p, .lsn-flow .mu-tale .mu-fact { font-size: 19px !important; } }
.lsn-flow p, .lsn-flow .mu-tale > div { margin-right: 0 !important; padding-right: 0 !important; max-width: none !important; }
.lsn-al-l .lsn-big, .lsn-plain > .lsn-big:first-child { margin-top: 26px; }
/* в каждом уроке 4 игры: 4 плашки внизу, 4 звезды + корона в списке */
.lsn-gbar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .lsn-gbar { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; gap: 8px; padding: 8px; } .lsn-gbar .lsn-t { min-height: 58px; padding: 12px 14px; font-size: 15px; } .lsn-plain { padding-bottom: 210px; } }
@media (max-width: 760px) { .lsn-gbar .lsn-t i { font-size: 14px; } .lsn-gbar .lsn-t { box-sizing: border-box; min-width: 0; } }
.crs-stars .crs-cr { margin-left: 0; } /* корона на том же расстоянии, что и звёзды */

/* ---------- все игры в одном чистом виде: сверху жирный тёмный вопрос, ниже тонкие лёгкие плашки-ответы, справа круглая стрелка ---------- */
/* «Литература» и «Музыка» (викторины) */
.qz .td-card { background: none !important; box-shadow: none !important; border: 0 !important; padding: 8px 0 0 !important; max-width: 760px; text-align: left; }
.qz .td-card::before, .qz .td-card::after { display: none !important; }
.qz .td-meta .td-subj, .qz .td-pic { display: none !important; }
.qz .td-meta { justify-content: flex-start; margin-bottom: 10px; }
.qz .td-num { font-size: 14px; color: #8a7d75; }
.qz .td-q { text-align: left !important; font-size: 28px !important; line-height: 1.3; font-weight: 700; color: #2f2a2a; margin: 0 0 22px !important; }
.qz .td-opts { display: grid; gap: 10px; }
.qz .td-opt { text-align: left !important; justify-content: flex-start; font-size: 19px !important; font-weight: 400 !important; color: #3a302d; background: rgba(255, 255, 255, 0.6) !important; border: 1px solid rgba(255, 255, 255, 0.85) !important; box-shadow: 0 8px 20px -18px rgba(92, 78, 66, 0.5) !important; border-radius: 16px !important; padding: 14px 18px !important; min-height: 0 !important; }
.qz .td-opt:hover:not([disabled]) { background: rgba(255, 255, 255, 0.9) !important; }
.qz .td-opt.ok { background: #e6f5e4 !important; border-color: #7cc576 !important; color: #2e6b2a; }
.qz .td-opt.bad { background: #fde8e8 !important; border-color: #e88b8b !important; color: #a8332f; }
.qz .td-opt.off { opacity: 0.6; }
.qz .td-after { display: flex !important; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; min-height: 60px; }
.qz .td-why { text-align: left; margin: 0; font-size: 16px; }
.qz .qz-next { width: 58px; height: 58px; min-width: 58px; border-radius: 50% !important; padding: 0 !important; font-size: 0 !important; display: inline-flex; align-items: center; justify-content: center; margin-left: auto; }
.qz .qz-next svg { width: 24px; height: 24px; }
.qz .qz-chip, .qz .qz-slot { background: rgba(255, 255, 255, 0.6) !important; border: 1px solid rgba(255, 255, 255, 0.85) !important; box-shadow: 0 8px 20px -18px rgba(92, 78, 66, 0.5) !important; font-weight: 400; }
.qz .td-res { text-align: center; }
/* «Родной язык»: убираем рамку вокруг «Задание 1 из 6», задание — жирным тёмным текстом */
.focus .fprog { background: none !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; }
.focus .fprog .l { font-size: 14px; color: #8a7d75; }
.focus .ul-top .vk-hint, .focus .vk-hint { font-size: 26px !important; font-weight: 700 !important; color: #2f2a2a !important; line-height: 1.3; }
.focus .fcard { background: none !important; box-shadow: none !important; border: 0 !important; }
@media (max-width: 760px) { .qz .td-q { font-size: 23px !important; } .focus .vk-hint, .focus .ul-top .vk-hint { font-size: 21px !important; } }

/* ---------- «Литература»: сверху уроки, ниже «Моя полка» (листается) и разделы текстов ---------- */
.shelf-label { font-size: 15px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #9a8572; margin: 34px 0 6px 4px; text-align: left; }
#v-music .mu-list, #muList { margin-top: 0 !important; } #v-read .lit-know { margin-top: 30px !important; } /* первая плашка во всех трёх разделах на одной высоте */
/* цвета кружков-номеров — как на обложках книг: фиолетовый, красный, синий, сочный зелёный, бирюзовый, жёлтый (без оранжевого) */
.crs-bn[data-c="0"] { background: #9b84e0; } .crs-bn[data-c="1"] { background: #eb6a5f; } .crs-bn[data-c="2"] { background: #3494e3; }
.crs-bn[data-c="3"] { background: #5fae57; } .crs-bn[data-c="4"] { background: #45bcc0; } .crs-bn[data-c="5"] { background: #f9cf45; }
.lsn[data-pc="6"] { background: #dcf2f2; --lc: #3aa9ad; }
/* «Моя полка»: больше воздуха вокруг книг; плашка «Стихи» лишь выглядывает снизу экрана */
.shelf-label { margin: 16px 0 22px 4px !important; }
@media (min-width: 761px) { #v-read .shelf .book { width: 96px !important; height: 140px !important; } }
#v-read #lib { margin-top: 22px; }
#v-read #lib { padding-top: 10px; }
.shelf-label { margin-top: 26px !important; } @media (min-width: 761px) { #v-read .shelf .book { width: 90px !important; height: 130px !important; } }
@media (min-width: 761px) { #v-read .shelf .book { width: 118px !important; height: 172px !important; } #v-read .shelf .book .bk-t { font-size: 14px !important; } #v-read .shelf .book .bk-a { font-size: 11px !important; } } /* книги на полке — крупные */

/* ---------- игры: без цветной плашки сверху, только круглый крестик в углу; итог — «Ещё раз» и «Завершить» ---------- */
.focus .fhead { background: none !important; box-shadow: none !important; border-radius: 0 !important; position: absolute; top: 0; right: 0; left: auto; padding: 10px 20px 0 0 !important; z-index: 5; }
.focus .fhead > div { display: none !important; }
.focus .fhead .fx { width: 40px; height: 40px; border-radius: 50%; background: rgba(74, 62, 58, 0.08) !important; color: #4a3e3a !important; border: 0; font-size: 17px; }
.focus .fbody { padding-top: 34px !important; }
.qz .td-bar { background: none !important; }
.qz .td-res-sub { margin: 6px 0 14px; color: #6b5f58; font-size: 17px; }
.qz .td-res-btns .qz-again { border: 0; }

/* ---------- шапка игр и уроков: светлая полоса «Раздел · тема», тема — жирная, но светлее, без кружка с номером ---------- */
.focus .fhead { position: relative !important; top: auto; right: auto; left: auto; display: flex !important; align-items: center; background: #fbf7f0 !important; padding: 0 20px 0 max(16px, calc(50vw - 538px)) !important; height: 60px; border-radius: 0 !important; box-shadow: none !important; }
.focus .fhead > div { display: flex !important; align-items: baseline; gap: 6px; }
.focus .fhead #fxTitle { font-size: 22px; font-weight: 700; color: #3b302c; }
.focus .fhead #fxSub { font-size: 22px; font-weight: 600; color: #a39890; }
.focus .fhead #fxSub:not(:empty)::before { content: "· "; color: #a39890; }
.focus .fbody { padding-top: 22px !important; }
.qz .td-bar { background: #fbf7f0 !important; }
.lsn .td-h span, .qz .td-h span { color: #a39890; }
.lsn .td-h .lsn-bt { font-weight: 600; color: #a39890; }
.qz .td-h span { font-weight: 600; }
@media (max-width: 760px) { .focus .fhead #fxTitle, .focus .fhead #fxSub { font-size: 17px; } }
.focus .fhead #fxSub { display: inline !important; }
.focus .fhead > div { justify-content: flex-start !important; flex-direction: row !important; } .focus .fhead #fxSub { margin: 0 !important; }
.focus .fhead #fxTitle { flex: none !important; }


/* ---------- игры в цвет фона темы: стрелка, буквы, прогресс, «Правило», кружочки итога — тон фона, а не бирюза ---------- */
#exFocus[data-pc="0"] { --ac: #e0a52a; --ac-t: #fbeccb; }
#exFocus[data-pc="1"] { --ac: #9b7fe0; --ac-t: #efe8fb; }
#exFocus[data-pc="2"] { --ac: #3494e3; --ac-t: #e3f0fc; }
#exFocus[data-pc="3"] { --ac: #e2737f; --ac-t: #fde9eb; }
#exFocus[data-pc="4"] { --ac: #5fae57; --ac-t: #e6f4e4; }
#exFocus[data-pc="5"] { --ac: #e8913a; --ac-t: #fdebd8; }
#exFocus[data-pc="6"] { background: #dcf2f2 !important; --ac: #3aa9ad; --ac-t: #e3f5f5; }
#exFocus[data-pc] .res-again { box-shadow: 0 10px 22px -12px var(--ac) !important; }
#exFocus[data-pc] .lt-b.on { border-color: var(--ac) !important; text-decoration-color: var(--ac) !important; }
#exFocus[data-pc] .fm .rule b { color: var(--ac) !important; }
#exFocus[data-pc] .ord-line.ok { background: var(--ac-t) !important; border-color: var(--ac) !important; }
#exFocus[data-pc] .ord-msg.ok { color: var(--ac) !important; }
#exFocus[data-pc] .fm-rule .tag { background: var(--ac) !important; }
#exFocus[data-pc] .fm-rule .x { background: var(--ac-t) !important; color: var(--ac) !important; }
#exFocus[data-pc] .fm-rule .rule { background: var(--ac-t) !important; border: 1px solid var(--ac-t) !important; }
#exFocus[data-pc] .fm-rule .rule h4 { border-bottom: 1px solid var(--ac-t) !important; }
#exFocus[data-pc] .fm-rule .rm-go { background: var(--ac) !important; }
#exFocus[data-pc] .fm-rule .rm-go:hover { background: var(--ac) !important; }
#exFocus[data-pc] .fbar { background: var(--ac-t) !important; }
#exFocus[data-pc] .fbar i { background: var(--ac) !important; }
#exFocus[data-pc] .rulebtn { background: var(--ac-t) !important; color: var(--ac) !important; }
#exFocus[data-pc] .opt:hover { border-color: var(--ac) !important; }
#exFocus[data-pc] .opt.ok { background: var(--ac-t) !important; border-color: var(--ac) !important; }
#exFocus[data-pc] .fnext { background: var(--ac) !important; }
#exFocus[data-pc] .res-again { background: var(--ac) !important; }
#exFocus[data-pc] .rd.f { background: var(--ac) !important; }
#exFocus[data-pc] .vk-msg.ok { color: var(--ac) !important; }
#exFocus[data-pc] .ul-cur .ul-b { color: var(--ac) !important; }
#exFocus[data-pc] /* стрелка и «Ещё раз» в упражнениях бирюзовые */
.fcard.ulcard .fnext { background: var(--ac) !important; }
#exFocus[data-pc] .fcard.ulcard .ul-again { background: var(--ac) !important; }
#exFocus[data-pc] /* «Порядок слов» в упражнениях: слова бирюзовые */
.fcard.ulcard .ord-bank .ord-w { color: var(--ac) !important; }
#exFocus[data-pc] .lt-cur .lt-b { color: var(--ac) !important; }
#exFocus[data-pc] .tr-row.ok .tr-car { background: var(--ac-t) !important; border-color: var(--ac) !important; }
#exFocus[data-pc] .tr-row.ok .tr-car, #exFocus[data-pc] #g-race .sign.ok { background: var(--ac-t) !important; border-color: var(--ac) !important; }
#exFocus[data-pc] .fcard.ulcard .opt:hover:not(:disabled) { border-color: var(--ac) !important; }
#exFocus[data-pc] .fcard.ulcard .opt.ok { background: var(--ac-t) !important; border-color: var(--ac) !important; }
#exFocus[data-pc] .wq-gap { border-bottom: 2px dashed var(--ac) !important; }
#exFocus[data-pc] .dk-prog .fbar i { background: var(--ac) !important; }
#exFocus[data-pc] .tp4-chip:nth-child(4) { background: var(--ac-t) !important; }
/* викторины «Литературы» и «Музыки» — тоже в цвет фона урока */
.qz[data-pc="6"] { background: #dcf2f2; --qzc: #3aa9ad; }
.qz .qz-next { background: var(--qzc) !important; box-shadow: 0 10px 22px -12px var(--qzc) !important; }
.qz .res-again { background: var(--qzc) !important; }
.qz .rd.f { background: var(--qzc) !important; }
.qz .td-opt.ok { background: color-mix(in srgb, var(--qzc) 16%, #fff) !important; border-color: var(--qzc) !important; color: #3a302d !important; }

/* ---------- игры в общем окне: найди пару, корзинки, собери слово / ребус, кроссворд, мемори ---------- */
.qz .mg-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; }
.qz .mg-col { display: grid; gap: 10px; align-content: start; }
.qz .mg-it, .qz .sg-bin, .qz .wg-tile, .qz .wg-slot, .qz .mm-card, .qz .cg-check { font: inherit; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.6); box-shadow: 0 8px 20px -18px rgba(92, 78, 66, 0.5); color: #3a302d; }
.qz .mg-it { position: relative; text-align: left; font-size: 18px; padding: 14px 16px 14px 18px; border-radius: 16px; display: flex; align-items: center; gap: 10px; min-height: 54px; }
.qz .mg-it i { width: 12px; height: 12px; border-radius: 50%; background: var(--pc); flex: none; }
.qz .mg-it.sel { border-color: var(--qzc); box-shadow: 0 0 0 2px var(--qzc); background: #fff; }
.qz .mg-it.on { background: #fff; }
.qz .mg-it.ok, .qz .sg-bin em.ok, .qz .wg-slot.ok, .qz .cg-cell.ok { background: #e6f5e4; border-color: #7cc576; }
.qz .mg-it.bad, .qz .sg-bin em.bad, .qz .wg-slot.bad, .qz .cg-cell.bad { background: #fde8e8; border-color: #e88b8b; }
.qz .sg-cur { margin: 4px auto 18px; width: fit-content; font-size: 26px; font-weight: 700; background: #fff; border-radius: 18px; padding: 14px 28px; box-shadow: 0 12px 26px -18px rgba(92, 78, 66, 0.6); }
.qz .sg-bins { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.qz .sg-bin { border-radius: 20px; padding: 16px; min-height: 150px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.qz .sg-bin:not([disabled]):hover { border-color: var(--qzc); background: #fff; }
.qz .sg-bin b { font-size: 20px; color: var(--qzc); }
.qz .sg-bin span { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.qz .sg-bin em { font-style: normal; font-size: 15px; background: #fff; border: 1px solid #eee3d6; border-radius: 10px; padding: 4px 10px; }
.qz .wg-pic { font-size: 54px; text-align: center; margin: 0 0 6px; letter-spacing: 0.06em; }
.qz .wg-pic b { color: var(--qzc); font-size: 40px; vertical-align: middle; margin: 0 6px; }
.qz .wg-hint { text-align: center; color: #6b5f58; margin: 0 0 14px; font-size: 16px; }
.qz .wg-slots, .qz .wg-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.qz .wg-slots { margin-bottom: 18px; }
.qz .wg-slot, .qz .wg-tile { width: 54px; height: 60px; border-radius: 14px; font-size: 28px; font-weight: 700; display: grid; place-items: center; padding: 0; }
.qz .wg-slot { background: rgba(255, 255, 255, 0.35); border: 2px dashed color-mix(in srgb, var(--qzc) 45%, #fff); }
.qz .wg-slot.full { background: #fff; border-style: solid; }
.qz .wg-tile { color: var(--qzc); background: #fff; }
.qz .wg-tile[disabled] { opacity: 0.25; }
.qz .cg-wrap { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start; --cg: 44px; }
.qz .cg-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.qz .cg-n { width: 18px; font-size: 13px; color: #8a7d75; text-align: right; }
.qz .cg-cells { display: flex; }
.qz .cg-cell { width: var(--cg); height: var(--cg); box-sizing: border-box; text-align: center; font: inherit; font-size: 22px; font-weight: 700; text-transform: uppercase; border: 1px solid #e3d8cb; background: #fff; color: #3a302d; margin-right: -1px; padding: 0; border-radius: 0; }
.qz .cg-cell.key { background: color-mix(in srgb, var(--qzc) 22%, #fff); }
.qz .cg-cell:focus { outline: 2px solid var(--qzc); position: relative; z-index: 1; }
.qz .cg-clues { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 17px; line-height: 1.4; }
.qz .cg-clues b { color: var(--qzc); }
.qz .cg-check { margin-top: 16px; border-radius: 999px; padding: 12px 26px; font-weight: 700; color: #fff !important; background: var(--qzc) !important; border: 0 !important; }
.qz .cg-check[disabled] { opacity: 0.4; cursor: default; }
.qz .mm-grid { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 12px; max-width: 560px; }
.qz .mm-card { aspect-ratio: 4 / 3; border-radius: 18px; font-size: 20px; font-weight: 700; display: grid; place-items: center; padding: 8px; background: var(--qzc) !important; color: #fff !important; transition: transform 0.25s; }
.qz .mm-card.up { background: #fff !important; color: #3a302d !important; transform: rotateY(0); }
.qz .mm-card.got { background: #e6f5e4 !important; border-color: #7cc576 !important; }
.qz .mm-card span { font-size: inherit; line-height: 1.2; }
.qz .mm-tries { color: #8a7d75; font-size: 14px; margin: 10px 0 0; }
@media (max-width: 760px) {
  .qz .mg-cols { gap: 10px; } .qz .mg-it { font-size: 15px; padding: 10px 12px; }
  .qz .cg-wrap { grid-template-columns: 1fr; --cg: 34px; } .qz .cg-cell { font-size: 17px; }
  .qz .wg-slot, .qz .wg-tile { width: 42px; height: 48px; font-size: 22px; }
  .qz .mm-card { font-size: 15px; }
}
/* ребус «первые буквы картинок» */
.qz .wg-pic .rb-row { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.qz .wg-pic .rb-row span { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: rgba(255,255,255,.7); font-size: 40px; letter-spacing: 0; }
@media (max-width: 600px) { .qz .wg-pic .rb-row span { width: 52px; height: 52px; font-size: 32px; border-radius: 14px; } }
/* ---------- упражнения-игры: как в «Родном языке» — цельный прогресс, задание, плашки, круглая стрелка ---------- */
.qz .qp-head .td-bar-in { padding-top: 0 !important; padding-bottom: 0 !important; }
.qz .qp-head .td-top { min-height: 60px; margin: 0 !important; align-items: center; }
.qz .td-main.qp-main { max-width: 856px; margin: 0 auto; padding: 22px 0 40px !important; display: block; }
.qz .qp { margin: 0 0 18px; }
.qz .qp-l { display: flex; justify-content: space-between; font-size: 14px; color: #4a3e3a; line-height: 22px; margin-bottom: 8px; }
.qz .qp-bar { height: 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.6); overflow: hidden; }
.qz .qp-bar i { display: block; height: 100%; border-radius: 99px; background: var(--qzc); transition: width 0.3s; }
.qz .qp-main .td-card { max-width: none !important; padding-top: 0 !important; margin: 0 !important; }
.qz .qp-main .td-q { font-size: 26px !important; margin-bottom: 20px !important; }
.qz .qp-main .td-after { display: flex !important; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; min-height: 48px; }
.qz .qp-next { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--qzc); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; box-shadow: 0 10px 22px -12px var(--qzc); margin-left: auto; }
.qz .qp-next[disabled] { opacity: 0.35; cursor: default; box-shadow: none; }
.qz .qp-main .qz-res { padding-top: 40px; }
@media (max-width: 900px) { .qz .td-main.qp-main { padding-left: 22px !important; padding-right: 22px !important; } }
@media (max-width: 760px) { .qz .qp-main .td-q { font-size: 21px !important; } }
.qz .td-main.qp-main { width: 100% !important; box-sizing: border-box; }
.qz .qp-main .td-card { width: 100% !important; box-sizing: border-box; }
@media (min-width: 901px) { .qz .td-main.qp-main { max-width: 856px !important; padding-left: 0 !important; padding-right: 0 !important; } }
.qz .qp-head .td-h { font-size: 22px !important; font-weight: 600 !important; }
.qz .qp-head .td-h span { font-weight: 600 !important; }
@media (max-width: 760px) { .qz .qp-head .td-h { font-size: 17px !important; } }
.qz .qp-next, .qz .qp-next.qz-next { width: 52px !important; height: 52px !important; min-width: 52px !important; max-width: 52px; flex: none !important; border-radius: 50% !important; }
.qz .td-why b:empty { display: none; }
/* ---------- плашки игр в уроке: темнее фона, как большие кнопки на главной ---------- */
.lsn .lsn-gbar .lsn-t,
.lsn .lsn-gbar .lsn-t.soon,
.lsn .lsn-gbar .lsn-t.locked {
  position: relative;
  background: color-mix(in srgb, var(--lc) 48%, #fff) !important;
  border: 0 !important;
  color: #2a2422 !important;
  font-weight: 600 !important;
  box-shadow: 0 14px 26px -18px rgba(60, 50, 45, 0.55) !important;
  cursor: pointer;
}
.lsn .lsn-gbar .lsn-t::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  pointer-events: none;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.32) 45%, rgba(255, 255, 255, 0.2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.lsn .lsn-gbar .lsn-t:hover { transform: translateY(-2px); box-shadow: 0 18px 30px -18px rgba(60, 50, 45, 0.6) !important; }
.lsn .lsn-gbar .lsn-t { transition: transform 0.15s, box-shadow 0.15s; }
.lsn .lsn-gbar .lsn-t i, .lsn .lsn-gbar .lsn-t.soon i { color: #2a2422 !important; font-weight: 700 !important; opacity: 0.75; }
.lsn .lsn-gbar .lsn-t.locked svg { color: #2a2422 !important; opacity: 0.55; }
/* название игры и «Играть ›» — на одной линии */
.lsn .lsn-gbar .lsn-t { align-items: center !important; }
.lsn .lsn-gbar .lsn-t > span, .lsn .lsn-gbar .lsn-t > i { font-size: inherit !important; line-height: 1.3 !important; display: block; }
.lsn .lsn-gbar .lsn-t > i { font-weight: 600 !important; }
/* ---------- шапка игр — как шапка урока: светлая, высота 58, крестик 40 на том же месте ---------- */
.qz .td-bar.qp-head, .qz .td-bar { background: rgba(255, 255, 255, 0.55) !important; }
.qz .qp-head .td-bar-in { padding-top: 9px !important; padding-bottom: 9px !important; }
.qz .qp-head .td-top { min-height: 40px !important; align-items: center !important; }
.qz .qp-head .td-x { width: 40px !important; height: 40px !important; margin: 0 !important; flex: none; }
.focus .fhead, #exFocus .fhead { background: rgba(255, 255, 255, 0.55) !important; min-height: 58px !important; height: 58px !important; box-sizing: border-box; }
#exFocus .fhead .fx { width: 40px !important; height: 40px !important; }
.qz .qz-x { top: 10px !important; }
#exFocus .fhead .fx { margin-top: 1px !important; }
@media (max-width: 760px) { #exFocus .fhead .fx { margin-right: -8px !important; } }
/* ---------- закрашенные звёзды и корона: мягкая тёмная обводка внутри рисунка ---------- */
.crs-st.on path, .crs-cr.on path, .gstar path, .rs.f path {
  fill: #f6b92b !important;
  stroke: #d48e0e !important;
  stroke-width: 2.6 !important;
  stroke-linejoin: round !important;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.9);
  filter: none !important;
}
.crs-cr.on path { stroke-width: 2.4 !important; transform: scale(0.91); }
/* внутри — жёлтый как в логотипе, обводка — прежний тёплый жёлтый */
.crs-st.on path, .crs-cr.on path, .gstar path, .rs.f path { fill: #f9cf45 !important; stroke: #f6b92b !important; }
/* без картинок-иллюстраций в уроках и заданиях (кроме мемори и ребусов) */
.mu-lsn .mu-em, .lsn .mu-em, #todayBox .td-pic, .qz .td-pic { display: none !important; }
.qz .wg-pic, .qz .wg-hint { text-align: left !important; }
.qz .wg-slots, .qz .wg-tiles, .qz .wg-pic .rb-row { justify-content: flex-start !important; }
.qz .wg-hint { font-size: 17px; color: #5a4e48; margin: 0 0 14px; }
/* истории на главной пока скрыты */
.h3-sthead, .h3-strow, #h3Stories { display: none !important; }
/* ---------- игры урока — четыре звезды с цифрами и рукописное «Играть» ---------- */
.lsn[data-pc="0"] { --lbg: var(--pc0); } .lsn[data-pc="1"] { --lbg: var(--pc1); } .lsn[data-pc="2"] { --lbg: var(--pc2); }
.lsn[data-pc="3"] { --lbg: var(--pc3); } .lsn[data-pc="4"] { --lbg: var(--pc4); } .lsn[data-pc="5"] { --lbg: var(--pc5); } .lsn[data-pc="6"] { --lbg: #dcf2f2; }
.lsn .lsn-gbar.lsn-stars {
  display: flex !important; align-items: center; gap: 18px;
  left: 0; right: 0; transform: none; bottom: 0 !important; width: 100% !important; max-width: none;
  padding: 34px max(24px, calc((100vw - 1076px) / 2)) max(28px, 5vh) !important;
  background: linear-gradient(to top, var(--lbg, #f6f1ea) 62%, transparent) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-radius: 0 !important;
  box-sizing: border-box; overflow: visible;
}
.lsn-stars.ls-al-c { justify-content: center; }
.lsn-stars.ls-al-r { justify-content: flex-end; }
.lsn-stars .ls-row { display: flex; gap: 16px; align-items: center; }
.lsn-stars .ls-cta {
  position: relative; font-family: "Caveat", "Rubik", sans-serif; font-size: 50px; font-weight: 700; line-height: 1;
  color: #fff; text-shadow: 0 2px 0 rgba(90, 70, 60, 0.12), 0 4px 14px rgba(90, 70, 60, 0.28);
  transform: rotate(-8deg) translateY(-14px); padding-right: 64px; white-space: nowrap;
}
.lsn-stars .ls-arr { position: absolute; right: -6px; top: 18px; width: 76px; height: 46px; color: #fff; filter: drop-shadow(0 3px 6px rgba(90, 70, 60, 0.25)); }
.lsn .lsn-gbar.lsn-stars .lsn-t.ls-star {
  position: relative; width: 96px; height: 96px; min-height: 0 !important; padding: 0 !important; flex: none;
  display: grid !important; place-items: center; background: none !important; border: 0 !important; box-shadow: none !important;
  border-radius: 0 !important; cursor: pointer; transition: none;
  animation: lsHop 3.6s ease-in-out infinite;
}
.lsn .lsn-gbar.lsn-stars .lsn-t.ls-star::after { display: none !important; }
.lsn-stars .ls-star:nth-child(2) { animation-delay: 0.25s !important; }
.lsn-stars .ls-star:nth-child(3) { animation-delay: 0.5s !important; }
.lsn-stars .ls-star:nth-child(4) { animation-delay: 0.75s !important; }
.lsn-stars .ls-st { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 8px 10px rgba(120, 80, 20, 0.22)); }
.lsn-stars .ls-st path { fill: #f9cf45; stroke: #f6b92b; stroke-width: 2.4; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; transform: scale(0.92); }
.lsn-stars .ls-star b { position: relative; font-family: "Rubik", sans-serif; font-size: 34px; font-weight: 800; color: #b06f08; margin-top: 8px; line-height: 1; }
.lsn .lsn-gbar.lsn-stars .ls-star:hover { animation-play-state: paused; transform: translateY(-6px) scale(1.06); }
.lsn .lsn-gbar.lsn-stars .ls-star.done { animation: none; }
.lsn .lsn-gbar.lsn-stars .ls-star.soon { animation: none; cursor: default; }
.lsn-stars .ls-star.soon .ls-st { filter: none; }
.lsn-stars .ls-star.soon .ls-st path { fill: rgba(255, 255, 255, 0.5); stroke: rgba(160, 148, 140, 0.45); }
.lsn-stars .ls-star.soon b { color: #b4a9a2; }
@keyframes lsHop {
  0%, 46%, 100% { transform: translateY(0) rotate(0); }
  8% { transform: translateY(-14px) rotate(-7deg); }
  16% { transform: translateY(0) rotate(5deg); }
  22% { transform: translateY(-5px) rotate(-2deg); }
  30% { transform: translateY(0) rotate(0); }
}
@media (prefers-reduced-motion: reduce) { .lsn-stars .ls-star { animation: none !important; } }
@media (max-width: 760px) {
  .lsn .lsn-gbar.lsn-stars { flex-direction: column; align-items: center !important; gap: 4px; padding: 26px 12px 22px !important; }
  .lsn-stars.ls-al-l, .lsn-stars.ls-al-r { align-items: center !important; }
  .lsn-stars .ls-cta { font-size: 40px; transform: rotate(-6deg); padding-right: 52px; }
  .lsn-stars .ls-arr { width: 58px; height: 36px; top: 14px; right: -4px; }
  .lsn-stars .ls-row { gap: 8px; }
  .lsn .lsn-gbar.lsn-stars .lsn-t.ls-star { width: 74px; height: 74px; }
  .lsn-stars .ls-star b { font-size: 27px; margin-top: 6px; }
  .lsn-plain { padding-bottom: 230px !important; }
}
.lsn .lsn-gbar.lsn-stars .ls-star b { position: absolute; inset: 0; display: grid; place-items: center; padding-top: 10%; margin: 0; }
@media (max-width: 760px) { .lsn-stars .ls-arr { transform: rotate(58deg); top: 22px; right: -2px; } .lsn .lsn-gbar.lsn-stars { gap: 10px; } }
/* звёзды-игры v2: крупнее, по центру, «Играть» справа со стрелкой влево, белый ободок внутри */
.lsn .lsn-gbar.lsn-stars { justify-content: center !important; padding-bottom: max(46px, 8vh) !important; padding-top: 70px !important; }
.lsn-stars .ls-row { position: relative; gap: 18px; }
.lsn .lsn-gbar.lsn-stars .lsn-t.ls-star { width: 132px; height: 132px; }
.lsn-stars .ls-st .ls-body { fill: #f9cf45; stroke: #f6b92b; stroke-width: 1.75; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; transform: scale(0.94); }
.lsn-stars .ls-st .ls-rim { fill: none; stroke-width: 1.1; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; transform: scale(0.83) translateY(0.4px); }
.lsn-stars .ls-st path:not(.ls-body):not(.ls-rim) { display: none; }
.lsn-stars .ls-star b { font-size: 34px !important; }
.lsn-stars .ls-star.soon .ls-st .ls-body { fill: rgba(255, 255, 255, 0.5); stroke: rgba(160, 148, 140, 0.45); }
.lsn-stars .ls-star.soon .ls-rim { display: none; }
.lsn-stars .ls-cta {
  position: absolute; left: 100%; bottom: 62%; margin-left: 8px; padding: 0 0 0 66px; transform: rotate(-7deg);
  text-shadow: 0 2px 6px rgba(90, 70, 60, 0.16); font-size: 52px;
}
.lsn-stars .ls-arr { right: auto; left: 0; top: 22px; width: 70px; height: 44px; transform: scaleX(-1) rotate(-6deg); filter: drop-shadow(0 2px 4px rgba(90, 70, 60, 0.14)); }
@media (max-width: 760px) {
  .lsn .lsn-gbar.lsn-stars { padding: 92px 8px 30px !important; }
  .lsn-stars .ls-row { gap: 4px; }
  .lsn .lsn-gbar.lsn-stars .lsn-t.ls-star { width: 86px; height: 86px; }
  .lsn-stars .ls-star b { font-size: 27px !important; }
  .lsn-stars .ls-st .ls-body { stroke-width: 2.1; }
  .lsn-stars .ls-st .ls-rim { stroke-width: 1.4; }
  .lsn-stars .ls-cta { left: auto; right: 4px; bottom: 100%; margin: 0 0 -4px; font-size: 40px; padding-left: 52px; }
  .lsn-stars .ls-arr { transform: scaleX(-1) rotate(-48deg); top: 16px; width: 54px; height: 34px; }
  .lsn-plain { padding-bottom: 250px !important; }
}
@media (max-width: 760px) { .lsn .lsn-gbar.lsn-stars { padding-bottom: 46px !important; } }
/* белый ободок — тонкий, по внешнему краю рыжей обводки (внутри звезды); тени нежнее */
.lsn-stars .ls-st .ls-rim { stroke-width: 0.42 !important; transform: scale(0.978) !important; }
.lsn-stars .ls-st { filter: drop-shadow(0 6px 8px rgba(120, 80, 20, 0.13)) !important; }
.lsn-stars .ls-cta { text-shadow: 0 1px 4px rgba(90, 70, 60, 0.1) !important; }
.lsn-stars .ls-arr { filter: drop-shadow(0 1px 2px rgba(90, 70, 60, 0.08)) !important; }
@media (max-width: 760px) { .lsn-stars .ls-st .ls-rim { stroke-width: 0.6 !important; transform: scale(0.972) !important; } }
/* цифра — под звездой; пройденная игра — белая галочка в звезде */
.lsn .lsn-gbar.lsn-stars .ls-star b { inset: auto 0 -30px 0 !important; padding: 0 !important; height: 26px; font-size: 22px !important; color: #a8730f; opacity: 0.85; }
.lsn .lsn-gbar.lsn-stars .ls-row { padding-bottom: 30px; }
.lsn-stars .ls-tick { position: absolute; left: 50%; top: 54%; width: 44%; height: 44%; transform: translate(-50%, -50%); overflow: visible; }
.lsn-stars .ls-tick path { fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 1px rgba(170, 110, 10, 0.35)); }
.lsn-stars .ls-star.soon b { color: #b4a9a2; }
@media (max-width: 760px) {
  .lsn .lsn-gbar.lsn-stars .ls-star b { inset: auto 0 -24px 0 !important; font-size: 18px !important; height: 22px; }
  .lsn .lsn-gbar.lsn-stars .ls-row { padding-bottom: 24px; }
  .lsn .lsn-gbar.lsn-stars { padding-bottom: 34px !important; }
}
/* цифра снова внутри звезды; у пройденной — лучики */
.lsn .lsn-gbar.lsn-stars .ls-star b { inset: 0 !important; height: auto; display: grid; place-items: center; padding-top: 10% !important; font-size: 34px !important; color: #b06f08; opacity: 1; }
.lsn .lsn-gbar.lsn-stars .ls-row { padding-bottom: 0; }
.lsn-stars .ls-rays { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lsn-stars .ls-rays path { fill: none; stroke: #f6b92b; stroke-width: 3.6; stroke-linecap: round; }
.lsn .lsn-gbar.lsn-stars .ls-row { gap: 26px; }
@media (max-width: 760px) {
  .lsn .lsn-gbar.lsn-stars .ls-star b { inset: 0 !important; font-size: 27px !important; }
  .lsn .lsn-gbar.lsn-stars .ls-row { padding-bottom: 0; gap: 8px; }
  .lsn .lsn-gbar.lsn-stars .lsn-t.ls-star { width: 80px; height: 80px; }
  .lsn .lsn-gbar.lsn-stars { padding-bottom: 46px !important; }
  .lsn-stars .ls-rays path { stroke-width: 4.2; }
}
.lsn-stars .ls-rays path { stroke-width: 3 !important; }
@media (max-width: 760px) { .lsn-stars .ls-rays path { stroke-width: 3.6 !important; } }
/* «Две корзинки»: слово — как в упражнениях с буквами (тонкое, крупное, в цвет урока); корзинки прозрачнее */
.qz .sg-cur { background: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 0 18px !important; font-size: clamp(30px, 3.4vw, 38px) !important; font-weight: 300 !important; line-height: 1.2; color: var(--qzc) !important; }
.qz .sg-bin { background: rgba(255, 255, 255, 0.32) !important; border: 1px solid rgba(255, 255, 255, 0.6) !important; box-shadow: none !important; }
.qz .sg-bin:not([disabled]):hover { background: rgba(255, 255, 255, 0.5) !important; border-color: var(--qzc) !important; }
.qz .sg-bin em { background: rgba(255, 255, 255, 0.7); border-color: rgba(255, 255, 255, 0.9); }
/* цветные слова в заданиях — один размер везде (слова для порядка, буквы для подчёркивания, слово для корзинок) */
#exFocus .ord-w, #exFocus .lt-cur .lt-b, .qz .sg-cur { font-size: 30px !important; font-weight: 300 !important; }
.qz .sg-cur { text-align: center; margin: 2px auto 18px !important; }
@media (max-width: 760px) { #exFocus .ord-w, #exFocus .lt-cur .lt-b, .qz .sg-cur { font-size: 26px !important; } }
.qz .sg-cur { min-height: 1.2em; } .qz .sg-bin { min-height: 170px; }
/* кроссворд в играх уроков — прежний вид из раздела «Игры», в цвет урока */
.qz .qz-cw { justify-content: flex-start; gap: 36px; }
.qz .qz-cw .cw-grid { flex: 0 1 auto; width: 100%; }
.qz .qz-cw .cw-c { background: rgba(255, 255, 255, 0.7); border-color: rgba(255, 255, 255, 0.95); font-size: 22px; font-weight: 300; color: #3a302d; text-transform: lowercase; }
.qz .qz-cw .cw-c.key { background: color-mix(in srgb, var(--qzc) 12%, #fff); border-color: color-mix(in srgb, var(--qzc) 30%, #fff); }
.qz .qz-cw .cw-c.sel { background: color-mix(in srgb, var(--qzc) 22%, #fff); border-color: color-mix(in srgb, var(--qzc) 55%, #fff); }
.qz .qz-cw .cw-c.ok { background: color-mix(in srgb, var(--qzc) 10%, #fff); border-color: color-mix(in srgb, var(--qzc) 35%, #fff); color: #3a302d; }
.qz .qz-cw .cw-c.ok.key { background: color-mix(in srgb, var(--qzc) 35%, #fff); color: #2f2a2a; font-weight: 500; }
.qz .qz-cw .cw-c.bad { background: #fbdcd9; border-color: #e88b8b; }
.qz .qz-cw .cw-clues li.sel { background: color-mix(in srgb, var(--qzc) 18%, #fff); }
.qz .qz-cw .cw-clues li { font-size: 17px; }
.qz .qz-cw .cw-bank { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.qz .qz-cw .cw-l { border: 0; background: none; padding: 0 4px; font: inherit; font-size: 30px; font-weight: 300; color: var(--qzc); cursor: pointer; }
@media (max-width: 760px) { .qz .qz-cw { gap: 18px; } .qz .qz-cw .cw-l { font-size: 26px; } .qz .qz-cw .cw-c { font-size: 19px; } }
.qz .qz-cw .cw-l { color: var(--qzc) !important; font-size: 30px !important; } @media (max-width: 760px) { .qz .qz-cw .cw-l { font-size: 26px !important; } }
/* слово в задании («Первый звук твёрдый или мягкий: лук») — как цветные слова в других играх: по центру, тонкое, в цвет урока */
#exFocus .fcard.ulcard .ex-q.ex-w { text-align: center !important; font-size: 30px !important; font-weight: 300 !important; color: var(--ac) !important; margin: 4px 0 18px !important; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
@media (max-width: 760px) { #exFocus .fcard.ulcard .ex-q.ex-w { font-size: 26px !important; } }
/* ---------- корона урока: все четыре игры пройдены ---------- */
.crw { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(255, 252, 244, 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity 0.45s; cursor: pointer; overflow: hidden; }
.crw.on { opacity: 1; }
.crw-glow { position: absolute; left: 50%; top: 50%; width: 70vmin; height: 70vmin; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(249, 207, 69, 0.55) 0%, rgba(249, 207, 69, 0.18) 38%, transparent 66%);
  animation: crwGlow 1.6s ease-in-out infinite alternate; }
.crw-glow::before { content: ""; position: absolute; inset: 8%; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(249, 207, 69, 0.28) 0 6deg, transparent 6deg 22deg);
  -webkit-mask: radial-gradient(circle, transparent 22%, #000 30%, transparent 70%); mask: radial-gradient(circle, transparent 22%, #000 30%, transparent 70%);
  animation: crwSpin 14s linear infinite; }
.crw-c { position: relative; width: min(46vmin, 260px); transform: scale(0.2) rotate(-12deg); opacity: 0; transition: transform 0.7s cubic-bezier(0.2, 1.6, 0.4, 1), opacity 0.4s; }
.crw.on .crw-c { transform: scale(1) rotate(0); opacity: 1; animation: crwBob 2.4s ease-in-out 0.8s infinite; }
.crw-c svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 18px rgba(249, 207, 69, 0.85)) drop-shadow(0 10px 14px rgba(150, 100, 20, 0.18)); }
.crw-c .crw-body { fill: #f9cf45; stroke: #f6b92b; stroke-width: 1.4; stroke-linejoin: round; }
.crw-c .crw-rim { fill: none; stroke: rgba(255, 255, 255, 0.6); stroke-width: 0.4; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; transform: scale(0.95); }
.crw-b { position: absolute; width: 0; height: 0; }
.crw-b i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--c); opacity: 0;
  animation: crwFly 1.3s cubic-bezier(0.15, 0.7, 0.3, 1) var(--dl) 3; }
.crw-b i:nth-child(even) { width: 6px; height: 14px; border-radius: 3px; left: -3px; top: -7px; }
@keyframes crwFly {
  0% { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(0.6); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(-13vmin) scale(0.9); }
}
@keyframes crwGlow { from { transform: translate(-50%, -50%) scale(0.92); opacity: 0.8; } to { transform: translate(-50%, -50%) scale(1.06); opacity: 1; } }
@keyframes crwSpin { to { transform: rotate(360deg); } }
@keyframes crwBob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(-2deg); } }
@media (prefers-reduced-motion: reduce) { .crw-b, .crw-glow::before { display: none; } .crw.on .crw-c { animation: none; } }
.crw { z-index: 400 !important; }
.crw-b i { width: 11px; height: 11px; left: -5px; top: -5px; }
.crw-b i:nth-child(even) { width: 7px; height: 18px; left: -3px; top: -9px; }
@keyframes crwFly {
  0% { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(0.5); }
  10% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(-17vmin) scale(1); }
}
/* корона качается маятником справа налево; три салюта, крупные конфетти */
@keyframes crwBob {
  0%, 100% { transform: translateY(0) rotate(7deg); }
  25% { transform: translateY(-6px) rotate(0); }
  50% { transform: translateY(0) rotate(-7deg); }
  75% { transform: translateY(-6px) rotate(0); }
}
.crw.on .crw-c { transform-origin: 50% 12%; animation: crwBob 2.2s ease-in-out 0.7s infinite; }
.crw-b i { width: 15px !important; height: 15px !important; left: -7px !important; top: -7px !important; }
.crw-b i:nth-child(3n) { width: 10px !important; height: 26px !important; border-radius: 4px; left: -5px !important; top: -13px !important; }
.crw-b i:nth-child(3n + 1) { border-radius: 3px; width: 13px !important; height: 13px !important; }
.crw-b i { animation: crwFly 1.6s cubic-bezier(0.12, 0.7, 0.3, 1) var(--dl) 2 !important; }
@keyframes crwFly {
  0% { opacity: 0; transform: rotate(var(--a)) translateY(0) rotate(0) scale(0.5); }
  10% { opacity: 1; }
  72% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) rotate(var(--r)) scale(1); }
}
/* конфетти — только кружочки, салют разлетается ровными кольцами от центра */
.crw-b i, .crw-b i:nth-child(3n), .crw-b i:nth-child(3n + 1), .crw-b i:nth-child(even) { width: 14px !important; height: 14px !important; left: -7px !important; top: -7px !important; border-radius: 50% !important; }
.crw-b i:nth-child(odd) { width: 11px !important; height: 11px !important; left: -5.5px !important; top: -5.5px !important; }
@keyframes crwFly {
  0% { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(0.4); }
  8% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(0.9); }
}
/* конфетти — кружочки и овалы разной сплющенности, повёрнуты в разные стороны, как фантики */
.crw-b i:nth-child(4n) { width: 14px !important; height: 14px !important; left: -7px !important; top: -7px !important; }
.crw-b i:nth-child(4n + 1) { width: 17px !important; height: 10px !important; left: -8px !important; top: -5px !important; }
.crw-b i:nth-child(4n + 2) { width: 17px !important; height: 6px !important; left: -8px !important; top: -3px !important; }
.crw-b i:nth-child(4n + 3) { width: 13px !important; height: 11px !important; left: -6px !important; top: -5px !important; }
@keyframes crwFly {
  0% { opacity: 0; transform: rotate(var(--a)) translateY(0) rotate(var(--r)) scale(0.4); }
  8% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) rotate(var(--r)) scale(0.9); }
}
/* длинные уроки помещаются до звёзд: текст и примеры шире, на невысоких экранах звёзды ниже и компактнее */
@media (min-width: 900px) {
  .lsn .lsn-one .lsn-txt { max-width: 1000px !important; }
  .lsn .lsn-one .lsn-ex { max-width: 1000px !important; }
}
/* текст уроков «Литературы» и «Музыки» — того же размера, что правило в «Родном языке» */
.lsn .lsn-flow p { font-size: 28px !important; line-height: 1.65 !important; }
.lsn .lsn-flow h4 { font-size: 28px !important; }
.lsn .lsn-flow i { font-style: normal; font-weight: 700; color: var(--lc); }
@media (max-width: 760px) { .lsn .lsn-flow p, .lsn .lsn-flow h4 { font-size: 22px !important; } }
/* уроки «Литературы» — текст на всю ширину страницы */
@media (min-width: 900px) { .lsn .lsn-al-c .lsn-flow { max-width: 1080px !important; } }
.lsn .lsn-al-c .lsn-flow p { margin-bottom: 6px !important; }
/* запись на занятие: цены спокойнее, текст о занятиях — после календаря и крупнее */
.zp-prices b { font-weight: 400 !important; }
.zp-about { margin-top: 36px; max-width: 920px; }
.zp-about .zp-intro { font-size: 21px !important; line-height: 1.6 !important; color: #4a3e3a !important; margin: 0 0 14px !important; }
@media (max-width: 760px) { .zp-about .zp-intro { font-size: 18px !important; } }
.zp-about { padding-bottom: 50px; }
/* текст о занятиях — сразу под заголовком, на всю ширину; без линии под ценами */
.zp-about { margin-top: 6px !important; max-width: none !important; padding-bottom: 6px !important; }
.zp-about .zp-intro { max-width: none !important; }
.zp-prices { border-bottom: 0 !important; }
.zp-about .zp-intro { font-size: 18.5px !important; font-style: italic; line-height: 1.6 !important; }
@media (max-width: 760px) { .zp-about .zp-intro { font-size: 16.5px !important; } }
.zp-about .zp-intro { font-style: normal !important; }
.zp-prices { margin-bottom: 4px !important; } .zp-tzbox { margin-top: 6px !important; }
/* ---------- страница «Подписка» ---------- */
.sub .sub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 22px; }
.sub .sub-card { background: rgba(255, 255, 255, 0.7); border-radius: 26px; padding: 26px 30px 30px; box-shadow: 0 14px 30px -24px rgba(92, 78, 66, 0.5); display: flex; flex-direction: column; }
.sub .sub-card h3 { margin: 0 0 14px; font-size: 24px; font-weight: 700; color: #3b302c; }
.sub .sub-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.sub .sub-card li { position: relative; padding-left: 26px; font-size: 18px; line-height: 1.5; color: #4a3e3a; }
.sub .sub-card li::before { content: ""; position: absolute; left: 4px; top: 0.6em; width: 9px; height: 9px; border-radius: 50%; background: #45bcc0; }
.sub .sub-plus { background: color-mix(in srgb, #f9cf45 22%, #fff); }
.sub .sub-plus li::before { background: #f6b92b; }
.sub .sub-soon { margin-top: auto; padding-top: 22px; font-size: 15px; color: #8a7d76; }
@media (max-width: 760px) { .sub .sub-grid { grid-template-columns: 1fr; } .sub .sub-card li { font-size: 16.5px; } }
.sub .sub-terms { margin: 20px 0 0; font-size: 17px; line-height: 1.5; color: #4a3e3a; } .sub .sub-soon { padding-top: 12px; }
/* ---------- «Сундучок черепашки» ---------- */
.ch { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 16px; background: rgba(74, 62, 58, 0.28); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.ch.on { opacity: 1; pointer-events: auto; }
body.ch-on { overflow: hidden; }
.ch-card { position: relative; width: min(1000px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: linear-gradient(180deg, #fdf8ee, #f3ecdf); border-radius: 34px; padding: 26px 32px 32px; box-shadow: 0 30px 70px -30px rgba(60, 40, 30, 0.55); box-sizing: border-box; transform: translateY(12px) scale(0.98); transition: transform 0.35s; }
.ch.on .ch-card { transform: none; }
.ch-x { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(74, 62, 58, 0.08); font-size: 17px; color: #4a3e3a; cursor: pointer; }
.ch-h { margin: 0; text-align: center; font-family: "Caveat", "Rubik", sans-serif; font-size: 46px; font-weight: 700; color: #3b302c; transform: rotate(-2deg); }
.ch-sub { margin: 2px 0 18px; text-align: center; font-size: 16px; color: #8a7d76; }
.ch-main { display: grid; grid-template-columns: 1fr minmax(260px, 360px) 1fr; gap: 22px; align-items: center; }
.ch-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ch-it { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; aspect-ratio: 1; border: 0; border-radius: 22px; background: rgba(255, 255, 255, 0.75); box-shadow: 0 10px 22px -18px rgba(92, 78, 66, 0.6); cursor: pointer; font: inherit; padding: 10px 6px 8px; transition: transform 0.15s, box-shadow 0.15s, background 0.15s; position: relative; }
.ch-it:hover { transform: translateY(-3px); }
.ch-it svg { width: 72%; height: 58%; overflow: visible; }
.ch-it span { font-size: 13px; font-weight: 600; color: #4a3e3a; text-align: center; line-height: 1.15; }
.ch-it.on { background: color-mix(in srgb, #f9cf45 34%, #fff); box-shadow: 0 0 0 3px #f6b92b, 0 12px 22px -16px rgba(150, 100, 20, 0.6); }
.ch-it.soon { cursor: default; background: rgba(255, 255, 255, 0.4); box-shadow: none; color: #c9bfb6; }
.ch-it.soon svg { width: 34%; height: 34%; }
.ch-it.soon span { color: #b4a9a2; font-weight: 500; }
.ch-stage { position: relative; display: grid; place-items: end center; height: 440px; }
.ch-glow { position: absolute; left: 50%; bottom: 12px; width: 92%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(249, 207, 69, 0.35), rgba(249, 207, 69, 0.08) 55%, transparent 70%); }
.ch-stage::after { content: ""; position: absolute; left: 50%; bottom: 8px; width: 62%; height: 22px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(92, 78, 66, 0.22), transparent 70%); }
.ch-turtle { position: relative; z-index: 1; width: 82%; aspect-ratio: 729 / 900; margin-bottom: 18px; }
.ch-turtle img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ch-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.h3-prof { cursor: pointer; }
@media (max-width: 760px) {
  .ch-card { padding: 18px 14px 20px; border-radius: 26px; }
  .ch-h { font-size: 36px; }
  .ch-main { grid-template-columns: 1fr; gap: 12px; }
  .ch-stage { order: -1; height: 300px; }
  .ch-col { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .ch-it { border-radius: 16px; }
  .ch-it span { font-size: 11px; }
}
.ch-sub { max-width: none !important; margin-left: auto !important; margin-right: auto !important; }
@media (max-width: 760px) {
  .ch-main { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; }
  .ch-col { display: contents !important; }
  .ch-stage { grid-column: 1 / -1; height: 320px; }
  .ch-turtle { width: auto; height: 300px; margin-bottom: 10px; }
  .ch-it { min-width: 0; }
}
/* ---------- Ваня или Таня в уроке: воспоминание и вопрос «А у тебя?» ---------- */
.lsn-talk { display: flex; align-items: flex-end; gap: 4px; max-width: 820px; margin: 30px auto 0; text-align: left; }
.lsn-al-l .lsn-talk { margin-left: 0; }
.lsn-al-r .lsn-talk { margin-right: 0; }
.lsn-talk img { flex: none; width: 150px; height: auto; margin-bottom: -6px; filter: drop-shadow(0 8px 10px rgba(92, 78, 66, 0.16)); }
.lsn-bubble { position: relative; flex: 1; background: #fffdf8; border-radius: 28px; padding: 18px 26px 20px; margin-bottom: 70px; box-shadow: 0 14px 30px -22px rgba(92, 78, 66, 0.55); }
.lsn-bubble::before { content: ""; position: absolute; left: -14px; bottom: 26px; width: 28px; height: 28px; background: #fffdf8; transform: rotate(45deg); border-radius: 4px; }
.lsn-bubble b { display: block; font-family: "Caveat", "Rubik", sans-serif; font-size: 30px; line-height: 1; color: var(--lc); margin-bottom: 6px; }
.lsn-bubble p { margin: 0; font-size: 20px; line-height: 1.5; color: #3a302d; }
.lsn-bubble .lsn-ask { margin-top: 10px; padding-top: 10px; border-top: 1px dashed color-mix(in srgb, var(--lc) 40%, #fff); font-weight: 600; }
@media (max-width: 760px) {
  .lsn-talk { gap: 0; }
  .lsn-talk img { width: 96px; }
  .lsn-bubble { padding: 14px 18px 16px; margin-bottom: 50px; border-radius: 22px; }
  .lsn-bubble b { font-size: 24px; }
  .lsn-bubble p { font-size: 16.5px; }
}

/* реплики Тани и Вани — коротко, компактно, чтобы урок помещался на один экран */
.lsn-talks { display: flex; gap: 28px; max-width: 900px; margin: 18px auto 0; }
.lsn-talks .lsn-talk { flex: 1; display: flex; align-items: flex-end; gap: 2px; max-width: 640px; margin: 0 auto; text-align: left; }
.lsn-talks.two .lsn-talk-vanya { flex-direction: row-reverse; }
.lsn-talks .lsn-talk img { flex: none; width: auto; height: 120px; margin: 0 0 -4px; filter: drop-shadow(0 6px 8px rgba(92, 78, 66, 0.14)); }
.lsn-talks .lsn-bubble { position: relative; flex: 0 1 auto; margin: 0 0 34px; padding: 12px 20px 13px; border-radius: 22px; background: #fffdf8; box-shadow: 0 12px 26px -20px rgba(92, 78, 66, 0.55); font-size: 19px; line-height: 1.4; color: #3a302d; }
.lsn-talks .lsn-bubble::before { content: ""; position: absolute; left: -9px; bottom: 16px; width: 20px; height: 20px; background: #fffdf8; transform: rotate(45deg); border-radius: 3px; }
.lsn-talks.two .lsn-talk-vanya .lsn-bubble::before { left: auto; right: -9px; }
.lsn-talks .lsn-bubble b { display: inline; margin: 0 8px 0 0; font-family: "Caveat", "Rubik", sans-serif; font-size: 26px; line-height: 1; color: var(--lc); }
.lsn-al-l .lsn-talks { margin-left: 0; }
@media (max-width: 760px) {
  .lsn-talks { flex-direction: column; gap: 10px; margin-top: 12px; }
  .lsn-talks .lsn-talk img { height: 84px; }
  .lsn-talks .lsn-bubble { font-size: 16px; padding: 10px 14px 11px; margin-bottom: 22px; }
  .lsn-talks .lsn-bubble b { font-size: 22px; }
}
.lsn .lsn-flow[style*="--fz"] p { font-size: var(--fz) !important; line-height: 1.55 !important; }
.lsn-talks .lsn-talk img { height: 104px; }
.lsn-talks .lsn-bubble { margin-bottom: 26px; }

/* весь текст уроков чуть меньше и одинаковый во всех разделах — чтобы рядом поместились крупные Таня и Ваня */
.lsn .lsn-flow p, .lsn .lsn-flow h4, .lsn .lsn-flow[style*="--fz"] p { font-size: 24px !important; line-height: 1.6 !important; }
.lsn-plain .lsn-txt, .lsn-exb { font-size: 24px; }
.lsn-key { font-size: 26px; }
.lsn-big { margin-bottom: 36px; }
@media (max-width: 760px) {
  .lsn .lsn-flow p, .lsn .lsn-flow h4, .lsn .lsn-flow[style*="--fz"] p { font-size: 19px !important; }
  .lsn-plain .lsn-txt, .lsn-exb { font-size: 19px; }
  .lsn-key { font-size: 21px; }
}
/* реплика героя: крупная фигурка, облачко мягкое, не белое */
.lsn-talks .lsn-talk img { height: 180px; }
.lsn-talks .lsn-bubble { margin-bottom: 64px; background: rgba(255, 253, 248, 0.55); box-shadow: none; font-size: 20px; }
.lsn-talks .lsn-bubble::before { background: rgba(255, 253, 248, 0.55); clip-path: polygon(0 0, 0 100%, 100% 100%); bottom: 22px; }
.lsn-talks.two .lsn-talk-vanya .lsn-bubble::before { clip-path: polygon(0 0, 100% 0, 100% 100%); }
.lsn-plain .lsn-talks { margin-left: 0; max-width: 820px; }
@media (max-width: 760px) {
  .lsn-talks .lsn-talk img { height: 130px; }
  .lsn-talks .lsn-bubble { margin-bottom: 40px; font-size: 16.5px; }
}

/* на компьютере Таня и Ваня стоят сбоку от текста урока: облачко сверху, фигурка под ним */
@media (min-width: 761px) {
  .lsn-plain:has(> .lsn-talks) { display: grid; grid-template-columns: minmax(0, 1fr) 270px; grid-template-rows: auto auto auto auto auto auto 1fr; column-gap: 44px; align-items: start; }
  .lsn-plain:has(> .lsn-talks) > * { grid-column: 1; }
  .lsn-plain:has(> .lsn-talks) > .lsn-big { grid-column: 1 / -1; }
  .lsn-plain:has(> .lsn-talks) > .lsn-talks { grid-column: 2; grid-row: 2 / -1; margin: 0; max-width: none; flex-direction: column; gap: 14px; }
  .lsn-al-r .lsn-plain:has(> .lsn-talks) { grid-template-columns: 270px minmax(0, 1fr); }
  .lsn-al-r .lsn-plain:has(> .lsn-talks) > * { grid-column: 2; }
  .lsn-al-r .lsn-plain:has(> .lsn-talks) > .lsn-big { grid-column: 1 / -1; }
  .lsn-al-r .lsn-plain:has(> .lsn-talks) > .lsn-talks { grid-column: 1; }
  .lsn-plain:has(> .lsn-talks) .lsn-flow { max-width: none !important; }
  .lsn-plain > .lsn-talks .lsn-talk, .lsn-plain > .lsn-talks.two .lsn-talk-vanya { flex-direction: column-reverse; align-items: center; gap: 0; max-width: none; margin: 0; }
  .lsn-plain > .lsn-talks .lsn-talk img { height: 190px; margin: 0; }
  .lsn-plain > .lsn-talks .lsn-bubble { margin: 0 0 16px; width: 100%; box-sizing: border-box; }
  .lsn-plain > .lsn-talks .lsn-bubble::before,
  .lsn-plain > .lsn-talks.two .lsn-talk-vanya .lsn-bubble::before { left: 50%; right: auto; bottom: -9px; margin-left: -10px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
  .lsn-plain > .lsn-talks .lsn-bubble b { display: block; margin: 0 0 2px; }
}

/* компактнее заголовок и текст — урок, герой и звёзды на одном экране */
.lsn-big { font-size: clamp(46px, 5vw, 64px); margin-bottom: 26px; }
.lsn .lsn-flow p, .lsn .lsn-flow h4, .lsn .lsn-flow[style*="--fz"] p { font-size: 23px !important; line-height: 1.55 !important; }
.lsn-plain .lsn-txt, .lsn-exb { font-size: 23px; line-height: 1.55; }
/* облачко — еле заметное, реплика цветом урока */
.lsn-talks .lsn-bubble, .lsn-talks .lsn-bubble::before { background: rgba(255, 255, 255, 0.32); }
.lsn-talks .lsn-bubble { color: color-mix(in srgb, var(--lc) 62%, #2c2420); font-weight: 500; }
.lsn-talks .lsn-bubble b { color: var(--lc); }
@media (min-width: 761px) {
  .lsn-plain > .lsn-talks .lsn-bubble { font-size: 19px; line-height: 1.38; padding: 12px 18px 14px; }
  .lsn-plain > .lsn-talks .lsn-talk img { height: 200px; }
}
@media (max-width: 760px) { .lsn-big { font-size: 42px; } }
@media (min-width: 761px) {
  /* Родной язык: заголовок длинный — герой стоит рядом с ним, а не под ним */
  .lsn-main:not([class*="lsn-al-"]) .lsn-plain:has(> .lsn-talks) > .lsn-big { grid-column: 1; }
  .lsn-main:not([class*="lsn-al-"]) .lsn-plain:has(> .lsn-talks) > .lsn-talks { grid-row: 1 / -1; padding-top: 24px; }
}

/* реплика героя — рукописным шрифтом заголовка, без имени; герой справа от текста смотрит на текст */
.lsn-talks .lsn-bubble b { display: none !important; }
.lsn-talks .lsn-bubble { font-family: "Caveat", "Rubik", sans-serif; font-style: italic; font-weight: 600; }
@media (min-width: 761px) {
  .lsn-plain > .lsn-talks .lsn-bubble { font-size: 25px; line-height: 1.2; }
  .lsn-main:not(.lsn-al-r) .lsn-plain > .lsn-talks .lsn-talk img { transform: scaleX(-1); }
}
@media (max-width: 760px) { .lsn-talks .lsn-bubble { font-size: 21px; line-height: 1.2; } }
.lsn-talks .lsn-bubble { font-style: normal; font-weight: 700; }
@media (min-width: 761px) {
  .lsn-plain > .lsn-talks .lsn-bubble { font-size: 27px; line-height: 1.12; }
  .lsn-plain:has(> .lsn-talks) { grid-template-columns: minmax(0, 1fr) 250px; column-gap: 36px; }
  .lsn-al-r .lsn-plain:has(> .lsn-talks) { grid-template-columns: 250px minmax(0, 1fr); }
  .lsn-big { margin-bottom: 18px; }
  .lsn .lsn-flow p, .lsn .lsn-flow h4 { font-size: 22px !important; line-height: 1.5 !important; }
  .lsn-plain .lsn-txt, .lsn-exb { font-size: 22px; line-height: 1.5; }
}
@media (min-width: 761px) {
  .lsn-plain > .lsn-talks .lsn-bubble { margin-bottom: 10px; padding: 10px 16px 12px; }
  .lsn-plain > .lsn-talks .lsn-talk img { height: 186px; }
}

/* герой крупнее, стоит внизу колонки; мысли — облачком у головы, тонким почерком */
.lsn-talks .lsn-bubble { font-weight: 500; }
@media (min-width: 761px) {
  .lsn-plain > .lsn-talks { align-self: end; }
  .lsn-plain > .lsn-talks .lsn-talk, .lsn-plain > .lsn-talks.two .lsn-talk-vanya { position: relative; display: block; height: 380px; }
  .lsn-plain > .lsn-talks .lsn-talk img { position: absolute; left: -16px; bottom: 0; height: 250px; margin: 0; }
  .lsn-plain > .lsn-talks .lsn-bubble { position: absolute; top: 0; right: -30px; left: auto; width: 190px; margin: 0; padding: 26px 24px 28px; text-align: center; font-size: 25px; line-height: 1.12; border-radius: 52% 48% 50% 50% / 58% 54% 46% 42%; }
  .lsn-plain > .lsn-talks .lsn-bubble::before,
  .lsn-plain > .lsn-talks.two .lsn-talk-vanya .lsn-bubble::before { content: ""; position: absolute; left: 30px; right: auto; bottom: -16px; width: 22px; height: 22px; margin: 0; border-radius: 50%; transform: none; clip-path: none; background: rgba(255, 255, 255, 0.32); }
  .lsn-plain > .lsn-talks .lsn-bubble::after { content: ""; position: absolute; left: 16px; bottom: -36px; width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, 0.32); }
  /* герой справа от текста — всё зеркально: фигурка у правого края, облачко левее головы */
  .lsn-main:not(.lsn-al-r) .lsn-plain > .lsn-talks .lsn-talk img { left: auto; right: -16px; }
  .lsn-main:not(.lsn-al-r) .lsn-plain > .lsn-talks .lsn-bubble { right: auto; left: -30px; }
  .lsn-main:not(.lsn-al-r) .lsn-plain > .lsn-talks .lsn-bubble::before { left: auto; right: 30px; }
  .lsn-main:not(.lsn-al-r) .lsn-plain > .lsn-talks .lsn-bubble::after { left: auto; right: 16px; }
}
@media (min-width: 761px) { .lsn-plain > .lsn-talks { align-self: start; } }
@media (min-width: 761px) { .lsn-plain > .lsn-talks .lsn-talk { flex: none; } }
@media (min-width: 761px) {
  .lsn-plain > .lsn-talks .lsn-talk, .lsn-plain > .lsn-talks.two .lsn-talk-vanya { height: 390px; }
  .lsn-plain > .lsn-talks .lsn-bubble { width: 236px; padding: 20px 26px 22px; font-size: 24px; line-height: 1.14; right: -14px; border-radius: 50% 46% 48% 52% / 54% 52% 48% 46%; }
  .lsn-plain > .lsn-talks .lsn-talk img { height: 260px; left: -70px; }
  .lsn-main:not(.lsn-al-r) .lsn-plain > .lsn-talks .lsn-bubble { left: -14px; right: auto; }
  .lsn-main:not(.lsn-al-r) .lsn-plain > .lsn-talks .lsn-talk img { right: -76px; left: auto; }
  .lsn-plain > .lsn-talks .lsn-bubble::before { left: 40px; bottom: -14px; }
  .lsn-plain > .lsn-talks .lsn-bubble::after { left: 22px; bottom: -32px; }
  .lsn-main:not(.lsn-al-r) .lsn-plain > .lsn-talks .lsn-bubble::before { left: auto; right: 40px; }
  .lsn-main:not(.lsn-al-r) .lsn-plain > .lsn-talks .lsn-bubble::after { left: auto; right: 22px; }
}

/* мысль героя: заливка — съехавший овал, под ним овальчик поменьше, вокруг — тонкий обвод «от руки» */
@media (min-width: 761px) {
  .lsn-plain > .lsn-talks .lsn-bubble,
  .lsn-main:not(.lsn-al-r) .lsn-plain > .lsn-talks .lsn-bubble { background: none; border-radius: 0; padding: 26px 30px 30px; top: -20px; z-index: 1; }
  .lsn-plain > .lsn-talks .lsn-bubble::before,
  .lsn-plain > .lsn-talks.two .lsn-talk-vanya .lsn-bubble::before,
  .lsn-main:not(.lsn-al-r) .lsn-plain > .lsn-talks .lsn-bubble::before { content: ""; position: absolute; inset: 6px -6px -4px 14px; left: 14px; right: -6px; bottom: -4px; width: auto; height: auto; margin: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.34); transform: rotate(-5deg); clip-path: none; z-index: -1; }
  .lsn-plain > .lsn-talks .lsn-bubble::after,
  .lsn-main:not(.lsn-al-r) .lsn-plain > .lsn-talks .lsn-bubble::after { content: ""; position: absolute; width: 34px; height: 20px; border-radius: 50%; background: rgba(255, 255, 255, 0.34); transform: rotate(-12deg); z-index: -1; left: 26px; right: auto; bottom: -34px; }
  .lsn-main:not(.lsn-al-r) .lsn-plain > .lsn-talks .lsn-bubble::after { left: auto; right: 26px; transform: rotate(12deg); }
  .lsn-main:not(.lsn-al-r) .lsn-plain > .lsn-talks .lsn-bubble::before { transform: rotate(5deg); left: -6px; right: 14px; }
  .lsn-pen { position: absolute; inset: -4px -10px -8px -6px; width: calc(100% + 16px); height: calc(100% + 12px); pointer-events: none; overflow: visible; z-index: -1; }
  .lsn-pen path { fill: none; stroke: var(--lc); stroke-opacity: 0.42; stroke-width: 1.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
}
@media (max-width: 760px) { .lsn-pen { display: none; } }
@media (min-width: 761px) {
  .lsn-plain > .lsn-talks .lsn-bubble,
  .lsn-main:not(.lsn-al-r) .lsn-plain > .lsn-talks .lsn-bubble { width: 220px; padding: 10px 14px; top: -6px; }
  .lsn-al-r .lsn-plain > .lsn-talks .lsn-bubble { right: -34px; top: -22px; }
  .lsn-pen { inset: -30px -34px -30px -34px; width: calc(100% + 68px); height: calc(100% + 60px); }
  .lsn-pen path { stroke-opacity: 0.5; }
  /* заливка — овал, нарочно съехавший вниз-вбок от текста */
  .lsn-plain > .lsn-talks .lsn-bubble::before,
  .lsn-plain > .lsn-talks.two .lsn-talk-vanya .lsn-bubble::before,
  .lsn-main:not(.lsn-al-r) .lsn-plain > .lsn-talks .lsn-bubble::before { inset: auto; left: -18px; top: -8px; right: auto; bottom: auto; width: calc(100% + 40px); height: calc(100% + 44px); background: rgba(255, 255, 255, 0.4); transform: translate(14px, 14px) rotate(-6deg); }
  .lsn-main:not(.lsn-al-r) .lsn-plain > .lsn-talks .lsn-bubble::before { transform: translate(-14px, 14px) rotate(6deg); }
  .lsn-plain > .lsn-talks .lsn-bubble::after { width: 40px; height: 24px; background: rgba(255, 255, 255, 0.45); left: 0; bottom: -62px; }
  .lsn-main:not(.lsn-al-r) .lsn-plain > .lsn-talks .lsn-bubble::after { left: auto; right: 0; }
}
@media (min-width: 761px) { .lsn-al-r .lsn-plain > .lsn-talks .lsn-bubble { right: 4px; top: -26px; } .lsn-plain > .lsn-talks .lsn-bubble::after { background: rgba(255,255,255,.6); } }
@media (min-width: 761px) { .lsn-plain > .lsn-talks .lsn-bubble::after { bottom: -30px; left: 30px; width: 30px; height: 18px; } .lsn-main:not(.lsn-al-r) .lsn-plain > .lsn-talks .lsn-bubble::after { left: auto; right: 30px; } }
@media (min-width: 761px) { .lsn-al-r .lsn-plain > .lsn-talks { margin-top: 110px; } }
@media (min-width: 761px) { .lsn-al-r .lsn-plain > .lsn-talks { margin-top: 0; transform: translateY(110px); } }
@media (min-width: 761px) { .lsn-plain > .lsn-talks { position: relative; z-index: 4; pointer-events: none; } }

/* пятно под мыслью — прозрачнее, меньше и съезжает в сторону героя; к голове ведут овальчик и маленький кружок «ручкой» */
@media (min-width: 761px) {
  .lsn-al-r .lsn-plain > .lsn-talks .lsn-bubble { top: -64px; }
  .lsn-main:not(.lsn-al-r) .lsn-plain > .lsn-talks .lsn-bubble { top: -34px; }
  .lsn-plain > .lsn-talks .lsn-bubble::before,
  .lsn-plain > .lsn-talks.two .lsn-talk-vanya .lsn-bubble::before,
  .lsn-main:not(.lsn-al-r) .lsn-plain > .lsn-talks .lsn-bubble::before { left: -8px; top: 0; width: calc(100% + 16px); height: calc(100% + 18px); background: rgba(255, 255, 255, 0.2); }
  /* герой слева (музыка) — пятно влево-вниз; герой справа — вправо-вниз */
  .lsn-al-r .lsn-plain > .lsn-talks .lsn-bubble::before { transform: translate(-16px, 16px) rotate(6deg); }
  .lsn-main:not(.lsn-al-r) .lsn-plain > .lsn-talks .lsn-bubble::before { transform: translate(16px, 16px) rotate(-6deg); }
  .lsn-plain > .lsn-talks .lsn-bubble::after { background: rgba(255, 255, 255, 0.28); bottom: -30px; left: 30px; }
  .lsn-pen2 { position: absolute; width: 20px; height: 17px; left: 14px; bottom: -58px; overflow: visible; }
  .lsn-main:not(.lsn-al-r) .lsn-pen2 { left: auto; right: 14px; }
  .lsn-pen2 path { fill: rgba(255, 255, 255, 0.2); stroke: var(--lc); stroke-opacity: 0.5; stroke-width: 1.3; stroke-linecap: round; }
}
@media (max-width: 760px) { .lsn-pen2 { display: none; } }

/* двое героев разговаривают: Таня слева, Ваня справа, лицом друг к другу; колонка шире */
@media (min-width: 761px) {
  .lsn-al-r .lsn-plain:has(> .lsn-talks.two) { grid-template-columns: 430px minmax(0, 1fr); }
  .lsn-plain > .lsn-talks.two { flex-direction: row; gap: 0; transform: none; }
  .lsn-plain > .lsn-talks.two .lsn-talk, .lsn-plain > .lsn-talks.two .lsn-talk-vanya { flex: 1 1 50%; height: 400px; }
  .lsn-plain > .lsn-talks.two .lsn-talk img { height: 220px; left: -10px; }
  .lsn-plain > .lsn-talks.two .lsn-talk-vanya img { left: auto; right: 0; transform: scaleX(-1); height: 232px; }
  .lsn-al-r .lsn-plain > .lsn-talks.two .lsn-bubble { width: 190px; font-size: 22px; top: -20px; right: -40px; }
  .lsn-al-r .lsn-plain > .lsn-talks.two .lsn-talk-vanya .lsn-bubble { top: 50px; right: 0; }
  .lsn-al-r .lsn-plain > .lsn-talks.two .lsn-talk-vanya .lsn-bubble::before { transform: translate(14px, 16px) rotate(-6deg); }
  .lsn-al-r .lsn-plain > .lsn-talks.two .lsn-talk-vanya .lsn-bubble::after { left: auto; right: 34px; }
  .lsn-al-r .lsn-plain > .lsn-talks.two .lsn-talk-vanya .lsn-pen2 { left: auto; right: 20px; }
}
@media (min-width: 761px) { .lsn-pen2 { width: 28px; height: 24px; bottom: -48px; left: 20px; } .lsn-main:not(.lsn-al-r) .lsn-pen2 { left: auto; right: 20px; } }
@media (min-width: 761px) {
  .lsn-al-r .lsn-plain:has(> .lsn-talks.two) { grid-template-columns: 380px minmax(0, 1fr); column-gap: 30px; }
  .lsn-plain:has(> .lsn-talks.two) .lsn-flow h4 { margin-top: 12px !important; }
  .lsn-plain > .lsn-talks.two .lsn-talk:first-child img { height: 236px; left: -40px; }
  .lsn-plain > .lsn-talks.two .lsn-talk-vanya img { height: 236px; right: -10px; }
  .lsn-al-r .lsn-plain > .lsn-talks.two .lsn-talk:first-child .lsn-bubble { width: 176px; top: -24px; right: auto; left: -34px; }
  .lsn-al-r .lsn-plain > .lsn-talks.two .lsn-talk-vanya .lsn-bubble { width: 176px; top: 84px; right: -16px; }
}
@media (min-width: 761px) { .lsn-al-r .lsn-plain > .lsn-talks.two .lsn-talk-vanya .lsn-bubble { top: 24px; } .lsn-al-r .lsn-plain > .lsn-talks.two .lsn-talk:first-child .lsn-bubble { top: -40px; } }
@media (min-width: 761px) { .lsn-pen2 { bottom: -38px; left: 26px; } .lsn-main:not(.lsn-al-r) .lsn-pen2 { left: auto; right: 26px; } .lsn-al-r .lsn-plain > .lsn-talks.two .lsn-talk-vanya .lsn-pen2 { left: auto; right: 30px; } }
.lsn-plain > .lsn-talks .lsn-bubble::after { display: none !important; }

/* текст уроков — ровным прямоугольником по обоим краям, с переносами; чуть больше воздуха под заголовком */
.lsn .lsn-flow p, .lsn-plain .lsn-txt { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.lsn-al-r .lsn-flow p { text-align-last: right; }
.lsn-al-c .lsn-flow p { text-align-last: center; }
.lsn-flow p.mu-meta { text-align: inherit; hyphens: manual; }
@media (min-width: 761px) { .lsn-big { margin-bottom: 30px; } }
.lsn .lsn-flow p, .lsn-plain .lsn-txt, .lsn-al-r .lsn-flow p, .lsn-al-c .lsn-flow p { text-align-last: left; }

/* обтекание: мысль — овалом, фигурка — по силуэту */
.lsn .lsn-flow.lsn-flow-wrap { max-width: none !important; }
.lsn-wrapq { float: left; clear: left; position: relative; width: 270px; height: 190px; margin: 4px 26px 0 0; shape-outside: ellipse(50% 50%); shape-margin: 14px; display: flex; align-items: center; justify-content: center; }
.lsn-wrapq .lsn-bubble { position: relative; margin: 0; padding: 0 30px; width: 100%; box-sizing: border-box; text-align: center !important; text-align-last: center !important; font-family: "Caveat", "Rubik", sans-serif; font-weight: 500; font-size: 24px; line-height: 1.14; color: color-mix(in srgb, var(--lc) 62%, #2c2420); hyphens: manual; }
.lsn-wrapq::before { content: ""; position: absolute; inset: 6px 4px 0 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); transform: translate(-14px, 14px) rotate(6deg); }
.lsn-wrapq .lsn-pen { position: absolute; inset: -6px -8px -4px -8px; width: calc(100% + 16px); height: calc(100% + 10px); overflow: visible; pointer-events: none; }
.lsn-wrapq .lsn-pen path { fill: none; stroke: var(--lc); stroke-opacity: 0.5; stroke-width: 1.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.lsn-wrapq .lsn-pen2 { position: absolute; width: 28px; height: 24px; left: 46px; bottom: -40px; overflow: visible; }
.lsn-wrapq .lsn-pen2 path { fill: rgba(255, 255, 255, 0.2); stroke: var(--lc); stroke-opacity: 0.5; stroke-width: 1.3; }
.lsn-wrapimg { float: left; clear: left; height: 250px; width: auto; margin: 22px 18px 0 -40px; shape-image-threshold: 0.3; shape-margin: 16px; filter: drop-shadow(0 6px 8px rgba(92, 78, 66, 0.14)); }
.lsn-flow-wrap::after { content: ""; display: block; clear: both; }
@media (max-width: 760px) {
  .lsn-wrapq { width: 190px; height: 150px; margin-right: 12px; }
  .lsn-wrapq .lsn-bubble { font-size: 19px; padding: 0 18px; }
  .lsn-wrapimg { height: 170px; margin-left: -10px; }
}
.lsn-wrapq .lsn-bubble { background: none !important; box-shadow: none !important; border-radius: 0; padding: 0 40px !important; }
.lsn-wrapq .lsn-bubble::before, .lsn-wrapq .lsn-bubble::after { display: none !important; }
.lsn-wrapimg { position: relative; z-index: 4; }
@media (max-width: 760px) {
  .lsn .lsn-flow p, .lsn-plain .lsn-txt { text-align: left; hyphens: manual; }
  .lsn-flow-wrap { display: flex; flex-direction: column; }
  .lsn-flow-wrap > * { order: 2; }
  .lsn-wrapq { order: 1 !important; float: none; width: auto; height: auto; margin: 0 0 4px; padding: 18px 10px; shape-outside: none; }
  .lsn-wrapq .lsn-bubble { padding: 0 24px !important; font-size: 21px; }
  .lsn-wrapq .lsn-pen2 { display: block; left: 40px; bottom: -22px; }
  .lsn-wrapimg { order: 1 !important; float: none; display: block; height: 150px; margin: 6px 0 10px 10px; align-self: flex-start; shape-outside: none !important; }
}
@media (min-width: 761px) {
  .lsn-wrapq { shape-outside: ellipse(46% 48% at 46% 50%); shape-margin: 6px; }
}
@media (min-width: 761px) { .lsn-wrapq { shape-outside: ellipse(53% 48% at 46% 50%); } }
@media (min-width: 761px) { .lsn-wrapq { shape-outside: ellipse(50% 48% at 46% 50%); } }
/* без переносов слов; текст отодвинут от облачка и героя */
.lsn .lsn-flow p, .lsn-plain .lsn-txt { hyphens: manual; -webkit-hyphens: manual; }
@media (min-width: 761px) {
  .lsn-wrapq { margin-right: 60px; }
  .lsn-wrapimg { margin-right: 56px; }
}
@media (min-width: 761px) { .lsn-wrapq { margin-right: 44px; } .lsn-wrapimg { margin-right: 44px; } }
.lsn .lsn-flow-wrap p { margin: 0 0 8px !important; }
.lsn-bubble, .lsn-wrapq .lsn-bubble { text-align: center !important; text-align-last: center !important; hyphens: manual !important; }

/* плашки разделов: текст и иконка по центру по вертикали */
@media (min-width: 901px) {
  .h3-big4 .h3-bigbtn { justify-content: center; padding-top: 18px !important; padding-bottom: 18px !important; }
  .h3-big4 .h3-bigbtn svg.h3-ic { top: 50% !important; translate: 0 -50% !important; }
}

/* ---------- шапка: логотип слева, разделы по центру, праздник и аватарка справа ---------- */
header .bar { justify-content: space-between; }
header .logo { order: 0 !important; }
header .bar-right { order: 1 !important; margin-left: auto; flex: 0 0 auto; display: flex; align-items: center; gap: 16px; }
.hdr-me { display: inline-flex; flex: none; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; background: #fff7d6; box-shadow: 0 0 0 3px #f6d873; transition: transform 0.2s; }
.hdr-me:hover { transform: scale(1.06); }
.hdr-me img { width: 100%; height: 100%; object-fit: cover; }
.hdr-login { display: none; min-width: 64px; justify-content: flex-end; font-weight: 700; font-size: 17px; color: #9a918a; text-decoration: none; }
.hdr-login:hover { color: #6f6660; }
body.signed-out .hdr-me { display: none; }
body.signed-out .hdr-login { display: inline-flex; }
@media (max-width: 900px) {
  .hdr-me { width: 38px; height: 38px; }
}

/* аватарка в шапке — как была: сама картинка в жёлтом кружке, без лишней обводки */
.hdr-me { background: none; box-shadow: none; width: 52px; height: 52px; }
/* шапка: весь ряд ниже, ближе к картинке */
@media (min-width: 901px) {
  header .bar { height: 94px !important; padding-bottom: 6px !important; align-items: flex-end !important; }
  header .topnav { top: auto !important; bottom: 10px !important; transform: translateX(-50%) !important; }
  header .bar-right { align-self: flex-end; }
}
/* флажок «новое» на плашке раздела — чуть ниже */
.h3-bigbtn .nw-dot { top: 4px !important; }

.hdr-me { width: auto !important; height: 54px !important; border-radius: 0; overflow: visible; }
.hdr-me img { width: auto; height: 100%; object-fit: contain; }
@media (max-width: 900px) { .hdr-me { height: 46px !important; } }

/* меню в шапке: «Подписка · Уроки · Пособия» с точками между словами */
header .topnav a + a::before { content: "·"; display: inline-block; margin: 0 12px 0 -4px; color: #c9bfb6; font-weight: 700; }
header .logo { margin-left: 0 !important; margin-right: 0 !important; }
header .bar-right { margin-right: 0 !important; }
header .bar-right .hdr-hol { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }
/* картинка на главной — прежней высоты, чтобы плашки разделов остались на своих местах */
@media (min-width: 901px) { .h3-hero { min-height: 521px !important; } }
@media (min-width: 901px) { header .topnav { bottom: 6px !important; } .hdr-me { transform: translateY(5px); } .hdr-me:hover { transform: translateY(5px) scale(1.06); } }
@media (min-width: 901px) { header .topnav { bottom: -2px !important; } }
@media (min-width: 901px) { header .topnav { bottom: 4px !important; } }
.h3-bigbtn .nw-dot { top: -3px !important; }
@media (min-width: 901px) { .hdr-me { transform: translateY(1px); } .hdr-me:hover { transform: translateY(1px) scale(1.06); } }
@media (min-width: 901px) { .hdr-me { transform: translateY(-2px); } .hdr-me:hover { transform: translateY(-2px) scale(1.06); } }

/* круглая стрелка «следующая тема» — в правом нижнем углу урока, как кнопка «дальше» в упражнениях */
.lsn-next { position: fixed; right: 26px; bottom: 26px; z-index: 6; width: 56px; height: 56px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; cursor: pointer; color: #fff; background: var(--lc, #3494e3); box-shadow: 0 10px 22px -12px var(--lc, #3494e3); transition: transform 0.15s, filter 0.15s; }
.lsn-next:hover { transform: translateX(2px); filter: brightness(1.05); }
@media (max-width: 760px) { .lsn-next { right: 14px; bottom: 14px; width: 48px; height: 48px; } }
@media (max-width: 760px) { .lsn-next { right: 10px; bottom: 8px; width: 42px; height: 42px; } }
.lsn-flow-wrap > .lsn-wrapimg:first-child { height: 330px; margin-top: 0; }
@media (max-width: 760px) { .lsn-flow-wrap > .lsn-wrapimg:first-child { height: 200px; } }
/* тестовый режим: рыжая точка — у темы есть иллюстрация */
.ill-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: #f07a2b; margin-left: 10px; vertical-align: middle; box-shadow: 0 0 0 3px rgba(240, 122, 43, 0.2); }
.exn .ill-dot { display: inline-block !important; position: static !important; flex: none; }
.exn:has(.ill-dot) { display: inline-flex !important; flex-direction: row !important; align-items: center; }
.h3-bigbtn.c-lilac svg.h3-ic { right: 10px !important; }
@media (min-width: 761px) { .lsn-plain > .lsn-talks .lsn-talk img[src*="vanya-map"] { height: auto; width: 360px; right: -60px !important; bottom: 10px; } }
@media (min-width: 761px) { .lsn-plain > .lsn-talks .lsn-talk img[src*="vanya-map"] { height: auto !important; width: 380px !important; right: -70px !important; bottom: 0 !important; } }
/* вариант А для урока с картой: «Играть» слева от звёзд, Ваня с картой крупнее, уголок карты уходит под плашку «Примеры» */
@media (min-width: 761px) {
  .lsn-talkbig .lsn-stars .ls-cta { left: auto; right: 100%; margin: 0 8px 0 0; padding: 0 66px 0 0; transform: rotate(-7deg); }
  .lsn-talkbig .lsn-stars .ls-arr { left: auto; right: 0; transform: rotate(-6deg); }
  .lsn-talkbig .lsn-ex { position: relative; z-index: 2; }
  .lsn-talkbig .lsn-plain > .lsn-talks { z-index: 1 !important; }
  .lsn-talkbig .lsn-plain > .lsn-talks .lsn-talk img[src*="vanya-map"] { width: 560px !important; right: -110px !important; bottom: -150px !important; }
  .lsn-talkbig .lsn-plain > .lsn-talks .lsn-bubble { top: -10px !important; }
}
@media (min-width: 761px) {
  .lsn-talkbig .lsn-plain > .lsn-talks { z-index: 4 !important; }
  .lsn-talkbig .lsn-ex { z-index: 5; }
}
@media (min-width: 761px) {
  .lsn-talkbig .lsn-plain > .lsn-talks .lsn-talk img[src*="vanya-map"] { width: 530px !important; right: -100px !important; bottom: -112px !important; }
  .lsn-talkbig .lsn-plain > .lsn-talks .lsn-bubble { top: -40px !important; left: -60px !important; right: auto !important; }
}
/* стрелки «предыдущая / следующая тема» — по центру звёзд по высоте, слева и справа */
.lsn-next { bottom: calc(max(28px, 5vh) + 68px); }
.lsn-prev { right: auto; left: 26px; }
.lsn-prev svg { transform: scaleX(-1); }
.lsn-prev:hover { transform: translateX(-2px); }
@media (max-width: 760px) { .lsn-next { bottom: 69px; } .lsn-prev { left: 10px; } }
@media (max-width: 760px) { .lsn-next { bottom: 8px; width: 38px; height: 38px; } }
/* декоративная иллюстрация внизу урока: черепашка бежит к звёздам */
.lsn-deco { position: fixed; z-index: 4; pointer-events: none; }
.lsn-deco-turtle-run { left: 24px; bottom: calc(max(28px, 5vh) + 20px); width: 290px; height: auto; animation: decoRun 2.4s ease-in-out infinite; }
@keyframes decoRun { 0%, 100% { transform: translateX(0) rotate(0); } 50% { transform: translateX(10px) rotate(-1.5deg); } }
@media (prefers-reduced-motion: reduce) { .lsn-deco-turtle-run { animation: none; } }
@media (max-width: 760px) { .lsn-deco-turtle-run { position: static; display: block; width: 190px; margin: 18px 0 0; } }
@media (min-width: 761px) { .lsn-deco-turtle-run { left: auto; right: calc(50% - 150px); bottom: calc(max(28px, 5vh) + 150px); width: 300px; } }
@media (min-width: 761px) { .lsn-deco-turtle-run { width: 360px; right: calc(50% - 190px); bottom: calc(max(28px, 5vh) + 140px); } }
.lsn-deco img { display: block; width: 100%; height: auto; }
/* черепашка с пчёлкой: вокруг пчёлки летают рукописные «ж-ж-ж» */
.lsn-deco-turtle-bee { right: 70px; bottom: calc(max(28px, 5vh) + 150px); width: 270px; }
.lsn-deco-turtle-bee .bz { position: absolute; font-family: "Caveat", "Rubik", sans-serif; font-weight: 700; color: var(--lc); opacity: 0.85; animation: bzz 2.2s ease-in-out infinite; }
.bz1 { right: -22px; top: -8px; font-size: 34px; }
.bz2 { right: -78px; top: 34px; font-size: 30px; animation-delay: 0.5s !important; }
.bz3 { right: 70px; top: -30px; font-size: 26px; animation-delay: 1s !important; }
@keyframes bzz { 0%, 100% { transform: translate(0, 0) rotate(-8deg); } 50% { transform: translate(4px, -6px) rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .lsn-deco-turtle-bee .bz { animation: none; } }
@media (max-width: 760px) { .lsn-deco-turtle-bee { position: relative; right: auto; bottom: auto; width: 170px; margin: 20px 0 0 30px; } .bz2 { right: -60px; } }
.lsn-deco-turtle-bee .bz { white-space: nowrap; }
@media (min-width: 761px) { .lsn-deco-turtle-bee { right: 150px; bottom: calc(max(28px, 5vh) + 165px); width: 240px; } }
/* бегущая черепашка: спокойная картинка под плашкой справа, за пылью — длинный след штрихами */
@media (min-width: 761px) {
  .lsn-deco-turtle-run { animation: none !important; width: 250px !important; right: 150px !important; left: auto !important; bottom: calc(max(28px, 5vh) + 160px) !important; }
  .lsn-d-turtle-run .lsn-stars .ls-cta { left: auto; right: 100%; margin: 0 8px 0 0; padding: 0 66px 0 0; transform: rotate(-7deg); }
  .lsn-d-turtle-run .lsn-stars .ls-arr { left: auto; right: 0; transform: rotate(-6deg); }
}
.lsn-deco-turtle-run { animation: none !important; }
.lsn-deco .dash { position: absolute; right: 88%; bottom: 2%; width: 300px; height: 60px; overflow: visible; }
.lsn-deco .dash path { fill: none; stroke: #6f5a4a; stroke-opacity: 0.55; stroke-width: 1.6; stroke-linecap: round; }
@media (max-width: 760px) { .lsn-deco-turtle-run { margin-left: auto !important; width: 170px !important; } .lsn-deco .dash { width: 170px; } }
@media (min-width: 761px) {
  .lsn-d-turtle-bee .lsn-stars .ls-cta { left: auto; right: 100%; margin: 0 8px 0 0; padding: 0 66px 0 0; transform: rotate(-7deg); }
  .lsn-d-turtle-bee .lsn-stars .ls-arr { left: auto; right: 0; transform: rotate(-6deg); }
  .lsn-deco-turtle-bee { bottom: calc(max(28px, 5vh) + 190px) !important; }
}
.lsn-deco .dash { right: 86%; bottom: 4%; width: 120px; height: 52px; }
.lsn-deco .dash path { stroke: #4a3e3a; stroke-opacity: 0.6; stroke-width: 1.5; fill: rgba(255, 250, 240, 0.7); }
.lsn-deco .dash circle { fill: rgba(255, 250, 240, 0.8); stroke: #4a3e3a; stroke-opacity: 0.6; stroke-width: 1.2; }
@media (min-width: 761px) { .lsn-deco-turtle-run { bottom: calc(max(28px, 5vh) + 205px) !important; } }
@media (max-width: 760px) { .lsn-deco .dash { width: 80px; } }
.lsn-deco .dash { right: 82%; bottom: 8%; width: 150px; height: 64px; }
@media (min-width: 761px) { .lsn-deco-turtle-run { width: 280px !important; bottom: calc(max(28px, 5vh) + 185px) !important; } }
.lsn-deco .dash { bottom: 14%; }
@media (min-width: 761px) { .lsn-talkbig .lsn-plain > .lsn-talks .lsn-talk img[src*="vanya-map"] { width: 680px !important; right: -90px !important; bottom: -95px !important; } .lsn-talkbig .lsn-plain > .lsn-talks .lsn-bubble { top: -70px !important; left: -10px !important; } }
@media (min-width: 761px) { .lsn-talkbig .lsn-txt { max-width: 690px !important; } .lsn-talkbig .lsn-plain > .lsn-talks .lsn-talk img[src*="vanya-map"] { width: 610px !important; right: -150px !important; bottom: -100px !important; } .lsn-talkbig .lsn-plain > .lsn-talks .lsn-bubble { top: -60px !important; left: 10px !important; } }
@media (min-width: 761px) { .lsn-talkbig .lsn-plain > .lsn-talks .lsn-bubble { top: -78px !important; left: -40px !important; } }
/* средние экраны (окно 760–1100): картинка героя чуть меньше, «Играть» — над первой звездой, чтобы не обрезалось */
@media (min-width: 761px) and (max-width: 1100px) {
  .lsn-talkbig .lsn-plain > .lsn-talks .lsn-talk img[src*="vanya-map"] { width: 520px !important; right: -110px !important; bottom: -80px !important; }
  :is(.lsn-talkbig, .lsn-d-turtle-run, .lsn-d-turtle-bee) .lsn-stars .ls-cta { right: auto !important; left: -40px !important; bottom: 100% !important; margin: 0 0 -6px !important; padding: 0 60px 0 0 !important; font-size: 42px; }
  :is(.lsn-talkbig, .lsn-d-turtle-run, .lsn-d-turtle-bee) .lsn-stars .ls-arr { right: 0 !important; left: auto !important; top: 26px !important; transform: rotate(40deg) !important; width: 54px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .lsn .lsn-stars .ls-cta { left: auto !important; right: -30px !important; bottom: 100% !important; margin: 0 0 -6px !important; padding: 0 0 0 58px !important; font-size: 42px; }
  .lsn .lsn-stars .ls-arr { left: 0 !important; right: auto !important; top: 26px !important; transform: scaleX(-1) rotate(40deg) !important; width: 54px; }
  :is(.lsn-talkbig, .lsn-d-turtle-run, .lsn-d-turtle-bee) .lsn-stars .ls-cta { right: auto !important; left: -40px !important; padding: 0 60px 0 0 !important; }
  :is(.lsn-talkbig, .lsn-d-turtle-run, .lsn-d-turtle-bee) .lsn-stars .ls-arr { right: 0 !important; left: auto !important; transform: rotate(40deg) !important; }
}
/* Ваня и Таня читают книгу — широкая картинка, крупнее */
@media (min-width: 761px) {
  .lsn-plain > .lsn-talks .lsn-talk img[src*="read-together"] { height: auto !important; width: 440px !important; right: -120px !important; left: auto !important; bottom: -30px !important; transform: none !important; }
}
@media (min-width: 761px) { .lsn-plain > .lsn-talks .lsn-talk img[src*="read-together"] { width: 420px !important; right: -100px !important; bottom: 30px !important; } }
@media (min-width: 761px) { .lsn-plain > .lsn-talks .lsn-talk img[src*="read-together"] { right: -125px !important; } }

/* ---------- страница книги: шапка как в уроках, ровный бежевый фон, всё крупнее ---------- */
body:has(#v-text.show) { background: #f4ead8 !important; background-image: none !important; }
.playbar.k-book { background: rgba(255, 255, 255, 0.55) !important; color: #3b302c !important; border-radius: 0 !important; box-shadow: none !important; padding: 16px max(16px, calc((100vw - 1076px) / 2)) 14px !important; min-height: 0 !important; }
.playbar.k-book .pb-t { display: block; padding-right: 56px; line-height: 1.3; }
.playbar.k-book #pbTitle { display: inline; font-size: 22px; font-weight: 700; color: #3b302c; }
.playbar.k-book #pbSub { display: inline; font-size: 22px; font-weight: 600; color: #a39890; white-space: nowrap; opacity: 1; }
.playbar.k-book #pbSub::before { content: " · "; }
.playbar.k-book .fx { position: fixed; top: 12px; right: 20px; width: 40px; height: 40px; border-radius: 50%; background: rgba(74, 62, 58, 0.08) !important; color: #4a3e3a !important; font-size: 17px; border: 0; }
/* текст книги — крупнее, удобно читать с ударениями */
#v-text .rtext { font-size: 30px !important; }
#v-text .rtext .sn { font-size: inherit !important; }
#v-text .rtext.poem .pl { line-height: 1.75 !important; }
/* вопросы и словарик — тем же размером, что текст уроков */
#v-text .rside h3 { font-size: 26px !important; font-family: "Caveat", "Rubik", sans-serif; font-weight: 700; color: #3b302c; margin: 0 0 6px; }
#v-text .rside .q li, #v-text .t-gl p { font-size: 22px !important; line-height: 1.5 !important; }
#v-text .rside .q li { margin-bottom: 6px; }
#v-text .lx-hint { font-size: 16px !important; }
/* наушники, «Играть» и сердечко — крупнее */
#v-text .t-play { width: 64px !important; height: 64px !important; }
#v-text .t-play svg { width: 52px !important; height: 52px !important; }
#v-text .lit-read { font-size: 22px !important; padding-top: 16px !important; padding-bottom: 16px !important; }
#v-text .lit-ic { width: 60px !important; height: 60px !important; }
#v-text .lit-ic svg { width: 30px !important; height: 30px !important; }
@media (max-width: 760px) {
  .playbar.k-book #pbTitle, .playbar.k-book #pbSub { font-size: 18px; }
  .playbar.k-book .fx { top: 10px; right: 12px; }
  #v-text .rtext { font-size: 22px !important; }
  #v-text .rside .q li, #v-text .t-gl p { font-size: 19px !important; }
}
#v-text .rtext .pl, #v-text .rtext p, #v-text .rtext .sn { font-size: 30px !important; }
#v-text .rside h3 { font-family: inherit !important; font-size: 24px !important; font-weight: 700; }
@media (max-width: 760px) { #v-text .rtext .pl, #v-text .rtext p, #v-text .rtext .sn { font-size: 23px !important; } #v-text .rside h3 { font-size: 21px !important; } }
#v-text .rtext.poem .sn, #v-text .rtext.poem .pl { font-size: 30px !important; }
@media (max-width: 760px) { #v-text .rtext.poem .sn, #v-text .rtext.poem .pl { font-size: 23px !important; } }
/* Таня «ой!» — просто иллюстрация, без реплики, отзеркалена, справа ниже */
.lsn-deco-tanya-oops { right: 60px; bottom: calc(max(28px, 5vh) + 150px); width: 250px; }
.lsn-deco-tanya-oops img { transform: scaleX(-1); }
@media (max-width: 760px) { .lsn-deco-tanya-oops { position: relative; right: auto; bottom: auto; width: 180px; margin: 18px 0 0 auto; } }
@media (min-width: 761px) {
  .lsn-d-tanya-oops .lsn-stars .ls-cta { left: auto; right: 100%; margin: 0 8px 0 0; padding: 0 66px 0 0; transform: rotate(-7deg); }
  .lsn-d-tanya-oops .lsn-stars .ls-arr { left: auto; right: 0; transform: rotate(-6deg); }
  .lsn-deco-tanya-oops { bottom: calc(max(28px, 5vh) + 120px); }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .lsn-d-tanya-oops .lsn-stars .ls-cta { right: auto !important; left: -40px !important; padding: 0 60px 0 0 !important; }
  .lsn-d-tanya-oops .lsn-stars .ls-arr { right: 0 !important; left: auto !important; transform: rotate(40deg) !important; }
}
/* «Непроизносимые согласные»: плашка уже, Таня крупнее, выше и левее */
.lsn-d-tanya-oops .lsn-ex { max-width: 700px !important; }
.lsn-exb u { text-decoration-thickness: 3px; text-underline-offset: 5px; }
@media (min-width: 761px) { .lsn-deco-tanya-oops { width: 320px; right: calc(50% - 560px); bottom: calc(max(28px, 5vh) + 175px); } }
@media (min-width: 761px) and (max-width: 1150px) { .lsn-deco-tanya-oops { right: 30px; width: 280px; } }
.lsn-main.lsn-d-tanya-oops .lsn-plain .lsn-ex { width: fit-content !important; max-width: 720px !important; padding-right: 44px !important; }
.lsn-main.lsn-d-tanya-oops .lsn-plain .lsn-ex { max-width: none !important; } .lsn-main.lsn-d-tanya-oops .lsn-exl { white-space: nowrap; }
@media (min-width: 761px) { .lsn-deco-tanya-oops { width: 300px; right: calc(50% - 540px); bottom: calc(max(28px, 5vh) + 185px); } }
@media (max-width: 760px) { .lsn-main.lsn-d-tanya-oops .lsn-exl { white-space: normal; } }

/* ---------- «Ромашка» в упражнениях ---------- */
.qz .dg-words { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 4px 0 18px; }
.qz .dg-w { border: 0; border-radius: 999px; padding: 9px 16px; font: inherit; font-size: 18px; background: rgba(255, 255, 255, 0.75); color: #3b302c; cursor: pointer; box-shadow: 0 6px 14px -10px rgba(60, 40, 30, 0.5); }
.qz .dg-w:hover { background: #fff; }
.qz .dg-w.used { opacity: 0.3; cursor: default; }
.qz .dg-flower { position: relative; width: 380px; height: 380px; margin: 0 auto; }
.qz .dg-core { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffe27a, #f6b92b); box-shadow: 0 6px 14px -6px rgba(180, 120, 0, 0.6); }
.qz .dg-p { position: absolute; left: 50%; top: 50%; width: 124px; height: 54px; margin: -27px 0 0 -62px; border: 0; padding: 0; background: none; transform: rotate(var(--a)) translateX(118px); cursor: default; font: inherit; }
.qz .dg-p::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #fff; box-shadow: 0 4px 10px -6px rgba(60, 40, 30, 0.45); }
.qz .dg-p span { position: relative; display: block; transform: rotate(calc(-1 * var(--a))); font-size: 16px; font-weight: 600; color: #3b302c; white-space: nowrap; }
.qz .dg-p.full { cursor: pointer; }
.qz .dg-p.ok::before { background: #d6f2df; }
.qz .dg-p.bad::before { background: #fbdcd8; }
@media (max-width: 760px) {
  .qz .dg-flower { width: 300px; height: 300px; }
  .qz .dg-p { width: 100px; height: 44px; margin: -22px 0 0 -50px; transform: rotate(var(--a)) translateX(92px); }
  .qz .dg-p span { font-size: 14px; }
  .qz .dg-core { width: 70px; height: 70px; margin: -35px 0 0 -35px; }
  .qz .dg-w { font-size: 16px; padding: 7px 12px; }
}
/* надпись идёт вдоль лепестка */
.qz .dg-p { width: 150px; height: 58px; margin: -29px 0 0 -75px; transform: rotate(var(--a)) translateX(128px); }
.qz .dg-p span { transform: rotate(var(--t)); font-size: 17px; }
.qz .dg-flower { width: 420px; height: 420px; }
@media (max-width: 760px) {
  .qz .dg-flower { width: 330px; height: 330px; }
  .qz .dg-p { width: 120px; height: 48px; margin: -24px 0 0 -60px; transform: rotate(var(--a)) translateX(100px); }
  .qz .dg-p span { font-size: 14px; }
}
/* «Звуки вокруг нас»: плашка с примерами короткая, по ширине строк */
.lsn-main.lsn-d-turtle-bee .lsn-plain .lsn-ex { width: fit-content !important; max-width: none !important; padding-right: 48px !important; }
.lsn-main.lsn-d-turtle-bee .lsn-exl { white-space: nowrap; }
@media (max-width: 760px) { .lsn-main.lsn-d-turtle-bee .lsn-exl { white-space: normal; } }
/* «Алфавит»: буквы крупно, ровной сеткой в три ряда */
.lsn-exb .lsn-abc { display: grid; grid-template-columns: repeat(11, 1fr); gap: 6px 4px; max-width: 760px; }
.lsn-exb .lsn-abc i { font-size: 46px; line-height: 1.15; text-align: center; letter-spacing: 0; }
@media (max-width: 760px) { .lsn-exb .lsn-abc { grid-template-columns: repeat(7, 1fr); } .lsn-exb .lsn-abc i { font-size: 30px; } }
.lsn-plain .lsn-ex:has(.lsn-abc) { width: fit-content !important; padding-right: 40px !important; }
/* плашка «Примеры» во всех уроках — по ширине самих примеров, а не до края */
.lsn-plain .lsn-ex { width: fit-content !important; padding-right: 44px !important; box-sizing: border-box; }
/* правило и примеры в уроках Родного языка — снова крупно, как было */
.lsn-plain .lsn-txt, .lsn-exb { font-size: 28px !important; line-height: 1.6 !important; }
@media (max-width: 760px) { .lsn-plain .lsn-txt, .lsn-exb { font-size: 22px !important; } }
/* черепашка с пчёлкой — отзеркалена, между 2-й и 3-й звездой, над звёздами */
@media (min-width: 761px) {
  .lsn-deco-turtle-bee { right: auto !important; left: 50% !important; transform: translateX(-50%); width: 200px !important; bottom: calc(max(28px, 5vh) + 125px) !important; }
  .lsn-deco-turtle-bee img { transform: scaleX(-1); }
  .lsn-deco-turtle-bee .bz1 { right: auto; left: -24px; }
  .lsn-deco-turtle-bee .bz2 { right: auto; left: -80px; }
  .lsn-deco-turtle-bee .bz3 { right: auto; left: 64px; }
}
@media (min-width: 761px) {
  .lsn-deco-turtle-bee { bottom: calc(max(28px, 5vh) + 150px) !important; left: calc(50% + 10px) !important; }
  .lsn-deco-turtle-bee .bz1 { left: 0; top: -30px; }
  .lsn-deco-turtle-bee .bz2 { left: -40px; top: 0; }
  .lsn-deco-turtle-bee .bz3 { left: 70px; top: -42px; }
}
.lsn-exb .lsn-abc i { font-weight: 400 !important; }
@media (min-width: 761px) {
  .lsn-deco-turtle-bee { width: 240px !important; left: calc(50% + 50px) !important; bottom: calc(max(28px, 5vh) + 175px) !important; }
}


/* ---------- фон уроков: паттерн в шахматном порядке, только ниже шапки ---------- */
.lsn { isolation: isolate; }
.lsn-bg { position: fixed; left: 0; right: 0; bottom: 0; top: var(--lsn-bar-h, 60px); z-index: -1; overflow: hidden; pointer-events: none; opacity: 0.3; }
.lsn-bg i { position: absolute; display: block; width: 96px; height: 96px; transform: rotate(-14deg); }
.lsn-bg i svg { width: 100%; height: 100%; display: block; overflow: visible; }
.lsn-bg-ru i { width: 110px; height: 66px; }
.lsn-bg-mu i { width: 58px; height: 96px; }
.lsn-bg i b { display: block; font-family: Rubik, Nunito, sans-serif; font-weight: 700; font-size: 84px; line-height: 1; color: #fff; text-align: center; }
/* паттерн: реже, крупнее, бледнее, без наклона, одна толщина */
.lsn-bg { opacity: 0.2; }
.lsn-bg i { transform: none; width: 110px; height: 110px; }
.lsn-bg-ru i { width: 128px; height: 77px; }
.lsn-bg-mu i { width: 92px; height: 110px; }
.lsn-bg i b { font-size: 100px; font-weight: 600; }
.lsn-bg i, .lsn-bg i b { font-style: normal !important; }
.lsn-bg-mu i { width: 110px; height: 110px; }
.lsn-bg { opacity: 0.26; }
.lsn-bg-ru i { width: 104px; height: 62px; }
.lsn-bg-mu i { width: 90px; height: 90px; }
.lsn-bg-ru { opacity: 0.19; }
/* заголовок урока: запас справа под «хвостики» рукописных букв, чтобы последняя буква не срезалась */
.lsn-big { padding-right: 0.18em !important; padding-left: 0.06em; overflow: visible !important; max-width: 100%; box-sizing: border-box; }
.lsn-al-r .lsn-big { padding-left: 0.18em; }

/* верный ответ в упражнениях всегда отмечается зелёным */
.qz .td-opts .td-opt.ok, .td-opts .td-opt.ok { background: #e4f5e1 !important; border-color: #6cbf5f !important; color: #2f6b27 !important; }

/* текст правила: выделенные слова — чёрные жирные; цветные выделения — только в белой плашке с примерами */
.lsn .lsn-plain .lsn-txt i, .lsn .lsn-plain .lsn-txt b,
.lsn .lsn-plain .lsn-x2 i, .lsn .lsn-plain .lsn-x2 b,
.lsn .lsn-flow i, .lsn .lsn-flow b { color: #2b2422 !important; font-weight: 700; font-style: normal; }

/* === Единые цвета ответов: зелёный — верно, красный — неверно === */
:root { --okb:#e3f4e0; --okc:#5fb85a; --okt:#2e6b2a; --badb:#fde5e3; --badc:#e47b72; --badt:#a8332f; }
.opt.ok, #exFocus[data-pc] .opt.ok, .fcard.ulcard .opt.ok, #exFocus[data-pc] .fcard.ulcard .opt.ok,
.qz .td-opt.ok, .td-opt.ok,
.ord-line.ok, #exFocus[data-pc] .ord-line.ok,
.sign.ok, #g-race .sign.ok, #exFocus[data-pc] #g-race .sign.ok,
.tr-row.ok .tr-car, #exFocus[data-pc] .tr-row.ok .tr-car,
.gap input.ok, .dg-o.ok, .dn-p.ok, .tf-card.ok, .tf-b.ok, .rb-line.ok, .cw-c.ok,
.tr-slot.ok, .tp3-house.ok .tp3-win, .mu1-row.ok .mu1-b, .mu2-list li.ok .mu2-gap, .mu3-row.ok .mu3-it.on,
.qz .mg-it.ok, .qz .sg-bin em.ok, .qz .wg-slot.ok, .qz .cg-cell.ok, .qz .qz-cw .cw-c.ok, .qz-slot.ok {
  background: var(--okb) !important; border-color: var(--okc) !important; color: var(--okt) !important;
}
.opt.bad, #exFocus[data-pc] .opt.bad, .fcard.ulcard .opt.bad, #exFocus[data-pc] .fcard.ulcard .opt.bad,
.qz .td-opt.bad, .td-opt.bad,
.ord-line.bad, #exFocus[data-pc] .ord-line.bad,
.sign.bad, #g-race .sign.bad, #exFocus[data-pc] #g-race .sign.bad,
.tr-row.bad .tr-car, #exFocus[data-pc] .tr-row.bad .tr-car,
.gap input.bad, .dg-o.bad, .dn-p.bad, .tf-card.bad, .tf-b.bad, .rb-line.bad, .cw-c.bad,
.tr-slot.bad, .tp3-house.bad .tp3-win, .mu1-row.bad .mu1-b, .mu2-list li.bad .mu2-gap, .mu3-row.bad .mu3-it.on,
.qz .mg-it.bad, .qz .sg-bin em.bad, .qz .wg-slot.bad, .qz .cg-cell.bad, .qz .qz-cw .cw-c.bad, .qz-slot.fix {
  background: var(--badb) !important; border-color: var(--badc) !important; color: var(--badt) !important;
}
.qz .qz-cw .cw-c.ok.key { background: #c4e8bf !important; color: #24561f !important; font-weight: 600; }
.qz .dg-p.ok::before { background: var(--okb) !important; box-shadow: inset 0 0 0 2px var(--okc); }
.qz .dg-p.bad::before { background: var(--badb) !important; box-shadow: inset 0 0 0 2px var(--badc); }
.ord-msg.ok, #exFocus[data-pc] .ord-msg.ok, .vk-msg.ok, #exFocus[data-pc] .vk-msg.ok, .td-why.ok b { color: #3f8c35 !important; }
.ord-msg.bad, #exFocus[data-pc] .ord-msg.bad, .vk-msg.bad, #exFocus[data-pc] .vk-msg.bad, .td-why.bad b { color: #c2453c !important; }
.qz .td-opts .td-opt.ok, .td-opts .td-opt.ok { background: var(--okb) !important; border-color: var(--okc) !important; color: var(--okt) !important; }
.qz .td-opts .td-opt.bad, .td-opts .td-opt.bad { background: var(--badb) !important; border-color: var(--badc) !important; color: var(--badt) !important; }
/* ромашка: верный лепесток — зелёный с зелёным контуром, неверный — красный с красным (во всех ромашках) */
.dn-p.ok, .dn-p.bad { border-width: 2px !important; }
.qz .dg-p.ok::before, .qz .dg-p.bad::before { box-shadow: inset 0 0 0 2px var(--c-line), 0 4px 10px -6px rgba(60, 40, 30, 0.45) !important; }
.qz .dg-p.ok::before { --c-line: var(--okc); }
.qz .dg-p.bad::before { --c-line: var(--badc); }
.qz .dg-p.ok span { color: var(--okt); }
.qz .dg-p.bad span { color: var(--badt); }
/* примеры на телефоне: длинные цветные строки переносятся по словам, а не вылезают за плашку */
@media (max-width: 760px) { .lsn-exb i { white-space: normal; } }
.lsn-exb i.nw { white-space: nowrap !important; }
/* уроки: карточки «Верно / неверно» — белая карточка с утверждением, после ответа зелёная или красная */
.qz .qz-tfc { background: #fffdf9 !important; border: 2px solid transparent !important; border-radius: 22px; box-shadow: 0 14px 30px -22px rgba(92, 78, 66, 0.45) !important; min-height: 150px; padding: 24px 28px !important; margin: 6px auto 18px !important; max-width: 560px; }
.qz .qz-tfc.ok { background: var(--okb) !important; border-color: var(--okc) !important; }
.qz .qz-tfc.bad { background: var(--badb) !important; border-color: var(--badc) !important; }
.qz .qz-tfc .tf-w { font-size: 24px !important; line-height: 1.35; }
.qz .tf-btns { display: flex; justify-content: center; }
/* уроки: «Прятки в кубе» — квадрат помещается в экран телефона */
.qz .qz-fw .fw-grid { box-sizing: border-box; width: min(420px, 100%); }
.qz .qz-fw .fw-c { min-width: 0; padding: 0; font-size: clamp(16px, 5.2vw, 24px) !important; }
@media (max-width: 760px) { .qz .qz-fw { gap: 18px; } .qz .qz-tfc .tf-w { font-size: 20px !important; } }
.qz .tf-btns { width: 100%; max-width: 560px; margin-left: auto !important; margin-right: auto !important; }
.qz .tf-btns .tf-b { flex: 1 1 0; min-width: 0 !important; max-width: 220px; }
.qz .qz-fw.ok .fw-grid { border: 2px solid var(--okc) !important; background: var(--okb) !important; }
/* логотип: шарики — рисунок мелком (картинки), без фильтра с просветами */
header .logo-dots g, header .logo b i { filter: none !important; }
/* сундучок черепашки: слева черепашка, справа круглые пунктирные ячейки по две в ряд */
.ch-card { width: min(760px, 100%) !important; }
.ch-main2 { display: grid; grid-template-columns: minmax(240px, 1fr) auto; gap: 34px; align-items: center; justify-content: center; }
.ch-turtle2 { position: relative; z-index: 1; height: 400px; aspect-ratio: 488 / 600; margin: 0 auto 14px; }
.ch-turtle2 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.35s; }
.ch-turtle2 img.on { opacity: 1; }
.ch-stage { height: 430px !important; }
.ch-slots { display: grid; grid-template-columns: repeat(2, 120px); gap: 16px; align-content: start; }
.ch-slot { width: 120px; height: 120px; border-radius: 50%; border: 2.5px dashed #d6cbbd; background: rgba(255, 255, 255, 0.55); display: grid; place-items: center; padding: 0; box-sizing: border-box; font: inherit; }
.ch-slot.full { border: 2.5px solid transparent; background: #fff; box-shadow: 0 10px 22px -16px rgba(92, 78, 66, 0.6); cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
.ch-slot.full:hover { transform: translateY(-3px); }
.ch-slot.full img { width: 84%; height: 84%; object-fit: contain; }
.ch-slot.on { border-color: #f6b92b; box-shadow: 0 0 0 3px rgba(246, 185, 43, 0.35), 0 12px 22px -16px rgba(150, 100, 20, 0.6); }
@media (max-width: 760px) {
  .ch-main2 { grid-template-columns: 1fr; gap: 10px; }
  .ch-stage { height: 300px !important; }
  .ch-turtle2 { height: 280px; margin-bottom: 8px; }
  .ch-slots { grid-template-columns: repeat(2, 96px); justify-content: center; gap: 12px; }
  .ch-slot { width: 96px; height: 96px; }
}
.ch-x { z-index: 3; }
/* ячейки в один столбик: вещь лежит прямо на пунктирном круге, без белой подложки; пустая — с замочком */
.ch-slots { grid-template-columns: 120px !important; gap: 14px !important; }
.ch-slot.full { border: 2.5px dashed #d6cbbd !important; background: rgba(255, 255, 255, 0.35) !important; box-shadow: none !important; }
.ch-slot.full img { width: 92% !important; height: 92% !important; filter: drop-shadow(0 6px 8px rgba(92, 78, 66, 0.25)); }
.ch-slot.full.on { border: 3px solid #f6b92b !important; background: rgba(249, 207, 69, 0.18) !important; }
.ch-slot.lock { color: #cfc4b6; }
.ch-slot.lock svg { width: 34%; height: 34%; }
.ch-h { margin-bottom: 14px !important; }
@media (max-width: 760px) {
  .ch-slots { grid-template-columns: repeat(3, 92px) !important; justify-content: center; }
}
/* сундучок v3: черепашка по центру своей половины, справа крупные вещи столбиком (видно три), стрелка вниз */
.ch-card { width: min(940px, 100%) !important; }
.ch-main2 { grid-template-columns: 1fr 230px !important; gap: 24px !important; align-items: center; }
.ch-side { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ch-slots { display: flex !important; flex-direction: column; gap: 16px !important; height: 620px; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; padding: 6px; }
.ch-slots::-webkit-scrollbar { display: none; }
.ch-slot { flex: none; width: 196px !important; height: 196px !important; scroll-snap-align: start; }
.ch-slot.full, .ch-slot.full.on { border: 2.5px dashed #d6cbbd !important; background: rgba(255, 255, 255, 0.35) !important; box-shadow: none !important; }
.ch-slot.full:hover { transform: none !important; }
.ch-slot.full img { width: 100% !important; height: 100% !important; transform: scale(1.12); }
.ch-slot.ch-tap img { animation: chTap 0.32s ease; }
@keyframes chTap { 0% { transform: scale(1.12); } 40% { transform: scale(0.98); } 100% { transform: scale(1.12); } }
.ch-down { width: 52px; height: 52px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; cursor: pointer; color: #fff; background: #3494e3; box-shadow: 0 10px 22px -12px #3494e3; }
.ch-down svg { transform: rotate(90deg); }
.ch-down:hover { filter: brightness(1.05); }
.ch-stage { height: 640px !important; }
.ch-turtle2 { height: 560px !important; }
@media (max-height: 860px) and (min-width: 761px) {
  .ch-slots { height: 480px; } .ch-slot { width: 150px !important; height: 150px !important; }
  .ch-stage { height: 500px !important; } .ch-turtle2 { height: 440px !important; }
  .ch-main2 { grid-template-columns: 1fr 180px !important; }
}
@media (max-width: 760px) {
  .ch-main2 { grid-template-columns: 1fr !important; }
  .ch-stage { height: 300px !important; } .ch-turtle2 { height: 280px !important; }
  .ch-side { flex-direction: row; justify-content: center; }
  .ch-slots { flex-direction: row; height: auto; width: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; }
  .ch-slot { width: 100px !important; height: 100px !important; }
  .ch-down { display: none; }
}
.ch-slots { height: 584px; padding: 4px 6px; box-sizing: border-box; }
.ch-slot { width: 180px !important; height: 180px !important; }
.ch-slot.full img { transform: none; width: 96% !important; height: 96% !important; }
@keyframes chTap { 0% { transform: scale(1); } 40% { transform: scale(0.9); } 100% { transform: scale(1); } }
.ch-main2 { grid-template-columns: 1fr 200px !important; }
@media (max-height: 860px) and (min-width: 761px) {
  .ch-slots { height: 470px; } .ch-slot { width: 144px !important; height: 144px !important; }
  .ch-main2 { grid-template-columns: 1fr 170px !important; }
}
@media (max-width: 760px) {
  .ch-slots { justify-content: flex-start; height: auto; }
  .ch-slot { width: 100px !important; height: 100px !important; }
}
@media (max-width: 760px) {
  .ch-side { display: block; width: 100%; min-width: 0; }
  .ch-slots { justify-content: flex-start !important; width: 100% !important; max-width: 100%; }
  .ch-main2 > * { min-width: 0; }
}
@media (max-width: 760px) { .ch-main2 { grid-template-columns: minmax(0, 1fr) !important; } }
/* белые цветы на черепашке не должны желтеть: без жёлтого свечения за черепашкой */
.ch-stage .ch-glow { background: radial-gradient(circle, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.25) 55%, transparent 70%) !important; }
/* сундучок v4: правая колонка выбора отделена тонким пунктиром, вещи крупные, без кругов; стрелка — нейтральная, как крестик */
.ch-card { width: min(1040px, 100%) !important; }
.ch-h { position: relative; z-index: 2; }
.ch-main2 { grid-template-columns: minmax(0, 1fr) 330px !important; gap: 0 !important; }
.ch-side { border-left: 2px dashed #e2d8ca; padding: 0 28px 0 34px; align-self: stretch; justify-content: center; }
.ch-slots { height: 600px; gap: 18px !important; padding: 4px 0; }
.ch-slot, .ch-slot.full, .ch-slot.full.on { width: 260px !important; height: 190px !important; border: 0 !important; border-radius: 24px !important; background: none !important; box-shadow: none !important; }
.ch-slot.full img { width: 100% !important; height: 100% !important; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(92, 78, 66, 0.22)); }
.ch-slot.lock { background: rgba(74, 62, 58, 0.04) !important; }
.ch-down { width: 44px; height: 44px; background: rgba(74, 62, 58, 0.08); color: #4a3e3a; box-shadow: none; }
.ch-down:hover { background: rgba(74, 62, 58, 0.14); filter: none; }
@media (max-height: 860px) and (min-width: 761px) {
  .ch-main2 { grid-template-columns: minmax(0, 1fr) 290px !important; }
  .ch-slots { height: 480px; } .ch-slot, .ch-slot.full, .ch-slot.full.on { width: 226px !important; height: 150px !important; }
}
@media (max-width: 760px) {
  .ch-side { border-left: 0; border-top: 2px dashed #e2d8ca; padding: 14px 0 0; }
  .ch-slot, .ch-slot.full, .ch-slot.full.on { width: 140px !important; height: 100px !important; }
}
@media (max-width: 760px) {
  .ch-slots { flex-direction: row !important; height: auto !important; overflow-x: auto !important; overflow-y: hidden !important; }
  .ch-side { padding: 14px 0 0 !important; }
}
@media (max-width: 760px) { .ch-main2 { grid-template-columns: minmax(0, 1fr) !important; } }
.ch-slot.lock { background: none !important; color: #e3dacd; display: grid; place-items: center; }
.ch-slot.lock svg { width: 40px; height: 40px; }
.ch-slot.full img { filter: none !important; }
/* сундучок v5: ширина по содержимому, поля вокруг черепашки и вокруг вещей одинаковые; вещи в настоящих пропорциях друг к другу */
.ch-card { width: auto !important; max-width: calc(100vw - 32px); padding: 26px 0 30px !important; }
.ch-h { text-align: center; width: 100%; }
.ch-main2 { grid-template-columns: auto auto !important; justify-content: center; }
.ch-stage { padding: 0 34px; height: auto !important; display: block !important; }
.ch-turtle2 { height: 520px !important; margin: 0 !important; }
.ch-stage .ch-glow { bottom: 0; }
.ch-side { padding: 0 34px !important; }
.ch-slots { height: 560px; align-items: center; }
.ch-slot, .ch-slot.full, .ch-slot.full.on { width: auto !important; height: 175px !important; padding: 0 !important; }
.ch-slot.full img { width: auto; height: auto !important; max-height: 100%; }
.ch-slot.lock { width: 300px !important; }
.ch-slot.lock svg { width: 76px !important; height: 76px !important; }
.ch-card { --isc: 0.55; }
@media (max-height: 860px) and (min-width: 761px) {
  .ch-card { --isc: 0.44; }
  .ch-turtle2 { height: 420px !important; }
  .ch-slots { height: 450px; }
  .ch-slot, .ch-slot.full, .ch-slot.full.on { height: 140px !important; }
  .ch-slot.lock { width: 240px !important; }
  .ch-slot.lock svg { width: 60px !important; height: 60px !important; }
}
@media (max-width: 760px) {
  .ch-card { --isc: 0.26; width: calc(100vw - 32px) !important; padding: 18px 14px 20px !important; }
  .ch-main2 { grid-template-columns: minmax(0, 1fr) !important; }
  .ch-stage { padding: 0; }
  .ch-turtle2 { height: 280px !important; margin: 0 auto !important; }
  .ch-side { padding: 14px 0 0 !important; }
  .ch-slots { height: auto !important; align-items: center; gap: 16px !important; }
  .ch-slot, .ch-slot.full, .ch-slot.full.on { height: 80px !important; }
  .ch-slot.lock { width: 110px !important; }
  .ch-slot.lock svg { width: 44px !important; height: 44px !important; }
}
.ch-slot, .ch-slot.full, .ch-slot.full.on { height: auto !important; min-height: 0; }
.ch-slots { gap: 26px !important; }

/* точка-кружок между двумя предложениями в заголовке урока */
.lsn-big .tdot{display:inline-block;width:.16em;height:.16em;border-radius:50%;background:currentColor;margin:0 .32em;vertical-align:middle}

/* плашка темы в списке уроков: нажатие такое же, как у больших кнопок на главной; стрелка поворачивается плавно */
.crs-list .exgrp.is-pressed { scale: 0.97; translate: 0 3px; }
.crs-list .exgrp i { transition: transform .38s cubic-bezier(.25,.8,.3,1); }

/* промежутки в списке тем — отступами, а не gap: тогда уроки закрываются плавно до конца, без рывка */
.crs-list { row-gap: 0 !important; }
.crs-list > .exgrp { margin-bottom: 8px; }
.crs-list > .exsub { margin-bottom: 14px; }
.crs-list > :last-child { margin-bottom: 0; }
.crs-list { grid-template-columns: minmax(0, 1fr) !important; } /* ширина колонки не зависит от открытых уроков — заголовки тем не перескакивают */

/* уроки в открытой теме помещаются в ширину экрана (на телефоне звёзды не обрезаются) */
.crs-list .exsub { min-width: 0; }
.crs-list .exsub .crs-row { min-width: 0; max-width: 100%; }
.crs-list .crs-row .exn { min-width: 0; }
@media (max-width: 560px) {
  .crs-list > .exsub { margin-left: 14px !important; }
  .crs-list .exsub .crs-row { padding-left: 14px !important; padding-right: 12px !important; gap: 8px; }
}
/* список тем не растягивается, когда под ним держим место (иначе плашки расходятся по высоте) */
.crs-list { align-content: start !important; align-self: start !important; }

/* «Литература», разделы «Стихи», «Проза»…: промежутки отступами, ширина не меняется — плашки не двигаются */
.rd-acc { row-gap: 0 !important; grid-template-columns: minmax(0, 1fr); align-content: start; }
.rd-acc > .rd-grp { margin-bottom: 10px; }
.rd-acc > .rd-sub { margin-bottom: 16px; }
.rd-acc > :last-child { margin-bottom: 0; }
/* «Литература» и «Музыка»: текст урока — как правило в «Родном языке» (28px, на телефоне 22px, интервал 1.6) */
.lsn .lsn-flow p, .lsn .lsn-flow h4, .lsn .lsn-flow[style*="--fz"] p { font-size: 28px !important; line-height: 1.6 !important; color: rgb(59, 48, 44); }
@media (max-width: 760px) { .lsn .lsn-flow p, .lsn .lsn-flow h4, .lsn .lsn-flow[style*="--fz"] p { font-size: 22px !important; line-height: 1.6 !important; } }
/* названия уроков в списках — одного цвета во всех трёх разделах */
.crs-list .exsub .crs-row .exn { color: rgb(74, 62, 58) !important; }
/* «Род существительных»: Таня с облачком — облачко ниже шапки, Таня под ним */
@media (min-width: 761px) {
  .lsn-ru .lsn-plain > .lsn-talks:has(img[src*="tanya-surprise"]) .lsn-bubble { top: 6px !important; translate: 34px 0; }
  .lsn-ru .lsn-plain > .lsn-talks .lsn-talk img[src*="tanya-surprise"] { transform: translateY(70px); }
}

/* правило без выравнивания по ширине (строки не растягиваются) */
.lsn-nojust .lsn-plain .lsn-txt { text-align: left !important; text-align-last: left !important; }

/* падежи в две колонки: слева именительный, родительный, дательный; справа винительный, творительный, предложный */
.lsn .lsn-plain .lsn-x2.lsn-x2c { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-rows: repeat(3, auto); grid-auto-flow: column; grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: 56px; row-gap: 6px; font-size: 28px; line-height: 1.6; max-width: 1000px; }
@media (max-width: 760px) { .lsn .lsn-plain .lsn-x2.lsn-x2c { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: minmax(0, 1fr); font-size: 22px; } }

.lsn-plain .lsn-txt.lsn-r2 { margin-top: 18px !important; }
/* «Как определить падеж»: колонки с предлогами — без выделения */
.lsn .lsn-plain .lsn-x2.lsn-x2c li { white-space: normal; }
.lsn .lsn-plain .lsn-x2.lsn-x2c li { margin-bottom: 6px; }

/* «Как определить падеж»: падежи с предлогами — мельче, две широкие колонки, каждая строка целиком */
.lsn .lsn-plain .lsn-x2.lsn-x2c.lsn-x2s { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; font-size: 22px; max-width: none; }
.lsn .lsn-plain .lsn-x2.lsn-x2s li { white-space: nowrap; margin-bottom: 0; }
@media (max-width: 760px) { .lsn .lsn-plain .lsn-x2.lsn-x2c.lsn-x2s { grid-template-columns: minmax(0, 1fr); font-size: 18px; } .lsn .lsn-plain .lsn-x2.lsn-x2s li { white-space: normal; } }

/* список внутри правила тем же шрифтом, что и правило (три склонения) */
.lsn .lsn-plain .lsn-x2.lsn-x2b { list-style: none; padding: 0; margin: 16px 0 0; font-size: 28px; line-height: 1.6; max-width: 1000px; display: grid; gap: 10px; }
@media (max-width: 760px) { .lsn .lsn-plain .lsn-x2.lsn-x2b { font-size: 22px; } }
/* Быстрый старт: проверка уровня над списком тем «Родного языка» */
.lvl-card { display: flex; align-items: center; gap: 18px; justify-content: space-between; background: rgba(255, 255, 255, 0.6); border: 1.5px dashed rgba(160, 147, 138, 0.45); border-radius: 18px; padding: 16px 20px; margin: 0 0 14px; color: #4a3e3a; }
.lvl-card .lvl-tx { display: grid; gap: 4px; font-size: 16px; line-height: 1.5; }
.lvl-card .lvl-tx b { font-size: 18px; }
.lvl-card .lvl-go { flex: none; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 16px; color: #fff; background: var(--okc, #5fb85a); border-radius: 999px; padding: 11px 20px; box-shadow: 0 10px 20px -14px rgba(46, 107, 42, 0.8); }
.lvl-card.done .lvl-go { background: #fff; color: #4a3e3a; box-shadow: 0 8px 18px -14px rgba(92, 78, 66, 0.6); border: 1px solid #efe9df; }
.lvl-card .lvl-to { border: 0; background: none; padding: 0; font: inherit; color: var(--okt, #2e6b2a); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.crs-list .exgrp .lvl-ok { width: 24px; height: 24px; vertical-align: middle; }
.crs-list .exgrp .lvl-ok circle { fill: var(--okc, #5fb85a); }
.crs-list .exgrp .lvl-ok path { stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.crs-list .exgrp .lvl-here { margin-left: 10px; font-size: 13px; font-weight: 700; color: var(--okt, #2e6b2a); background: var(--okb, #e3f4e0); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
@media (max-width: 560px) { .lvl-card { flex-direction: column; align-items: stretch; } .lvl-card .lvl-go { align-self: flex-start; } }
/* подсказка в играх: правило или «Запомни» из урока, открывается по кнопке */
.qz .qz-hint-row { display: flex; justify-content: flex-end; margin: -4px 0 8px; }
.qz .qz-hint-b { border: 0; cursor: pointer; font: inherit; font-size: 15px; font-weight: 600; color: #6f625b; background: rgba(255, 255, 255, 0.75); border-radius: 999px; padding: 7px 16px; box-shadow: 0 6px 14px -12px rgba(92, 78, 66, 0.6); }
.qz .qz-hint { background: #fffdf8; border: 1px solid #efe9df; border-radius: 16px; padding: 14px 18px; margin: 0 0 16px; font-size: 17px; line-height: 1.55; color: #4a3e3a; max-height: 42vh; overflow: auto; }
.qz .qz-hint > b { display: block; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: #a0938a; margin-bottom: 6px; }
.qz .qz-hint p { margin: 0 0 8px; }
.qz .qz-hint ul { margin: 0; padding-left: 20px; }
.qz .qz-hint .qz-hint-ex { margin-top: 6px; }
.qz .qz-hint .qz-hint-ex .lsn-exl { display: block; }
.qz .qz-hint i { font-style: normal; font-weight: 700; }

/* Быстрый старт: одна крупная фраза слева, большая кнопка справа */
.lvl-card .lvl-tx { display: block; font-size: 26px; font-weight: 700; line-height: 1.3; }
.lvl-card .lvl-go { font-size: 20px; padding: 16px 30px; }
@media (max-width: 560px) { .lvl-card .lvl-tx { font-size: 22px; } .lvl-card .lvl-go { align-self: stretch; } }

/* урок маленькими шагами: карточки с одной мыслью и вопросом */
.lc-cards { display: grid; gap: 22px; margin: 8px 0 30px; max-width: 760px; }
.lsn-al-r .lc-cards { margin-left: auto; }
.lsn-al-c .lc-cards { margin-left: auto; margin-right: auto; }
.lc-card { background: rgba(255, 255, 255, 0.82); border-radius: 26px; padding: 22px 26px 24px; box-shadow: 0 14px 30px -26px rgba(92, 78, 66, 0.6); display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 18px; align-items: start; text-align: left; }
.lc-pic { font-size: 54px; line-height: 1; grid-row: span 2; text-align: center; padding-top: 4px; }
.lc-t { margin: 0; font-size: 28px; line-height: 1.45; color: rgb(59, 48, 44); }
.lc-q { margin-top: 16px; }
.lc-q b { display: block; font-size: 20px; color: #6f625b; margin-bottom: 10px; }
.lc-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.lc-o { border: 1.5px solid #efe9df; background: #fff; border-radius: 999px; padding: 10px 20px; font: inherit; font-size: 20px; color: #4a3e3a; cursor: pointer; }
.lc-o.ok { background: var(--okb); border-color: var(--okc); color: var(--okt); }
.lc-o.bad { background: var(--badb); border-color: var(--badc); color: var(--badt); }
.lc-o:disabled { cursor: default; }
@media (max-width: 760px) {
  .lc-card { grid-template-columns: 1fr; padding: 18px 18px 20px; border-radius: 22px; }
  .lc-pic { grid-row: auto; text-align: left; font-size: 44px; margin-bottom: 8px; }
  .lc-t { font-size: 22px; }
  .lc-q b { font-size: 18px; }
  .lc-o { font-size: 18px; padding: 9px 16px; }
}


/* «Быстрый старт»: светлая плашка с зелёной кнопкой; сам тест — на зелёном фоне с бледными молниями,
   как нотки, буквы и значки на фоне уроков */
.qz.qz-lvl { background: #e3f2df; --qzc: #5fb85a; }
.lsn-bg-lvl i { width: 80px; height: 110px; }

/* сундучок, ноябрь-версия: без заголовка; черепашке больше воздуха и мягкое свечение за головой;
   справа картуз, венок, один крупный замок и неактивная прозрачная стрелка */
.ch-card { padding: 34px 0 34px !important; }
.ch-stage { padding: 0 110px !important; position: relative; }
.ch-stage .ch-glow { display: block !important; position: absolute; left: 50% !important; top: 4% !important; bottom: auto !important; width: 360px !important; height: 360px !important; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.6) 35%, rgba(255, 255, 255, 0) 70%) !important; pointer-events: none; z-index: 0; }
.ch-turtle2 { position: relative; z-index: 1; }
.ch-turtle2 img { filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 30px rgba(255, 255, 255, 0.6)); }
.ch-side { background: rgba(255, 255, 255, 0.4); border-radius: 0 26px 26px 0; padding: 26px 34px !important; }
.ch-slots { height: auto !important; overflow: visible !important; }
.ch-slot.lock { width: auto !important; color: #ddd2c3; }
.ch-slot.lock svg { width: 150px !important; height: 150px !important; }
.ch-down.off { background: transparent !important; border: 2px solid #ddd2c3; color: #ddd2c3; cursor: default; box-shadow: none; }
.ch-down.off svg path { stroke: currentColor; }
@media (max-width: 1100px) { .ch-stage { padding: 0 60px !important; } .ch-slot.lock svg { width: 120px !important; height: 120px !important; } }
@media (max-width: 760px) {
  .ch-card { padding: 22px 14px 22px !important; }
  .ch-stage { padding: 0 24px !important; }
  .ch-stage .ch-glow { width: 220px !important; height: 220px !important; }
  .ch-side { border-radius: 0 0 22px 22px; padding: 16px 10px !important; }
  .ch-slot.lock svg { width: 80px !important; height: 80px !important; }
}
.ch-side { border-radius: 24px; margin-right: 26px; }
.ch-stage .ch-glow { width: 420px !important; height: 420px !important; top: 0 !important; background: radial-gradient(circle, #fff 0%, rgba(255, 255, 255, 0.85) 30%, rgba(255, 255, 255, 0) 68%) !important; }
@media (max-width: 760px) { .ch-side { margin-right: 0; border-radius: 22px; } .ch-stage .ch-glow { width: 240px !important; height: 240px !important; } }
/* «Быстрый старт»: спокойный зелёный, как у черепашки; молнии почти незаметные */
.qz.qz-lvl { background: #c9dcb8; --qzc: #6f9a5a; }
.qz.qz-lvl .lsn-bg-lvl { opacity: 0.09 !important; }

/* Сундук: стрелки-галочки без кружка, замок меньше и бледнее */
.ch-side { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ch-up, .ch-down, .ch-up.off, .ch-down.off { width: 40px !important; height: 30px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0; display: grid; place-items: center; color: #d6cab8 !important; cursor: default; }
.ch-up svg, .ch-down svg { transform: none !important; }
.ch-slot.lock { color: #e9e1d4 !important; }
.ch-slot.lock svg { width: 116px !important; height: 116px !important; }
@media (max-width: 1100px) { .ch-slot.lock svg { width: 96px !important; height: 96px !important; } }
@media (max-width: 760px) { .ch-slot.lock svg { width: 64px !important; height: 64px !important; } .ch-up, .ch-down { display: none !important; } .ch-side { flex-direction: row; } }
/* Сундук: сияние шире, выше и мягче */
.ch-stage .ch-glow { width: 600px !important; height: 640px !important; top: -8% !important; border-radius: 50% !important; filter: blur(6px); background: radial-gradient(ellipse 50% 50% at 50% 52%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.7) 32%, rgba(255,255,255,0.3) 60%, rgba(255,255,255,0) 100%) !important; }
@media (max-width: 1100px) { .ch-stage .ch-glow { width: 480px !important; height: 520px !important; } }
@media (max-width: 760px) { .ch-stage .ch-glow { width: 300px !important; height: 320px !important; top: -4% !important; } }
/* слово БРАВО тем же красным, что и красный шарик */
.logo b, .mu-logo b { color: #f4301f !important; }

/* ---------- Проверка в конце темы: как упражнение, все вопросы одним списком, награда — кубок ---------- */
.crs-list .exsub .crs-chk { background: color-mix(in srgb, var(--bc) 20%, #fff) !important; border: 1px solid color-mix(in srgb, var(--bc) 30%, #fff) !important; box-shadow: none !important; }
.crs-list .exsub .crs-chk .exn { color: color-mix(in srgb, var(--bc) 70%, #3d332e) !important; font-weight: 700; }
.crs-chk-r { display: flex; align-items: center; gap: 10px; }
.crs-chk-r small { font-size: 16px; color: color-mix(in srgb, var(--bc) 60%, #3d332e); }
.crs-cup { width: 30px; height: 30px; fill: none; stroke: color-mix(in srgb, var(--bc) 45%, #fff); stroke-width: 2; flex: none; }
.crs-cup.on { fill: #f6c445; stroke: #d49a1c; }
html.pt-lock, html.pt-lock body { overflow: hidden; }
.qz.pt { z-index: 100000; }
.pt .pt-wrap { width: 100%; max-width: 856px; margin: 0 auto; }
.pt .pt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 40px; }
.pt .pt-q { scroll-margin-top: 90px; }
.pt .pt-ctx { font-size: 17px; color: #8a7d76; margin: 0 0 4px; }
.pt .pt-tx { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 16px; }
.pt .pt-n { flex: none; width: 34px; height: 34px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; font-weight: 700; background: rgba(255, 255, 255, .6); color: #6b5e57; transition: background .25s, color .25s; }
.pt .pt-q.answered .pt-n { background: var(--qzc); color: #fff; }
.pt .pt-q.ok .pt-n { background: #5fae57; color: #fff; }
.pt .pt-q.bad .pt-n { background: #e5534b; color: #fff; }
.pt .td-opt.sel { border-color: var(--qzc) !important; background: color-mix(in srgb, var(--qzc) 14%, #fff) !important; }
.pt .pt-q.pt-need .pt-n { animation: ptNeed .6s ease 2; }
@keyframes ptNeed { 50% { transform: scale(1.3); background: var(--qzc); color: #fff; } }
.pt .pt-res { display: flex; align-items: center; gap: 22px; margin: 0 0 36px; padding: 22px 28px; border-radius: 22px; background: rgba(255, 255, 255, .6); }
.pt .pt-res .crs-cup { width: 84px; height: 84px; stroke-width: 1.6; stroke: color-mix(in srgb, var(--qzc) 45%, #fff); }
.pt .pt-res .crs-cup.on { stroke: #d49a1c; animation: ptCup .7s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes ptCup { from { transform: scale(.4) rotate(-12deg); opacity: 0; } }
.pt .pt-res b { display: block; font-size: 38px; line-height: 1.1; color: #3b302c; }
.pt .pt-res span { font-size: 20px; color: #5c4f49; }
.pt .pt-foot { display: flex; justify-content: center; gap: 14px; margin: 44px 0 20px; flex-wrap: wrap; }
.pt .pt-foot button { font: inherit; font-size: 20px; font-weight: 700; padding: 14px 40px; border-radius: 40px; border: 0; cursor: pointer; background: var(--qzc); color: #fff; box-shadow: 0 12px 24px -14px var(--qzc); }
.pt .pt-foot .pt-back { background: rgba(255, 255, 255, .7); color: #4a3e3a; box-shadow: none; }
@media (max-width: 760px) {
  .pt .pt-list { gap: 30px; }
  .pt .pt-n { width: 28px; height: 28px; font-size: 14px; }
  .pt .pt-res .crs-cup { width: 60px; height: 60px; }
  .pt .pt-res b { font-size: 30px; } .pt .pt-res span { font-size: 17px; }
  .crs-cup { width: 26px; height: 26px; }
}

/* Тест в списке: как урок — мелко «Тест», крупнее и темнее «Проверка знаний»; кубки как звёзды и корона */
.crs-list .exsub .crs-chk .exn { color: rgb(74, 62, 58) !important; font-weight: 400; }
.crs-chk .crs-chk-t { font-weight: 700; font-size: 1.08em; color: #3b302c; }
.crs-cup { width: 34px; height: 34px; fill: none; stroke: #d6ccc3 !important; stroke-width: 1.7 !important; flex: none; }
.crs-cup.on { fill: #f6b92b !important; stroke: #f6b92b !important; }
.crs-cups { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.crs-chk .crs-cups.crs-stars { margin-right: 10px; }
.crs-chk-r small { font-size: 15px; color: #a0938a; }
.crs-cups-h { gap: 4px; }
.crs-cups-h .crs-cup { width: 24px; height: 24px; }
.pt .pt-res .crs-cup { stroke: #d6ccc3 !important; }
.pt .pt-res .crs-cup.on { stroke: #f6b92b !important; fill: #f6b92b !important; }
@media (max-width: 760px) { .crs-cup { width: 26px; height: 26px; } .crs-cups-h .crs-cup { width: 20px; height: 20px; } .crs-cups { gap: 5px; } }
.crs-cups-h { margin-right: 34px; }
@media (max-width: 760px) { .crs-cups-h { margin-right: 8px; } }

/* «Тест» занимает столько же места, сколько «Урок N»: «Проверка знаний» встаёт ровно под названия уроков */
.crs-ln-t { display: inline-grid; justify-items: start; }
.crs-ln-t > span { grid-area: 1 / 1; }
.crs-ln-t > span + span { visibility: hidden; }
.crs-list .exsub .crs-chk .exn { font-weight: inherit; }
.crs-chk .crs-stars .crs-cup { width: 36px; height: 36px; }

/* светики */
.svet { width: 36px; height: 36px; flex: none; display: block; }
.crs-svet { gap: 4px !important; }
.crs-svet b { font-size: 18px; font-weight: 700; color: #c98a10; }
.pt .pt-res .svet.big { width: 88px; height: 88px; animation: svetIn .8s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes svetIn { from { transform: translateY(16px) scale(.3); opacity: 0; } }
.pt .pt-res span { color: #a8740c; font-weight: 600; }
@media (max-width: 760px) { .svet { width: 30px; height: 30px; } .pt .pt-res .svet.big { width: 64px; height: 64px; } }

.crs-sv { width: 34px; height: 34px; flex: none; fill: none; stroke: #d6ccc3; stroke-width: 1.7; }
.crs-sv.on { stroke: #f6b92b; }
.crs-sv.on circle { fill: #f6b92b; }
.crs-svet { gap: 6px !important; align-items: center; }
.crs-svet b { font-size: 17px; font-weight: 700; color: #c98a10; }
@media (max-width: 760px) { .crs-sv { width: 28px; height: 28px; } .crs-svet b { font-size: 15px; } }

/* светик-огонёк линией, как звёзды и корона */
.crs-sv { fill: none; stroke: #d6ccc3; stroke-width: 1.7; }
.crs-sv .sv-e { fill: #d6ccc3; stroke: none; }
.crs-sv.on { stroke: #f6b92b; }
.crs-sv.on circle { fill: none; }
.crs-sv.on .sv-b { fill: #f6b92b; }
.crs-sv.on .sv-l { stroke: #fff3cf; }
.crs-sv.on .sv-e { fill: #7a5208; }
.pt .pt-res .crs-sv.big { width: 84px; height: 84px; stroke-width: 1.5; animation: svetIn .8s cubic-bezier(.3, 1.5, .5, 1); }
@media (max-width: 760px) { .pt .pt-res .crs-sv.big { width: 60px; height: 60px; } }
/* цифра светиков — нежно, как «Урок 1» и «Тест»; закрашенный светик — как закрашенная звезда */
.crs-svet b { font-size: 13px !important; font-weight: 400 !important; color: #a0938a !important; font-style: normal; }
.crs-sv.on .sv-b { fill: #f9cf45 !important; stroke: #f6b92b !important; stroke-width: 2.6 !important; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; transform: scale(0.9); }
.crs-sv.on .sv-l { stroke: #f6b92b !important; stroke-width: 2 !important; }
.crs-sv.on .sv-e { fill: #c98410 !important; }

/* ---------- копилка светиков над темами ---------- */
.sec-tabs { position: relative; }
.sec-tabs .svw { position: absolute; right: 0; top: 50%; translate: 0 -50%; font-size: 0; }
.svw { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 12px 0 20px; border-radius: 30px; background: #faf7f1; border: 1px dashed #e2d8c8; transition: box-shadow .3s; }
.svw-n { font-size: 20px; font-weight: 500; color: #8a7d76; font-variant-numeric: tabular-nums; }
.svw-i { display: grid; place-items: center; }
.svw-i .crs-sv { width: 32px; height: 32px; }
.svw.svw-hit { box-shadow: 0 0 0 3px rgba(249, 207, 69, .45), 0 0 26px rgba(249, 190, 40, .55); }
.svw.svw-fix { position: fixed; top: 108px; right: 24px; z-index: 100000; background: #fffdf8; box-shadow: 0 10px 26px -14px rgba(120, 90, 30, .6); }
.sv-fly { position: fixed; left: 0; top: 0; width: 32px; height: 32px; z-index: 100002; pointer-events: none; filter: drop-shadow(0 0 7px rgba(255, 196, 46, .95)) drop-shadow(0 0 16px rgba(255, 170, 30, .5)); }
.sv-fly svg { width: 100%; height: 100%; display: block; }
.sv-flash { position: fixed; width: 54px; height: 54px; border-radius: 50%; z-index: 100001; pointer-events: none; background: radial-gradient(circle, #fffbe0 0, rgba(255, 214, 80, .85) 30%, rgba(255, 190, 40, 0) 70%); }
.pt .pt-res .pt-sv { display: grid; place-items: center; }
.pt .pt-got i { font-style: normal; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .svw { height: 40px; } .svw-n { font-size: 18px; } .svw.svw-fix { top: 84px; right: 12px; } }
@media (max-width: 760px) { .sec-tabs .svw { position: static; translate: none; display: flex; width: fit-content; margin: 10px 0 0 auto; } }

/* разделы «Родной язык · Литература · Музыка»: всё чуть сжато к центру — правый край на одной линии с копилкой,
   а огонёк копилки ровно под аватаркой в шапке */
@media (min-width: 761px) { :is(#v-exercises, #v-read, #v-music) .wrap { padding-left: 33px !important; padding-right: 33px !important; } }
.sec-tabs .svw-n { font-size: 18px !important; font-weight: 400 !important; color: #4a3e3a !important; }

/* «Быстрый старт»: бледно-зелёная плашка, ближе к цвету черепашки */
.lvl-card { background: #e3ecd8 !important; border: 1.5px solid rgba(111, 154, 90, 0.22) !important; }

/* «Быстрый старт»: вместо большой плашки — одна аккуратная зелёная кнопка над темами */
.lvl-row { display: flex; margin: 0 0 16px; }
.lvl-go.lvl-pill { font: inherit; font-size: 17px !important; font-weight: 600 !important; padding: 11px 26px !important; border-radius: 30px !important; min-height: 0 !important; border: 0; background: #6fb35f !important; color: #fff !important; box-shadow: 0 8px 18px -12px rgba(80, 140, 60, .8) !important; cursor: pointer; }
.lvl-go.lvl-pill:hover { filter: brightness(1.04); }
/* копилка светиков: пониже, слева чуть свободнее */
.sec-tabs .svw { height: 38px !important; padding: 0 13px 0 26px !important; gap: 9px !important; }
.sec-tabs .svw-i .crs-sv { width: 28px !important; height: 28px !important; }
@media (max-width: 760px) { .sec-tabs .svw { height: 34px !important; padding: 0 8px 0 20px !important; } }

/* ---------- «Мои прописи» ---------- */
/* школьная пропись: буквы соединяются слитно, как в прописях первого класса (Propisi, ParaGraph 1997) */
@font-face { font-family: "BravoPropis"; src: url(../fonts/propisi-school.woff2) format("woff2"); font-display: swap; }
#prShelf { margin-top: 10px; }
.pr-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; padding: 4px 0 30px; }
.pr-nb { font: inherit; border: 0; background: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: stretch; gap: 8px; text-align: left; }
.pr-cv { position: relative; aspect-ratio: 3 / 4; border-radius: 6px 12px 12px 6px; background: color-mix(in srgb, var(--nc) 26%, #fffdf8); box-shadow: inset 7px 0 0 color-mix(in srgb, var(--nc) 45%, #fff), 0 12px 22px -16px rgba(74, 62, 58, .55); overflow: hidden; transition: transform .2s; }
.pr-nb:hover .pr-cv { transform: translateY(-3px) rotate(-1deg); }
.pr-tag { position: absolute; left: 16%; right: 10%; top: 12%; background: #fffdf8; border-radius: 6px; padding: 7px 8px; display: flex; justify-content: space-between; gap: 6px; align-items: flex-start; box-shadow: 0 2px 0 rgba(74, 62, 58, .06); }
.pr-tag b { font-size: 13px; line-height: 1.2; color: #4a3e3a; font-weight: 600; }
.pr-tag i { font-style: normal; font-size: 12px; color: #a0938a; }
.pr-sample { position: absolute; left: 0; right: 0; bottom: 12%; text-align: center; font-family: "BravoPropis", cursive; font-size: 40px; color: color-mix(in srgb, var(--nc) 75%, #4a3e3a); line-height: 1; }
.pr-cnt { font-size: 13px; color: #a0938a; padding-left: 4px; }
.pr-nb.full .pr-cnt { color: #5fae57; }
@media (max-width: 900px) { .pr-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.qz.pr-play { z-index: 100000; }
.pr-play .pr-wrap { width: 100%; max-width: 856px; margin: 0 auto; }
.pr-play .pr-model { font-size: 34px; font-weight: 500; margin: 0 0 14px; color: #4a3e3a; letter-spacing: .01em; }
.pr-play .pr-paper { position: relative; background: #fffdf8; border-radius: 18px; box-shadow: 0 14px 30px -24px rgba(74, 62, 58, .6); overflow: hidden; }
.pr-play canvas { display: block; width: 100%; height: clamp(220px, 38vh, 340px); touch-action: none; cursor: crosshair; }
.pr-play .pr-ok { position: absolute; right: 18px; top: 14px; background: #e3f3df; color: #3f8c3a; font-weight: 600; padding: 6px 14px; border-radius: 20px; opacity: 0; transform: translateY(-6px); transition: .25s; pointer-events: none; }
.pr-play .pr-ok.on { opacity: 1; transform: none; }
.pr-play .pr-foot { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.pr-play .pr-clear { font: inherit; font-size: 17px; padding: 11px 22px; border-radius: 30px; border: 0; background: rgba(255, 255, 255, .7); color: #4a3e3a; cursor: pointer; }
.pr-play .pr-done { text-align: center; padding-top: 10vh; }
.pr-play .pr-big { font-size: 34px; font-weight: 700; margin: 0 0 10px; }
.pr-play .pr-sv { font-size: 20px; color: #a8740c; font-weight: 600; margin: 0 0 30px; }
.pr-play .pr-foot2 { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.pr-play .pr-foot2 button { font: inherit; font-size: 19px; font-weight: 600; padding: 13px 30px; border-radius: 40px; border: 0; cursor: pointer; background: var(--qzc); color: #fff; }
.pr-play .pr-foot2 .pr-back { background: rgba(255, 255, 255, .75); color: #4a3e3a; }
/* кнопки практики под названиями разделов */
.sec-sub { position: relative; height: 34px; margin: 8px 0 -6px; }
.sec-sub-b { position: absolute; top: 0; font: inherit; font-size: 14px; font-weight: 500; letter-spacing: .02em; padding: 6px 14px; border-radius: 20px; border: 1px solid rgba(154, 133, 114, .35); background: rgba(255, 255, 255, .55); color: #8a7563; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
.sec-sub-b:hover { background: #fff; color: #4a3e3a; }
@media (max-width: 760px) { .sec-sub { height: 30px; } .sec-sub-b { font-size: 13px; padding: 5px 11px; } }

/* «Мои прописи» — тетрадки на полке, как книги в «Моей полке» */
#prShelf .shelf-row .book.pr-nb { width: 118px !important; height: 172px !important; padding: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; flex: none; display: flex; flex-direction: column; gap: 6px; }
#prShelf .pr-nb .pr-cv { flex: 1; aspect-ratio: auto; }
#prShelf .pr-nb .pr-cnt { height: 16px; line-height: 16px; }
#prShelf .pr-sample.pr-sym { font-family: inherit; font-size: 28px; letter-spacing: .05em; }
#prShelf .pr-nb.soon .pr-sample { font-family: inherit; font-size: 15px; color: #a0938a; }
@media (max-width: 760px) { #prShelf .shelf-row .book.pr-nb { width: 96px !important; height: 140px !important; } #prShelf .pr-tag b { font-size: 11px; } #prShelf .pr-sample { font-size: 30px; } }
/* прописи крупнее: буква на весь экран */
.pr-play canvas { height: clamp(300px, 54vh, 520px) !important; }
/* «Диктант» */
#dictBox { margin: 6px 0 40px; }
#dictBox .dict-row { display: flex; align-items: center; justify-content: space-between; width: 100%; font: inherit; text-align: left; cursor: pointer; }
#dictBox .dict-res { color: #a0938a; font-size: 13px; }
.qz.dict-play { z-index: 100000; }
.dict-play .dict-wrap { width: 100%; max-width: 760px; margin: 0 auto; }
.dict-play .dict-listen { display: flex; gap: 12px; margin: 4px 0 18px; flex-wrap: wrap; }
.dict-play .dict-say, .dict-play .dict-slow { font: inherit; font-size: 18px; font-weight: 600; display: inline-flex; align-items: center; gap: 10px; padding: 12px 24px; border-radius: 40px; border: 0; cursor: pointer; background: var(--qzc); color: #fff; box-shadow: 0 10px 22px -14px var(--qzc); }
.dict-play .dict-slow { background: rgba(255, 255, 255, .75); color: #4a3e3a; box-shadow: none; }
.dict-play .dict-line { min-height: 64px; display: flex; align-items: center; padding: 10px 18px; border-radius: 16px; background: #fffdf8; border: 2px solid transparent; font-size: 30px; letter-spacing: .02em; color: #3b302c; }
.dict-play .dict-line.ok { border-color: #5fae57; background: #eef8eb; }
.dict-play .dict-line.bad { border-color: #e5534b; background: #fdeceb; }
.dict-play .dict-caret { width: 2px; height: 34px; background: var(--qzc); margin-left: 2px; animation: dCaret 1s steps(1) infinite; }
@keyframes dCaret { 50% { opacity: 0; } }
.dict-play .dict-fb { font-size: 20px; margin: 12px 0 0; }
.dict-play .dict-fb.ok { color: #3f8c3a; font-weight: 600; }
.dict-play .dict-fb.bad { color: #b0403a; }
.dict-play .dict-kb { margin: 18px 0 0; display: flex; flex-direction: column; gap: 7px; }
.dict-play .kb-row { display: flex; gap: 6px; justify-content: center; }
.dict-play .kb-k { font: inherit; font-size: 20px; flex: 1 1 0; max-width: 54px; min-width: 0; height: 50px; border-radius: 12px; border: 0; background: rgba(255, 255, 255, .8); color: #3b302c; cursor: pointer; box-shadow: 0 2px 0 rgba(74, 62, 58, .08); }
.dict-play .kb-k:active { transform: translateY(1px); background: #fff; }
.dict-play .kb-space { max-width: 260px; flex: 4 1 0; font-size: 15px; color: #8a7d76; }
.dict-play .kb-caps.on { background: var(--qzc); color: #fff; }
.dict-play .dict-check { font: inherit; font-size: 18px; font-weight: 600; padding: 12px 30px; border-radius: 40px; border: 0; cursor: pointer; background: var(--qzc); color: #fff; }
.dict-play .pr-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
.dict-play .dict-done { text-align: center; padding-top: 10vh; }
.dict-play .dict-msg { font-size: 20px; margin: 0 0 10px; }
.dict-play .pr-big { font-size: 40px; font-weight: 700; margin: 0 0 8px; }
.dict-play .pr-sv { font-size: 20px; color: #a8740c; font-weight: 600; margin: 0 0 28px; }
.dict-play .pr-foot2 { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.dict-play .pr-foot2 button { font: inherit; font-size: 19px; font-weight: 600; padding: 13px 30px; border-radius: 40px; border: 0; cursor: pointer; background: var(--qzc); color: #fff; }
.dict-play .pr-foot2 .dict-back { background: rgba(255, 255, 255, .75); color: #4a3e3a; }
@media (max-width: 600px) { .dict-play .kb-k { height: 44px; font-size: 17px; border-radius: 9px; } .dict-play .kb-row { gap: 4px; } .dict-play .dict-line { font-size: 24px; } }

/* под вкладками — кнопки практики по центру вкладки, пошире */
.sec-sub-b { transform: translateX(-50%); min-width: 116px; padding: 6px 22px; text-align: center; }
@media (max-width: 760px) { .sec-sub-b { min-width: 92px; padding: 5px 14px; } }
#muPractice { margin-top: 34px; }
#muPractice .mu-soon { color: #8a7563; font-size: 17px; margin: 6px 0 0; }
/* «Быстрый старт» на главной: белая плашка рядом с «Онлайн-уроком» и «Пособиями» */
button.h3-ctab.c-start { font: inherit; border: 0; cursor: pointer; text-align: left; width: auto; padding: 14px 26px; }
.h3-ctab.c-start small { color: #5fa64f; }
.sec-sub.flow { display: flex; flex-wrap: wrap; gap: 8px; height: auto; }
.sec-sub.flow .sec-sub-b { position: static; transform: none; }
#muPractice .shelf-label { margin-top: 34px !important; }
.pl-row .exn { display: grid; gap: 2px; }
.pl-soon { display: inline-flex; align-items: center; gap: 6px; color: #bfb1a3; flex: none; }
.pl-soon small { font-size: 13px; letter-spacing: .03em; }
/* тест в конце темы в Литературе и Музыковедении — как в Родном языке */
:is(#litLessons, #muList) .exsub .crs-chk.mu-chk { display: flex; align-items: center; width: 100%; text-align: left; font: inherit; cursor: pointer; padding: 14px 20px; border-radius: 16px; background: color-mix(in srgb, var(--bc) 20%, #fff) !important; border: 1px solid color-mix(in srgb, var(--bc) 30%, #fff) !important; box-shadow: none !important; }
:is(#litLessons, #muList) .mu-chk .exn { display: flex; align-items: baseline; gap: 10px; font-size: 17px; color: rgb(74, 62, 58); font-weight: 400; }
:is(#litLessons, #muList) .mu-chk .crs-ln-t { font-style: normal; font-size: 13px; color: color-mix(in srgb, var(--bc) 60%, #3d332e); }

/* светики живые: моргают и иногда вздрагивают */
.crs-sv.on .sv-e { transform-box: fill-box; transform-origin: 50% 70%; animation: svBlink 5.2s infinite; }
.crs-sv.on:nth-of-type(2n) .sv-e { animation-duration: 6.4s; animation-delay: -2s; }
.svw-i .crs-sv.on .sv-e { animation-delay: -1.3s; }
@keyframes svBlink { 0%, 90%, 100% { transform: scaleY(1); } 92.5% { transform: scaleY(.12); } 95% { transform: scaleY(1); } }
.svw-i .crs-sv.on, .h3-svet .crs-sv.on, .crs-svet .crs-sv.on { transform-origin: 50% 90%; animation: svTwitch 9s infinite; }
@keyframes svTwitch { 0%, 61%, 69%, 100% { rotate: 0deg; } 62.5% { rotate: -7deg; } 64.5% { rotate: 6deg; } 66.5% { rotate: -3deg; } 68% { rotate: 1deg; } }
@media (prefers-reduced-motion: reduce) { .crs-sv.on .sv-e, .crs-sv.on { animation: none !important; } }
/* ---------- игра «Подчеркни»: члены предложения по-школьному ---------- */
.pu { --pk: #3d5fb8; padding-bottom: 6px; text-decoration: none; background-repeat: no-repeat; background-position: 0 100%; }
.pu-1 { background-image: linear-gradient(var(--pk), var(--pk)); background-size: 100% 2.5px; }
.pu-2 { background-image: linear-gradient(var(--pk), var(--pk)), linear-gradient(var(--pk), var(--pk)); background-size: 100% 2.5px, 100% 2.5px; background-position: 0 calc(100% - 5px), 0 100%; padding-bottom: 9px; }
.pu-3 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6'%3E%3Cpath d='M0 3 Q3 0 6 3 T12 3' fill='none' stroke='%233d5fb8' stroke-width='1.8'/%3E%3C/svg%3E"); background-size: 12px 6px; background-repeat: repeat-x; }
.pu-4 { background-image: linear-gradient(90deg, var(--pk) 0 8px, transparent 8px 13px); background-size: 13px 2.5px; background-repeat: repeat-x; }
.pu-5 { background-image: linear-gradient(90deg, var(--pk) 0 9px, transparent 9px 13px, var(--pk) 13px 15.5px, transparent 15.5px 20px); background-size: 20px 2.5px; background-repeat: repeat-x; }
.pu-s { display: flex; flex-wrap: wrap; gap: 6px 4px; justify-content: center; margin: 10px 0 18px; }
.pu-w { font: inherit; font-size: 26px; line-height: 1.5; padding: 4px 8px 8px; border: 0; border-radius: 10px; background-color: transparent; color: #3b302c; cursor: pointer; }
.pu-w.pu-2 { padding-bottom: 11px; }
.pu-w:hover:not([disabled]) { background-color: rgba(61, 95, 184, .07); }
.pu-w.ok { --pk: #3e9b4f; color: #2f7d3d; }
.pu-w.bad { --pk: #d9534f; color: #c0392b; background-color: rgba(217, 83, 79, .08); }
.pu-right { text-align: center; font-size: 22px; line-height: 1.8; margin: 0 0 8px; color: #3b302c; }
.pu-right .pu { --pk: #3e9b4f; }
.pu-tools { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 4px 0 14px; }
.pu-t { font: inherit; font-size: 16px; padding: 9px 14px 11px; border-radius: 14px; border: 1.5px solid #e6ddd0; background: #fff; color: #5a4c45; cursor: pointer; }
.pu-t.on { border-color: #3d5fb8; background: #eef2fc; color: #2d4a94; }
.pu-foot { display: flex; justify-content: center; }
.pu-go { font: inherit; font-size: 18px; font-weight: 600; padding: 11px 30px; border-radius: 30px; border: 0; background: #3d5fb8; color: #fff; cursor: pointer; }
@media (max-width: 600px) { .pu-w { font-size: 21px; padding: 3px 5px 8px; } .pu-t { font-size: 14px; padding: 7px 10px 9px; } }
/* линии в примерах правила */
.lsn-exl .pu, .rule .pu { padding-bottom: 5px; }
.pu-right small { display: block; font-size: 15px; color: #8a7d76; line-height: 1.4; }
.pu-3 { background-image: none !important; text-decoration: underline wavy var(--pk); text-decoration-thickness: 1.6px; text-underline-offset: 8px; }
.pu-s { gap: 6px 12px; }
.pu-w { padding: 4px 3px 9px; border-radius: 6px; }
.pu-w.bad:not(.pu) { background-color: transparent; color: #3b302c; }
/* ---------- практика: «Найди ошибки», «Расставь знаки», «Раздели на слова» ---------- */
.pk-s, .pn-s { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 8px 10px; margin: 10px auto 18px; max-width: 760px; font-size: 25px; line-height: 1.5; color: #3b302c; }
.pk-w { font: inherit; padding: 2px 6px; border-radius: 10px; border: 2px solid transparent; background: none; color: inherit; cursor: pointer; }
.pk-w:hover { background: rgba(0, 0, 0, .04); }
.pk-w.on { border-color: #e2a93a; background: #fff6dc; }
span.pk-w { cursor: default; display: inline-flex; flex-direction: column-reverse; align-items: center; }
span.pk-w s { color: #c0392b; text-decoration-thickness: 2px; }
span.pk-w b { font-size: .72em; font-weight: 600; color: #2f7d3d; }
span.pk-w.ok { border-color: #8cc98f; }
span.pk-w.miss { border-color: #e7a19c; border-style: dashed; }
span.pk-w.bad { border-color: #e7a19c; color: #c0392b; }
.pn-s { gap: 0; }
.pn-w { padding: 0 2px; }
.pn-g { font: inherit; font-weight: 700; min-width: 22px; height: 40px; margin: 0 2px; padding: 0 3px; border: 0; border-radius: 8px; background: rgba(61, 95, 184, .06); color: #3d5fb8; cursor: pointer; align-self: center; }
.pn-g:empty::before { content: "·"; color: #c8bfb3; }
.pn-g.on { background: #eef2fc; }
.pn-g.ok { color: #2f7d3d; background: #e4f3e4; }
.pn-g.bad { color: #c0392b; background: #fbe3e1; }
.pn-hint { text-align: center; color: #8a7d76; font-size: 15px; margin: 0 0 12px; }
.pn-hint b { display: inline-block; min-width: 18px; color: #3d5fb8; }
.sp-s { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 14px auto 20px; max-width: 760px; font-size: 30px; color: #3b302c; row-gap: 10px; }
.sp-l { padding: 0 .5px; }
.sp-g { width: 10px; height: 38px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.sp-g::after { content: ""; position: absolute; left: 50%; top: 6px; bottom: 6px; width: 2px; translate: -1px 0; background: transparent; border-radius: 2px; }
.sp-g:hover::after { background: #d6ccc3; }
.sp-g.on, .sp-g.ok, .sp-g.bad { width: 26px; }
.sp-g.on::after { background: #3d5fb8; }
.sp-g.ok::after { background: #3e9b4f; }
.sp-g.bad::after { background: #d9534f; }
@media (max-width: 600px) { .pk-s, .pn-s { font-size: 20px; } .sp-s { font-size: 23px; } .sp-g { width: 8px; } .sp-g.on, .sp-g.ok, .sp-g.bad { width: 18px; } }
/* ---------- практика: семь плашек с уровнями ---------- */
#prxBox { margin: 6px 0 40px; }
#prxBox .prx-row { display: flex; align-items: center; justify-content: space-between; width: 100%; font: inherit; text-align: left; cursor: pointer; }
#prxBox .prx-row .exn { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.prx-lv { font-weight: 500; }
.prx-lv1 { color: #3e9b4f; } .prx-lv2 { color: #d38f1c; } .prx-lv3 { color: #d9534f; }
#prxBox .prx-res { color: #a0938a; font-size: 13px; }
.dict-show { text-align: center; font-size: 26px; line-height: 1.5; margin: 6px auto 14px; max-width: 720px; padding: 14px 18px; border-radius: 16px; background: #fffaf0; border: 1px solid #efe4d2; color: #3b302c; }

/* черепашка в разделах: без пузырьков, окошка и нажатия — просто живёт */
body.hp-quiet .hp-cloud, body.hp-quiet .hp-bubble, body.hp-quiet .hp-panel { display: none !important; }
body.hp-quiet #helper .hp-btn { pointer-events: none; cursor: default; }
/* ---------- тетрадки прописей в стиле печатных пособий ---------- */
#prShelf .shelf-row .book.pr-nb.wbc-nb { width: 150px !important; height: 176px !important; }
#prShelf .pr-nb .pr-cv.wbc { flex: none; height: 150px; aspect-ratio: 1; border-radius: 6px; background: #fdf9f3; box-shadow: 0 1px 0 rgba(74, 62, 58, .06), 0 12px 22px -16px rgba(74, 62, 58, .55); }
.pr-nb:hover .pr-cv.wbc { transform: translateY(-3px); }
.wbc-sq { position: absolute; left: 22%; right: 22%; top: 25%; bottom: 23%; background: var(--nc); }
.wbc-t { position: absolute; left: 4px; right: 4px; top: 50%; translate: 0 -50%; text-align: center; font-family: Nunito, Rubik, sans-serif; font-weight: 900; text-transform: uppercase; font-size: 15px; line-height: 1.12; letter-spacing: .01em; color: #fff; -webkit-text-stroke: 2.6px #2b2523; paint-order: stroke fill; overflow-wrap: anywhere; hyphens: auto; }
.wbc-br { position: absolute; left: 0; right: 0; bottom: 7px; text-align: center; font-family: Rubik, sans-serif; font-weight: 700; font-size: 8.5px; letter-spacing: .06em; color: #2b2523; }
.wbc-logo { position: absolute; right: 10px; top: 8px; width: 16px; height: 12px; }
.wbc-logo b { position: absolute; border-radius: 50%; }
.wbc-logo b:nth-child(1) { left: 0; top: 2px; width: 9px; height: 9px; background: #e4352b; }
.wbc-logo b:nth-child(2) { left: 7px; top: 0; width: 6px; height: 6px; background: #f2c94c; }
.wbc-logo b:nth-child(3) { left: 6px; top: 7px; width: 5px; height: 5px; background: #3494e3; }
@media (max-width: 760px) { #prShelf .shelf-row .book.pr-nb.wbc-nb { width: 118px !important; height: 142px !important; } #prShelf .pr-nb .pr-cv.wbc { height: 118px; } .wbc-t { font-size: 12px; -webkit-text-stroke-width: 2.5px; } .wbc-br { font-size: 7px; bottom: 5px; } }
/* обложки v2: название сверху, картинка в квадрате, прошитый корешок слева, четыре тетрадки между стрелками */
#prShelf .shelf-row .book.pr-nb.wbc-nb { width: 132px !important; height: 158px !important; }
#prShelf .pr-nb .pr-cv.wbc { height: 132px; border-radius: 3px 6px 6px 3px; }
#prShelf .pr-nb .pr-cv.wbc::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 9px; background: linear-gradient(90deg, rgba(0, 0, 0, .13), rgba(0, 0, 0, 0)); z-index: 2; }
.wbc-st { position: absolute; left: 3px; top: 0; bottom: 0; width: 2px; z-index: 3; display: flex; flex-direction: column; justify-content: space-evenly; padding: 16% 0; }
.wbc-st b { display: block; width: 2px; height: 14px; border-radius: 2px; background: var(--nc); }
.wbc-sq { left: 21%; right: 19%; top: 27%; bottom: 20%; display: grid; place-items: end center; padding-bottom: 8%; }
.wbc-t { top: 27%; translate: 0 -50%; font-size: 13px; left: 6px; right: 2px; }
.wbc-pic { width: 82%; height: auto; margin-top: 30%; overflow: visible; }
.wbc-glyph { font-family: "BravoPropis", cursive; color: #fff; font-size: 34px; line-height: 1; margin-bottom: 2px; }
.wbc-br { font-size: 9px; letter-spacing: .1em; }
#prShelf .shelf.sc-box { max-width: 570px; margin-left: auto; margin-right: auto; }
@media (max-width: 760px) { #prShelf .shelf-row .book.pr-nb.wbc-nb { width: 112px !important; height: 136px !important; } #prShelf .pr-nb .pr-cv.wbc { height: 112px; } .wbc-t { font-size: 11px; } .wbc-glyph { font-size: 28px; } }
.wbc-glyph.sm { font-size: 25px; margin-bottom: 6px; }
.pr-play .pr-lift { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; background: #fff3dc; color: #a8650f; font-weight: 600; font-size: 15px; padding: 7px 16px; border-radius: 20px; opacity: 0; transition: .25s; pointer-events: none; white-space: nowrap; }
.pr-play .pr-lift.on { opacity: 1; }
.pr-pdf { text-align: center; font-size: 14px; color: #a0938a; margin: 10px 0 26px; }
.pr-pdf a { color: #3494e3; text-decoration: none; font-weight: 600; white-space: nowrap; }
.pr-pdf a:hover { text-decoration: underline; }
#prShelf .pr-pdf { flex-basis: 100%; width: 100%; grid-column: 1 / -1; max-width: none; }

/* ---------- практика-пособия: те же квадратные обложки, что у «Моих пособий» ---------- */
#prxBox .shelf-row .book.pr-nb { width: 118px !important; height: 172px !important; padding: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; flex: none; display: flex; flex-direction: column; gap: 6px; }
#prxBox .pr-nb .pr-cv { flex: 1; aspect-ratio: auto; }
#prxBox .pr-nb .pr-cnt { height: 16px; line-height: 16px; }
#prxBox .pr-nb.soon .pr-sample { font-family: inherit; font-size: 15px; color: #a0938a; }
@media (max-width: 760px) { #prxBox .shelf-row .book.pr-nb { width: 96px !important; height: 140px !important; } #prxBox .pr-tag b { font-size: 11px; } #prxBox .pr-sample { font-size: 30px; } }
#prxBox .shelf-row .book.pr-nb.wbc-nb { width: 150px !important; height: 176px !important; }
#prxBox .pr-nb .pr-cv.wbc { flex: none; height: 150px; aspect-ratio: 1; border-radius: 6px; background: #fdf9f3; box-shadow: 0 1px 0 rgba(74, 62, 58, .06), 0 12px 22px -16px rgba(74, 62, 58, .55); }
@media (max-width: 760px) { #prxBox .shelf-row .book.pr-nb.wbc-nb { width: 118px !important; height: 142px !important; } #prxBox .pr-nb .pr-cv.wbc { height: 118px; } .wbc-t { font-size: 12px; -webkit-text-stroke-width: 2.5px; } .wbc-br { font-size: 7px; bottom: 5px; } }
#prxBox .shelf-row .book.pr-nb.wbc-nb { width: 132px !important; height: 158px !important; }
#prxBox .pr-nb .pr-cv.wbc { height: 132px; border-radius: 3px 6px 6px 3px; }
#prxBox .pr-nb .pr-cv.wbc::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 9px; background: linear-gradient(90deg, rgba(0, 0, 0, .13), rgba(0, 0, 0, 0)); z-index: 2; }
#prxBox .shelf.sc-box { max-width: 570px; margin-left: auto; margin-right: auto; }
@media (max-width: 760px) { #prxBox .shelf-row .book.pr-nb.wbc-nb { width: 112px !important; height: 136px !important; } #prxBox .pr-nb .pr-cv.wbc { height: 112px; } .wbc-t { font-size: 11px; } .wbc-glyph { font-size: 28px; } }

.wbc-ico { color: #fff; width: 46%; margin-bottom: 4px; } .wbc-ico svg { width: 100%; height: auto; display: block; }
.wbc-box { display: inline-block; width: .5em; height: .62em; border: 2px solid #fff; border-radius: 3px; vertical-align: -0.05em; margin: 0 1px; }
.wbc-glyph s { text-decoration-thickness: 2px; }
#prxBox { margin: 0 0 40px; }
/* окно практики */
.hw { font-family: "BravoPropis", cursive; }
.ph-play .ph-main { max-width: 1180px; }
.ph-grid { display: grid; grid-template-columns: 150px minmax(0, 1fr) 120px; gap: 22px; align-items: start; }
.ph-side { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 90px; }
.ph-lv { font: inherit; font-size: 16px; font-weight: 600; padding: 12px 12px; border-radius: 16px; border: 2px solid color-mix(in srgb, var(--lc) 35%, #fff); background: rgba(255, 255, 255, .8); color: color-mix(in srgb, var(--lc) 80%, #3b302c); cursor: pointer; text-align: left; }
.ph-lv.on { background: var(--lc); border-color: var(--lc); color: #fff; }
.ph-right { display: flex; flex-direction: column; gap: 10px; align-items: center; position: sticky; top: 90px; }
.ph-say { width: 104px; height: 104px; border-radius: 50%; border: 0; background: #fff; color: #9b84e0; cursor: pointer; display: grid; place-items: center; box-shadow: 0 12px 26px -16px rgba(74, 62, 58, .6); font: inherit; font-size: 13px; font-weight: 600; padding-top: 10px; }
.ph-say svg { width: 52px; height: 52px; }
.ph-slow { font: inherit; font-size: 14px; padding: 7px 14px; border-radius: 20px; border: 1px solid #e3d9ef; background: rgba(255, 255, 255, .8); color: #7b6aa8; cursor: pointer; }
.ph-work { min-width: 0; }
.ph-paper { position: relative; background: #fffdf8; border-radius: 18px; box-shadow: 0 14px 30px -22px rgba(74, 62, 58, .6); overflow: hidden; touch-action: none; margin: 8px 0 12px; }
.ph-paper canvas { display: block; width: 100%; touch-action: none; }
.ph-paper.ph-letter { width: 220px; margin: 6px auto 12px; }
.ph-model { font-size: 42px; line-height: 1.35; color: #3b302c; margin: 2px 0 8px; }
.ph-top { background: rgba(255, 255, 255, .7); border-radius: 16px; padding: 8px 18px; }
.ph-model-l, .ph-padl { font-size: 15px; color: #8a7d76; margin: 10px 0 0; }
.ph-padl { text-align: center; }
.ph-q { font-weight: 600; margin: 10px 0 8px; }
.ph-self { display: flex; gap: 10px; flex-wrap: wrap; }
.ph-self button, .ph-check, .ph-clear { font: inherit; font-size: 16px; font-weight: 600; padding: 11px 22px; border-radius: 26px; border: 0; cursor: pointer; }
.ph-self-ok, .ph-go2 { background: #5fae57; color: #fff; }
.ph-self-bad { background: #fff; color: #c0392b; border: 2px solid #f0b8b3 !important; }
.ph-check { background: #3d5fb8; color: #fff; }
.ph-clear { background: rgba(255, 255, 255, .85); color: #6b5d56; }
.ph-foot { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.ph-foot .ph-next { margin-left: auto; }
.ph-good { color: #2f7d3d; font-weight: 700; font-size: 20px; margin: 10px 0; }
.ph-bad { color: #b0412f; font-weight: 600; margin: 10px 0 6px; }
.ph-bad b.hw { font-size: 30px; font-weight: 400; color: #2f7d3d; }
.ph-fix { margin: 10px 0 4px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .8); }
.ph-fix > b { display: block; font-size: 15px; color: #6b5d56; margin-bottom: 8px; }
.ph-fix-b { display: flex; flex-wrap: wrap; gap: 8px; }
.ph-rule { font: inherit; font-size: 15px; padding: 8px 14px; border-radius: 20px; border: 1.5px solid #c9d6f2; background: #eef3fd; color: #2d4a94; cursor: pointer; }
.ph-rule::after { content: " →"; }
.ph-hist { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 26px; padding-top: 16px; border-top: 1px dashed rgba(160, 147, 138, .4); }
.ph-hist > span { font-size: 14px; color: #8a7d76; margin-right: 6px; }
.ph-c { width: 36px; height: 36px; border-radius: 50%; border: 2.5px solid var(--lc); background: #fff; color: #4a3e3a; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.ph-c.ok { background: #e4f3e1; }
.ph-c.bad { background: #fbe3e1; }
.ph-c.cur { box-shadow: 0 0 0 3px rgba(61, 95, 184, .35); }
/* пропущенные буквы */
.ph-gaps { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center; margin: 8px 0 6px; }
.ph-gw { font-size: 46px; color: #3b302c; white-space: nowrap; }
.ph-gapbox { display: inline-block; min-width: .62em; height: .9em; vertical-align: -0.12em; margin: 0 2px; border: 2.5px dashed #9b84e0; border-radius: 8px; background: rgba(255, 255, 255, .85); font: inherit; color: #3d5fb8; line-height: .8; padding: 0 2px; cursor: pointer; }
.ph-gapbox.cur { border-style: solid; border-color: #3d5fb8; box-shadow: 0 0 0 4px rgba(61, 95, 184, .15); }
.ph-gapbox.ok { border: 2.5px solid #5fae57; color: #2f7d3d; background: #e9f6e6; }
.ph-gapbox.bad { border: 2.5px solid #e4352b; color: #c0392b; background: #fdebe9; }
/* текст прописью с прозрачным листом сверху */
.ph-ov { position: relative; background: #fffdf8; border-radius: 18px; padding: 22px 26px; box-shadow: 0 14px 30px -22px rgba(74, 62, 58, .6); margin: 8px 0 10px; touch-action: none; }
.ph-ov canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.ph-txt { font-size: 44px; line-height: 1.7; color: #3b302c; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 14px; }
.ph-w { padding: 0 6px; border-radius: 40%; border: 2.5px solid transparent; display: inline-flex; flex-direction: column-reverse; align-items: center; line-height: 1.1; }
.ph-w.on { border-color: #3d5fb8; }
.ph-w.ok { border-color: #5fae57; }
.ph-w.miss { border-color: #e4352b; border-style: dashed; }
.ph-w.bad { border-color: #e4352b; }
.ph-w s { color: #c0392b; text-decoration-thickness: 2px; }
.ph-w em { font-style: normal; font-size: .62em; color: #2f7d3d; }
.ph-gp { min-width: 18px; margin-left: -12px; color: #3d5fb8; }
.ph-gp.ok { color: #2f7d3d; } .ph-gp.bad { color: #e4352b; }
.ph-gp.bad:empty::after { content: "×"; font-family: Rubik, sans-serif; font-size: .5em; }
.ph-txt .ph-l { padding: 0; }
.ph-cut { display: inline-block; width: 4px; align-self: stretch; margin: 6px 1px; border-radius: 2px; }
.ph-cut.on, .ph-cut.ok, .ph-cut.bad { width: 4px; margin: 6px 10px; }
.ph-cut.on { background: #3d5fb8; } .ph-cut.ok { background: #5fae57; } .ph-cut.bad { background: #e4352b; }
.ph-txt:has(.ph-l) { column-gap: 0; }
/* собери текст */
.ph-ord { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 10px; }
.ph-sent { display: flex; gap: 14px; align-items: center; background: #fffdf8; border-radius: 16px; padding: 10px 18px; font-size: 34px; line-height: 1.25; color: #3b302c; box-shadow: 0 10px 22px -18px rgba(74, 62, 58, .6); cursor: grab; touch-action: none; user-select: none; position: relative; }
.ph-sent b { font-family: Rubik, sans-serif; font-size: 16px; color: #a0938a; min-width: 18px; }
.ph-sent.drag { z-index: 2; box-shadow: 0 18px 30px -14px rgba(74, 62, 58, .55); cursor: grabbing; }
.ph-sent.ok { box-shadow: inset 0 0 0 2px #8cc98f; } .ph-sent.bad { box-shadow: inset 0 0 0 2px #e7a19c; }
.ph-right.hw { font-size: 30px; line-height: 1.4; }
@media (max-width: 900px) {
  .ph-grid { grid-template-columns: minmax(0, 1fr); }
  .ph-side { position: static; flex-direction: row; flex-wrap: wrap; }
  .ph-lv { padding: 8px 12px; font-size: 14px; }
  .ph-right { position: static; flex-direction: row; justify-content: center; order: -1; }
  .ph-say { width: 76px; height: 76px; } .ph-say svg { width: 38px; height: 38px; }
  .ph-txt { font-size: 32px; } .ph-gw { font-size: 34px; } .ph-model { font-size: 30px; } .ph-sent { font-size: 24px; }
}
.qz.ph-play .td-main.qp-main { max-width: 1160px; padding-left: 24px !important; padding-right: 24px !important; }
.ph-txt:has(.ph-l) { letter-spacing: .04em; }
.ph-lv { font-size: 17px; padding: 14px 14px; }
/* окно практики: столбец задания ровно под шапкой (856), уровни слева и наушники справа — по бокам */
@media (min-width: 1201px) { .qz.ph-play .td-main.qp-main { max-width: 1200px !important; padding-left: 0 !important; padding-right: 0 !important; } .ph-grid { grid-template-columns: 150px minmax(0, 1fr) 150px; } }
@media (min-width: 901px) and (max-width: 1200px) { .qz.ph-play .td-main.qp-main { max-width: none !important; padding-left: 20px !important; padding-right: 20px !important; } }
.ph-wg { white-space: nowrap; display: inline-flex; align-items: baseline; } .ph-wg .ph-gp { margin-left: -4px; }
/* практика — обычные плашки, как темы */
#prxBox .ph-list { display: grid; gap: 10px; margin-top: 8px; }
#prxBox .ph-list .exgrp { width: 100%; }
/* школьная пропись мельче на кегле — крупнее размеры текстов практики */
.ph-txt { font-size: 60px; } .ph-model { font-size: 56px; } .ph-gw { font-size: 60px; } .ph-sent { font-size: 44px; } .ph-right.hw { font-size: 40px; } .ph-bad b.hw { font-size: 40px; }
.wbc-glyph { font-size: 44px; } .wbc-glyph.sm { font-size: 32px; }
@media (max-width: 900px) { .ph-txt { font-size: 42px; } .ph-gw { font-size: 44px; } .ph-model { font-size: 40px; } .ph-sent { font-size: 32px; } }
/* «Раздели на слова»: буквы стоят вплотную, чтобы строчка была слитной, черта появляется только там, где провели */
.ph-txt:has(.ph-l) { letter-spacing: 0; }
.ph-cut { width: 0; margin: 0; }
.ph-cut.on, .ph-cut.ok, .ph-cut.bad { width: 3px; margin: 6px 12px; }
.ph-cut.bad:not(.on) { background: transparent; border-left: 3px dashed #e4352b; width: 0; }
.ph-txt:has(.ph-l) { font-size: 84px; } .ph-txt { font-size: 66px; } @media (max-width: 900px) { .ph-txt:has(.ph-l) { font-size: 56px; } .ph-txt { font-size: 46px; } }
/* ---------- книги на «Моей полке»: как раньше (с корешком и обрезом), только чуть шире ---------- */
@media (min-width: 761px) { #v-read .shelf .book { width: 108px !important; height: 138px !important; } }
#v-read .shelf .book.bk-sq { color: #fff !important; }
/* кнопки практики в строке разделов: справа от своего названия */
.sec-tabs .sec-pill { font: inherit; font-size: 14px; font-weight: 500; letter-spacing: .02em; vertical-align: middle; margin: 0 4px 0 10px; padding: 6px 14px; border-radius: 20px; border: 1px solid rgba(154, 133, 114, .25); background: rgba(255, 255, 255, .45); color: #b9aa9c; cursor: pointer; transition: background .2s, color .2s; position: relative; top: -3px; }
.sec-tabs .sec-pill:hover { color: #6b5d56; background: rgba(255, 255, 255, .8); }
.sec-tabs .sec-pill.on { background: #4a3e3a; border-color: #4a3e3a; color: #fff; }
.sec-tabs .sec-pill.on:hover { background: #3b302c; color: #fff; }
@media (max-width: 760px) { .sec-tabs .sec-pill { font-size: 12px; padding: 4px 10px; margin-left: 6px; top: -2px; } }
@media (max-width: 760px) { .sec-tabs .sec-pill:not(.on) { display: none; } }
.sec-tabs .sec-pill { margin-left: 4px; margin-right: 2px; }
/* «Мои пособия»: крупнее и свободнее, в тех же пропорциях, что пособия для печати (промежуток ≈ половина обложки) */
#prShelf .shelf-row .book.pr-nb.wbc-nb { width: 160px !important; height: 186px !important; }
#prShelf .pr-nb .pr-cv.wbc { height: 160px; }
#prShelf .books.sc-track { gap: 84px !important; }
#prShelf .shelf.sc-box { max-width: 892px; }
#prShelf .wbc-t { font-size: 15px; }
#prShelf .wbc-glyph { font-size: 52px; } #prShelf .wbc-glyph.sm { font-size: 38px; }
@media (max-width: 760px) { #prShelf .shelf-row .book.pr-nb.wbc-nb { width: 120px !important; height: 144px !important; } #prShelf .pr-nb .pr-cv.wbc { height: 120px; } #prShelf .books.sc-track { gap: 28px !important; } #prShelf .wbc-t { font-size: 12px; } }
#prShelf .books.sc-track { gap: 72px !important; } #prShelf .shelf.sc-box { max-width: 856px; }
/* кнопки «Пособия · Книги · Аудио»: как плашки на главной — цвет раздела, светлая обводка (снизу ярче) и мягкая тень */
.sec-tabs .sec-pill { --pc: #45bcc0; position: relative; top: -4px; font-weight: 600; padding: 7px 16px; border: 0; background: rgba(255, 255, 255, .7); color: color-mix(in srgb, var(--pc) 75%, #3b302c); box-shadow: 0 6px 12px -8px rgba(92, 78, 66, .45); transition: transform .15s, box-shadow .15s, background .2s, color .2s; }
.sec-tabs .sec-pill[data-sub="read"] { --pc: #3494e3; }
.sec-tabs .sec-pill[data-sub="music"] { --pc: #9b84e0; }
.sec-tabs .sec-pill::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; background: linear-gradient(to top, rgba(255, 255, 255, .95), rgba(255, 255, 255, .45) 50%, rgba(255, 255, 255, .25)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.sec-tabs .sec-pill:hover { transform: translateY(-1px); background: #fff; box-shadow: 0 9px 16px -9px rgba(92, 78, 66, .5); }
.sec-tabs .sec-pill.on { background: var(--pc); color: #fff; box-shadow: 0 9px 18px -8px rgba(80, 70, 64, .55), inset 0 -2px 0 rgba(0, 0, 0, .06); }
.sec-tabs .sec-pill.on:hover { background: var(--pc); filter: brightness(1.05); color: #fff; transform: translateY(-1px); }
.sec-tabs .sec-pill:not(.on) { opacity: .75; }
/* названия разделов — цветом своего раздела, как кнопки рядом */
.sec-tabs [data-sec="exercises"] { color: #2fa8ac !important; }
.sec-tabs [data-sec="read"] { color: #2b84d0 !important; }
.sec-tabs [data-sec="music"] { color: #8a70d6 !important; }
.sec-tabs a[data-sec] { opacity: .72; transition: opacity .2s; }
.sec-tabs a[data-sec]:hover { opacity: 1; }
/* кнопки разделов: чуть крупнее, белая обводка снизу легче, у активной та же мягкая тень, что у бледных */
.sec-tabs .sec-pill { font-size: 16px; padding: 9px 20px; top: -5px; }
.sec-tabs .sec-pill::after { background: linear-gradient(to top, rgba(255, 255, 255, .7), rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, .25)); }
.sec-tabs .sec-pill.on, .sec-tabs .sec-pill.on:hover { box-shadow: 0 6px 12px -8px rgba(92, 78, 66, .45); }
@media (max-width: 760px) { .sec-tabs .sec-pill { font-size: 13px; padding: 6px 13px; top: -3px; } }
.sec-tabs span.on, .sec-tabs .on[data-sec] { font-weight: 400 !important; }
#prxBox { margin-bottom: 10px !important; }
/* ---------- диктант: большой лист во всю ширину ---------- */
.qz.ph-play .td-main.qp-main.ph-dict { max-width: none !important; padding: 18px 28px 40px !important; }
.phd-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 12px; }
.phd-lv { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.phd-lv i { color: #c8bdb2; font-style: normal; }
.phd-lv .phd-l { font: inherit; font-size: 17px; font-weight: 400; padding: 4px 2px; border: 0; background: none; color: #a8998d; cursor: pointer; border-radius: 0; }
.phd-lv .phd-l:hover { color: #6b5d56; }
.phd-lv .phd-l.on { color: #3b302c; background: none; border: 0; }
.phd-say { width: 64px; height: 64px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; color: #9b84e0; cursor: pointer; filter: drop-shadow(0 6px 8px rgba(92, 78, 66, .28)); box-shadow: none; }
.phd-say svg { width: 50px; height: 50px; }
.phd-say:hover { color: #7d64cc; }
.ph-dict .ph-paper { margin: 0; border-radius: 22px; }
.phd-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.phd-clear { font: inherit; font-size: 16px; font-weight: 600; padding: 11px 22px; border-radius: 26px; border: 0; background: rgba(255, 255, 255, .6); color: #6b5d56; cursor: pointer; }
.phd-clear:hover { background: rgba(255, 255, 255, .9); }
.ph-dict .ph-model { font-size: 80px; line-height: 1.3; }
@media (max-width: 760px) { .qz.ph-play .td-main.qp-main.ph-dict { padding: 12px 12px 30px !important; } .phd-lv .phd-l { font-size: 15px; } .ph-dict .ph-model { font-size: 48px; } }
.ph-dict .ph-model { font-size: 120px; line-height: 1.2; margin-top: 0; } @media (max-width: 760px) { .ph-dict .ph-model { font-size: 64px; } }
/* диктант: лист и всё остальное — ровно по слову «Практика» в шапке, справа такой же отступ */
.qz.ph-play .td-main.qp-main.ph-dict { max-width: 1108px !important; margin: 0 auto; padding: 18px 16px 40px !important; box-sizing: border-box; }
.phd-lv .phd-l { padding-left: 0; padding-right: 0; } .phd-say { margin-right: -7px; }
/* диктант: «Стереть» и стрелка всегда сразу под листом; правильный ответ — ниже, по центру */
.ph-dict .ph-after { text-align: center; }
.ph-dict .ph-model-l { margin-top: 6px; }
.ph-dict .phd-foot { position: relative; }
.phd-mid { flex: 1; text-align: center; font-size: 16px; color: #8a7d76; }
.phd-mid { position: absolute; left: 50%; top: 50%; translate: -50% -50%; flex: none; white-space: nowrap; pointer-events: none; }
/* списывание: образец, лист с пунктиром и чистый лист — всё крупно, как в диктанте */
.ph-dict .ph-copy-model { font-size: 72px; line-height: 1.3; margin: 0 0 14px; }
.ph-dict .ph-copy-free { margin-top: 14px; }
.ph-dict .ph-fix { text-align: left; }
@media (max-width: 760px) { .ph-dict .ph-copy-model { font-size: 44px; } }
.svw-n, .pt-got i { display: inline-block; }

/* иллюстрация-картина в уроке (балерина): тёмный холст с мягкими углами, текст обтекает справа */
.lsn-wrapimg.lsn-art { shape-outside: none !important; margin: 4px 26px 12px 0 !important; border-radius: 22px; filter: none; box-shadow: 0 14px 30px -14px rgba(60, 30, 20, .45); }
.lsn-flow-wrap > .lsn-wrapimg.lsn-art:first-child { height: 380px; }
@media (max-width: 760px) { .lsn-flow-wrap > .lsn-wrapimg.lsn-art:first-child { height: 240px; margin: 6px 0 12px 0 !important; } }

/* крупная фигурка в уроке (балерина) */
.lsn-flow-wrap > .lsn-wrapimg.lsn-tall:first-child { height: 470px; margin-left: -20px; }
@media (max-width: 760px) { .lsn-flow-wrap > .lsn-wrapimg.lsn-tall:first-child { height: 300px; margin-left: 0; } }

/* главная: одна большая голубая кнопка «Вперёд · к знаниям» вместо трёх плиток разделов */
.h3-big.h3-big4 { display: flex !important; justify-content: center; align-items: center; }
.h3-go { position: relative; overflow: hidden; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 18px 64px 16px; border-radius: 999px; text-decoration: none; color: #fff;
  background: linear-gradient(180deg, #6cc0f7 0%, #3494e3 55%, #2a7fcf 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.55), inset 0 -4px 0 rgba(20,80,150,.25), 0 0 0 5px rgba(255,255,255,.85), 0 16px 30px -12px rgba(52,148,227,.65);
  transition: transform .18s ease, box-shadow .18s ease; }
.h3-go::before { content: ""; position: absolute; left: 10%; right: 10%; top: 4px; height: 42%; border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,0)); pointer-events: none; }
.h3-go::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-18deg); animation: h3goShine 3.6s ease-in-out infinite; pointer-events: none; }
@keyframes h3goShine { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }
.h3-go:hover { transform: translateY(-2px) scale(1.02); }
.h3-go:active { transform: translateY(1px) scale(.99); }
.h3-go-t { display: inline-flex; align-items: center; gap: 12px; font-size: 34px; font-weight: 700; letter-spacing: .01em; text-shadow: 0 2px 0 rgba(20,80,150,.25); }
.h3-go-t svg { width: 30px; height: 30px; transition: transform .2s ease; }
.h3-go:hover .h3-go-t svg { transform: translateX(4px); }
.h3-go small { font-size: 16px; font-weight: 500; opacity: .92; }
@media (max-width: 760px) { .h3-go { padding: 14px 44px 12px; margin-top: 14px; } .h3-go-t { font-size: 28px; } .h3-go-t svg { width: 24px; height: 24px; } }
@media (prefers-reduced-motion: reduce) { .h3-go::after { animation: none; } }

/* «Вперёд · к знаниям» — плитка в стиле «Литературы», только крупнее надпись */
.h3-bigbtn.h3-gobtn { min-width: 340px; }
.h3-bigbtn.h3-gobtn b { font-size: 34px !important; line-height: 1.1; }
.h3-bigbtn.h3-gobtn small { font-size: 17px !important; }
@media (max-width: 760px) { .h3-bigbtn.h3-gobtn { min-width: 0; width: 100%; margin-top: 14px; } .h3-bigbtn.h3-gobtn b { font-size: 30px !important; } }
/* «Вперёд» — вытянутая по горизонтали, надписи по центру */
.h3-bigbtn.h3-gobtn { min-width: 0; width: min(620px, 100%); display: flex !important; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-left: 24px !important; padding-right: 24px !important; }
.h3-bigbtn.h3-gobtn b, .h3-bigbtn.h3-gobtn small { text-align: center; max-width: none !important; width: auto; margin-left: auto; margin-right: auto; }
/* «Начать»: синий с шарика логотипа, шершавый, как мелок; без флажка; круглее и с чуть толще кромкой */
.h3-bigbtn.h3-gobtn { width: min(480px, 100%); min-height: 0 !important; padding: 33px 24px !important; border-radius: 30px !important;
  background: #3c97f8 !important; }
.h3-bigbtn.h3-gobtn::after { padding: 3.5px; }
.h3-bigbtn.h3-gobtn b { font-size: 32px !important; text-shadow: 0 1px 3px rgba(20, 70, 140, .25); }
.h3-bigbtn.h3-gobtn .nw-dot { display: none !important; }
@media (max-width: 760px) { .h3-bigbtn.h3-gobtn { padding: 18px 20px !important; } .h3-bigbtn.h3-gobtn b { font-size: 28px !important; } }
/* главная (проба): плашки «Онлайн-урок · Пособия · Быстрый старт» пока спрятаны */
.h3-hero .h3-cta { display: none !important; }
/* подпись под логотипом «Родной язык, культура и обычаи» — тем же красным, что «БРАВО» */
header .logo small { color: #f4301f !important; }
/* ===== главная, эксперимент: шапка точно как в разделах (логотип, праздник, аватар на тех же местах).
   «Подписка · Уроки · Пособия» — шрифтом как «Покров», только серые, на высоте строки разделов;
   картинка начинается там же, где в разделах первая плашка темы ===== */
body.h3-on header .bar { position: relative; }
body.h3-on header .topnav { display: flex !important; visibility: visible !important; opacity: 1 !important; position: absolute !important; left: 50% !important; top: calc(100% + 52px) !important; bottom: auto !important;
  transform: translate(-50%, -50%) !important; gap: 34px; margin: 0 !important; z-index: 5; }
body.h3-on header .topnav a { opacity: 1 !important; visibility: visible !important; color: #8a7d76 !important; font-size: 19px !important; font-weight: 600 !important; padding: 0 !important; background: none !important; }
body.h3-on header .topnav a:hover { color: #4a3e3a !important; }
body.h3-on header .topnav a + a::before { display: none !important; }
body.h3-on .h3-hero { margin-top: 0 !important; }
body.h3-on .h3-bigbtn.h3-gobtn { margin-top: -84px; z-index: 3; }
@media (max-width: 900px) { body.h3-on header .topnav { top: calc(100% + 70px) !important; } }
@media (max-width: 760px) { body.h3-on header .topnav { display: none !important; } body.h3-on .h3-hero { margin-top: 0 !important; } body.h3-on .h3-bigbtn.h3-gobtn { margin-top: -40px; } }
/* «Подписка · Уроки · Пособия» — только на главной; в разделах их нет совсем */
body:not(.h3-on) header .topnav { display: none !important; }
/* стрелка «Наверх» в самом низу разделов */
.view .to-top { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 22px auto 60px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: #fff; color: var(--tc, #45bcc0); box-shadow: 0 0 0 4px rgba(255, 255, 255, .7), 0 10px 22px -12px rgba(92, 78, 66, .45); transition: transform .18s ease, box-shadow .18s ease; }
.view .to-top svg { width: 26px; height: 26px; transition: transform .18s ease; }
.view .to-top:hover { transform: translateY(-3px); box-shadow: 0 0 0 4px rgba(255, 255, 255, .85), 0 14px 26px -12px rgba(92, 78, 66, .5); }
.view .to-top:hover svg { transform: translateY(-2px); }
/* активная плашка «Пособия / Книги / Аудио» остаётся белой, как неактивные; только слово становится насыщенным — того же цвета, что название раздела */
.sec-tabs .sec-pill[data-sub="exercises"], .sec-tabs .sec-pill:not([data-sub]) { --tc: #2fa8ac; }
.sec-tabs .sec-pill[data-sub="read"] { --tc: #2b84d0; }
.sec-tabs .sec-pill[data-sub="music"] { --tc: #8a70d6; }
.sec-tabs .sec-pill.on, .sec-tabs .sec-pill.on:hover { background: rgba(255, 255, 255, .7) !important; color: var(--tc) !important; opacity: 1 !important; filter: none !important; }
.sec-tabs .sec-pill.on:hover { background: #fff !important; }
/* копилка светиков плывёт вместе с экраном (справа вверху, поверх страницы) */
.sec-tabs .svw.svw-float, .sec-tabs .svw.svw-float.svw-fix { position: fixed !important; top: 16px !important; right: var(--fr, 24px) !important; translate: none !important; margin: 0 !important; z-index: 60;
  background: #fffdf8; border-style: solid; border-color: rgba(226, 216, 200, .9); box-shadow: 0 10px 24px -14px rgba(120, 90, 30, .55); }
@media (max-width: 760px) { .sec-tabs .svw.svw-float, .sec-tabs .svw.svw-float.svw-fix { top: 10px !important; } }
/* меню лежит прямо на картинке: мягкое светлое свечение, чтобы читалось на небе */
body.h3-on header .topnav a { text-shadow: 0 0 6px rgba(255, 255, 255, .95), 0 0 14px rgba(255, 255, 255, .8); }
/* строка разделов по центру над плашками; копилка светиков — на одной линии с плашками «Пособия / Книги / Аудио»
   и той же высоты, растёт влево под количество цифр */
.sec-tabs { justify-content: center !important; flex-wrap: wrap; }
@media (min-width: 761px) {
  .sec-tabs .svw:not(.svw-float) { top: calc(50% - 5px) !important; }
  .sec-tabs .svw { height: 36px !important; }
}
/* проба: «Пособия / Книги / Аудио» белыми буквами на плашке цвета своего раздела */
.sec-tabs .sec-pill, .sec-tabs .sec-pill.on, .sec-tabs .sec-pill:hover, .sec-tabs .sec-pill.on:hover { background: var(--tc) !important; color: #fff !important; }
/* разделы без шапки; домик «на главную» слева в строке разделов — в том же бледном стиле, что копилка светиков */
.sec-tabs .sec-home { display: none; }
body.sec-page .sec-tabs .sec-home { display: inline-flex; align-items: center; justify-content: center; position: absolute; left: 0; top: calc(50% - 5px); translate: 0 -50%;
  height: 36px; width: 52px; border-radius: 30px; background: #faf7f1; border: 1px dashed #e2d8c8; color: #a3958c; text-decoration: none; transition: color .2s, background .2s; }
body.sec-page .sec-tabs .sec-home svg { width: 22px; height: 22px; }
body.sec-page .sec-tabs .sec-home:hover { color: #6e625c; background: #fff; }
@media (max-width: 760px) { body.sec-page .sec-tabs .sec-home { top: auto; bottom: 0; translate: none; height: 34px; } }
/* копилка светиков всегда в одном виде — белая плашка с ровной обводкой (как когда она едет с экраном);
   домик «на главную» — такая же белая плашка */
.sec-tabs .svw, .sec-tabs .svw.svw-float { background: #fffdf8 !important; border: 1px solid rgba(226, 216, 200, .9) !important; box-shadow: 0 10px 24px -14px rgba(120, 90, 30, .55) !important; }
body.sec-page .sec-tabs .sec-home { background: #fffdf8 !important; border: 1px solid rgba(226, 216, 200, .9) !important; box-shadow: 0 10px 24px -14px rgba(120, 90, 30, .55) !important; color: #8a7d76; }
/* домик «на главную» — сама плашка в форме домика, без круглой подложки */
body.sec-page .sec-tabs .sec-home { width: 44px !important; height: 40px !important; background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; filter: drop-shadow(0 8px 10px rgba(120, 90, 30, .22)); transition: transform .18s ease; }
body.sec-page .sec-tabs .sec-home svg { width: 44px !important; height: 40px !important; }
body.sec-page .sec-tabs .sec-home:hover { transform: translateY(-2px); background: none !important; }
/* домик не выше копилки светиков; тень мягкая и короткая, чтобы не обрезалась */
body.sec-page .sec-tabs .sec-home { width: 40px !important; height: 36px !important; filter: drop-shadow(0 4px 5px rgba(120, 90, 30, .16)) !important; }
body.sec-page .sec-tabs .sec-home svg { width: 40px !important; height: 36px !important; }
.sec-tabs .svw, .sec-tabs .svw.svw-float { box-shadow: 0 5px 12px -7px rgba(120, 90, 30, .45) !important; }
/* контейнер строки разделов обрезал тени снизу — даём им место, не сдвигая страницу */
.inner:has(> .wrap > .sec-tabs) { padding-bottom: 16px !important; }
/* номер темы: у открытой темы кружок яркий, у закрытых — нежнее */
.exgrp .crs-bn { transition: opacity .25s ease; }
.exgrp:not(.open) .crs-bn { opacity: .55; }
.exgrp:not(.open):hover .crs-bn { opacity: .85; }
/* «БРАВО» мелком в логотипе */
.logo b .logo-crayon { -webkit-text-fill-color: transparent; background: url("../img/bravo-word.webp") no-repeat var(--lw-x) var(--lw-y) / var(--lw-w) var(--lw-h); }
.logo b .logo-crayon { padding-right: 4px; margin-right: -4px; }
/* знак вопроса (и «i») в верхнем пузырьке черепашки — нашим коричневым, чтобы читался на рыжем */
.hp-cloud .hc1 { color: #4a3e3a !important; }
body.hp-ex .hp-cloud .hc1::after { color: #4a3e3a !important; }
/* пузырёк над черепашкой — нашим жёлтым; белый «?» на жёлтом не читается, поэтому знак коричневый */
.hp-cloud .hc1 { background: #f9cf45 !important; }
/* проба: белый «?» на жёлтом пузырьке */
.helper .hp-cloud .hc1, body .hp-cloud .hc1 { color: #fff !important; text-shadow: 0 1px 2px rgba(150, 100, 20, .45); }
body.hp-ex .hp-cloud .hc1::after { color: #fff !important; }
/* «Подписка · Уроки · Пособия» — белыми, выше, по центру на небе картинки */
body.h3-on header .topnav { top: calc(100% + 30px) !important; }
body.h3-on header .topnav a { color: #fff !important; text-shadow: 0 1px 2px rgba(70, 90, 140, .55), 0 0 10px rgba(90, 110, 160, .35) !important; }
body.h3-on header .topnav a:hover { color: #fff !important; text-shadow: 0 1px 2px rgba(50, 70, 120, .7), 0 0 12px rgba(70, 90, 140, .5) !important; }
@media (max-width: 900px) { body.h3-on header .topnav { top: calc(100% + 30px) !important; } }
/* «Найди ошибки · Расставь знаки · Раздели на слова · Собери текст» — в виде диктанта: большой лист, внизу «Стереть» и стрелка */
.ph-dict .ph-ov { margin: 0; border-radius: 22px; padding: 40px 48px; min-height: 280px; display: flex; align-items: center; }
.ph-dict .ph-ov .ph-txt { width: 100%; line-height: 1.6; }
.ph-dict .ph-ord { margin: 0; gap: 12px; }
.ph-dict .ph-sent { padding: 16px 26px; border-radius: 20px; }
.phd-mid.phd-hint { color: #a0938a; font-family: Rubik, sans-serif; font-size: 16px; font-weight: 400; }
@media (max-width: 760px) { .ph-dict .ph-ov { padding: 22px 20px; min-height: 200px; } .phd-mid.phd-hint { font-size: 13px; } }
/* главная: картинка с дорисованным небом сверху — выше на ~60 px, кнопка «Начать» опускается вместе с ней */
@media (min-width: 901px) { body.h3-on .h3-hero { min-height: 581px !important; height: 581px !important; background-size: cover !important; } }
@media (max-width: 900px) { body.h3-on .h3-hero { height: 62.5vw !important; min-height: 0 !important; background-size: auto 100% !important; } }
/* «Подписка · Уроки · Пособия» — чисто белые: тень только тонкая и плотная у края букв, без мутного ореола */
body.h3-on header .topnav a, body.h3-on header .topnav a:hover { color: #fff !important; -webkit-text-fill-color: #fff; font-weight: 700 !important; text-shadow: 0 1px 1px rgba(40, 60, 110, .5), 0 0 3px rgba(40, 60, 110, .28) !important; }
/* картинку снизу чуть подрезаем: масштаб прежний, просто плашка ниже не тянется */
@media (min-width: 901px) { body.h3-on .h3-hero { min-height: 545px !important; height: 545px !important; background-size: auto 581px !important; background-position: left top !important; } }
@media (max-width: 900px) { body.h3-on .h3-hero { height: 58.5vw !important; background-size: auto 62.5vw !important; background-position: left top !important; } }
/* «Начать» — на прежнем месте, хотя картинка снизу подрезана */
@media (min-width: 901px) { body.h3-on .h3-bigbtn.h3-gobtn { margin-top: -48px !important; } }
@media (max-width: 900px) and (min-width: 761px) { body.h3-on .h3-bigbtn.h3-gobtn { margin-top: calc(-84px + 4vw) !important; } }
@media (max-width: 760px) { body.h3-on .h3-bigbtn.h3-gobtn { margin-top: calc(-40px + 4vw) !important; } }
/* «Подписка · Уроки · Пособия» — синим, как кнопка «Начать», на посветлевшем небе */
body.h3-on header .topnav a, body.h3-on header .topnav a:hover { color: #3c97f8 !important; -webkit-text-fill-color: #3c97f8 !important; text-shadow: 0 0 8px rgba(255, 255, 255, .9), 0 0 2px rgba(255, 255, 255, .9) !important; }
body.h3-on header .topnav a:hover { color: #2a7fd9 !important; -webkit-text-fill-color: #2a7fd9 !important; }
/* фон главной и разделов — ровный молочный, без градиента (как низ страниц разделов) */
html, body, body.h3-on, body.sec-page { background: #fcf8f0 !important; background-image: none !important; }
/* «Подписка · Уроки · Пособия» — снова чисто белые */
body.h3-on header .topnav a, body.h3-on header .topnav a:hover { color: #fff !important; -webkit-text-fill-color: #fff !important; text-shadow: 0 1px 1px rgba(40, 60, 110, .5), 0 0 3px rgba(40, 60, 110, .28) !important; }
#v-home3 { background: transparent !important; }
/* праздник в шапке: без красной точки, «завтра / через N дней» выровнено по правому краю под названием */
header .hdr-hol .hh-dot { display: none !important; }
header .hdr-hol .hh-t { display: inline-flex !important; flex-direction: column; align-items: flex-end !important; text-align: right !important; }
/* главная: «Подписка · Уроки · Пособия» — под кнопкой «Начать», на молочном фоне, красным, не жирно */
body.h3-on header .topnav { display: none !important; }
body.h3-on .h3-big.h3-big4 { flex-direction: column !important; }
.h3-links { display: flex; justify-content: center; gap: 34px; margin-top: 26px; }
.h3-links a { color: #f4301f; font-size: 19px; font-weight: 400; text-decoration: none; transition: opacity .2s; }
.h3-links a:hover { opacity: .7; }
@media (max-width: 760px) { .h3-links { gap: 22px; margin-top: 20px; } .h3-links a { font-size: 17px; } }
/* проба: ссылки под «Начать» — бирюзовые (как «Наследие детям») и жирные */
.h3-links a { color: #45bcc0 !important; font-weight: 700 !important; }
/* ссылки под «Начать» — нашим тёмно-коричневым */
.h3-links a { color: #4a3e3a !important; }
/* главная — белый фон; «Начать» тоньше и на пару пикселей выше; ссылки под ней не жирные и шире */
html:has(body.h3-on), body.h3-on { background: #fff !important; }
body.h3-on .h3-bigbtn.h3-gobtn b { font-weight: 700 !important; -webkit-text-stroke: 0; transform: translateY(-2px); }
.h3-links { gap: 64px !important; }
.h3-links a { font-weight: 400 !important; }
@media (max-width: 760px) { .h3-links { gap: 30px !important; } }
.h3-links { transform: translateY(3px); }
/* главная: шапка, картинка и «Начать» чуть выше; ссылки, черепашка и копирайт — на своих местах */
/* главная: черепашка тоже чуть выше; копирайт остаётся на месте */
/* ===== единый вид окон: окошко черепашки-помощника и сундучок аватара =====
   один фон, одна обводка, одна тень, один крестик, одна вуаль; внутренние поля — одинаковые */
:root { --win-bg: linear-gradient(180deg, #fffdf8, #f7f0e4); --win-line: #e2d8c8; --win-shadow: 0 26px 60px -28px rgba(60, 40, 30, .5); --field-bg: rgba(255, 255, 255, .6); }
#hpPanel, .ch .ch-card { background: var(--win-bg) !important; border: 1px solid var(--win-line) !important; box-shadow: var(--win-shadow) !important; }
#hpPanel { border-radius: 26px !important; }
.ch .ch-card { border-radius: 34px !important; }
#hpClose, .ch .ch-x { background: rgba(74, 62, 58, .07) !important; color: #86776f !important; border: 0 !important; border-radius: 50% !important; box-shadow: none !important; }
#hpClose:hover, .ch .ch-x:hover { background: rgba(74, 62, 58, .13) !important; color: #4a3e3a !important; }
#hpPanel textarea, #hpPanel input, .ch .ch-side { background: var(--field-bg) !important; border: 1px solid var(--win-line) !important; }
#hpPanel textarea { border-radius: 16px !important; }
.ch .ch-side { border-radius: 24px !important; border-style: solid !important; }
.ch.on, .ch { background: rgba(255, 255, 255, .28) !important; -webkit-backdrop-filter: blur(4px) !important; backdrop-filter: blur(4px) !important; }
/* страницы «Подписка · Уроки · Пособия»: заголовок по центру экрана */
.zp-h, .pp-h { text-align: center !important; }
/* «Пособия для печати»: заголовок по центру всей страницы, а не колонки с текстом */
@media (min-width: 761px) {
  .pp-head { position: relative; }
  .pp-head .pp-h { position: absolute; left: 0; right: 0; top: 0; margin-top: 0 !important; }
  .pp-head > div:has(> .pp-h) { padding-top: 46px; }
}
/* разделы «Родной язык · Литература · Музыка»: всё содержимое уже, ближе к центру — больше воздуха по краям (и места черепашке) */
@media (min-width: 901px) {
  #v-exercises .wrap, #v-read .wrap, #v-music .wrap { max-width: 1090px !important; margin-left: auto !important; margin-right: auto !important; }
}
@media (min-width: 1140px) { .sec-tabs { padding-left: 96px !important; padding-right: 104px !important; } }
@media (min-width: 901px) and (max-width: 1139px) {
  .sec-tabs { padding-left: 64px !important; padding-right: 96px !important; }
  .sec-tabs a[data-sec], .sec-tabs span[data-sec] { font-size: 19px !important; }
  .sec-tabs .sec-pill { font-size: 14px !important; padding: 7px 14px !important; margin-left: 2px !important; }
}
/* название праздника в шапке — сочным алым, как «БРАВО», и не меняется при наведении и нажатии */
header .hdr-hol b, header .hdr-hol:hover b, header .hdr-hol:active b, header .hdr-hol:focus b, header .hdr-hol:visited b { color: #f4301f !important; -webkit-text-fill-color: #f4301f !important; filter: none !important; opacity: 1 !important; }
header .hdr-hol, header .hdr-hol:hover, header .hdr-hol:active { filter: none !important; opacity: 1 !important; }
/* копирайт + «О нас» внизу */
.flegal .fl-dot { margin: 0 8px; opacity: .5; }
.flegal a.fl-about { color: inherit; text-decoration: none; }
.flegal a.fl-about:hover { text-decoration: underline; }
/* документы на странице «О нас» */
.ab-docs-full { margin: 34px 0 60px; display: flex; flex-direction: column; gap: 10px; }
.ab-doc { background: var(--win-bg, #fffdf8); border: 1px solid #e2d8c8; border-radius: 18px; padding: 0 22px; scroll-margin-top: 20px; }
.ab-doc summary { cursor: pointer; list-style: none; padding: 16px 0; font-weight: 600; font-size: 17px; color: #4a3e3a; display: flex; justify-content: space-between; align-items: center; }
.ab-doc summary::-webkit-details-marker { display: none; }
.ab-doc summary::after { content: "›"; font-size: 22px; color: #a0938a; transition: transform .2s; }
.ab-doc[open] summary::after { transform: rotate(90deg); }
.ab-doc-b { padding: 0 0 18px; color: #6e625c; font-size: 15.5px; line-height: 1.6; }
.ab-doc-b p { margin: 0 0 10px; }
.ab-doc-b b { color: #4a3e3a; font-weight: 600; }
.ab-doc-date { color: #a0938a; font-size: 14px; }
.flegal.fl-fixed a.fl-about { display: inline !important; color: #2b2421 !important; text-decoration: none; }
.flegal.fl-fixed a.fl-about:hover { text-decoration: underline; }
.flegal.fl-fixed .fl-dot { color: #2b2421; }
.ab-docs-full { grid-column: 1 / -1; width: 100%; max-width: none; }
.ab-doc, .ab-doc-b, .ab-doc-b p { max-width: none !important; width: auto; }
.ab-doc-b p { max-width: 820px !important; }
.flegal.fl-fixed a.fl-about { pointer-events: auto !important; cursor: pointer; }
/* копирайт снова один, без «О нас» */
/* главная внизу по центру — «О нас», шрифтом как «завтра» под праздником */
.h3-links.h3-about a { font-size: 13.5px !important; font-weight: 400 !important; color: #86776f !important; }
.h3-links.h3-about a:hover { color: #4a3e3a !important; opacity: 1; }
/* «О нас» рядом с копирайтом — только на главной */
body:not(.h3-on) .flegal.fl-fixed .fl-dot, body:not(.h3-on) .flegal.fl-fixed a.fl-about { display: none !important; }
/* «Подписка · Уроки · Пособия» на главной — внизу, тёмно-коричневые, не жирные (на картинке их нет) */
body.h3-on header .topnav { display: none !important; }
.h3-links a { font-size: 19px !important; font-weight: 400 !important; color: #4a3e3a !important; }
/* разделы: шапка сверху, как на всех экранах; домика нет */
.sec-tabs .sec-home, body.sec-page .sec-tabs .sec-home { display: none !important; }
/* «О нас»: контакты под текстом слева */
.ab-contacts { margin-top: 26px; }
.ab-contacts h4 { margin: 0 0 4px; font-size: 16px; font-weight: 600; color: #4a3e3a; }
.ab-contacts p { margin: 0 0 6px; color: #86776f; font-size: 15px; }
.ab-contacts .ab-mail { margin: 2px 0 10px; }
/* «О нас»: реквизиты и документы — узкие белые плашки, как темы в разделах, без градиента, близко друг к другу */
.ab-docs-full { max-width: 1024px; margin: 40px auto 70px !important; gap: 10px !important; }
.ab-doc { background: #fff !important; border: 1px solid #efe9df !important; border-radius: 18px !important; box-shadow: 0 10px 24px -20px rgba(92, 78, 66, .55) !important; padding: 0 20px !important; }
.ab-doc summary { padding: 18px 0 !important; font-size: 18px !important; font-weight: 400 !important; color: #4a3e3a !important; }
.ab-doc summary::after { font-size: 20px; color: #a0938a; }
.ab-docs-full > .ab-doc { margin: 0 !important; }
@media (min-width: 761px) { .sec-tabs .svw:not(.svw-float) { right: var(--svr, 0) !important; } }
/* проба: белая плашка справа на картинке, уходит за край экрана; на ней «Подписка · Уроки · Пособия» */
.h3-tab { display: none; }
body.h3-on .h3-tab { display: flex; position: absolute; z-index: 4; top: 30px; right: -60px; width: calc(30vw + 60px); max-width: 560px; height: 58px;
  align-items: center; justify-content: flex-start; gap: 34px; padding: 0 60px 0 34px; box-sizing: border-box; background: #fff; border-radius: 999px; border: 0; box-shadow: none; }
body.h3-on .h3-tab a { color: #4a3e3a; font-size: 18px; font-weight: 400; text-decoration: none; white-space: nowrap; transition: opacity .2s; }
body.h3-on .h3-tab a:hover { opacity: .65; }
body.h3-on .h3-links { display: none !important; }
@media (max-width: 760px) { body.h3-on .h3-tab { top: 14px; height: 44px; width: auto; gap: 18px; padding: 0 70px 0 20px; } body.h3-on .h3-tab a { font-size: 15px; } }
@media (max-width: 760px) { body.h3-on .h3-tab { gap: 14px; padding: 0 74px 0 18px; } body.h3-on .h3-tab a { font-size: 14px; } }
/* обложки пособий из макетов: картинка с названием и цветным квадратом; поверх — рисунок, прошивка, логотип, «БРАВО» */
.pr-cv.wbc.wbc-img { background-size: 100% 100% !important; background-repeat: no-repeat !important; }
.pr-cv.wbc.wbc-img .wbc-t { display: none !important; }
.pr-cv.wbc.wbc-img .wbc-sq { background: transparent !important; }
/* обложки из макетов: картинка чуть меньше и по центру, чтобы название не выходило за край; рисунок — внизу квадрата, под названием */
.pr-cv.wbc.wbc-img { background-size: 90% 90% !important; background-position: 50% 6% !important; }
.pr-cv.wbc.wbc-img .wbc-sq { left: 24.2% !important; right: 24.2% !important; top: 30.3% !important; bottom: 22.5% !important; display: grid !important; place-items: end center !important; padding-bottom: 5% !important; }
.pr-cv.wbc.wbc-img .wbc-pic { width: 52% !important; margin-top: 0 !important; }
#prShelf .pr-cv.wbc.wbc-img .wbc-glyph { font-size: 30px !important; margin-bottom: 0 !important; }
#prShelf .pr-cv.wbc.wbc-img .wbc-glyph.sm { font-size: 23px !important; }
/* на обложках пособий — логотип-черепашка в правом верхнем углу вместо трёх шариков */
.wbc-logo { right: 7px !important; top: 6px !important; width: 30px !important; height: 18px !important; background: url("../img/nb/turtle-logo.webp") no-repeat center / contain; }
.wbc-logo b { display: none !important; }
.wbc-logo { right: 9px !important; top: 8px !important; width: 34px !important; height: 18px !important; }
/* обложки: логотип и «БРАВО» поменьше, «БРАВО» красное */
.wbc-logo { right: 9px !important; top: 9px !important; width: 25px !important; height: 13px !important; }
.wbc-br, #prShelf .wbc-br { font-size: 7px !important; color: #f4301f !important; letter-spacing: .12em !important; bottom: 8px !important; }
/* «Мои пособия» крупнее; черепашка-логотип чуть выше */
@media (min-width: 761px) {
  #prShelf .shelf-row .book.pr-nb.wbc-nb { width: 196px !important; height: 222px !important; }
  #prShelf .pr-nb .pr-cv.wbc { height: 196px !important; }
  #prShelf .books.sc-track { gap: 56px !important; }
  #prShelf .shelf.sc-box { max-width: 952px !important; }
  #prShelf .wbc-glyph { font-size: 36px !important; } #prShelf .wbc-glyph.sm { font-size: 28px !important; }
  #prShelf .wbc-br { font-size: 8.5px !important; bottom: 10px !important; }
  #prShelf .wbc-logo { width: 30px !important; height: 15px !important; right: 11px !important; top: 8px !important; }
}
@media (max-width: 760px) { #prShelf .wbc-logo { top: 6px !important; } }
@media (min-width: 761px) { #prShelf .shelf.sc-box { width: min(100%, 952px) !important; } }
/* «Мои пособия» как печатные тетради: тонкая тетрадь (узкая тень у корешка), те же скругления и тень,
   маленькие логотип и «БРАВО», белая каёмка сверху и справа, чтобы край не сливался с фоном */
#prShelf .pr-nb .pr-cv.wbc { border-radius: 3px 10px 10px 3px !important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04), inset 0 2px 0 #fff, inset -2px 0 0 #fff, 0 14px 22px -12px rgba(92, 78, 66, .55) !important; }
#prShelf .pr-nb .pr-cv.wbc::before { width: 4px !important; background: linear-gradient(90deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, 0)) !important; }
@media (min-width: 761px) {
  #prShelf .wbc-logo { width: 19px !important; height: 10px !important; right: 12px !important; top: 9px !important; }
  #prShelf .wbc-br { font-size: 7px !important; }
}
@media (max-width: 760px) { #prShelf .wbc-logo { width: 15px !important; height: 8px !important; } #prShelf .wbc-br { font-size: 6px !important; } }
/* обложки: «БРАВО» и черепашка крупнее; прошивка шире — верхний стежок выше, нижний ниже, средний на месте */
@media (min-width: 761px) {
  #prShelf .wbc-logo { width: 28px !important; height: 14px !important; right: 11px !important; top: 8px !important; }
  #prShelf .wbc-br { font-size: 9px !important; bottom: 10px !important; }
}
@media (max-width: 760px) { #prShelf .wbc-logo { width: 21px !important; height: 11px !important; } #prShelf .wbc-br { font-size: 7.5px !important; } }
#prShelf .wbc-st { padding: 7% 0 !important; justify-content: space-between !important; }
/* прошивка на обложках: стежки шире; на печатных пособиях — так же, как на платформе (верхний выше, нижний ниже) */
#prShelf .wbc-st { width: 4px !important; }
#prShelf .wbc-st b { width: 4px !important; height: 16px !important; }
.wb-wrap .wb-book::after { width: 4px !important;
  background: linear-gradient(var(--st), var(--st)) 0 9% / 4px 16px no-repeat, linear-gradient(var(--st), var(--st)) 0 50% / 4px 16px no-repeat, linear-gradient(var(--st), var(--st)) 0 91% / 4px 16px no-repeat !important; }
.wb-wrap .wb-book img { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04), 0 14px 22px -12px rgba(92, 78, 66, .55) !important; outline: 2px solid #fff; outline-offset: -2px; clip-path: inset(0 0 -40px 0); }
.wb-wrap .wb-book::after { display: none !important; }
.wb-wrap .wb-book .wb-st { left: 3px !important; width: 4px !important; padding: 7% 0 !important; justify-content: space-between !important; }
.wb-wrap .wb-book .wb-st b { width: 4px !important; height: 16px !important; }
/* ===== обложки «Мои пособия»: доводка ===== */
/* прошивка: стежки узкие, но длинные — верхний растёт вниз, нижний вверх, средний в обе стороны */
#prShelf .wbc-st, .wb-wrap .wb-book .wb-st { width: 2.5px !important; }
#prShelf .wbc-st b, .wb-wrap .wb-book .wb-st b { width: 2.5px !important; height: 30px !important; }
/* тень чуть сильнее и видна и сверху — тетрадь лежит на столе */
#prShelf .pr-nb .pr-cv.wbc { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04), inset 0 2px 0 #fff, inset -2px 0 0 #fff, 0 16px 24px -12px rgba(92, 78, 66, .65), 0 -3px 12px -5px rgba(92, 78, 66, .28) !important; }
.wb-wrap .wb-book img { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04), 0 16px 24px -12px rgba(92, 78, 66, .65), 0 -3px 12px -5px rgba(92, 78, 66, .28) !important; clip-path: none !important; }
/* черепашка чуть левее */
@media (min-width: 761px) { #prShelf .wbc-logo { right: 17px !important; } }
@media (max-width: 760px) { #prShelf .wbc-logo { right: 13px !important; } }
/* рисунки под названием выше; сердечки крупнее; буквы и слоги прописью крупнее и выше */
#prShelf .pr-cv.wbc.wbc-img .wbc-sq { padding-bottom: 11% !important; }
#prShelf .pr-nb[data-nb="figs"] .wbc-pic, #prShelf .pr-nb[data-nb="sym"] .wbc-pic { width: 72% !important; }
#prShelf .pr-nb[data-nb="dots"] .wbc-pic { width: 60% !important; }
@media (min-width: 761px) {
  #prShelf .pr-cv.wbc.wbc-img .wbc-glyph { font-size: 44px !important; line-height: .9; }
  #prShelf .pr-cv.wbc.wbc-img .wbc-glyph.sm { font-size: 34px !important; }
  #prShelf .pr-nb[data-nb="words"] .wbc-glyph { font-size: 38px !important; }
}
/* стрелки листания всегда поверх тетрадок и их прошивки */
#prShelf .sc-nav, .wb-wrap .sc-nav, .sc-box > .sc-nav { z-index: 20 !important; }
#prShelf .sc-nav button, .wb-wrap .sc-nav button, .sc-box > .sc-nav button { position: relative; z-index: 20 !important; }
/* ===== обложки «Мои пособия»: ровные подписи прописью, рисунки ниже, тень мягче, прошивка тоньше ===== */
#prShelf .pr-cv.wbc.wbc-img .wbc-glyph, #prShelf .pr-cv.wbc.wbc-img .wbc-glyph.sm, #prShelf .pr-nb[data-nb="words"] .wbc-glyph { font-size: 31px !important; line-height: 1 !important; }
#prShelf .pr-cv.wbc.wbc-img .wbc-sq { padding-bottom: 4% !important; }
#prShelf .pr-nb[data-nb="lines"] .pr-cv.wbc.wbc-img .wbc-sq { padding-bottom: 6% !important; }
#prShelf .pr-nb:is([data-nb="figs"],[data-nb="sym"]) .pr-cv.wbc.wbc-img .wbc-sq { padding-bottom: 9% !important; }
#prShelf .pr-nb[data-nb="figs"] .wbc-pic polyline, #prShelf .pr-nb[data-nb="sym"] .wbc-pic polyline { stroke-width: 2.6px !important; }
#prShelf .pr-nb[data-nb="sym"] .wbc-pic polyline[stroke-dasharray] { stroke-width: 2.2px !important; }
#prShelf .pr-nb .pr-cv.wbc { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04), inset 0 2px 0 #fff, inset -2px 0 0 #fff, 0 14px 22px -14px rgba(92, 78, 66, .42), 0 -4px 16px -6px rgba(92, 78, 66, .3) !important; }
.wb-wrap .wb-book img { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04), 0 14px 22px -14px rgba(92, 78, 66, .42), 0 -4px 16px -6px rgba(92, 78, 66, .3) !important; }
#prShelf .wbc-st, .wb-wrap .wb-book .wb-st, #prShelf .wbc-st b, .wb-wrap .wb-book .wb-st b { width: 1.6px !important; }
@media (min-width: 761px) { #prShelf .wbc-logo { width: 23px !important; height: 12px !important; right: 17px !important; top: 9px !important; } }
@media (max-width: 760px) { #prShelf .wbc-logo { width: 17px !important; height: 9px !important; } #prShelf .pr-cv.wbc.wbc-img .wbc-glyph, #prShelf .pr-cv.wbc.wbc-img .wbc-glyph.sm, #prShelf .pr-nb[data-nb="words"] .wbc-glyph { font-size: 19px !important; } }
#prShelf .pr-nb:is([data-nb="up"],[data-nb="low"],[data-nb="free"]) .pr-cv.wbc.wbc-img .wbc-sq { padding-bottom: 8% !important; }
#prShelf .pr-nb:is([data-nb="syl"],[data-nb="words"]) .pr-cv.wbc.wbc-img .wbc-sq { padding-bottom: 13% !important; }
/* обложки: подписи прописью крупнее; всё (кроме сердечек) на одной высоте — как «я сам» */
@media (min-width: 761px) { #prShelf .pr-cv.wbc.wbc-img .wbc-glyph, #prShelf .pr-cv.wbc.wbc-img .wbc-glyph.sm, #prShelf .pr-nb[data-nb="words"] .pr-cv .wbc-glyph { font-size: 42px !important; } }
@media (max-width: 760px) { #prShelf .pr-cv.wbc.wbc-img .wbc-glyph, #prShelf .pr-cv.wbc.wbc-img .wbc-glyph.sm, #prShelf .pr-nb[data-nb="words"] .pr-cv .wbc-glyph { font-size: 26px !important; } }
#prShelf .pr-nb:is([data-nb="up"],[data-nb="low"],[data-nb="free"],[data-nb="syl"],[data-nb="words"]) .pr-cv.wbc.wbc-img .wbc-sq { padding-bottom: 7% !important; }
#prShelf .pr-nb:is([data-nb="lines"],[data-nb="waves"],[data-nb="dor"],[data-nb="pics"],[data-nb="dots"]) .pr-cv.wbc.wbc-img .wbc-sq { padding-bottom: 11% !important; }
@media (min-width: 761px) { #prShelf .pr-cv.wbc.wbc-img .wbc-glyph, #prShelf .pr-cv.wbc.wbc-img .wbc-glyph.sm, #prShelf .pr-nb[data-nb="words"] .pr-cv .wbc-glyph { font-size: 37px !important; } }
/* рисунки на обложках чуть ниже; точки звезды тоньше */
#prShelf .pr-nb:is([data-nb="lines"],[data-nb="waves"],[data-nb="dor"],[data-nb="pics"],[data-nb="dots"]) .pr-cv.wbc.wbc-img .wbc-sq { padding-bottom: 8.5% !important; }
#prShelf .pr-nb[data-nb="dots"] .wbc-pic circle { r: 2.4px; }
/* окно тетради: без строки задания и «Молодец!»; «Стереть» — просто серым текстом; подсказка цветом тона, без плашки */
.pr-play .pr-ok { display: none !important; }
.pr-play .pr-clear { background: none !important; padding: 11px 6px !important; color: #a0938a !important; font-weight: 500; }
.pr-play .pr-clear:hover { color: #4a3e3a !important; }
.pr-play .pr-lift { background: none !important; box-shadow: none !important; padding: 0 !important; color: color-mix(in srgb, var(--nc, #a8650f) 55%, #3b302c) !important; font-weight: 600; }
/* победный экран тетради — как в упражнениях, вместо «N из N» — светики */
.pr-play .pr-done { padding-top: 6vh; }
.pr-svwin { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 22px 0 30px; }
.pr-svn { font-size: 46px; font-weight: 700; color: #f2a516; line-height: 1; }
.pr-svi { width: 54px; height: 54px; filter: drop-shadow(0 6px 10px rgba(242, 154, 23, .35)); animation: prSvPop .7s cubic-bezier(.3, 1.6, .5, 1) both .15s; }
.pr-svw { font-size: 22px; font-weight: 600; color: #e0960e; }
@keyframes prSvPop { from { transform: scale(.3) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
/* обложки: буквы прописью жирнее, как линии рисунков */
#prShelf .pr-cv.wbc.wbc-img .wbc-glyph { -webkit-text-stroke: 1.6px #fff; paint-order: stroke fill; }
#prShelf .pr-cv.wbc.wbc-img .wbc-glyph { -webkit-text-stroke: .8px #fff !important; }
/* победный экран тетради: подзаголовок тёмный и ближе; светик плоский, повыше; «светиков» по линии с «+5» */
.pr-play .pr-done .res-msg { margin-bottom: 2px; }
.pr-play .pr-done .pr-sub { color: #4a3e3a !important; font-size: 18px; margin-top: 0; }
.pr-svwin { align-items: baseline !important; }
.pr-svi { align-self: center; transform: translateY(-8px); filter: none !important; animation-name: prSvPop2 !important; }
@keyframes prSvPop2 { from { transform: translateY(-8px) scale(.3) rotate(-20deg); opacity: 0; } to { transform: translateY(-8px); opacity: 1; } }
/* «+5» и светик с глазками — крупно, по центру; светик подпрыгивает и моргает */
.pr-svwin { align-items: center !important; gap: 14px !important; margin: 26px 0 34px !important; }
.pr-svn { font-size: 64px !important; }
.pr-svi { width: 78px !important; height: 78px !important; transform: none; animation: prSvIn .7s cubic-bezier(.3, 1.6, .5, 1) both .15s, prSvHop 1.6s ease-in-out 1s infinite !important; transform-origin: 50% 100%; }
.pr-sve { transform-box: fill-box; transform-origin: center; animation: prSvBlink 3.2s ease-in-out 1.4s infinite; }
@keyframes prSvIn { from { transform: scale(.3) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes prSvHop { 0%, 55%, 100% { transform: translateY(0) scale(1, 1); } 62% { transform: translateY(0) scale(1.1, .9); } 75% { transform: translateY(-14px) scale(.95, 1.06); } 88% { transform: translateY(0) scale(1.06, .94); } }
@keyframes prSvBlink { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.15); } }
/* «Родной язык»: больше воздуха над «Мои пособия»; подпись про PDF ближе к тетрадкам, дальше от упражнений;
   промежутки между плашками упражнений — как между темами */
#prShelf { margin-top: 44px !important; }
#prShelf .pr-pdf { margin-top: -22px !important; margin-bottom: 46px !important; }
#prxBox .ph-list { gap: 8px !important; }
/* один и тот же промежуток между плашками во всех разделах (темы, книги, аудио, упражнения) — 8px */
.exlist.rd-acc { gap: 0 8px !important; }
.exlist.rd-acc > .exgrp { margin-bottom: 8px !important; }
/* «Мои пособия · Мои книги · Мои аудио» — в цвет своего раздела */
#v-exercises .shelf-label { color: #2fa8ac !important; }
#v-read .shelf-label { color: #2b84d0 !important; }
#v-music .shelf-label { color: #8a70d6 !important; }

/* картинка урока маленькая, справа над звёздами; «Играть» слева от звёзд (talk.br) */
.lsn-stars .lsn-brimg { position: absolute; right: -125px; bottom: calc(100% + 2px); width: 170px; height: auto; pointer-events: none; }
@media (min-width: 761px) {
  .lsn-d-br .lsn-stars .ls-cta { left: auto !important; right: 100% !important; top: -2px !important; bottom: auto !important; margin: 0 8px 0 0 !important; padding: 0 66px 0 0 !important; transform: rotate(-7deg) !important; }
  .lsn-d-br .lsn-stars .ls-arr { left: auto !important; right: 0 !important; top: 22px !important; bottom: auto !important; transform: rotate(-6deg) !important; }
}
@media (max-width: 760px) { .lsn-stars .lsn-brimg { width: 100px; right: auto; left: 0; bottom: calc(100% + 4px); } }
@media (min-width: 761px) and (max-width: 1100px) {
  .lsn-d-br .lsn-stars .ls-cta { right: auto !important; left: -40px !important; top: auto !important; bottom: 100% !important; margin: 0 0 -6px !important; padding: 0 60px 0 0 !important; font-size: 42px; }
  .lsn-d-br .lsn-stars .ls-arr { right: 0 !important; left: auto !important; top: 26px !important; transform: rotate(40deg) !important; width: 54px; }
}
/* занавес в «Что такое опера»: низ на месте, верх намного выше — до шапки */
@media (min-width: 761px) { .lsn-flow-wrap > .lsn-wrapimg.lsn-curtain:first-child { height: 600px; margin-top: -135px; position: relative; top: 8px; margin-left: -30px; } }
/* декорации урока «Художники в театре»: гирлянда со звёздами и облаком, подвес справа, сундук со звёздами */
.lsn-decor { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.lsn-decor .lsn-dc { position: absolute; height: auto; }
.lsn-dc-garland { left: 60px; top: 54px; width: 300px; }
.lsn-dc-hang { right: 22px; top: 54px; width: 92px; }
.lsn-dc-chest { left: 70px; top: 410px; width: 260px; }
@media (max-width: 760px) { .lsn-decor { display: none; } }
/* «Полёт шмеля»: шмель летает по петлям, пунктир рисуется за ним и тает (js/82-bee.js), крылья машут */
.lsn-bee { position: absolute; left: 50px; top: 150px; width: 300px; height: 480px; }
.lsn-bee svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lsn-bee .lsn-bee-route { fill: none; stroke: none; }
.lsn-bee circle { fill: #6f5a4a; }
.lsn-bee-fly { position: absolute; left: 0; top: 0; width: 58px; aspect-ratio: 240 / 192; will-change: transform; transform: translate(150px, 450px) translate(-50%, -50%); }
.lsn-bee-fly img { position: absolute; inset: 0; width: 100%; height: 100%; }
.lsn-bee-fly .bw { transform-origin: 51% 43%; animation: beeFlap .11s ease-in-out infinite alternate; }
@keyframes beeFlap { from { transform: rotate(-16deg) scaleY(.7); } to { transform: rotate(6deg) scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .lsn-bee-fly .bw { animation: none; } }
#prShelf .pr-pdf { position: relative; z-index: 30; }
/* обложки пособий для печати — как «Мои пособия»: белый край сверху и справа, тонкая прошивка, черепашка без букв, красное «БРАВО» */
.wb-book, .fl-pages, .fl-th { container-type: inline-size; }
.wb-book::after { display: none !important; }
.wb-book img { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04), inset 0 2px 0 #fff, inset -2px 0 0 #fff, 0 14px 22px -14px rgba(92, 78, 66, .42), 0 -4px 16px -6px rgba(92, 78, 66, .3) !important; }
.wbp-logo { position: absolute; z-index: 4; right: 8.7%; top: 4.6%; width: 11.7%; height: 6.1%; background: url("../img/nb/turtle-logo.webp") no-repeat center / contain; pointer-events: none; }
.wbp-br { position: absolute; z-index: 4; left: 0; right: 0; bottom: 5.1%; text-align: center; font: 700 4.6cqw/1.5 Rubik, sans-serif; letter-spacing: .55cqw; color: #f4301f; pointer-events: none; }
.wbp-edge { position: absolute; z-index: 3; inset: 0; border-radius: 3px 10px 10px 3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04), inset 0 2px 0 #fff, inset -2px 0 0 #fff; pointer-events: none; }
.fl-pages .wbp-edge { border-radius: inherit; }
/* практика «Родного языка»: условие задания наверху тёмно-коричневым, как во всех упражнениях */
.phd-task { font-family: Rubik, Nunito, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.3; color: #2f2a2a; margin: 6px 0 14px; }
@media (max-width: 760px) { .phd-task { font-size: 19px; margin: 4px 0 10px; } }
/* «Стереть» — везде просто текстом на фоне, без белой плашки (как в «Моих пособиях») */
.phd-clear, .ph-clear, .tr-clear { background: none !important; box-shadow: none !important; padding: 11px 6px !important; color: #a0938a !important; font-weight: 500 !important; }
.phd-clear:hover, .ph-clear:hover, .tr-clear:hover { color: #4a3e3a !important; }
/* верно — лист мягко обводится зелёным, без надписей */
.ph-body.ok > .ph-ov { box-shadow: 0 0 0 3px rgba(95, 174, 87, .5), 0 14px 30px -22px rgba(74, 62, 58, .6) !important; }
.ph-body .ph-sent.ok { box-shadow: 0 0 0 3px rgba(95, 174, 87, .5), 0 10px 24px -20px rgba(74, 62, 58, .5) !important; }
.ph-body .ph-sent.bad { box-shadow: 0 0 0 2px rgba(228, 53, 43, .35) !important; }
.ph-dict .ph-after:empty { display: none; }
/* правила — голубые плашки у стрелки, на одной линии со «Стереть» */
.phd-rules { position: absolute; right: 68px; top: 50%; translate: 0 -50%; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; max-width: 70%; }
.phd-rules .ph-rule { background: #e1effb; border: 0; color: #2b6fb0; font-size: 15px; font-weight: 500; padding: 9px 16px; border-radius: 20px; }
.phd-rules .ph-rule::after { content: none; }
.phd-rules .ph-rule:hover { background: #d3e7f8; }
@media (max-width: 760px) { .phd-rules { right: 58px; max-width: 64%; } .phd-rules .ph-rule { font-size: 12px; padding: 7px 11px; } }
/* «Найди ошибки»: ребёнок зачёркивает слово, его черта остаётся; правильное слово — сверху, предложение не двигается */
.ph-ov-err .ph-txt { row-gap: .75em; padding-top: .55em; }
.ph-ov-err .ph-w { position: relative; border-color: transparent !important; }
.ph-fixw { position: absolute; left: 50%; bottom: 88%; translate: -50% 0; font-style: normal; font-size: .6em !important; line-height: 1; white-space: nowrap; color: #2f7d3d !important; pointer-events: none; }
.ph-w.missed .ph-fixw { color: #d2552c !important; }
/* пусто нажали стрелку — лист чуть качнётся */
.ph-nudge { animation: phNudge .38s ease; }
@keyframes phNudge { 20% { translate: -6px 0; } 45% { translate: 5px 0; } 70% { translate: -3px 0; } 100% { translate: 0 0; } }
/* «О нас»: плашки документов — как узкие плашки тем (высота 64px, промежуток 8px) */
.ab-docs-full .ab-doc summary { padding: 17px 0 !important; line-height: 27.9px !important; }
.ab-docs-full .ab-doc { margin: 0 0 8px !important; }
.ab-docs-full { display: block !important; gap: 0 !important; }
/* окно пособия PDF — того же размера и вида, что окно аватарки (ch-card): 1040×664, кремовый градиент, тонкая рамка, скругление 34px */
.wb-flip { background: rgba(255, 255, 255, .28) !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; padding: 16px !important; }
.wb-flipbox { width: min(1040px, calc(100vw - 32px)) !important; min-height: min(664px, calc(100vh - 32px)); box-sizing: border-box; padding: 34px 56px !important; border-radius: 34px !important; background: var(--win-bg) !important; border: 1px solid var(--win-line) !important; box-shadow: var(--win-shadow) !important; display: flex; align-items: center; justify-content: center; }
.wb-flipbox #wbFlipBody { width: 100%; gap: 48px; }
@media (max-width: 760px) { .wb-flipbox { min-height: 0; padding: 18px 14px 20px !important; border-radius: 26px !important; } }
/* пособие в окне — крупно: почти во всю высоту окна, чтобы хорошо читалось и содержание */
@media (min-width: 861px) {
  .wb-flipbox .fl-pages { width: min(566px, calc(100vh - 130px)); height: min(566px, calc(100vh - 130px)); }
  .wb-flipbox { padding: 34px 44px !important; }
  .wb-flipbox #wbFlipBody { gap: 40px; }
}
@media (max-width: 860px) { .wb-flipbox .fl-pages { width: min(560px, calc(100vw - 60px)); height: min(560px, calc(100vw - 60px)); } }
/* крестик окна пособия — как у окна аватарки (ch-x) */
.wb-flip .zp-x { top: 16px !important; right: 16px !important; width: 40px !important; height: 40px !important; border-radius: 50% !important; background: rgba(74, 62, 58, .07) !important; color: #86776f !important; font-size: 17px !important; line-height: 26px !important; border: 0 !important; box-shadow: none !important; }
.wb-flip .zp-x:hover { background: rgba(74, 62, 58, .13) !important; color: #4a3e3a !important; }
/* письмо «Дорогой друг» в пособии: кремовый лист, тонкая рамка, текст как на печатной машинке, подпись и черепашка */
.fl-letter { display: block; background: #fdf9f3; padding: 5.5% 7%; box-sizing: border-box; }
.fl-lt-box { position: relative; display: flex; flex-direction: column; height: 100%; box-sizing: border-box; border: 1.5px solid #c9bdb2; border-radius: 3.5cqw; padding: 4cqw 4.5cqw 5.5cqw; text-align: justify; overflow: hidden; font-family: "Courier Prime", "Courier New", "PT Mono", monospace; color: #8a3b3b; font-size: 2.05cqw; line-height: 1.6; }
.fl-lt-p { display: block; margin: 0 0 .9em; hyphens: auto; }
.fl-lt-gap { min-height: .4em; }
.fl-lt-gap { flex: 1; }
.fl-lt-sign { display: block; text-align: right; margin-right: 1em; }
.fl-lt-logo { position: absolute; right: 2.2cqw; bottom: -0.3cqw; width: 8cqw; height: 4.2cqw; background: #fdf9f3 url("../img/nb/turtle-logo.webp") no-repeat center / contain; }
/* «Пишу сам»: образец — посередине, тонко, как слово в упражнениях «Родного языка» (ex-q ex-w) */
.pr-play .pr-model { text-align: center !important; font-size: 30px !important; font-weight: 300 !important; text-transform: none !important; font-variant: normal !important; font-family: Rubik, Nunito, sans-serif !important; color: var(--ac, #2fa8ac) !important; letter-spacing: 0 !important; margin: 4px 0 18px !important; }
@media (max-width: 760px) { .pr-play .pr-model { font-size: 26px !important; } }
/* строчка про PDF — подальше от полки, чтобы не задеть тетрадку */
#prShelf .pr-pdf { margin-top: 10px !important; }
/* «О нас»: круглый портрет команды — справа от контактов */
.ab-team { float: right; width: 190px; height: 190px; border-radius: 50%; margin: 18px 6px 0 20px; box-shadow: 0 14px 30px -20px rgba(92, 78, 66, .55); }
@media (max-width: 760px) { .ab-team { float: none; display: block; width: 170px; height: 170px; margin: 18px auto 0; } }
/* главная: новый арт (дети на снежном берегу, корабли, закат) — на всю ширину, по центру */
@media (min-width: 901px) { body.h3-on .h3-hero { background-size: cover !important; background-position: center 40% !important; } }
body.h3-on .h3-hero { background-size: cover !important; }
@media (max-width: 900px) { body.h3-on .h3-hero { background-position: 22% center !important; } }
/* «Подписка · Уроки · Пособия» — прямо на небе, без белой плашки */
body.h3-on .h3-tab { background: none !important; box-shadow: none !important; border: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
body.h3-on .h3-tab a { color: #fff !important; font-weight: 500 !important; text-shadow: 0 1px 2px rgba(40, 60, 110, .45), 0 0 14px rgba(40, 60, 110, .25); }
/* главная с разделами: под картинкой сразу «Родной язык · Литература · Музыка»; кнопки «Начать» нет; фон — молочный, как в разделах */
html:has(body.combo), body.combo, body.h3-on.combo { background: #fcf8f0 !important; }
body.combo #v-home3 .h3-wrap { display: none !important; }
body.combo #v-home3 { padding-bottom: 0 !important; margin-bottom: 0 !important; min-height: 0 !important; }
body.combo #v-home3 .h3-hero { margin-bottom: 0 !important; }
/* копилка светиков на главной — над черепашкой, на месте при прокрутке; когда черепашка открыла окошко «Напиши нам», копилка тихо прячется */
.sec-tabs .svw.svw-dock { position: fixed !important; top: auto !important; left: auto !important; bottom: var(--db, 230px) !important; right: var(--dr, 20px) !important; translate: none !important; margin: 0 !important; z-index: 60; transition: opacity .25s ease; }

/* практика наверху раздела, темы — под ней (Родной язык: пособия; Литература: книги; Музыка: аудио) */
#v-exercises > .page > .wrap, #v-read > .page > .wrap, #v-music > .page > .wrap { display: flex !important; flex-direction: column; }
#v-exercises #prShelf { order: 1; margin-top: 0 !important; }
#v-exercises #prxBox { order: 2; }
#v-exercises #exList { order: 3; margin-top: 40px !important; }
#v-read > .page > .wrap > .shelf-label { order: 1; margin-top: 0 !important; }
#v-read #shelf { order: 2; }
#v-read #lib { order: 3; }
#v-read .lit-know { order: 4; margin-top: 40px !important; }
#v-music #muPractice { order: 1; margin-top: 0 !important; }
#v-music #muList { order: 2; margin-top: 40px !important; }
#v-exercises .to-top, #v-read .to-top, #v-music .to-top { order: 9; align-self: center; }
/* одинаковые отступы во всех трёх разделах: строка разделов → подпись полки 52px, практика → темы 56px */
#v-exercises #prShelf { margin-top: 4px !important; }
#v-read > .page > .wrap > .shelf-label { margin-top: 30px !important; }
#v-music #muPractice { margin-top: -4px !important; }
#v-exercises #exList { margin-top: 16px !important; }
#v-read .lit-know { margin-top: 56px !important; }
#v-music #muList { margin-top: 26px !important; }
/* без кнопок «Пособия · Книги · Аудио» и без подписей «Мои пособия / Мои книги / Мои аудио» */
.sec-tabs .sec-pill { display: none !important; }
#v-exercises #prShelf .shelf-label, #v-read > .page > .wrap > .shelf-label, #v-music #muPractice .shelf-label { display: none !important; }
#v-exercises #prShelf { margin-top: 22px !important; }
#v-read #shelf { margin-top: 22px !important; }
/* «География» — зелёная, как зелёные номера тем */
.sec-tabs [data-sec="geo"] { color: #4e9e46 !important; }
.geo-soon { text-align: center; color: #8a7d76; font-size: 17px; margin: 40px auto 120px; max-width: 520px; line-height: 1.6; }

/* «География» — тот же вид, что у «Музыки» (правила скопированы с #v-music) */
#v-geo .inner {
  background: none !important;
  color: var(--ink) !important;
  padding: 34px 0 8px !important;
}
#v-geo .inner::after {
  display: none !important;
}
#v-geo .inner .back {
  display: none !important;
}
#v-geo .inner h2 {
  color: #4a3e3a !important;
  margin: 0;
}
#v-geo .inner .lead {
  color: #86776f !important;
  margin: 4px 0 0;
  font-size: 16px;
}
#v-geo .page {
  padding-top: 14px !important;
}
#v-geo .inner h2 {
  font-size: 24px !important;
}
#v-geo {
  position: relative;
}
#v-geo .exlist {
  margin-top: 30px;
}
@media (min-width: 761px) { #v-geo) .wrap { padding-left: 33px !important; padding-right: 33px !important; } }
@media (min-width: 901px) { #v-geo .wrap { max-width: 1090px !important; margin-left: auto !important; margin-right: auto !important; } }
#v-geo > .page > .wrap { display: flex !important; flex-direction: column; }
#v-geo .to-top { order: 9; align-self: center; }
.sec-tabs [data-sec="geo"] { color: #4e9e46 !important; }
/* пузырьки-мысли черепашонка поднимаются над копилкой */
body.combo #helper:not(.open) .hp-cloud { translate: 0 -46px; }
/* пузырьки-мысли с вопросиком пока убраны */
#helper:not(.open) .hp-cloud { display: none !important; }
/* нажали на черепашку — светики прячутся, появляются пузырьки и окошко «Напиши нам» */
body:has(#helper.open) .sec-tabs .svw.svw-dock { opacity: 0; pointer-events: none; }
/* футер: документы и контакты — подчёркнутыми ссылками, внизу страницы; плавающий копирайт убран */
.flegal.fl-fixed { display: none !important; }
.bfoot { max-width: 1090px; margin: 70px auto 0; padding: 26px 33px 34px; border-top: 1px solid #e8dfd2; text-align: center; color: #8a7d76; font-size: 14px; }
.bf-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; }
.bf-links a { color: #6b5d56; text-decoration: underline; text-decoration-color: rgba(107, 93, 86, .35); text-underline-offset: 3px; }
.bf-links a:hover { color: #3b302c; text-decoration-color: currentColor; }
.bf-copy { margin: 16px 0 0; font-size: 13px; color: #a0938a; }
@media (max-width: 760px) { .bfoot { margin-top: 48px; padding: 22px 18px 90px; } .bf-links { gap: 8px 18px; font-size: 13px; } }
.bf-modal { position: fixed; inset: 0; z-index: 320; display: none; place-items: center; padding: 16px; background: rgba(255, 255, 255, .28); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.bf-modal.on { display: grid; }
.bf-card { position: relative; width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; box-sizing: border-box; padding: 36px 44px 38px; border-radius: 34px; background: var(--win-bg, #fffdf8); border: 1px solid var(--win-line, #e2d8c8); box-shadow: var(--win-shadow, 0 26px 60px -28px rgba(60, 40, 30, .5)); color: #4a3e3a; font-size: 16px; line-height: 1.65; }
.bf-x { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(74, 62, 58, .07); color: #86776f; font-size: 17px; cursor: pointer; }
.bf-x:hover { background: rgba(74, 62, 58, .13); color: #4a3e3a; }
.bf-h { margin: 0 50px 14px 0; font-size: 22px; color: #3b302c; }
.bf-b p { margin: 0 0 12px; }
.bf-b .ab-contacts { margin: 0 !important; padding: 0 !important; }
@media (max-width: 760px) { .bf-card { padding: 26px 22px 28px; border-radius: 26px; font-size: 15px; } }
.bfoot .bf-copy { text-align: center !important; max-width: none !important; margin: 16px auto 0 !important; width: 100%; }
.bfoot { margin-top: 40px; }
/* копилка на главной — всегда на одном месте над черепашкой, в любом разделе, без перескоков */
body.combo .sec-tabs .svw, body.combo .sec-tabs .svw.svw-float { position: fixed !important; top: auto !important; left: auto !important; bottom: var(--db, 150px) !important; right: var(--dr, 24px) !important; translate: none !important; margin: 0 !important; z-index: 60; transition: opacity .25s ease !important; animation: none !important; }
.pr-play .pr-lvrow { margin: 0 0 14px; }
/* подсказка между «Стереть» и стрелкой: «Рисуй, не отрывая руки» */
.pr-play .pr-foot { position: relative; }
.pr-play .pr-hint { position: absolute; left: 50%; top: 50%; translate: -50% -50%; white-space: nowrap; color: #a0938a; font-size: 16px; pointer-events: none; transition: color .2s; }
.pr-play .pr-hint.bad { color: #c0573f; }
@media (max-width: 760px) { .pr-play .pr-hint { font-size: 13px; } }
/* «Одной линией»: два окошка — образец сверху, сам снизу */
.pr-play .pr-paper.pr-two canvas { height: clamp(460px, 72vh, 760px) !important; }
.pr-paper .pr-hide { position: absolute; top: 12px; right: 14px; background: none; border: 0; padding: 4px 6px; font: inherit; font-size: 15px; color: #8f7fd0; cursor: pointer; }
.pr-paper .pr-hide:hover { color: #6f5bbf; }
/* «Одной линией»: «Подсказка» рядом со «Стереть» */
.pr-play .pr-foot .pr-tip { margin-left: 14px; margin-right: auto; }
.pr-play .pr-foot .pr-tip[hidden] { display: none; }
/* «Подсказка» включена — тёмная, как активная кнопка; выключена — серая */
.pr-play .pr-foot .pr-tip.on { color: #4a3e3a !important; font-weight: 600; }
/* «Одной линией»: линия на обложке той же толщины, что на других пособиях */
#prShelf .pr-nb[data-nb="star"] .wbc-pic polyline { stroke-width: 3.8px !important; }
#prShelf .pr-nb[data-nb="star"] .wbc-pic { transform: translateY(-35%); }
/* «Лабиринт»: картинка чуть крупнее, линия как на других обложках */
#prShelf .pr-nb[data-nb="maze"] .wbc-pic { width: 66% !important; transform: translateY(-25%); }
#prShelf .pr-nb[data-nb="maze"] .wbc-pic polyline { stroke-width: 3px !important; }

/* «Праздники» — как «География», свой цвет — рыжий */
#v-hol .inner {
  background: none !important;
  color: var(--ink) !important;
  padding: 34px 0 8px !important;
}
#v-hol .inner::after {
  display: none !important;
}
#v-hol .inner .back {
  display: none !important;
}
#v-hol .inner h2 {
  color: #4a3e3a !important;
  margin: 0;
}
#v-hol .inner .lead {
  color: #86776f !important;
  margin: 4px 0 0;
  font-size: 16px;
}
#v-hol .page {
  padding-top: 14px !important;
}
#v-hol .inner h2 {
  font-size: 24px !important;
}
#v-hol {
  position: relative;
}
#v-hol .exlist {
  margin-top: 30px;
}
#v-hol > .page > .wrap { display: flex !important; flex-direction: column; }
#v-hol .to-top { order: 9; align-self: center; }
.sec-tabs [data-sec="hol"] { color: #e8913a !important; }

/* «Праздники»: та же раскладка, что у «Географии» */
#v-hol .inner {
  background: none !important;
  color: var(--ink) !important;
  padding: 34px 0 8px !important;
}
#v-hol .inner::after {
  display: none !important;
}
#v-hol .inner .back {
  display: none !important;
}
#v-hol .inner h2 {
  color: #4a3e3a !important;
  margin: 0;
}
#v-hol .inner .lead {
  color: #86776f !important;
  margin: 4px 0 0;
  font-size: 16px;
}
#v-hol .page {
  padding-top: 14px !important;
}
#v-hol .inner h2 {
  font-size: 24px !important;
}
#v-hol {
  position: relative;
}
#v-hol .exlist {
  margin-top: 30px;
}
@media (min-width: 761px) { #v-hol) .wrap { padding-left: 33px !important; padding-right: 33px !important; } }
@media (min-width: 901px) { #v-hol .wrap { max-width: 1090px !important; margin-left: auto !important; margin-right: auto !important; } }
#v-hol > .page > .wrap { display: flex !important; flex-direction: column; }
#v-hol .to-top { order: 9; align-self: center; }

/* седьмой цвет номеров тем — оранжевый («Праздники») */
.crs-bn[data-c="6"] { background: #e8913a !important; }
/* вкладки разделов: выбранная — насыщеннее и темнее, невыбранные — светлее */
.sec-tabs a[data-sec] { opacity: .55 !important; }
.sec-tabs a[data-sec]:hover { opacity: .9 !important; }
.sec-tabs span.on[data-sec="exercises"] { color: #0aa7ad !important; }
.sec-tabs span.on[data-sec="read"] { color: #1a7ee0 !important; }
.sec-tabs span.on[data-sec="music"] { color: #7b4fe6 !important; }
.sec-tabs span.on[data-sec="geo"] { color: #3fa833 !important; }
.sec-tabs span.on[data-sec="hol"] { color: #f27a0c !important; }
/* номера тем — чистые сочные детские цвета (как активные вкладки разделов) */
.crs-bn[data-c="0"] { background: #8a5cf0 !important; }
.crs-bn[data-c="1"] { background: #f2544c !important; }
.crs-bn[data-c="2"] { background: #1f8cf0 !important; }
.crs-bn[data-c="3"] { background: #3fb037 !important; }
.crs-bn[data-c="4"] { background: #0fb2b8 !important; }
.crs-bn[data-c="5"] { background: #ffbf1f !important; }
.crs-bn[data-c="6"] { background: #f27a0c !important; }

/* темы, которые ещё готовятся: бледные, не нажимаются, сбоку «скоро»; готовые — яркие */
.crs-list .exgrp.crs-soon { cursor: default; pointer-events: none; }
.crs-list .exgrp.crs-soon > span:first-child { opacity: .45; }
.crs-list .exgrp.crs-soon .crs-bn { opacity: 1 !important; filter: grayscale(.35); }
.crs-list .exgrp .crs-soon-t { margin-left: auto; font-size: 13px; font-weight: 600; color: #a99e96; letter-spacing: .02em; }
.crs-list .exgrp.crs-live .crs-bn { opacity: 1 !important; }

/* ===== верхние «игровые» полки: пособия, книги, пластинки — одной высоты, с одинаковой мягкой тенью ===== */
:root { --shelf-h: 120px; --shelf-gap: 72px; }
@media (min-width: 761px) { :root { --shelf-h: 196px; --shelf-gap: 56px; } }
/* место сверху, чтобы мягкая тень над обложкой не обрезалась */
#prShelf .books.sc-track, #shelf .books.sc-track, #muShelf .books.sc-track { padding-top: 26px !important; margin-top: -22px !important; padding-bottom: 26px !important; margin-bottom: -10px !important; }
/* мягкая тень — одинаковая сверху, снизу и по бокам */
:root { --soft-shadow: 0 16px 24px -16px rgba(92, 78, 66, .42), 0 -10px 22px -14px rgba(92, 78, 66, .26), 0 2px 16px -8px rgba(92, 78, 66, .16); }
#prShelf .pr-nb .pr-cv.wbc { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04), inset 0 2px 0 #fff, inset -2px 0 0 #fff, var(--soft-shadow) !important; }
/* книги «Литературы»: высотой с пособие, пропорции книги, промежутки как у пособий */
#shelf .shelf.sc-box { max-width: 952px !important; width: min(100%, 952px) !important; }
#shelf .books.sc-track { gap: var(--shelf-gap) !important; }
#v-read .shelf .book, #v-read .shelf .book.ghost { height: var(--shelf-h) !important; width: calc(var(--shelf-h) * .88) !important; }
#v-read .shelf .book:not(.ghost) { box-shadow: inset 6px 0 0 rgba(0, 0, 0, .1), inset 7px 0 0 rgba(255, 255, 255, .18), inset 0 2px 0 rgba(255, 255, 255, .62), inset -2px 0 0 rgba(255, 255, 255, .62), var(--soft-shadow) !important; }
/* название книги чуть ниже верхнего края */
#v-read .shelf .book .bk-t { margin-top: calc(var(--shelf-h) * .08) !important; }

/* ===== «Музыка»: полка пластинок ===== */
#muShelf { margin: 0 auto 34px; }
#muShelf .shelf.sc-box { max-width: 952px !important; width: min(100%, 952px) !important; margin: 0 auto; }
#muShelf .books.sc-track { gap: var(--shelf-gap) !important; display: flex; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding-left: 16px; padding-right: 16px; }
#muShelf .books.sc-track::-webkit-scrollbar { display: none; }
.mu-var { text-align: center; font-size: 13px; color: #a99e96; margin: 18px 0 2px; }
.mrec { flex: none; width: var(--shelf-h); height: var(--shelf-h); display: block; position: relative; transition: transform .2s; cursor: default; }
.mrec:hover { transform: translateY(-3px); }
/* круглая пластинка */
.mrec-disc { border-radius: 50%; box-shadow: var(--soft-shadow); }
.mrec-disc svg { width: 100%; height: 100%; display: block; }
.mrec-arc { font: 600 15px Rubik, Nunito, "Segoe UI", Arial, sans-serif; fill: #fff; letter-spacing: .02em; }
.mrec-arc-a { font: 400 11px Rubik, Nunito, "Segoe UI", Arial, sans-serif; fill: rgba(255, 255, 255, .9); }
/* пластинка в бумажном конверте: название ровной строкой, в окошке — пластинка */
.mrec-slv { border-radius: 8px; background: #fdf9f3; color: #4a3e3a; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04), inset 0 2px 0 #fff, inset -2px 0 0 #fff, inset 2px 0 0 #fff, var(--soft-shadow); display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: 100%; justify-items: center; padding: calc(var(--shelf-h) * .09) calc(var(--shelf-h) * .08) calc(var(--shelf-h) * .07); box-sizing: border-box; text-align: center; }
.mrec-t { font: 600 14px/1.2 Rubik, Nunito, "Segoe UI", Arial, sans-serif; }
.mrec-a { font: 400 11px/1.2 Rubik, Nunito, "Segoe UI", Arial, sans-serif; color: #8a7d75; }
.mrec-win { align-self: center; width: 46%; aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle, #2a2526 0 2px, #332d2e 2px 4px); box-shadow: inset 0 3px 8px rgba(0, 0, 0, .45), 0 0 0 calc(var(--shelf-h) * .022) var(--c); display: grid; place-items: center; }
.mrec-win i { width: 40%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fbf6ee 0 9%, var(--c) 10% 100%); }
@media (max-width: 760px) {
  .mrec-t { font-size: 11.5px; } .mrec-a { font-size: 9.5px; }
  .mrec-arc { font-size: 17px; } .mrec-arc-a { font-size: 13px; }
}
/* разделы музыки под полкой */
.mu-cats { max-width: 1024px; margin: 26px auto 0; }
.mu-cats .mu-cat { cursor: default; pointer-events: none; display: flex; align-items: center; }
.mu-cats .mu-cat > span:first-child { display: flex; align-items: center; gap: 12px; }
.mu-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.mu-soon { margin-left: auto; font-size: 13px; font-weight: 600; color: #a99e96; }

/* вступление «Пособий» — как текст в «Уроках»: крупнее и темнее */
#v-materials .pp-lead { font-size: 18.5px !important; line-height: 1.6 !important; color: #4a3e3a !important; }
@media (max-width: 760px) { #v-materials .pp-lead { font-size: 16.5px !important; } }

/* книги: светлая полоска цвета пособий на верхней трети, название — белое с тёмной обводкой */
#v-read .shelf .book.bk-sq { position: relative; padding: 0 !important; display: block !important; overflow: hidden; }
#v-read .shelf .book.bk-sq::before { display: none !important; }
#v-read .shelf .bk-band { position: absolute; left: 0; right: 0; top: 0; height: 34%; background: #fdf9f3; display: grid; place-items: center; padding: 0 9% 0 calc(9% + 6px); box-sizing: border-box; box-shadow: inset 6px 0 0 rgba(0, 0, 0, .06), 0 1px 0 rgba(0, 0, 0, .05); }
#v-read .shelf .book .bk-band .bk-t { margin: 0 !important; position: static !important; font: 900 calc(var(--shelf-h) * .085)/1.12 Nunito, Rubik, sans-serif !important; color: #fff !important; -webkit-text-stroke: calc(var(--shelf-h) * .013) #2b2523; paint-order: stroke fill; letter-spacing: .01em; text-align: center; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
#v-read .shelf .book .bk-band .bk-t.bk-t-m { font-size: calc(var(--shelf-h) * .072) !important; }
#v-read .shelf .book .bk-band .bk-t.bk-t-s { font-size: calc(var(--shelf-h) * .066) !important; -webkit-text-stroke-width: calc(var(--shelf-h) * .011); }
#v-read .shelf .book.bk-sq .bk-a { position: absolute !important; left: calc(9% + 6px); right: 30%; bottom: 8%; margin: 0 !important; }
#v-read .shelf .bk-hp { position: absolute; right: 8%; bottom: 7%; width: calc(var(--shelf-h) * .11); height: calc(var(--shelf-h) * .11); color: #fff; opacity: .92; }
@media (max-width: 760px) {
  #v-read .shelf .book .bk-band .bk-t { font-size: 11.5px !important; -webkit-text-stroke-width: 2px; }
  #v-read .shelf .book .bk-band .bk-t.bk-t-m, #v-read .shelf .book .bk-band .bk-t.bk-t-s { font-size: 10px !important; -webkit-text-stroke-width: 1.8px; }
  #v-read .shelf .bk-hp { width: 14px; height: 14px; }
}

/* название на конверте — белые буквы с тонкой тёмной обводкой, как на пособиях */
.mrec-slv .mrec-t, .mrec-pk .mrec-t { font: 900 calc(var(--shelf-h) * .08)/1.12 Nunito, Rubik, sans-serif; color: #fff; -webkit-text-stroke: 2.2px #2b2523; paint-order: stroke fill; letter-spacing: .01em; }
/* конверт, из которого чуть выглядывает большая пластинка */
.mrec-pk { background: none; }
.mrec-pk .mrec-back { position: absolute; inset: 0; border-radius: 8px; background: #f3ebdf; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04), var(--soft-shadow); }
.mrec-pk .mrec-pd { position: absolute; left: 2%; top: 2%; width: 96%; height: 96%; border-radius: 50%; filter: drop-shadow(0 4px 8px rgba(92, 78, 66, .25)); }
.mrec-pk .mrec-front { position: absolute; left: 0; right: 0; bottom: 0; top: 15%; border-radius: 8px; background: #fdf9f3; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04), inset 0 2px 0 #fff, inset -2px 0 0 #fff, inset 2px 0 0 #fff, 0 -6px 14px -10px rgba(92, 78, 66, .35); display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: 100%; justify-items: center; align-items: center; padding: calc(var(--shelf-h) * .05) calc(var(--shelf-h) * .07) calc(var(--shelf-h) * .055); box-sizing: border-box; text-align: center; }
.mrec-pk .mrec-win { width: 40%; }
.mrec-pk-st .mrec-front::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--shelf-h) * .02); background: var(--c); border-radius: 8px 8px 0 0; opacity: .85; }
.mrec-pk .mrec-a { font: 400 11px/1.2 Rubik, Nunito, "Segoe UI", Arial, sans-serif; color: #8a7d75; }
@media (max-width: 760px) { .mrec-slv .mrec-t, .mrec-pk .mrec-t { -webkit-text-stroke-width: 1.8px; font-size: 11px; } .mrec-pk .mrec-a { font-size: 9px; } }
/* книги: название крупнее, обводка тоньше */
#v-read .shelf .book .bk-band .bk-t { font-size: calc(var(--shelf-h) * .098) !important; -webkit-text-stroke: 2.2px #2b2523 !important; }
#v-read .shelf .book .bk-band .bk-t.bk-t-m { font-size: calc(var(--shelf-h) * .084) !important; }
#v-read .shelf .book .bk-band .bk-t.bk-t-s { font-size: calc(var(--shelf-h) * .072) !important; -webkit-text-stroke-width: 2px !important; }
@media (max-width: 760px) {
  #v-read .shelf .book .bk-band .bk-t { font-size: 12.5px !important; -webkit-text-stroke-width: 1.8px !important; }
  #v-read .shelf .book .bk-band .bk-t.bk-t-m, #v-read .shelf .book .bk-band .bk-t.bk-t-s { font-size: 11px !important; -webkit-text-stroke-width: 1.6px !important; }
}
#muShelf .mu-var { display: block; width: 100%; text-align: center !important; }
/* «+ наушники»: к книге есть аудио */
#v-read .shelf .bk-plus { position: absolute; right: calc(8% + var(--shelf-h) * .125); bottom: calc(7% + var(--shelf-h) * .012); font: 800 calc(var(--shelf-h) * .085)/1 Nunito, Rubik, sans-serif; color: #fff; opacity: .92; }
#v-read .shelf .book.bk-sq .bk-a { right: 32% !important; }
@media (max-width: 760px) { #v-read .shelf .bk-plus { font-size: 12px; right: calc(8% + 16px); bottom: calc(7% + 1px); } }

/* окошко ровно по центру пластинки (= по центру квадрата), без цветной обводки */
.mrec-pk .mrec-front { grid-template-rows: auto 1fr auto; padding-top: calc(var(--shelf-h) * .035); }
.mrec-pk .mrec-front .mrec-t { align-self: start; }
.mrec-pk .mrec-front .mrec-a { grid-row: 3; }
.mrec-pk > .mrec-win { position: absolute; left: 50%; top: 50%; width: 30%; translate: -50% -50%; aspect-ratio: 1; border-radius: 50%; background: var(--c); box-shadow: inset 0 2px 4px rgba(74, 62, 58, .35), inset 0 -1px 0 rgba(255, 255, 255, .5); display: grid; place-items: center; }
.mrec-pk > .mrec-win i { width: 13%; aspect-ratio: 1; border-radius: 50%; background: #f3ebdf; box-shadow: inset 0 1px 2px rgba(74, 62, 58, .35); }
.mrec-pk > .mrec-win { width: 26%; }
.mrec-pk .mrec-t { font-size: calc(var(--shelf-h) * .072); }
/* конверт: верхние углы передней стенки тоже скруглены; автор сверху, название крупно внизу */
.mrec-pk .mrec-front { border-radius: 12px 12px 8px 8px; grid-template-rows: auto 1fr auto; padding: calc(var(--shelf-h) * .045) calc(var(--shelf-h) * .06) calc(var(--shelf-h) * .06); }
.mrec-pk .mrec-front .mrec-a { grid-row: 1; align-self: start; }
.mrec-pk .mrec-front .mrec-t { grid-row: 3; align-self: end; font-size: calc(var(--shelf-h) * .09); line-height: 1.1; }
@media (max-width: 760px) { .mrec-pk .mrec-front .mrec-t { font-size: 12px; } }
.mrec-pk .mrec-front { grid-template-rows: auto 1fr 40%; }
.mrec-pk .mrec-front .mrec-t { align-self: center; }
@media (max-width: 760px) { .mrec-pk .mrec-front .mrec-t { font-size: 10.5px; -webkit-text-stroke-width: 1.6px; } .mrec-pk > .mrec-win { width: 24%; } }
/* передняя стенка выше — пластинка выглядывает совсем чуть-чуть */
.mrec-pk .mrec-front { top: 9%; }
/* вариант Б: как обложки пособий — большая цветная наклейка, поверх неё крупное название, автор внизу */
.mrec-pk-nb > .mrec-win { width: 46%; }
.mrec-pk-nb > .mrec-win i { width: 8%; }
.mrec-pk-nb .mrec-front { grid-template-rows: 1fr auto; padding-bottom: calc(var(--shelf-h) * .055); }
.mrec-pk-nb .mrec-front .mrec-a { grid-row: 2; align-self: end; }
.mrec-pk-nb .mrec-front .mrec-t { position: absolute; left: 4%; right: 4%; top: 50%; translate: 0 calc(-50% - var(--shelf-h) * .045); z-index: 2; grid-row: auto; text-transform: uppercase; font-size: calc(var(--shelf-h) * .085); line-height: 1.05; -webkit-text-stroke-width: 2.6px; }
.mrec-pk-nb > .mrec-win { z-index: 1; }
.mrec-pk-nb .mrec-front { z-index: auto; }
.mrec-pk-nb .mrec-front .mrec-t { z-index: 3; }
.mrec-pk-nb .mrec-front .mrec-t { font-size: calc(var(--shelf-h) * .074); left: 6%; right: 6%; }
@media (max-width: 760px) { .mrec-pk-nb .mrec-front .mrec-t { font-size: 9px; -webkit-text-stroke-width: 1.6px; } }
/* пластинку видно чуть больше; белая кромка сверху бледнее; верхние углы передней стенки скруглены */
.mrec-pk .mrec-front { top: 14%; border-radius: 12px 12px 8px 8px !important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04), inset 0 1.5px 0 rgba(255, 255, 255, .55), inset -2px 0 0 #fff, inset 2px 0 0 #fff, 0 -6px 14px -10px rgba(92, 78, 66, .35); }
/* углы конверта — как у книг и пособий: слева почти острые, справа скруглённые */
.mrec-pk .mrec-front, .mrec-pk .mrec-back { border-radius: 3px 10px 10px 3px !important; }
/* конверт: все углы почти острые, как слева */
.mrec-pk .mrec-front, .mrec-pk .mrec-back { border-radius: 3px !important; }
/* полка пластинок — на той же высоте под разделами, что пособия и книги */
#muShelf { padding-top: 22px; }
/* тени конверта — как у пособий и книг: мягкая общая тень у всего конверта */
.mrec-pk .mrec-back { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04), var(--soft-shadow) !important; }
.mrec-pk .mrec-front { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04), inset 0 1.5px 0 rgba(255, 255, 255, .55), inset -2px 0 0 #fff, inset 2px 0 0 #fff, 0 -4px 10px -8px rgba(92, 78, 66, .3) !important; }
/* значок «есть аудиозапись» в списке произведений: не кнопка, цвета подписи автора, высотой с кружок сердечка */
.oc-marks .oc-hp { width: 36px; height: 36px; display: inline-grid; place-items: center; color: rgb(160, 145, 137); flex: none; pointer-events: none; }
.oc-marks .oc-hp svg { width: 22px; height: 22px; }

/* ===== книги: светлая обложка, цветное пятно-фигура (эксперимент) ===== */
#shelf .mu-var { display: block; width: 100%; text-align: center; font-size: 13px; color: #a99e96; margin: 18px 0 2px; }
#v-read .shelf .book.bk-lt { background: #fdf9f3 !important; color: #4a3e3a !important; box-shadow: inset 6px 0 0 color-mix(in srgb, var(--bg) 70%, #fff), inset 0 2px 0 #fff, inset -2px 0 0 #fff, var(--soft-shadow) !important; }
#v-read .shelf .book.bk-lt .bk-band { background: none; box-shadow: none; height: 36%; z-index: 2; }
#v-read .shelf .book.bk-lt::after { content: ""; position: absolute; inset: 0 0 0 6px; background: var(--bg); z-index: 1; }
#v-read .shelf .book.bk-v-tri::after { clip-path: polygon(0 36%, 100% 36%, 0 86%); }
#v-read .shelf .book.bk-v-sash::after { clip-path: polygon(0 58%, 100% 36%, 100% 62%, 0 84%); }
#v-read .shelf .book.bk-v-rhomb::after { clip-path: polygon(50% 38%, 84% 61%, 50% 84%, 16% 61%); }
#v-read .shelf .book.bk-v-trap::after { clip-path: polygon(0 38%, 100% 38%, 82% 82%, 18% 82%); }
#v-read .shelf .book.bk-v-arch::after { clip-path: polygon(16% 84%, 16% 58%, 18% 52%, 23% 46%, 30% 41.5%, 38% 38.8%, 50% 37.8%, 62% 38.8%, 70% 41.5%, 77% 46%, 82% 52%, 84% 58%, 84% 84%); }
/* название крупнее */
#v-read .shelf .book.bk-lt .bk-band .bk-t { font-size: calc(var(--shelf-h) * .112) !important; }
#v-read .shelf .book.bk-lt .bk-band .bk-t.bk-t-m { font-size: calc(var(--shelf-h) * .096) !important; }
#v-read .shelf .book.bk-lt .bk-band .bk-t.bk-t-s { font-size: calc(var(--shelf-h) * .08) !important; }
/* автор внизу по центру, тёмный; наушники с плюсом — тёмные, поменьше */
#v-read .shelf .book.bk-lt .bk-a { left: 12% !important; right: 12% !important; bottom: 5% !important; text-align: center; color: #4a3e3a !important; opacity: 1 !important; font-size: calc(var(--shelf-h) * .066) !important; z-index: 2; }
#v-read .shelf .book.bk-lt .bk-hp, #v-read .shelf .book.bk-lt .bk-plus { color: #4a3e3a; z-index: 2; opacity: .8; }
#v-read .shelf .book.bk-lt .bk-hp { width: calc(var(--shelf-h) * .085); height: calc(var(--shelf-h) * .085); right: 7%; bottom: 17%; }
#v-read .shelf .book.bk-lt .bk-plus { font-size: calc(var(--shelf-h) * .07); right: calc(7% + var(--shelf-h) * .095); bottom: calc(17% + var(--shelf-h) * .01); }
@media (max-width: 760px) {
  #v-read .shelf .book.bk-lt .bk-band .bk-t { font-size: 13px !important; }
  #v-read .shelf .book.bk-lt .bk-band .bk-t.bk-t-m, #v-read .shelf .book.bk-lt .bk-band .bk-t.bk-t-s { font-size: 11.5px !important; }
  #v-read .shelf .book.bk-lt .bk-a { font-size: 9.5px !important; }
}
/* пластинки: название крупнее */
.mrec-pk-nb .mrec-front .mrec-t { font-size: calc(var(--shelf-h) * .086) !important; left: 3% !important; right: 3% !important; }
/* «+ наушники» — сразу после автора, в одну строку */
#v-read .shelf .book .bk-a .bk-au { display: inline-flex; align-items: center; gap: 1px; margin-left: .35em; vertical-align: -0.15em; white-space: nowrap; }
#v-read .shelf .book .bk-a .bk-au .bk-plus, #v-read .shelf .book .bk-a .bk-au .bk-hp { position: static !important; font-size: 1em !important; width: 1.15em !important; height: 1.15em !important; color: currentColor !important; opacity: .85; }
#v-read .shelf .book .bk-a .bk-au .bk-plus { width: auto !important; font-weight: 800; }
#v-read .shelf .book.bk-sq:not(.bk-lt) .bk-a { right: 8% !important; }
/* книги, вариант с лентой: автор сверху, под ним крупно название, лента внизу */
#v-read .shelf .book.bk-lt .bk-a { top: 7% !important; bottom: auto !important; left: calc(8% + 6px) !important; right: 8% !important; font-size: calc(var(--shelf-h) * .06) !important; z-index: 2; }
#v-read .shelf .book.bk-lt .bk-band { top: 15%; height: 40%; align-items: start; padding-top: 2%; }
#v-read .shelf .book.bk-v-sash::after { clip-path: polygon(0 80%, 100% 56%, 100% 82%, 0 100%) !important; }
#v-read .shelf .book.bk-v-sashf::after { clip-path: polygon(0 80%, 100% 56%, 100% 100%, 0 100%) !important; }
#v-read .shelf .book.bk-v-sashf { border-radius: 3px 8px 8px 3px; }
/* «+ наушники» в нижнем правом углу */
#v-read .shelf .book > .bk-au { position: absolute; right: 7%; bottom: 5%; z-index: 3; display: inline-flex; align-items: center; gap: 1px; font-size: calc(var(--shelf-h) * .07); color: #4a3e3a; }
#v-read .shelf .book > .bk-au .bk-plus, #v-read .shelf .book > .bk-au .bk-hp { position: static !important; width: 1.15em !important; height: 1.15em !important; font-size: 1em !important; color: currentColor !important; opacity: .9; }
#v-read .shelf .book > .bk-au .bk-plus { width: auto !important; font-weight: 800; }
#v-read .shelf .book.bk-v-sashf > .bk-au, #v-read .shelf .book.bk-v-sash > .bk-au { color: #fff; }
#v-read .shelf .book.bk-v-sash > .bk-au { bottom: 23%; }
@media (max-width: 760px) { #v-read .shelf .book > .bk-au { font-size: 11px; } #v-read .shelf .book.bk-lt .bk-a { font-size: 9px !important; } }
#v-read .shelf .book.bk-v-sash > .bk-au { bottom: 5% !important; color: #4a3e3a !important; }
/* наушники в «Литературе» и нотки в «Музыке» — одного бледного цвета */
.oc-marks .oc-hp { color: #bfb1a3; }
/* автор на обложках книг и пластинок — одного цвета и размера (цвет как в «Музыке», размер как в «Литературе») */
#v-read .shelf .book.bk-lt .bk-a, .mrec-pk .mrec-a { color: #8a7d75 !important; font-family: Rubik, Nunito, "Segoe UI", Arial, sans-serif !important; font-weight: 400 !important; font-size: calc(var(--shelf-h) * .06) !important; }
@media (max-width: 760px) { #v-read .shelf .book.bk-lt .bk-a, .mrec-pk .mrec-a { font-size: 9px !important; } }
/* «+ наушники» на книге — утолщённые, как надпись БРАВО */
#v-read .shelf .book > .bk-au .bk-plus { font-weight: 900 !important; -webkit-text-stroke: .6px currentColor; }
#v-read .shelf .book > .bk-au .bk-hp path { stroke-width: 3.6; }
#v-read .shelf .book > .bk-au .bk-hp rect { stroke: currentColor; stroke-width: 1.4; }
/* цветной круг на конверте — плоский, без внутренней тени, как фигуры на книгах и пособиях */
.mrec-pk > .mrec-win, .mrec-pk > .mrec-win i { box-shadow: none !important; }
/* задняя стенка конверта сверху — как верх пособия: тот же светлый цвет и белая кромка;
   ниже, к передней стенке, — мягкая тень градиентом от пластинки */
.mrec-pk .mrec-back { background: linear-gradient(to bottom, #fdf9f3 0, #fdf9f3 4%, #f1e8dc 15%) !important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04), inset 0 2px 0 #fff, inset -2px 0 0 #fff, inset 2px 0 0 #fff, var(--soft-shadow) !important; }
.mrec-pk .mrec-pd { filter: drop-shadow(0 3px 5px rgba(92, 78, 66, .22)); }

/* ===== один шрифт для обложек: Rubik Bold, белые буквы, обводка одной толщины ===== */
:root { --cov-stroke: 3px; }
@media (max-width: 760px) { :root { --cov-stroke: 2.2px; } }
/* обложка пособия: цветной квадрат и название — программно, как в Canva */
.pr-cv.wbc.wbc-gen { background-image: none !important; }
.pr-cv.wbc-gen .wbc-q { position: absolute; left: 24.4%; width: 51.1%; top: 25.1%; height: 46.9%; background: var(--nc); }
.pr-cv.wbc-gen .wbc-tt { position: absolute; left: 3%; right: 3%; top: 36%; translate: 0 -50%; z-index: 3; display: flex; flex-direction: column; align-items: center; text-align: center; font-family: Rubik, Nunito, sans-serif; font-weight: 700; text-transform: uppercase; color: #fff; -webkit-text-stroke: var(--cov-stroke) #1d1b1a; paint-order: stroke fill; line-height: 1.04; letter-spacing: .01em; white-space: nowrap; }
.pr-cv.wbc-gen .wbc-tt b { font-weight: 700; font-size: calc(var(--shelf-h) * var(--k)); }
.pr-cv.wbc-gen .wbc-tt i { font-style: normal; font-size: calc(var(--shelf-h) * var(--k) * .5); line-height: 1.1; }
#prxBox .pr-cv.wbc-gen .wbc-tt b, #geoShelf .pr-cv.wbc-gen .wbc-tt b { font-size: calc(var(--cv-h, 150px) * var(--k)); }
/* книги и пластинки — тот же шрифт; размер один на всех книгах и один на всех пластинках */
#v-read .shelf .book.bk-lt .bk-band .bk-t, #v-read .shelf .book.bk-lt .bk-band .bk-t.bk-t-m, #v-read .shelf .book.bk-lt .bk-band .bk-t.bk-t-s { font-family: Rubik, Nunito, sans-serif !important; font-weight: 700 !important; font-size: calc(var(--shelf-h) * .082) !important; line-height: 1.1 !important; -webkit-text-stroke: var(--cov-stroke) #1d1b1a !important; -webkit-line-clamp: 4 !important; }
.mrec-pk-nb .mrec-front .mrec-t, .mrec-pk .mrec-t { font-family: Rubik, Nunito, sans-serif !important; font-weight: 700 !important; font-size: calc(var(--shelf-h) * .074) !important; line-height: 1.06 !important; -webkit-text-stroke: var(--cov-stroke) #1d1b1a !important; }
@media (max-width: 760px) {
  #v-read .shelf .book.bk-lt .bk-band .bk-t, #v-read .shelf .book.bk-lt .bk-band .bk-t.bk-t-m, #v-read .shelf .book.bk-lt .bk-band .bk-t.bk-t-s { font-size: 11px !important; }
  .mrec-pk-nb .mrec-front .mrec-t, .mrec-pk .mrec-t { font-size: 9.5px !important; }
}
/* обводка тоньше в полтора раза и тёмно-коричневая, буквы чуть разрежены, строки свободнее */
:root { --cov-stroke: 2px; --cov-ink: #4a3e3a; }
@media (max-width: 760px) { :root { --cov-stroke: 1.5px; } }
.pr-cv.wbc-gen .wbc-tt { -webkit-text-stroke: var(--cov-stroke) var(--cov-ink); letter-spacing: .06em; line-height: 1.22; top: auto; translate: none; }
.pr-cv.wbc-gen .wbc-tt i { line-height: 1.15; }
/* нижняя строка остаётся на месте, верхние поднимаются */
.pr-cv.wbc-gen .wbc-tt.wbc-n1 { bottom: 57%; }
.pr-cv.wbc-gen .wbc-tt.wbc-n2 { bottom: 49.5%; }
.pr-cv.wbc-gen .wbc-tt.wbc-n3 { bottom: 46%; }
/* книги: название крупнее, до трёх строк; автор прежний */
#v-read .shelf .book.bk-lt .bk-band { padding-left: calc(5% + 6px) !important; padding-right: 5% !important; height: 46% !important; }
#v-read .shelf .book.bk-lt .bk-band .bk-t, #v-read .shelf .book.bk-lt .bk-band .bk-t.bk-t-m, #v-read .shelf .book.bk-lt .bk-band .bk-t.bk-t-s { font-size: calc(var(--shelf-h) * .088) !important; letter-spacing: .03em !important; line-height: 1.2 !important; -webkit-text-stroke: var(--cov-stroke) var(--cov-ink) !important; -webkit-line-clamp: 3 !important; }
/* пластинки: название крупнее, в две-три строки */
.mrec-pk-nb .mrec-front .mrec-t, .mrec-pk .mrec-t { font-size: calc(var(--shelf-h) * .1) !important; letter-spacing: .05em !important; line-height: 1.2 !important; -webkit-text-stroke: var(--cov-stroke) var(--cov-ink) !important; }
.mrec-pk.mrec-long .mrec-t { font-size: calc(var(--shelf-h) * .078) !important; }
@media (max-width: 760px) {
  #v-read .shelf .book.bk-lt .bk-band .bk-t, #v-read .shelf .book.bk-lt .bk-band .bk-t.bk-t-m, #v-read .shelf .book.bk-lt .bk-band .bk-t.bk-t-s { font-size: 11px !important; }
  .mrec-pk-nb .mrec-front .mrec-t, .mrec-pk .mrec-t { font-size: 11px !important; }
  .mrec-pk.mrec-long .mrec-t { font-size: 9px !important; }
}
/* ручной сдвиг названия на отдельных обложках */
.pr-cv.wbc-gen .wbc-tt { margin-bottom: calc(var(--dy, 0%) * -1); }
/* книги: название заглавными, как на пособиях и пластинках */
#v-read .shelf .book.bk-lt .bk-band .bk-t { text-transform: uppercase; font-size: calc(var(--shelf-h) * .08) !important; letter-spacing: .04em !important; }
#v-read .shelf .book.bk-lt .bk-band .bk-t.bk-t-long { font-size: calc(var(--shelf-h) * .066) !important; }
@media (max-width: 760px) { #v-read .shelf .book.bk-lt .bk-band .bk-t { font-size: 10px !important; } #v-read .shelf .book.bk-lt .bk-band .bk-t.bk-t-long { font-size: 8.5px !important; } }
/* обводка названий светлее — мягкий коричневый */
:root { --cov-ink: #7a6a62; }
/* книги: обводка названия — в цвет косой ленты внизу */
#v-read .shelf .book.bk-lt .bk-band .bk-t, #v-read .shelf .book.bk-lt .bk-band .bk-t.bk-t-long { -webkit-text-stroke-color: var(--bg) !important; }
/* книги: название цветом ленты, без обводки */
#v-read .shelf .book.bk-lt .bk-band .bk-t, #v-read .shelf .book.bk-lt .bk-band .bk-t.bk-t-long { color: var(--bg) !important; -webkit-text-stroke: 0 !important; }
#v-read .shelf .book.bk-lt .bk-band .bk-t.bk-t-tight { letter-spacing: .012em !important; }
#v-read .shelf .book.bk-lt .bk-band .bk-t.bk-t-long { font-size: calc(var(--shelf-h) * .07) !important; letter-spacing: .015em !important; }
/* «Пособия для печати»: та же мягкая тень, что у пособий, книг и пластинок; место сверху и снизу, чтобы тень не обрезалась */
#mats .wb-books.sc-track { padding-top: 26px !important; margin-top: -12px !important; padding-bottom: 30px !important; margin-bottom: -14px !important; }
#mats .wb-book img { box-shadow: var(--soft-shadow) !important; }
#mats .wb-book .wbp-edge { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04), inset 0 2px 0 #fff, inset -2px 0 0 #fff !important; }
/* фон уроков «Географии» (компас) и «Праздников» (колокольчик) — как у других разделов */
.lsn-bg-geo i { width: 104px; height: 104px; }
.lsn-bg-hol i { width: 84px; height: 94px; }
/* компас и колокольчики чуть заметнее */
.lsn-bg.lsn-bg-geo, .lsn-bg.lsn-bg-hol { opacity: 0.36; }
.lsn-bg-hol i { width: 88px; height: 102px; }
.lsn-bg.lsn-bg-hol { opacity: 0.17; }
/* на телефоне страница не «пружинит» у верхнего и нижнего края: черепашка и копилка не дёргаются о картинку */
html, body { overscroll-behavior-y: none; }

/* большая иллюстрация справа: текст слева обтекает её по силуэту (урок «Как ёлка пришла в дом») */
.lsn-wrapimg.lsn-wr { float: right; clear: right; height: 440px; margin: -10px -24px 8px 28px !important; }
.lsn-flow-wrap > .lsn-wrapimg.lsn-wr:first-child { height: 440px; margin-top: -10px; }
@media (max-width: 760px) {
  .lsn-wrapimg.lsn-wr, .lsn-flow-wrap > .lsn-wrapimg.lsn-wr:first-child { float: none; height: 230px; margin: 4px auto 12px !important; align-self: center; }
}

/* «Как ёлка пришла в дом» на компьютере: ёлка крупно слева, текст обтекает её по силуэту
   (у верхушки — ближе, ниже — дальше); заголовок сдвинут вправо, рядом с ним — звёздочка */
@media (min-width: 761px) {
  .lsn .lsn-plain:has(.lsn-wr) .lsn-big { position: relative; z-index: 6; margin-left: 494px !important; text-align: left; transform-origin: left center; white-space: nowrap; }
  .lsn .lsn-flow-wrap > .lsn-wrapimg.lsn-wr:first-child, .lsn .lsn-wrapimg.lsn-wr { float: left; clear: left; width: 610px; height: auto; margin: -96px 6px 0 -110px !important; shape-outside: url(../img/story/tree-shape.png) !important; shape-image-threshold: 0.25; shape-margin: 0; position: relative; z-index: 1; }
}

/* «Ёлочные игрушки»: две игрушки слева вверху (текст обтекает), три — справа над «Играть» */
.lsn .lsn-flow-wrap > .lsn-wrapimg.lsn-toys:first-child, .lsn .lsn-wrapimg.lsn-toys { height: auto; width: 300px; margin: 6px 26px 6px -10px !important; }
@media (max-width: 760px) {
  .lsn .lsn-flow-wrap > .lsn-wrapimg.lsn-toys:first-child, .lsn .lsn-wrapimg.lsn-toys { width: 210px; margin: 4px 0 10px !important; }
}
/* вторая картинка урока — внизу справа, после текста, над «Играть» */
.lsn-flow-wrap:has(.lsn-wrapimg2:last-child) { position: relative; padding-bottom: 250px !important; }
.lsn .lsn-flow .lsn-wrapimg2:last-child { position: absolute; right: -30px; bottom: -20px; width: 420px !important; max-width: none !important; height: auto !important; pointer-events: none; shape-outside: none !important; }
@media (max-width: 760px) {
  .lsn-flow-wrap:has(.lsn-wrapimg2:last-child) { padding-bottom: 190px !important; }
  .lsn .lsn-flow .lsn-wrapimg2:last-child { right: -6px; bottom: -10px; width: 290px !important; }
}

/* «Новый год в живописи»: Таня в раме слева, текст обтекает раму */
.lsn .lsn-flow-wrap > .lsn-wrapimg.lsn-frame:first-child, .lsn .lsn-wrapimg.lsn-frame { width: 330px; height: auto; margin: -118px 81px 0 clamp(-65px, calc(81px - (100vw - 1076px) / 2), 0px) !important; shape-outside: none !important; }
/* текст рядом с рамой — ровной колонкой по левому краю, под раму не заходит */
@media (min-width: 761px) { .lsn .lsn-flow-wrap:has(.lsn-frame) p { overflow: hidden; } }
@media (max-width: 760px) { .lsn .lsn-flow-wrap > .lsn-wrapimg.lsn-frame:first-child, .lsn .lsn-wrapimg.lsn-frame { width: 240px; margin: 4px 0 12px !important; } }

/* больше воздуха в уроках: от заголовка до текста и между абзацами (в полтора раза) */
.lsn .lsn-big { margin-bottom: 48px !important; }
.lsn .lsn-main .lsn-flow p, .lsn .lsn-flow p, .lsn .lsn-flow-wrap p { margin-bottom: 9px !important; }
@media (max-width: 760px) { .lsn .lsn-big { margin-bottom: 34px !important; } }

/* «Подарки и желания»: подарок справа, посередине видимого текста; текст обходит его по контуру */
.lsn .lsn-flow-wrap > .lsn-wrapimg.lsn-gift:first-child, .lsn .lsn-wrapimg.lsn-gift { float: right; clear: right; width: 220px; height: auto; margin: 128px -10px 10px 10px !important; shape-margin: 20px; }
@media (max-width: 760px) { .lsn .lsn-flow-wrap > .lsn-wrapimg.lsn-gift:first-child, .lsn .lsn-wrapimg.lsn-gift { float: none; width: 200px; margin: 4px auto 12px !important; align-self: center; } }

/* вторая картинка у абзаца (не в конце): справа, текст обходит её по контуру.
   «Подарки и желания»: две первые строчки абзаца про куранты — во всю ширину, дальше подарок */
.lsn .lsn-flow-wrap:has(.lsn-wrapimg2:not(:last-child)) { position: relative; }
.lsn .lsn-flow .lsn-wrapimg2:not(:last-child) { position: relative; float: right; right: auto; width: 335px !important; max-width: none !important; height: auto !important; box-sizing: border-box; padding: 76px 0 0 60px; margin: 0 -30px 0 0 !important; shape-outside: polygon(0 76px, 100% 76px, 100% 100%, 0 100%) !important; pointer-events: none; }
.lsn .lsn-main .lsn-flow .lsn-wrapimg2:not(:last-child) ~ p:nth-of-type(n+3) { clear: right; }
@media (max-width: 760px) { .lsn .lsn-flow .lsn-wrapimg2:not(:last-child) { position: static; float: none; shape-outside: none !important; order: 2; display: block; width: 190px !important; margin: 6px auto 12px !important; } .lsn .lsn-main .lsn-flow .lsn-wrapimg2:not(:last-child) + p, .lsn .lsn-main .lsn-flow .lsn-wrapimg2:not(:last-child) + p + p { padding-right: 0 !important; } .lsn .lsn-flow .lsn-wrapimg2:not(:last-child) { width: 230px !important; margin: 6px auto 12px !important; } }

/* «Новый год в живописи»: короткие строки «Картину … написал …» — ровно по левому краю, без растягивания */
.lsn .lsn-main .lsn-flow-wrap:has(.lsn-frame) p { text-align: left !important; text-align-last: left !important; }
/* «Новый год в живописи»: перед «А ещё художники любили писать зиму…» — большой промежуток, как под заголовком;
   дальше текст идёт от левого края, под рамой */
@media (min-width: 761px) {
  .lsn .lsn-main .lsn-flow-wrap:has(.lsn-frame) p:nth-of-type(4) { clear: left; margin-top: 0; padding-top: 36px; }
  .lsn .lsn-main .lsn-flow-wrap:has(.lsn-frame) p:nth-of-type(n+4) { overflow: visible; }
}
/* «Новый год в живописи»: пары «Картину … написал …» — как строчки одного абзаца, без абзацного отступа */
.lsn .lsn-main .lsn-flow-wrap:has(.lsn-frame) p:nth-of-type(2), .lsn .lsn-main .lsn-flow-wrap:has(.lsn-frame) p:nth-of-type(5) { margin-bottom: 0 !important; }
@media (min-width: 761px) {
  .lsn .lsn-plain:has(.lsn-frame) .lsn-big { margin-left: calc(411px + clamp(-65px, calc(81px - (100vw - 1076px) / 2), 0px)) !important; text-align: left; transform-origin: left center; }
}
/* «Новый год в живописи» (компьютер): сетка — рама слева рядом с заголовком и первыми строчками,
   ниже — текст во всю ширину */
@media (min-width: 761px) {
  .lsn .lsn-main .lsn-flow-wrap:has(.lsn-frame) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0; align-items: start; }
  .lsn .lsn-main .lsn-flow-wrap:has(.lsn-frame) > .lsn-frame { grid-column: 1; grid-row: 1 / span 3; float: none; }
  .lsn .lsn-main .lsn-flow-wrap:has(.lsn-frame) > p:nth-of-type(-n+3) { grid-column: 2; }
  .lsn .lsn-main .lsn-flow-wrap:has(.lsn-frame) > p:nth-of-type(n+4) { grid-column: 1 / -1; }
  .lsn .lsn-plain:has(.lsn-frame) .lsn-big { white-space: nowrap; font-size: clamp(40px, 4.4vw, 64px) !important; }
}
@media (min-width: 761px) and (max-width: 1150px) { .lsn .lsn-plain:has(.lsn-frame) .lsn-big { white-space: normal; } }
@media (min-width: 761px) { .lsn .lsn-main .lsn-flow-wrap:has(.lsn-frame) > .lsn-frame { align-self: end; margin-top: -240px !important; margin-bottom: 12px !important; } }
/* «Ёлочные игрушки»: без обтекания по картинке (в Safari оно не срабатывает) — первый абзац с одной точки, и заголовок над ним с той же точки */
.lsn .lsn-flow-wrap > .lsn-wrapimg.lsn-toys { shape-outside: none !important; }
/* «Как ёлка пришла в дом»: заголовок и весь текст — по одной вертикали слева; кончики веток уходят под текст */
@media (min-width: 761px) {
  .lsn .lsn-plain:has(.lsn-wr) .lsn-flow { position: relative; padding-left: 496px !important; min-height: 760px; box-sizing: border-box; }
  .lsn .lsn-flow-wrap > .lsn-wrapimg.lsn-wr:first-child, .lsn .lsn-wrapimg.lsn-wr { position: absolute !important; float: none !important; left: -135px; top: -66px; margin: 0 !important; shape-outside: none !important; }
}
@media (min-width: 761px) { .lsn .lsn-plain:has(.lsn-wr) .lsn-big { font-size: min(64px, 4.3vw) !important; } }
/* «Новый год в живописи»: строчки про «Снегурочку» и «Ёлочный торг» и первая строчка про зиму — растянуты до одной правой линии */
@media (min-width: 1300px) {
  .lsn .lsn-main .lsn-flow-wrap:has(.lsn-frame) > p:nth-of-type(2), .lsn .lsn-main .lsn-flow-wrap:has(.lsn-frame) > p:nth-of-type(3) { text-align: justify !important; text-align-last: justify !important; }
  .lsn .lsn-main .lsn-flow-wrap:has(.lsn-frame) > p:nth-of-type(4) { text-align: justify !important; text-align-last: left !important; }
}
@media (max-width: 760px) { .lsn .lsn-flow .lsn-wrapimg2:not(:last-child) { padding: 0 !important; float: none !important; } }
/* круглые стрелки «назад / дальше» в уроках — без тени, во всех разделах */
.lsn-next, .lsn-next:hover, .lsn-next:active, .lsn-next:focus, .lsn-next:focus-visible { box-shadow: none !important; filter: none !important; }
@media (min-width: 761px) { .lsn .lsn-plain:has(.lsn-toys) .lsn-big { margin-left: 316px !important; padding-left: 0 !important; text-align: left !important; transform-origin: left center; } }
/* картинка по центру между абзацами (География → «Карта и глобус») */
.lsn .lsn-main .lsn-flow .lsn-wrapimg2.lsn-mid { position: static !important; float: none !important; display: block; width: 460px !important; max-width: 90% !important; height: auto !important; margin: 18px auto 22px !important; padding: 0 !important; shape-outside: none !important; }
@media (max-width: 760px) { .lsn .lsn-main .lsn-flow .lsn-wrapimg2.lsn-mid { width: 300px !important; margin: 10px auto 14px !important; } }
/* «Стороны света»: компас справа, текст слева ровной колонкой (правый край — одна вертикаль) */
@media (min-width: 761px) {
  .lsn .lsn-main .lsn-flow-wrap:has(.lsn-cmp) { position: relative; padding-right: 380px !important; min-height: 300px; box-sizing: border-box; }
  .lsn .lsn-flow-wrap > .lsn-wrapimg.lsn-cmp, .lsn .lsn-flow-wrap > .lsn-wrapimg.lsn-cmp:first-child { position: absolute !important; float: none !important; right: -40px; top: 40px; width: 370px; height: auto; margin: 0 !important; shape-outside: none !important; }
}
@media (max-width: 760px) { .lsn .lsn-flow-wrap > .lsn-wrapimg.lsn-cmp, .lsn .lsn-flow-wrap > .lsn-wrapimg.lsn-cmp:first-child { width: 230px; height: auto; margin: 4px auto 12px !important; align-self: center; } }
@media (min-width: 761px) { .lsn .lsn-plain:has(.lsn-cmp) .lsn-big { width: auto !important; margin-right: 380px !important; margin-left: 0 !important; padding-right: 0 !important; text-align: right !important; transform-origin: right center; } }
@media (min-width: 761px) { .lsn .lsn-main .lsn-flow-wrap:has(.lsn-cmp) > p:nth-of-type(-n+2) { text-align: justify !important; text-align-last: justify !important; } }
/* условные знаки в уроке: значок + подпись */
.lsn .sg-list { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.lsn .sg, .td-q .sg-i { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.sg-i { width: 34px; height: 34px; flex: none; }
.td-q .sg-i { width: 44px; height: 44px; vertical-align: middle; margin-left: 6px; }
.mg-it .sg-i { width: 36px; height: 36px; vertical-align: middle; }
.lsn .lsn-main .lsn-flow .lsn-wrapimg2.lsn-mid:first-child { margin-top: 0 !important; }
/* картинка по центру в конце урока (после текста) — обычный блок, а не угловая картинка */
.lsn .lsn-main .lsn-flow-wrap .lsn-wrapimg2.lsn-mid:last-child { position: static !important; right: auto !important; bottom: auto !important; margin: 22px auto 0 !important; }
.lsn-flow-wrap:has(.lsn-wrapimg2.lsn-mid:last-child) { padding-bottom: 0 !important; }
/* ряд сокровищ — в одну строку на компьютере */
@media (min-width: 900px) { .lsn .sg-list:has(.sg:nth-child(7)) { flex-wrap: nowrap; gap: 10px 12px; justify-content: space-between; font-size: min(1em, 2.45vw); } .lsn .sg-list:has(.sg:nth-child(7)) .sg { gap: 6px; } .lsn .sg-list:has(.sg:nth-child(7)) .sg-i { width: 30px; height: 30px; } }
/* «Найди пару»: плашки слева и справа одинаковой высоты, чтобы ряды совпадали */
.qz .mg-it .sg-i { width: 30px; height: 30px; }
@media (max-width: 760px) { .qz .mg-it { min-height: 76px; display: flex; align-items: center; } }
/* «Найди пару»: справа у плашки маленькое поле, чтобы текст с цветной точкой помещался в одну строку */
.qz .mg-it { padding-right: 6px !important; }
/* светик: обводка в два тона — внутренняя полоса чуть темнее жёлтой середины, внешняя — прежняя рыжая */
.crs-sv .sv-m { fill: none; stroke: none; }
.crs-sv.on .sv-m { fill: none; stroke: #f8c43c; stroke-width: 2.6; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; transform: scale(0.9); }
/* «Мои аудио»: кнопка «слушать» и сведения о записи */
.pl-play { width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; cursor: pointer; color: #fff; background: #45bcc0; box-shadow: none; flex: none; }
.pl-play svg { width: 20px; height: 20px; }
.pl-play.on { background: #2f9ea2; }
.pl-lic { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; opacity: 0.85; }
.pl-licbox { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; font-size: 13px; line-height: 1.4; color: #6b5f58; }
.pl-licbox a { color: inherit; }

/* ---------- страница пластинки ---------- */
.mrec-go { cursor: pointer; }
.rp { position: fixed; inset: 0; z-index: 120; display: none; overflow-y: auto; background: #f3fbfb; }
.rp.on { display: block; }
body.rp-open { overflow: hidden; }
.rp-in { position: relative; max-width: 980px; margin: 0 auto; padding: 56px 28px 40px; box-sizing: border-box; color: #3a302d; }
.rp-x { position: fixed; top: 14px; right: 18px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(60, 40, 30, 0.08); color: #3a302d; display: grid; place-items: center; cursor: pointer; z-index: 2; }
.rp-x svg { width: 20px; height: 20px; }
.rp-top { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 44px; align-items: center; }
.rp-player { position: relative; width: 100%; aspect-ratio: 1; }
.rp-disc { width: 100%; height: 100%; display: block; filter: drop-shadow(0 18px 26px rgba(40, 30, 25, 0.28)); }
.rp-player.on .rp-disc { animation: rpSpin 3.4s linear infinite; }
@media (max-width: 760px) { .rp-play { width: 52px; height: 52px; margin: -26px 0 0 -26px; } .rp-play svg { width: 26px; height: 26px; } }
@keyframes rpSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rp-player.on .rp-disc { animation: none; } }
.rp-lbl-t { font: 900 10.5px Nunito, Rubik, sans-serif; fill: #fff; letter-spacing: 0.04em; }
.rp-lbl-s { font: 700 8.5px Rubik, Nunito, sans-serif; fill: #fff; opacity: 0.9; }
.rp-play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; border: 4px solid #fff; background: var(--c); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: none; }
.rp-play svg { width: 34px; height: 34px; }
.rp-who { font-size: 17px; color: #8a7d75; }
.rp-title { font-family: Caveat, Rubik, sans-serif; font-weight: 700; font-size: clamp(52px, 6vw, 76px); line-height: 1; margin: 4px 0 22px; }
.rp-sides { display: flex; flex-direction: column; gap: 10px; }
.rp-side { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; border: 2px solid transparent; background: rgba(255, 255, 255, 0.75); border-radius: 16px; padding: 12px 16px; font: inherit; color: inherit; cursor: pointer; }
.rp-side b { font-size: 15px; color: var(--c); text-transform: uppercase; letter-spacing: 0.04em; }
.rp-side span { font-size: 19px; }
.rp-side.on { border-color: var(--c); background: #fff; }
.rp-bar { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: 14px; color: #8a7d75; }
.rp-seek { flex: 1; accent-color: var(--c); }
.rp-about { margin: 40px 0 0; font-size: 22px; line-height: 1.6; }
.rp-about p { margin: 0 0 12px; }
.rp-foot { margin-top: 34px; border-top: 1px solid rgba(60, 40, 30, 0.12); padding-top: 18px; font-size: 14px; line-height: 1.5; color: #7a6e67; }
.rp-lic { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.rp-licbox { margin: 10px 0 0; }
.rp-licbox p { margin: 0 0 4px; }
.rp-licbox a { color: inherit; }
.rp-note { margin: 14px 0 0; font-size: 13px; }
@media (max-width: 760px) {
  .rp-in { padding: 56px 16px 32px; }
  .rp-top { grid-template-columns: 1fr; gap: 22px; }
  .rp-player { width: min(78vw, 320px); margin: 0 auto; }
  .rp-title { font-size: 52px; margin-bottom: 14px; }
  .rp-about { font-size: 19px; margin-top: 26px; }
}
/* пластинка: стороны с частями, полоса-главы, бледная строка внизу */
.rp-side { display: block !important; cursor: default; }
.rp-sn { border: 0; background: none; padding: 0; font: inherit; font-size: 15px; font-weight: 700; color: var(--c); text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; }
.rp-trs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-top: 2px; }
.rp-trs i { font-style: normal; color: #b0a59e; }
.rp-tr { border: 0; background: none; padding: 2px 0; font: inherit; font-size: 19px; color: inherit; cursor: pointer; border-bottom: 2px solid transparent; }
.rp-tr:hover { border-bottom-color: rgba(60, 40, 30, 0.2); }

.rp-track { position: relative; flex: 1; height: 22px; display: flex; align-items: center; }
.rp-segs { position: absolute; left: 0; right: 0; top: 50%; height: 8px; margin-top: -4px; display: flex; gap: 4px; pointer-events: none; }
.rp-seg { flex: 1 1 0; position: relative; height: 8px; border-radius: 4px; background: rgba(60, 40, 30, 0.14); overflow: hidden; pointer-events: auto; cursor: pointer; }
.rp-seg i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--c); }
.rp-track .rp-seek { position: absolute; inset: 0; width: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rp-foot { margin-top: 40px; }
.rp-note { margin: 28px 0 0 !important; font-size: 11px !important; line-height: 1.4; color: #b9aea7 !important; max-width: none !important; width: 100%; }
@media (max-width: 760px) { .rp-note { white-space: normal; } }
@media (min-width: 761px) { .rp-note { white-space: normal; font-size: 12.5px !important; letter-spacing: 0; } }
/* звучащая часть — просто жирным, без цвета и подчёркивания */
.rp-tr, .rp-tr:hover { border-bottom: 0 !important; }
.rp-tr.rp-now { font-weight: 700; }
/* жирная звучащая часть не сдвигает соседей: место под жирное слово занято заранее */
.rp-tr { display: inline-grid; line-height: 1.3; padding: 2px 0 !important; vertical-align: middle; }
.rp-tr > span, .rp-tr::after { grid-area: 1 / 1; }
.rp-tr::after { content: attr(data-t); font-weight: 700; visibility: hidden; height: 0; overflow: hidden; }
.rp-trs { align-items: center; }
/* рассказ о балете — как текст уроков: тот же размер, ровно по обоим краям */
.rp-about { font-size: 28px; line-height: 1.65; }
.rp-about p { text-align: justify; text-align-last: left; hyphens: manual; margin: 0 0 14px; }
@media (max-width: 760px) { .rp-about { font-size: 22px; } .rp-about p { text-align: left; } }
/* «лицензия» и строка о записях — рядом */
.rp-note { margin-top: 6px !important; }
/* время у полосы — постоянной ширины и с ровными цифрами, чтобы полоса не дёргалась */
.rp-t0, .rp-t1 { flex: none; width: 3.2em; font-variant-numeric: tabular-nums; }
.rp-t0 { text-align: right; } .rp-t1 { text-align: left; }
/* страница пластинки — та же ширина текста, что в уроках */
.rp-in { max-width: 1108px !important; padding-left: 16px !important; padding-right: 16px !important; }

/* анонс под полкой пластинок — те же отступы и цвет, что у строчки под «Моими пособиями» */
#muShelf .pr-pdf { flex-basis: 100%; width: 100%; grid-column: 1 / -1; max-width: none; position: relative; z-index: 30; margin-top: 36px !important; margin-bottom: 0 !important; }
@media (max-width: 760px) { #muShelf .pr-pdf { margin-top: 34px !important; } }

/* подсказка под полкой книг — как анонсы под пособиями и пластинками */
#shelf .pr-pdf { flex-basis: 100%; width: 100%; grid-column: 1 / -1; max-width: none; position: relative; z-index: 30; margin-top: 36px !important; margin-bottom: 4px !important; }
@media (max-width: 760px) { #shelf .pr-pdf { margin-top: 34px !important; } }

/* легендарное исполнение: на конверте под композитором и на странице пластинки под названием */
.mrec-pk .mrec-a .mrec-perf { display: block; font-style: normal; color: var(--c); font-weight: 600; margin-top: 2px; font-size: 9.2px; letter-spacing: -.01em; white-space: nowrap; }
.rp-perf { margin: -4px 0 14px; font-size: 17px; font-weight: 600; color: var(--c); }
@media (max-width: 760px) { .mrec-pk .mrec-a .mrec-perf { white-space: normal; font-size: 8px; } }

.mrec-pk .mrec-legend { position: absolute; right: 12px; top: 12px; z-index: 9; line-height: 0; pointer-events: none; }
.mrec-pk .mrec-legend svg { width: 27px; height: 21px; display: block; } /* под размер «+ наушников» на обложке книги */
@media (max-width: 760px) { .mrec-pk .mrec-legend { right: 5px; } .mrec-pk .mrec-legend svg { width: 18px; height: 14px; } }

/* кнопка «слушать» на пластинке крупнее: занимает почти всю наклейку между названием и «стороной» */
.rp-player .rp-play { width: 30%; height: 30%; margin: 0; transform: translate(-50%, -50%); border-width: 5px; }
.rp-player .rp-play svg { width: 58%; height: 58%; }
@media (max-width: 760px) { .rp-player .rp-play { width: 30%; height: 30%; margin: 0; border-width: 4px; } .rp-player .rp-play svg { width: 58%; height: 58%; } }

/* обложки пособий: черепашку сверху убрали, «БРАВО» внизу — тем же золотом, что лавровый венок на пластинках */
#prShelf .pr-cv.wbc .wbc-logo, #geoShelf .pr-cv.wbc .wbc-logo, .pr-cv.wbc .wbc-logo { display: none !important; }
#prShelf .pr-cv.wbc .wbc-br, #geoShelf .pr-cv.wbc .wbc-br, .pr-cv.wbc .wbc-br { color: #d4a23c !important; }

/* @cover-align-start */
/* правило: буквы внизу меряем по низу основного ряда букв — хвостики (р, ф, у, д) и черта-разделитель («ма|ма») не считаются; так выровнены «жыраф» и «ма|ма» */
/* обложки пособий: одинаковые отступы во всех тетрадках (замерено по картинке обложки)
   — название из одного слова начинается на одном расстоянии от верха цветного квадрата, как на «Словах»;
   — рисунок или буквы внизу стоят на одном расстоянии от низа квадрата, как «а», «ма», «мама», «я сам» */
#prShelf .pr-nb[data-nb="lines"] .pr-cv .wbc-sq > * { translate: 0 calc(var(--shelf-h) * 0.0076); }
#prShelf .pr-nb[data-nb="waves"] .pr-cv .wbc-sq > * { translate: 0 calc(var(--shelf-h) * 0.0152); }
#prShelf .pr-nb[data-nb="figs"] .pr-cv .wbc-tt { translate: 0 calc(var(--shelf-h) * -0.0254); }
#prShelf .pr-nb[data-nb="figs"] .pr-cv .wbc-sq > * { translate: 0 calc(var(--shelf-h) * 0.0152); }
#prShelf .pr-nb[data-nb="dor"] .pr-cv .wbc-sq > * { translate: 0 calc(var(--shelf-h) * 0.0152); }
#prShelf .pr-nb[data-nb="sym"] .pr-cv .wbc-tt { translate: 0 calc(var(--shelf-h) * -0.0381); }
#prShelf .pr-nb[data-nb="sym"] .pr-cv .wbc-sq > * { translate: 0 calc(var(--shelf-h) * 0.0152); }
#prShelf .pr-nb[data-nb="pics"] .pr-cv .wbc-sq > * { translate: 0 calc(var(--shelf-h) * 0.0152); }
#prShelf .pr-nb[data-nb="maze"] .pr-cv .wbc-tt { translate: 0 calc(var(--shelf-h) * -0.0355); }
#prShelf .pr-nb[data-nb="maze"] .pr-cv .wbc-sq > * { translate: 0 calc(var(--shelf-h) * 0.0025); }
#prShelf .pr-nb[data-nb="syl"] .pr-cv .wbc-tt { translate: 0 calc(var(--shelf-h) * -0.0254); }
#prShelf .pr-nb[data-nb="dots"] .pr-cv .wbc-sq > * { translate: 0 calc(var(--shelf-h) * -0.0076); }
#prShelf .pr-nb[data-nb="px-dict"] .pr-cv .wbc-tt { translate: 0 calc(var(--shelf-h) * -0.0254); }
#prShelf .pr-nb[data-nb="px-dict"] .pr-cv .wbc-sq > * { translate: 0 calc(var(--shelf-h) * -0.0178); }
#prShelf .pr-nb[data-nb="px-copy"] .pr-cv .wbc-tt { translate: 0 calc(var(--shelf-h) * -0.0304); }
#prShelf .pr-nb[data-nb="px-copy"] .pr-cv .wbc-sq > * { translate: 0 calc(var(--shelf-h) * -0.0254); }
#prShelf .pr-nb[data-nb="px-err"] .pr-cv .wbc-sq > * { translate: 0 calc(var(--shelf-h) * -0.0254); }
#prShelf .pr-nb[data-nb="px-punct"] .pr-cv .wbc-sq > * { translate: 0 calc(var(--shelf-h) * -0.0381); }
#prShelf .pr-nb[data-nb="px-split"] .pr-cv .wbc-sq > * { translate: 0 calc(var(--shelf-h) * -0.0254); }
#prShelf .pr-nb[data-nb="px-text"] .pr-cv .wbc-sq > * { translate: 0 calc(var(--shelf-h) * -0.0254); }
#prShelf .pr-nb[data-nb="words"] .pr-cv .wbc-tt { translate: 0 calc(var(--shelf-h) * -0.0254); }
@media (max-width: 760px) {
  #prShelf .pr-nb[data-nb="words"] .pr-cv .wbc-tt { translate: 0 calc(var(--shelf-h) * -0.0207); }
  #prShelf .pr-nb[data-nb="lines"] .pr-cv .wbc-sq > * { translate: 0 calc(var(--shelf-h) * -0.0049); }
  #prShelf .pr-nb[data-nb="waves"] .pr-cv .wbc-sq > * { translate: 0 calc(var(--shelf-h) * 0.0069); }
  #prShelf .pr-nb[data-nb="figs"] .pr-cv .wbc-tt { translate: 0 calc(var(--shelf-h) * -0.0232); }
  #prShelf .pr-nb[data-nb="figs"] .pr-cv .wbc-sq > * { translate: 0 calc(var(--shelf-h) * 0.0028); }
  #prShelf .pr-nb[data-nb="dor"] .pr-cv .wbc-sq > * { translate: 0 calc(var(--shelf-h) * 0.0028); }
  #prShelf .pr-nb[data-nb="sym"] .pr-cv .wbc-tt { translate: 0 calc(var(--shelf-h) * -0.0423); }
  #prShelf .pr-nb[data-nb="sym"] .pr-cv .wbc-sq > * { translate: 0 calc(var(--shelf-h) * 0.0028); }
  #prShelf .pr-nb[data-nb="pics"] .pr-cv .wbc-sq > * { translate: 0 calc(var(--shelf-h) * 0.0028); }
  #prShelf .pr-nb[data-nb="maze"] .pr-cv .wbc-tt { translate: 0 calc(var(--shelf-h) * -0.0231); }
  #prShelf .pr-nb[data-nb="maze"] .pr-cv .wbc-sq > * { translate: 0 calc(var(--shelf-h) * -0.0099); }
  #prShelf .pr-nb[data-nb="syl"] .pr-cv .wbc-tt { translate: 0 calc(var(--shelf-h) * -0.0261); }
  #prShelf .pr-nb[data-nb="dots"] .pr-cv .wbc-sq > * { translate: 0 calc(var(--shelf-h) * -0.0200); }
  #prShelf .pr-nb[data-nb="star"] .pr-cv .wbc-sq > * { translate: 0 calc(var(--shelf-h) * -0.0083); }
  #prShelf .pr-nb[data-nb="px-dict"] .pr-cv .wbc-tt { translate: 0 calc(var(--shelf-h) * -0.0190); }
  #prShelf .pr-nb[data-nb="px-dict"] .pr-cv .wbc-sq > * { translate: 0 calc(var(--shelf-h) * -0.0137); }
  #prShelf .pr-nb[data-nb="px-copy"] .pr-cv .wbc-tt { translate: 0 calc(var(--shelf-h) * -0.0189); }
  #prShelf .pr-nb[data-nb="px-err"] .pr-cv .wbc-sq > * { translate: 0 calc(var(--shelf-h) * -0.0275); }
  #prShelf .pr-nb[data-nb="px-punct"] .pr-cv .wbc-sq > * { translate: 0 calc(var(--shelf-h) * -0.0422); }
  #prShelf .pr-nb[data-nb="px-split"] .pr-cv .wbc-sq > * { translate: 0 calc(var(--shelf-h) * -0.0246); }
}
/* @cover-align-end */

/* прослушивание закрыто вне ЕС (США): кнопка бледная, под названием — короткая строка */
.rp-player .rp-play.rp-off { opacity: .45; cursor: default; }
.rp-geo { margin: 4px 0 10px; font-size: 14px; color: #8a7d75; }
/* пометка о правах под пластинкой: по ширине и чуть мельче, но всё ещё читается */
.rp-foot .rp-note { text-align: justify; text-align-last: left; font-size: 11.5px !important; line-height: 1.45; hyphens: auto; }
@media (max-width: 760px) { .rp-foot .rp-note { font-size: 10.5px !important; } }

/* конверты пластинок: без дырочки в центре наклейки — она мешала читать название */
.mrec-pk > .mrec-win i, .mrec-pk-nb > .mrec-win i { display: none !important; }

/* книги как пособия и пластинки: верх обложки цветной (косой край), автор и название белые на цвете, обводка та же */
#v-read .shelf .book.bk-v-sashf.bk-v-sashf::after { clip-path: polygon(0 0, 100% 0, 100% 64%, 0 80%) !important; }
html body #v-read .shelf .book.bk-lt.bk-lt .bk-a.bk-a { color: rgba(255, 255, 255, .92) !important; position: relative; z-index: 3; }
#v-read .shelf .book.bk-lt .bk-band { z-index: 3; }
html body #v-read .shelf .book.bk-v-sashf.bk-v-sashf > .bk-au { color: var(--bg) !important; }
html body #v-read .shelf .book.bk-lt.bk-lt .bk-band.bk-band .bk-t.bk-t { color: #fff !important; -webkit-text-stroke: var(--cov-stroke) var(--cov-ink) !important; paint-order: stroke fill; letter-spacing: .05em !important; }

/* имя автора на книге — тот же шрифт и размер, что имя композитора на пластинке */
#v-read .shelf .book .bk-a { line-height: 1.2 !important; }

/* одна обводка названий для всех обложек — пособий, пластинок и книг: тёмно-серая, снаружи 2 px */
:root { --cov-stroke: 2px !important; --cov-ink: #2b2523 !important; }
@media (max-width: 760px) { :root { --cov-stroke: 1.6px !important; } }
/* обводка только снаружи букв (половина линии под буквой), одинаково на пособиях, пластинках и книгах: снаружи видно 1 px, тёмная */
.pr-cv.wbc-gen .wbc-tt, .pr-cv.wbc-gen .wbc-tt b, .pr-cv.wbc-gen .wbc-tt i, .mrec-pk .mrec-t, html body #v-read .shelf .book.bk-lt.bk-lt .bk-band.bk-band .bk-t.bk-t { paint-order: stroke fill !important; }

/* названия на обложках одного масштаба: пособия чуть меньше (×0.8), пластинки как были, книги крупнее */
.pr-cv.wbc-gen .wbc-tt b { font-size: calc(var(--shelf-h) * var(--k) * .8); }
#geoShelf .pr-cv.wbc-gen .wbc-tt b { font-size: calc(var(--cv-h, 150px) * var(--k) * .8); }
html body #v-read .shelf .book.bk-lt.bk-lt .bk-band.bk-band .bk-t.bk-t { font-size: calc(var(--shelf-h) * .112) !important; }
html body #v-read .shelf .book.bk-lt.bk-lt .bk-band.bk-band .bk-t.bk-t.bk-t-tight { font-size: calc(var(--shelf-h) * .084) !important; }
html body #v-read .shelf .book.bk-lt.bk-lt .bk-band.bk-band .bk-t.bk-t.bk-t-long { font-size: calc(var(--shelf-h) * .088) !important; }
html body #v-read .shelf .book.bk-lt.bk-lt .bk-band.bk-band .bk-t.bk-t { -webkit-line-clamp: 4 !important; } /* длинные названия — до четырёх строк, без многоточия */

/* книги квадратные — того же размера, что пособия и пластинки (как детские квадратные книжки) */
html body #v-read .shelf .books .book.bk-lt.bk-lt { width: var(--shelf-h) !important; height: var(--shelf-h) !important; min-width: var(--shelf-h) !important; }
/* название книги наверху, как было, чуть ниже прежнего */
html body #v-read .shelf .book.bk-lt.bk-lt .bk-band.bk-band { margin-top: calc(var(--shelf-h) * .03) !important; }
html body #v-read .shelf .book.bk-lt.bk-lt .bk-band.bk-band { padding-left: 6% !important; padding-right: 6% !important; }
html body #v-read .shelf .book.bk-lt.bk-lt .bk-band.bk-band .bk-t.bk-t { word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; width: 100%; }

/* «+ наушники» на книге: прежнего размера, в цвет книги */
html body #v-read .shelf .book.bk-v-sashf.bk-v-sashf > .bk-au { color: var(--bg) !important; }

/* строки названия книги: каждая своим размером (см. bookLines в 15-reading.js) */
html body #v-read .shelf .book.bk-lt .bk-band .bk-t .bk-ln { display: block; line-height: 1.18; white-space: nowrap; }
html body #v-read .shelf .book.bk-lt.bk-lt .bk-band.bk-band .bk-t.bk-t { -webkit-line-clamp: unset !important; display: block !important; overflow: visible !important; }

/* «Проверка знаний», финал: светик и «+N светиков» — тем же жёлтым и того же размера, что на финале пособия */
.pt .pt-res .crs-sv.big { width: 78px !important; height: 78px !important; }
.pt .pt-res .pt-got { color: #f2a516 !important; font-weight: 700 !important; }

/* «Собери текст»: цифры 1 2 3 на обложке — пониже, вровень со строчными буквами других обложек */
#prShelf .pr-nb[data-nb="px-text"] .pr-cv .wbc-glyph { transform: scale(.8); transform-origin: 50% 82%; }

/* главный экран: новая картинка (дети и черепашка слева) — держим их в кадре, кадрируем справа */
body.h3-on .h3-hero { background-position: 12% 45% !important; }

/* картинки-предметы у абзацев урока (гусли, свирель, ложки): справа и слева, как ёлочные игрушки */
.lsn .lsn-main .lsn-flow .lsn-pic { height: auto !important; max-width: none !important; shape-outside: none !important; width: 250px; margin-top: 6px !important; margin-bottom: 8px !important; }
.lsn .lsn-main .lsn-flow .lsn-pic.lsn-pic-big { width: 300px; }
.lsn .lsn-main .lsn-flow .lsn-pic-r { float: right; margin-left: 22px !important; margin-right: -10px !important; }
.lsn .lsn-main .lsn-flow .lsn-pic-l { float: left; margin-right: 22px !important; margin-left: -10px !important; }
.lsn .lsn-main .lsn-flow:has(.lsn-pic)::after { content: ""; display: block; clear: both; }
@media (max-width: 760px) {
  .lsn .lsn-main .lsn-flow .lsn-pic, .lsn .lsn-main .lsn-flow .lsn-pic.lsn-pic-big { float: none; display: block; width: 210px; margin: 6px auto 12px !important; }
}

/* «Гусли, гармонь и баян»: мальчик слева, текст справа; заголовок по центру над текстом; мальчик посередине между краем экрана и текстом */
@media (min-width: 761px) {
  .lsn .lsn-plain:has(.lsn-pic-gusli) .lsn-big { display: block !important; box-sizing: border-box; width: calc(100% - 312px) !important; max-width: none !important; align-self: flex-end !important; text-align: center !important; margin-right: 0 !important; margin-left: 312px !important; padding-left: 0 !important; padding-right: 0 !important; transform-origin: center center; }
  .lsn .lsn-main .lsn-flow .lsn-pic-gusli { position: relative; left: calc((max(0px, (100vw - 1108px) / 2) + 6px - 22px) / -2); }
  /* мальчик слева, низ рисунка вровень с низом текста */
  .lsn .lsn-main .lsn-flow:has(.lsn-pic-gusli) { display: grid !important; grid-template-columns: auto 1fr; column-gap: 22px; }
  .lsn .lsn-main .lsn-flow:has(.lsn-pic-gusli) > p { grid-column: 2; }
  .lsn .lsn-main .lsn-flow .lsn-pic-gusli { float: none !important; grid-column: 1; grid-row: 1 / span 2; align-self: end; margin: 0 0 0 -10px !important; }
  /* «Свирель, жалейка, ложки»: одна большая картинка справа, заголовок по центру экрана */
  .lsn .lsn-main .lsn-flow .lsn-pic-ls { width: 326px; }
  /* ложки и свирель справа у второго абзаца, низ рисунка вровень с низом текста */
  .lsn .lsn-main .lsn-flow:has(.lsn-pic-ls) { display: grid !important; grid-template-columns: 1fr auto; column-gap: 22px; }
  .lsn .lsn-main .lsn-flow:has(.lsn-pic-ls) > p:first-child { grid-column: 1 / span 2; }
  .lsn .lsn-main .lsn-flow:has(.lsn-pic-ls) > p:not(:first-child) { grid-column: 1; grid-row: 2; }
  .lsn .lsn-main .lsn-flow .lsn-pic-ls { float: none !important; grid-column: 2; grid-row: 2; align-self: end; margin: 0 -6px 10px 0 !important; }
  .lsn .lsn-plain:has(.lsn-pic-ls) .lsn-big { display: block !important; width: 100% !important; max-width: none !important; text-align: center !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; transform-origin: center center; }
}

/* «Дирижёр»: мальчик слева, низ рисунка вровень с низом текста, текст ровной колонкой */
@media (min-width: 761px) {
  .lsn .lsn-main .lsn-flow-wrap:has(> .lsn-cond) { display: grid !important; grid-template-columns: auto 1fr; column-gap: 22px; }
  .lsn .lsn-main .lsn-flow-wrap:has(> .lsn-cond) > p { grid-column: 2; }
  .lsn .lsn-main .lsn-flow-wrap > .lsn-wrapimg.lsn-cond, .lsn .lsn-main .lsn-flow-wrap > .lsn-wrapimg.lsn-cond:first-child { float: none !important; shape-outside: none !important; grid-column: 1; grid-row: 1 / span 9; align-self: end; height: auto !important; width: 330px; margin: 0 !important; position: relative; left: calc((max(0px, (100vw - 1108px) / 2) + 6px - 22px) / -2); }
}
/* «Поём хором»: дети крупнее */
.lsn .lsn-flow-wrap > .lsn-wrapimg.lsn-choir, .lsn .lsn-flow-wrap > .lsn-wrapimg.lsn-choir:first-child { height: auto !important; width: 350px; }
@media (max-width: 760px) { .lsn .lsn-flow-wrap > .lsn-wrapimg.lsn-choir, .lsn .lsn-flow-wrap > .lsn-wrapimg.lsn-choir:first-child { width: 240px; } }

/* «Колыбельные песни»: люлька справа у абзаца про колыбель */
.lsn .lsn-main .lsn-flow .lsn-pic.lsn-pic-kol { width: 270px; }

/* «Поём хором»: дети слева, посередине между краем экрана и текстом; низ вровень с низом текста, вверх могут заходить к заголовку */
@media (min-width: 761px) {
  .lsn .lsn-main .lsn-flow-wrap:has(> .lsn-choir) { position: relative; padding-left: 424px !important; min-height: 0; }
  .lsn .lsn-main .lsn-flow-wrap > .lsn-wrapimg.lsn-choir, .lsn .lsn-main .lsn-flow-wrap > .lsn-wrapimg.lsn-choir:first-child { position: absolute !important; float: none !important; shape-outside: none !important; width: 380px !important; height: auto !important; bottom: 0; left: calc((44px - max(16px, (100vw - 1076px) / 2)) / 2); margin: 0 !important; }
}

/* ===== Семейный альбом ===== */
.hdr-alb { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 56px; height: 50px; margin-left: 2px; border-radius: 14px; text-decoration: none; transition: transform 0.2s; -webkit-tap-highlight-color: transparent; }
.hdr-alb:hover { transform: scale(1.08); }
.hdr-alb img { width: 53px; height: 44px; object-fit: contain; }
.hdr-alb b { position: absolute; top: 0; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: #ea6699; color: #fff; font-size: 12px; line-height: 20px; text-align: center; box-shadow: 0 0 0 2px #fff; }
@media (min-width: 901px) { .hdr-alb { transform: translateY(5px); } .hdr-alb:hover { transform: translateY(5px) scale(1.08); } }
@media (max-width: 900px) { .hdr-alb { width: 46px; height: 42px; } .hdr-alb img { width: 44px; height: 37px; } }

.fa-av { display: inline-flex; align-items: flex-end; justify-content: center; border-radius: 50%; overflow: hidden; flex: none; box-shadow: 0 0 0 3px #fff, 0 6px 14px -8px rgba(74, 62, 58, 0.5); }
.fa-av svg, .fa-av img { width: 100%; height: 100%; display: block; object-fit: cover; }
.fa-av.add { align-items: center; background: var(--beige-l); color: #ea6699; font-size: 38px; font-weight: 700; border: 2px dashed #f2a9c8; box-shadow: none; }

.alb { max-width: 960px; margin: 0 auto; padding: 26px 16px 60px; color: var(--ink); }
.alb-head h1, .alb-mhead h1 { font-size: 34px; margin: 0 0 6px; }
.alb-head p { margin: 0 0 18px; color: var(--muted); font-size: 18px; }
.alb-card { background: var(--card); border-radius: 26px; padding: 20px 22px; margin: 0 0 18px; box-shadow: var(--shadow); }
.alb-card h3 { margin: 0 0 14px; font-size: 21px; }
.alb-btn { border: 0; border-radius: 99px; background: #ea6699; color: #fff; font: inherit; font-weight: 700; font-size: 17px; padding: 12px 24px; cursor: pointer; }
.alb-btn:disabled { opacity: 0.4; cursor: default; }
.alb-btn.alt { background: var(--beige-l); color: var(--ink); }
.alb-btn.sm { padding: 7px 16px; font-size: 15px; margin-top: 6px; }
.alb-free { display: flex; align-items: center; gap: 18px; }
.alb-free > div:nth-child(2) { flex: 1; }
.alb-free h3 { margin: 0 0 4px; }
.alb-free p { margin: 0; color: var(--muted); }
.alb-free.off { opacity: 0.85; }
.alb-free .alb-st { width: 86px; padding: 8px; flex: none; }
@media (max-width: 640px) { .alb-free { flex-wrap: wrap; } .alb-free .alb-btn { width: 100%; } }

/* наклейка: вырезанная, с белым краем и тенью */
.alb-st { position: relative; background: #fff; border-radius: 22px; padding: 14px 14px 16px; text-align: center; box-shadow: 0 0 0 4px #fff, 0 0 0 5px #f1e6ec, 0 12px 22px -14px rgba(74, 62, 58, 0.55); transform: rotate(var(--rot, 0deg)); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; color: #4a3e3a; }
.alb-st .alb-pic { display: block; font-size: 46px; line-height: 1.15; margin-bottom: 6px; filter: drop-shadow(0 3px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff); }
.alb-st p { margin: 0; font-size: 15.5px; line-height: 1.35; }
.alb-st.big { max-width: 340px; margin: 6px auto 14px; padding: 20px 20px 22px; cursor: default; }
.alb-st.big .alb-pic { font-size: 84px; }
.alb-st.big p { font-size: 19px; }
.alb-st.free { background: #fffbea; }
.alb-blank { border: 2px dashed #f2c94c; }
.alb-st.lift { opacity: 0.35; }
.alb-ghost { position: fixed; left: 0; top: 0; z-index: 10050; pointer-events: none; opacity: 0.95; }
.alb-lnk { color: #d24f84; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.alb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 22px; margin: 10px 0 24px; }

/* лидерборд */
.alb-pod { display: flex; justify-content: center; align-items: flex-end; gap: 14px; margin: 4px 0 20px; }
.alb-pl { display: flex; flex-direction: column; align-items: center; width: 120px; }
.alb-pn { font-weight: 700; margin: 8px 0 6px; text-align: center; font-size: 15px; line-height: 1.2; }
.alb-step { width: 100%; border-radius: 16px 16px 6px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; }
.alb-step b { font-size: 26px; line-height: 1; }
.alb-step small { font-size: 13px; opacity: 0.95; }
.alb-pod .alb-pl.p1 .alb-step { height: 96px; background: #f2a516; }
.alb-pod .alb-pl.p2 .alb-step { height: 72px; background: #3494e3; }
.alb-pod .alb-pl.p3 .alb-step { height: 56px; background: #2eb3b1; }
.alb-race { position: relative; padding-right: 44px; }
.alb-lane { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.alb-track { position: relative; flex: 1; height: 46px; border-radius: 99px; background: var(--beige-l); }
.alb-track::before { content: ""; position: absolute; left: 24px; right: 24px; top: 50%; border-top: 3px dashed #e6d9c8; }
.alb-car { position: absolute; top: 3px; transition: left 0.6s; }
.alb-cnt { width: 28px; font-weight: 700; color: var(--muted); text-align: right; }
.alb-flag { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 30px; }
.alb-nudge { margin: 14px 0 0; padding: 10px 16px; border-radius: 16px; background: #fff1f7; font-weight: 600; }

/* семья */
.alb-fam { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 16px; }
.alb-mem { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: var(--beige-l); border-radius: 22px; padding: 16px 8px 12px; font: inherit; color: var(--ink); cursor: pointer; }
.alb-mem:hover { background: #fdeef4; }
.alb-mn { font-weight: 700; margin-top: 6px; text-align: center; line-height: 1.2; }
.alb-mem small { color: var(--muted); }
.alb-empty { color: var(--muted); font-size: 17px; margin: 14px 0 0; }
.alb-safe { color: var(--muted); font-size: 14.5px; text-align: center; margin-top: 8px; }
.alb-back { display: inline-block; margin-bottom: 12px; color: #d24f84; font-weight: 700; text-decoration: none; }
.alb-mhead { display: flex; align-items: center; gap: 20px; margin-bottom: 14px; }
.alb-mhead p { margin: 0; color: var(--muted); }
.alb-dropz p { margin: 0 0 10px; color: var(--muted); }
.alb-drops { display: flex; flex-wrap: wrap; gap: 12px; }
.alb-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 92px; padding: 10px 4px; border-radius: 18px; border: 2px dashed transparent; font-size: 14px; font-weight: 600; text-align: center; transition: 0.15s; }
.alb-drop.hot { border-color: #ea6699; background: #fff1f7; transform: scale(1.08); }

/* семейный вопрос в игре */
.fam-card { position: relative; border: 3px solid #f6bfd6 !important; background: linear-gradient(#fff, #fff7fb) !important; }
.fam-lab { display: inline-block; background: #ea6699; color: #fff; font-weight: 700; font-size: 14px; padding: 5px 14px; border-radius: 99px; margin-bottom: 4px; letter-spacing: 0.02em; }
.fam-hint { color: var(--muted); margin: 0 0 10px; font-size: 16.5px; }
.fam-small { color: var(--muted); font-size: 13.5px; margin: 8px 0 0; }
.fam-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 4px; }
.fam-chip { display: inline-flex; align-items: center; gap: 8px; border: 2px solid #f3d3e1; background: #fff; border-radius: 99px; padding: 5px 16px 5px 6px; font: inherit; font-size: 17px; font-weight: 600; color: #4a3e3a; cursor: pointer; }
.fam-chip:hover, .fam-chip.on { border-color: #ea6699; background: #fff1f7; }
.fam-chip .fa-av { box-shadow: none; }
.fam-chip.add i { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 50%; background: #fdeef4; color: #ea6699; font-style: normal; font-weight: 700; font-size: 20px; }
.fam-chip.none, .fam-chip.own { padding: 10px 18px; }
.fam-chip.none { border-style: dashed; color: var(--muted); }
.fam-opts { display: flex; flex-direction: column; gap: 10px; }
.fam-opts .fam-chip { align-self: flex-start; }
.fam-row { display: flex; gap: 10px; margin-top: 10px; }
.fam-in { flex: 1; min-width: 0; font: inherit; font-size: 17px; padding: 11px 16px; border-radius: 16px; border: 2px solid #f3d3e1; background: #fff; color: #4a3e3a; }
.fam-in:focus { outline: none; border-color: #ea6699; }
.fam-ok { border: 0; border-radius: 16px; background: #ea6699; color: #fff; font: inherit; font-weight: 700; padding: 0 20px; cursor: pointer; }
.fam-g { display: flex; gap: 18px; margin: 4px 0 8px; font-size: 17px; }
.fam-g.need { color: #d24f84; font-weight: 700; }
.fam-card .alb-st { max-width: 300px; margin: 8px 0 6px; }

/* оверлей «Новая наклейка в альбом!» */
.alb-ov { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(255, 241, 247, 0.96); opacity: 0; transition: opacity 0.25s; overflow: hidden; }
.alb-ov.on { opacity: 1; }
.alb-ov-in { position: relative; text-align: center; max-width: 440px; width: 100%; color: #4a3e3a; }
.alb-ov h2 { font-size: 32px; margin: 0 0 14px; color: #d24f84; }
.alb-ov .alb-st.big { animation: albPop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.alb-ov-who { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0 18px; font-size: 17px; }
.alb-ov-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
@keyframes albPop { from { transform: scale(0.3) rotate(-12deg); opacity: 0; } to { transform: scale(1) rotate(var(--rot, 0deg)); opacity: 1; } }
.alb-conf { position: fixed; inset: 0; pointer-events: none; }
.alb-conf i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 3px; animation: albFall 2.4s ease-in forwards; }
@keyframes albFall { to { transform: translateY(110vh) rotate(540deg); } }

/* окна в альбоме */
.alb-mod { position: fixed; inset: 0; z-index: 9990; background: rgba(74, 62, 58, 0.35); display: flex; align-items: center; justify-content: center; padding: 16px; }
.alb-mod-in { position: relative; background: #fff; color: #4a3e3a; border-radius: 26px; padding: 24px 22px 22px; width: 100%; max-width: 520px; max-height: 92vh; overflow: auto; }
.alb-mod-in h3 { margin: 0 0 14px; font-size: 22px; }
.alb-mx { position: absolute; top: 12px; right: 12px; border: 0; background: var(--beige-l); width: 36px; height: 36px; border-radius: 50%; font-size: 16px; cursor: pointer; color: #4a3e3a; }
.alb-lbl { display: flex; flex-direction: column; gap: 6px; font-weight: 600; margin: 10px 0; }
.alb-lbl small { font-weight: 400; color: var(--muted); }
.alb-pics { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.alb-pk { width: 58px; height: 58px; font-size: 32px; border-radius: 16px; border: 2px solid var(--line); background: #fff; cursor: pointer; }
.alb-pk.on { border-color: #ea6699; background: #fff1f7; }
.alb-cap { width: 100%; box-sizing: border-box; }
@media (prefers-color-scheme: dark) { .alb-st, .alb-st p { color: #4a3e3a; } }

/* «Это я» — вертикальная плашка справа; аватарка-черепашка из шапки ушла в альбом (сундучок) */
body.fam-tree .bar-right .hdr-me { display: none !important; }
.alb-head .alb-title, .alb-title { font-family: Caveat, Rubik, sans-serif; font-weight: 700; font-size: clamp(52px, 6vw, 78px); line-height: 1.02; color: #3a302d; margin: 10px auto 14px; transform: rotate(-2deg); transform-origin: center; width: fit-content; text-align: center; }
.alb-head { text-align: center; margin-bottom: 26px; }
.alb-head p { margin: 0 auto; }
.alb-h { margin: 4px 0 14px; font-size: 22px; }
.alb-mainc .alb-mem { background: #fff; box-shadow: 0 10px 24px -18px rgba(92, 78, 66, 0.5); }
.alb-mainc .alb-mem:hover { background: #fff7fb; }
.alb-mainc .alb-fam { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
.alb-me-row { display: flex; align-items: center; gap: 22px; }
.alb-me-row .alb-more { text-align: left; }
.alb-foot { margin-top: 44px; }
body.alb-page .bf-links { display: none !important; }
.alb-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.alb-side { grid-column: 2; grid-row: 1; }
.alb-mainc { grid-column: 1; grid-row: 1; }
@media (max-width: 760px) { .alb-cols { grid-template-columns: 1fr; } .alb-side, .alb-mainc { grid-column: 1; grid-row: auto; } }
.alb-me { border: 3px solid #bfe9e8; padding: 22px 20px 20px; }
.alb-me-av { position: relative; width: fit-content; flex: none; }
.alb-me-lab { position: absolute; right: -18px; bottom: 2px; background: #2eb3b1; color: #fff; font-weight: 700; font-size: 14px; padding: 4px 12px; border-radius: 99px; box-shadow: 0 0 0 3px #fff; white-space: nowrap; }
.alb-me h2 { margin: 0 0 4px; font-size: 28px; }
.alb-more { border: 0; background: none; padding: 2px 4px; font: inherit; font-size: 15px; color: #8a7f78; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 4px; cursor: pointer; }
.alb-more:hover { color: #2eb3b1; }
.alb-me-txt { margin: 12px 0 6px; color: #1f9c9a; font-size: 17px; line-height: 1.5; text-align: left; }
.alb-me-txt.off { color: var(--muted); text-align: center; }
.alb-me .fa-av.add { color: #2eb3b1; border-color: #9fdcdb; }
.alb-side .alb-free { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 14px; }
.alb-side .alb-free .alb-st { width: 64px; padding: 6px; }
.alb-side .alb-free .alb-st .alb-pic { font-size: 34px; margin: 0; }
.alb-side .alb-free h3 { font-size: 19px; }
.alb-side .alb-free p { font-size: 15px; }
.alb-side .alb-free .alb-btn { margin-top: 8px; width: auto; }
.alb-mainc .alb-pl { width: 104px; }
.alb-chest { display: flex; align-items: center; gap: 10px; margin: 0 auto 10px; border: 0; background: var(--card); border-radius: 99px; padding: 6px 18px 6px 6px; font: inherit; font-weight: 600; color: var(--ink); box-shadow: var(--shadow); cursor: pointer; }
.alb-chest img { width: 40px; height: 40px; border-radius: 50%; }
/* мелкий текст внизу — как сведения о записи у пластинок */
.alb-note { max-width: none !important; width: 100%; box-sizing: border-box; margin: 26px 0 0; border-top: 1px solid rgba(60, 40, 30, 0.12); padding-top: 14px; text-align: justify; text-align-last: left; font-size: 11.5px; line-height: 1.45; color: #7a6e67; hyphens: auto; }
@media (max-width: 760px) { .alb-note { font-size: 10.5px; } }
textarea.fam-in { resize: vertical; font-family: inherit; }
/* фон альбома: бледные переплетённые ветви с листиками и бутонами */
#v-album { position: relative; }
#v-album::before { content: ""; position: absolute; inset: 0; background: url("../img/t3/alb-vines-w.webp") center top / 900px auto repeat; opacity: 0.14; pointer-events: none; z-index: 0; }
#v-album .alb { position: relative; z-index: 1; }
@media (max-width: 760px) { #v-album::before { background-size: 560px auto; } }
/* страница альбома заканчивается мелким текстом — как карточка пластинки в «Музыке» */
body.alb-page .bfoot { display: none !important; }
#v-album .alb { padding-bottom: 32px; }

/* альбом как обои: тёплый бежевый фон, белый узор из веток — тем же приёмом, что значки на фоне уроков */
body.alb-page, body.alb-page main, #v-album { background: #eee4d5; }
body.alb-page #v-album { min-height: calc(100svh - 96px); }
/* Праздники: колокольчики на фоне уроков чуть заметнее */
.lsn-bg.lsn-bg-hol { opacity: 0.3; }
/* мелкий текст про хранение — прижат к низу экрана, как у пластинок */
#v-album .alb { min-height: calc(100svh - 96px); box-sizing: border-box; display: flex; flex-direction: column; }
#v-album .alb-foot { margin-top: auto !important; }
#v-album .alb-cols { margin-bottom: 44px; }
@media (max-width: 900px) { #v-album .alb { min-height: calc(100svh - 112px); } }
/* ===== семейное древо ===== */
.ft-vp { position: relative; overflow: hidden; width: 100%; touch-action: pan-y; margin: 4px 0 0; }
.ft { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.ft-l { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.ft-l path { fill: none; stroke: #c4ad91; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.ft-n { position: absolute; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; width: 104px; border: 0; background: none; padding: 0; font: inherit; color: var(--ink); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; z-index: 1; -webkit-tap-highlight-color: transparent; }
.ft-n .fa-av { box-shadow: 0 0 0 4px #fff, 0 8px 18px -10px rgba(74, 62, 58, 0.6); }
.ft-n.me .fa-av { box-shadow: 0 0 0 4px #fff, 0 0 0 7px #8fd8d6, 0 8px 18px -10px rgba(74, 62, 58, 0.6); }
.ft-n.ghost .fa-av { box-shadow: none; }
.ft-nm { margin-top: 8px; font-weight: 700; font-size: 15px; line-height: 1.15; text-align: center; background: rgba(255, 255, 255, 0.85); border-radius: 10px; padding: 2px 8px; }
.ft-n small { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.ft-n.drag { z-index: 5; cursor: grabbing; transition: none; }
.ft-n.drag .fa-av { transform: scale(1.12); }
.ft-n:not(.drag) { transition: left 0.35s, top 0.35s; }
.ft-add { flex: none; display: inline-flex; align-items: center; gap: 8px; border: 0; background: #2eb3b1; border-radius: 99px; padding: 6px 18px 6px 6px; font: inherit; font-weight: 700; color: #fff; cursor: pointer; box-shadow: 0 8px 18px -10px rgba(46, 179, 177, 0.8); }
.ft-add span { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 50%; background: #fff; color: #2eb3b1; font-size: 22px; line-height: 1; }
.ft-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 6px; }
.ft-hint { margin: 0; color: var(--muted); font-size: 14px; }
@media (max-width: 520px) { .ft-n { width: 84px; } .ft-nm { font-size: 13.5px; } }

.ft-foot { margin: 8px 0 14px; }
.ft-n.sel .fa-av { box-shadow: 0 0 0 4px #fff, 0 0 0 7px #2eb3b1, 0 8px 18px -10px rgba(74, 62, 58, 0.6); }
.ft-zoom { position: absolute; right: 6px; bottom: 6px; display: flex; flex-direction: column; gap: 6px; z-index: 6; }
.ft-zoom button { width: 38px; height: 38px; border-radius: 12px; border: 0; background: #fff; color: #4a3e3a; font-size: 22px; font-weight: 700; box-shadow: 0 6px 14px -8px rgba(74, 62, 58, 0.6); cursor: pointer; }
.alb-me { position: relative; }
.alb-edit { display: block; margin: 10px 0 0 auto; }
.alb-who h2 { margin: 0 0 4px; font-size: 26px; }
.alb-who-i { margin: 0; color: var(--muted); }
.alb-who-t { margin: 10px 0 4px; color: #1f9c9a; font-size: 16.5px; line-height: 1.45; }
.alb-who-t.off { color: var(--muted); }
.alb-back-me { top: 10px; right: 10px; width: 32px; height: 32px; font-size: 14px; }
.alb-mini { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.alb-mst { width: 50px; height: 50px; border-radius: 14px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: 0 0 0 3px #fff, 0 0 0 4px #f1e6ec, 0 6px 12px -8px rgba(74, 62, 58, 0.5); cursor: pointer; }
#v-album .alb-board { margin-top: 10px; }

#v-album .alb-lane { margin: 3px 0; }
#v-album .alb-track { height: 36px; }
#v-album .alb-car { top: 2px; }
#v-album .alb-race { padding-right: 40px; }
/* строчки биографии и чистая наклейка с волнистым краем */
.alb-facts { list-style: none; margin: 10px 0 0; padding: 0; }
.alb-facts li { position: relative; padding-left: 16px; color: #1f9c9a; font-size: 16px; line-height: 1.45; margin: 3px 0; }
.alb-facts li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 7px; height: 7px; border-radius: 50%; background: #efc75e; }
.alb-fact-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed #d9ece9; }
.alb-fact-row b { font-size: 18px; color: #b48a1c; min-width: 14px; }
.alb-fact-row .alb-more { padding-left: 6px; }
.alb-fact.off { color: #c4bab4; text-decoration: none; cursor: default; }
.alb-fact:not(.off) { color: #1f9c9a; text-decoration-style: solid; font-weight: 600; }
.alb-edit { margin-top: 8px; }
.alb-fact-who { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 18px; }
.alb-ov-scal { display: flex; justify-content: center; margin: 4px 0 6px; animation: albPop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
/* ===== альбом шире: по краям шапки ===== */
#v-album .alb { max-width: 1240px; padding-left: 22px; padding-right: 22px; }
@media (max-width: 760px) { #v-album .alb { padding-left: 16px; padding-right: 16px; } }
#v-album .alb-cols { grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; }
@media (max-width: 760px) { #v-album .alb-cols { grid-template-columns: 1fr; } }
#v-album .alb-head p { max-width: 640px; }
/* карточка: аватарка · имя · карандашик */
.alb-me-row { display: flex; align-items: center; gap: 14px; }
.alb-me-row h2 { flex: 1; margin: 0; font-size: 24px; line-height: 1.15; }
.alb-av-btn { border: 0; background: none; padding: 0; cursor: pointer; flex: none; border-radius: 50%; }
.alb-pen { flex: none; align-self: flex-start; border: 0; background: none; width: 34px; height: 34px; border-radius: 50%; color: #a89d96; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.alb-pen:hover { background: var(--beige-l); color: #2eb3b1; }
#v-album .alb-me { margin-bottom: 14px; }
#v-album .alb-me-txt { margin-top: 14px; }
.alb-me-txt.off { color: var(--muted); text-align: left; }
#v-album .alb-who-i { margin: 10px 0 0; }
/* наклейка-биография */
.alb-bio { display: flex; align-items: center; gap: 12px; margin: 0 0 14px 6px; }
.alb-bio-st { position: relative; width: 58px; height: 58px; flex: none; }
.alb-bio-st b { position: absolute; right: -8px; bottom: -8px; font-size: 30px; font-weight: 800; line-height: 1; color: #f5b400; -webkit-text-stroke: 1px #e09d00; paint-order: stroke fill; text-shadow: 0 0 0 #fff, 2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff; }
.alb-bio .alb-fact { font-size: 17px; padding: 0; }
.alb-bio .alb-fact.off { color: #b9aea7; }
.alb-bio .alb-fact:not(.off) { color: #3a302d; font-weight: 600; text-decoration: underline; text-decoration-style: solid; text-decoration-color: #f5b400; text-decoration-thickness: 2px; }
/* «добавить родственника» — плашка во всю ширину */
.alb-addbar { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 18px; background: #2eb3b1; color: #fff; font: inherit; font-weight: 700; font-size: 17px; padding: 13px 16px; cursor: pointer; box-shadow: 0 10px 20px -14px rgba(46, 179, 177, 0.9); }
.alb-addbar span { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 50%; background: #fff; color: #2eb3b1; font-size: 20px; line-height: 1; }
.alb-addbar:hover { background: #27a3a1; }
/* пустые кружки-подсказки на древе */
.ft-n.slot .fa-av { box-shadow: none; background: rgba(255, 255, 255, 0.55); border: 2px dashed #c9b49a; color: #c9b49a; font-size: 26px; }
.ft-n.slot .ft-nm { background: none; color: #a89d96; font-weight: 600; }
.ft-n.slot.me .fa-av { border-color: #8fd8d6; color: #2eb3b1; }
#v-album .ft-hint { margin: 10px 0 0; }
/* «У кого больше историй» — без белой плашки */
.alb-race2 { margin: 34px 0 0; }
.alb-race2 h3 { margin: 0 0 12px; font-size: 22px; }
.alb-lane2 { display: flex; align-items: center; gap: 12px; margin: 2px 0; }
.alb-plc { flex: none; width: 28px; font-style: normal; font-weight: 800; font-size: 18px; color: #a89d96; text-align: center; }
.alb-plc.p1 { color: #f2a516; } .alb-plc.p2 { color: #3494e3; } .alb-plc.p3 { color: #2eb3b1; }
.alb-trk { position: relative; flex: 1; height: 42px; }
.alb-trk::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed #cdbca6; }
.alb-race2 .alb-car { position: absolute; top: 4px; transition: left 0.6s; }
.alb-race2 .alb-cnt { width: 28px; font-weight: 700; color: #a89d96; text-align: right; }
.alb-race2 .alb-nudge { background: rgba(255, 255, 255, 0.6); }
/* шапка альбома: подзаголовок в одну строку, мелко; под ним подсказка */
#v-album .alb-head p { max-width: none; font-size: 15.5px; margin: 0 auto; }
#v-album .alb-head .alb-sub2 { font-size: 13.5px; color: #a89d96; margin-top: 4px; }
#v-album .alb-head { margin-bottom: 30px; }
/* наклейка внутри карточки, справа внизу; белая цифра по центру */
#v-album .alb-me .alb-bio { justify-content: flex-end; margin: 14px 0 0; gap: 10px; }
#v-album .alb-bio-st { width: 46px; height: 46px; }
#v-album .alb-bio-st b { left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: 21px; font-weight: 800; color: #fff; -webkit-text-stroke: 0; text-shadow: none; }
#v-album .alb-bio .alb-fact { text-align: right; font-size: 14.5px; line-height: 1.2; }
#v-album .alb-race2 { margin-bottom: 30px; }
/* окно «добавить родственника»: подсказки прямо в полях, тёплым бежевым, как в форме «Напиши нам» */
.alb-roles .fam-chip { justify-content: center; text-align: center; padding: 8px 16px; }
.alb-mod-form { padding-top: 46px; }
.alb-mod-form .alb-sidew { margin: 4px 0 6px; }
.alb-mod-form .alb-sidew[hidden] { display: none; }
.alb-form { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.alb-in { width: 100%; box-sizing: border-box; border: 1px solid #d8cfc2; background: #fbf7ef; border-radius: 14px; padding: 12px 14px; font: inherit; font-size: 16px; line-height: 1.45; color: #4a3e3a; }
.alb-in:focus { outline: none; border-color: #86776f; }
.alb-in::placeholder { color: #b5a9a2; opacity: 1; font-weight: 400; }
textarea.alb-in { resize: vertical; }
.alb-mod-form .alb-save { background: #2eb3b1; }
/* окна альбома листаются пальцем, даже когда открыта клавиатура */
.alb-mod { bottom: auto; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; align-items: flex-start; padding: 16px 16px 40px; box-sizing: border-box; }
.alb-mod-in { max-height: none; overflow: visible; margin: auto; }
/* подзаголовок альбома — как названия тем в списках, часть заголовка */
#v-album .alb-head p:not(.alb-sub2) { font-size: 19px; color: #6f625b; line-height: 1.4; }
@media (max-width: 760px) { #v-album .alb-head p:not(.alb-sub2) { font-size: 17px; } }
#v-album .alb-head .alb-sub2 { margin-top: 8px; }
/* пары на древе */
.alb-spw[hidden] { display: none; }
.alb-spw { display: flex; flex-direction: column; gap: 4px; }
.alb-spl { font-size: 14px; color: #a89d96; }
.alb-pair { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 6px 0 12px; font-size: 26px; color: #c4ad91; font-weight: 700; }
.alb-pair-q { text-align: center; font-size: 21px !important; }
.alb-mod .alb-save { background: #2eb3b1; }
.alb-parw[hidden] { display: none; }
.alb-parw { display: flex; flex-direction: column; gap: 4px; }
/* «У кого больше историй» — как подзаголовок альбома, по центру */
#v-album .alb-race2 { margin-top: 18px; }
#v-album .alb-race2 h3 { text-align: center; font-size: 19px; font-weight: 400; color: #6f625b; line-height: 1.4; margin: 0 0 14px; }
@media (max-width: 760px) { #v-album .alb-race2 h3 { font-size: 17px; } }
/* лупа в углу древа — серенькая, как карандашик в карточке */
#v-album .ft-zoom { position: absolute; top: 18px; right: 4px; left: auto; bottom: auto; display: inline-flex; flex-direction: row; align-items: center; justify-content: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; color: #a89d96; cursor: pointer; z-index: 6; box-shadow: none; padding: 0; }
#v-album .ft-zoom:hover, #v-album .ft-zoom.on { background: rgba(255, 255, 255, 0.7); color: #2eb3b1; }
/* подсказка при перетаскивании: кто подсвечен и что получится */
.ft-n.drop-on .fa-av { box-shadow: 0 0 0 4px #fff, 0 0 0 8px #2eb3b1 !important; transform: scale(1.06); }
.ft-n.drag[data-hint]::after { content: attr(data-hint); position: absolute; top: -30px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: #2eb3b1; color: #fff; font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 99px; }
.ft-n.drag { opacity: 0.92; }
/* зелёный кружок — в уроке есть семейный вопрос */
.ill-dot.fam-dot { background: #3fb037; box-shadow: 0 0 0 3px rgba(63, 176, 55, 0.2); }
.ill-dot + .ill-dot.fam-dot { margin-left: 8px; }
/* семейный вопрос в один шаг: круглая золотая наклейка с картинкой темы */
.fam-rst { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.fam-rst .alb-scal { position: absolute; inset: 0; width: 100%; height: 100%; }
.fam-rst i { position: relative; font-style: normal; line-height: 1; }
.fam-done { display: flex; align-items: center; gap: 16px; margin: 14px 0 6px; animation: albPop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.fam-done p { margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: 18px; line-height: 1.35; color: #4a3e3a; }
.fam-done p b { font-weight: 600; }
.fam-done p span { font-size: 15px; color: #d24f84; font-weight: 700; }
.fam-card .fam-row { margin-top: 12px; }
.fam-card .fam-in::placeholder { color: #c9b39c; }
/* победный экран: розовый фон, бирюзовый заголовок, уходит сам или по нажатию */
.alb-ov.alb-ov-auto { cursor: pointer; }
.fam-ov-h { color: #2eb3b1 !important; }
.alb-ov .fam-rst { margin: 4px auto 10px; animation: albPop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.fam-ov-tx { font-size: 20px; font-weight: 600; margin: 4px 0 8px; color: #4a3e3a; }
/* наклейка светлая: подпись — золотистым, как светики; цифра в альбоме — тем же золотистым на светлой середине */
.fam-done p span { color: #e09a12 !important; }
#v-album .alb-bio-st b { color: #e09a12 !important; }
.zp-days .zd-pad { height: 36px; } /* пустые клетки — та же высота, календарь всегда на 6 недель */
/* запись на урок: заявка вместо календаря — черепашка, форма, прямые контакты */
.zp-req { margin-top: 34px; }
@media (min-width: 901px) {
  .zp-grid.zp-req { grid-template-columns: 220px minmax(0, 1.35fr) minmax(0, 1fr) !important; align-items: start !important; }
  .zp-grid.zp-req > .zp-tur { align-self: end; margin-top: 0; }
}
.zp-form, .zp-direct { background: #fff; border: 1px solid #e6e0d6; border-radius: 24px; padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.zp-direct { background: #fcf8f1; }
.zp-form h3, .zp-direct h3 { margin: 0; font-size: 19px; color: #4a3e3a; }
.zp-form > p, .zp-direct > p { margin: 0 0 4px; font-size: 15px; line-height: 1.45; color: #86776f; }
.zp-form select, .zp-form input, .zp-form textarea { font: inherit; font-size: 16px; color: #4a3e3a; background: #fcf8f1; border: 1px solid #e6dccd; border-radius: 14px; padding: 11px 14px; width: 100%; box-sizing: border-box; }
.zp-form textarea { resize: vertical; min-height: 96px; }
.zp-form select { appearance: none; -webkit-appearance: none; padding-right: 38px; background: #fcf8f1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18'%3E%3Cpath d='M2 7l4-4 4 4M2 11l4 4 4-4' fill='none' stroke='%2386776f' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 10px 15px; }
.zp-form select:invalid, .zp-form select option[value=""] { color: #c9b39c; }
.zp-form ::placeholder { color: #c9b39c; }
.zp-form :focus { outline: none; border-color: #2eb3b1; }
.zp-send { align-self: flex-start; border: 0; border-radius: 99px; background: #2eb3b1; color: #fff; font: inherit; font-weight: 700; font-size: 16px; padding: 11px 26px; cursor: pointer; }
.zp-done { margin: 0; font-size: 14px; color: #2a8f8d; min-height: 1em; }
.zp-ct { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: #2a8f8d; font-size: 16px; padding: 10px 14px; border-radius: 16px; background: #fff; border: 1px solid #e6dccd; }
.zp-ct b { font-size: 13px; font-weight: 600; color: #a09189; }
.zp-done:empty { display: none; }
/* заявка одна: черепашка слева, плашка шире и правее */
@media (min-width: 901px) {
  .zp-grid.zp-req { grid-template-columns: 260px minmax(0, 600px) !important; justify-content: center; gap: 40px !important; align-items: end !important; }
}
.zp-req .zp-form { padding: 24px 28px; }
/* кнопка заявки — как «Отправить» у черепашки-помощника: тёмно-коричневая, во всю ширину */
.zp-req .zp-send { align-self: stretch; width: 100%; background: #4a3e3a; color: #fff; font-weight: 500; border-radius: 999px; padding: 12px 24px; box-shadow: 0 10px 22px -14px rgba(74, 62, 58, 0.6); margin-top: 4px; }
.zp-req .zp-send:hover { background: #5f514b; }
.zp-req .zp-form select, .zp-req .zp-form input, .zp-req .zp-form textarea { border-color: #d8cfc2; }
.zp-req .zp-form :focus { border-color: #a09189; }
/* «поделиться впечатлениями» на странице подписки — тонкая линия цвета текста, всегда одной строкой; открывает окошко черепашки */
.sub-fb { color: inherit; white-space: nowrap; text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; }
.sub-fb:hover { opacity: 0.75; }
/* вступительные тексты (запись на занятие, подписка, пособия) — ровные края слева и справа */
.zp-intro, .pp-lead { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
/* отступ между заголовком и текстом — как на «Пособиях для печати» */
#v-sub .zp-h, #v-lesson .zp-h { margin-bottom: 24px !important; }
.fb-go { white-space: nowrap; } /* «делитесь впечатлениями» — одной строкой, ведёт к окошку черепашки на главной */
/* iPad вертикально: меню на картинке не вылезает за край экрана */
@media (min-width: 761px) and (max-width: 1000px) { body.h3-on .h3-tab { right: 0; width: auto; max-width: none; gap: 26px; padding: 0 28px 0 28px; } }