/* ═══════════════════════════════════════════════════════════════════
   Видеокурс 2.0 — «Дом», ежедневник, просмотр урока (home.js)
   Подключается после style.css и НЕ меняет старые экраны: все новые
   токены объявлены в области .hs / .home / .wt / .dy.
   Токены — docs/design-system.md §10, движения — docs/motion-spec.md.
═══════════════════════════════════════════════════════════════════ */

.hs, .home, .wt, .dy, .st {
  --wood-900:#16110d; --wood-800:#1c1612; --wood-700:#251d17; --wood-600:#2e241c; --wood-500:#382c22;
  --bg:var(--wood-800); --surface-1:var(--wood-700); --surface-2:var(--wood-600); --surface-3:var(--wood-500);
  --line:#4a3a2e; --line-strong:#8a735c;
  --paper:#ecdfc8; --paper-edge:#d9c8aa; --paper-shade:#c9b594;
  --ink:#2e2218; --ink-2:#6b5640; --ink-honey:#7f5218; --ink-moss:#4b5f25;
  --text:#f1e6d6; --text-2:#c4b39c; --text-3:#9a8773;
  --honey:#e2a24c; --honey-light:#f0b867; --honey-deep:#b87a2e; --on-honey:#1f1409;
  --good:#9cbf6e; --good-bg:#26301a; --good-line:#3e5028; --on-good:#1a1f0c;
  --warn:#e9c35c; --warn-bg:#362c12; --warn-line:#5e4a1a;
  --bad:#e0826a; --bad-bg:#3a1f18; --bad-line:#6a3426;
  --font-hand:"Caveat","Segoe Print","Bradley Hand",cursive;
  --shadow-1:0 1px 0 rgba(255,236,210,.04) inset,0 2px 6px -2px rgba(10,5,0,.45);
  --shadow-2:0 1px 0 rgba(255,236,210,.05) inset,0 10px 24px -12px rgba(10,5,0,.65);
  --shadow-3:0 18px 40px -18px rgba(10,5,0,.75);
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-settle:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.25,.1,.25,1);
  --ease-breath:cubic-bezier(.45,.05,.55,.95);
  --ease-dolly:cubic-bezier(.55,0,.1,1);
  --ease-pullback:cubic-bezier(.33,0,.12,1);
  /* Высота шапки «Дома», которая остаётся видимой над ежедневником */
  --home-head: calc(env(safe-area-inset-top) + 96px);
}

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hs[hidden], .wt[hidden], .dy[hidden], .wt [hidden], .dy [hidden] { display: none !important; }

/* Шрифт рукописи Caveat (OFL), локальные файлы */
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/caveat-cyr.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/caveat-lat.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Режим «Дом»: сцена под UI, без таб-бара и прокрутки ────────── */
body.is-home {
  overflow: hidden;
  overscroll-behavior: none;
  background: #16110d;
}
/* Таб-бар скрыт везде: навигация идёт внутри экранов Дома и ежедневника */
body.is-home #tabbar { display: none !important; }

/* Лист ежедневника тянется до низа (таб-бара нет); нижний отступ — только под safe-area */
body.dy-open .dy-spread-bottom { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
body.is-home #app {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100svh;
  min-height: 0;
  padding: calc(env(safe-area-inset-top) + 28px) 20px calc(env(safe-area-inset-bottom) + 20px);
}

/* ══ СЦЕНА ═══════════════════════════════════════════════════════ */
.hs {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--wood-900);
  contain: strict;
  pointer-events: none;
}
.hs-cam {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  will-change: transform;
}
/* Дыхание камеры + едва заметный «ручной» дрейф (зона-исключение, motion-spec §3.6) */
.hs-breath {
  position: absolute;
  inset: 0;
  transform-origin: 44.5% 50%;
  transform: scale(1.03);
  animation: hs-breath 14s var(--ease-breath) infinite alternate;
}
@keyframes hs-breath {
  0%   { transform: scale(1.03) translate3d(0, 0, 0) rotate(0deg); }
  50%  { transform: scale(1.042) translate3d(-2px, -3px, 0) rotate(.18deg); }
  100% { transform: scale(1.05) translate3d(1px, -5px, 0) rotate(-.12deg); }
}
.hs-stage { position: absolute; }
.hs-stage img,
.hs-loop,
.hs-cine {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
/* Видео-переходы (V2 наезд, V3 отъезд) и крупный план A11 под плеером: в покое невидимы */
.hs-cine { opacity: 0; background: transparent; }
.hs-close { opacity: 0; }
/* Лампы и пылинки нарисованы под геометрию A10 — пока камера едет и стоит вплотную, гасим */
.hs-lamp, .hs-dust { transition: opacity .6s ease; }
.hs.is-cine .hs-lamp,
.hs.is-cine .hs-dust { opacity: 0; }
/* Видео-луп: в покое размыт целиком (весь кадр «уходит в блюр», внимание — на карточку) */
.hs-loop {
  filter: blur(9px);
  transform: scale(1.06);   /* запас, чтобы размытый край не открывал фон */
}
/* Резкая комната с «дыркой» на мастере: в покое мастер — в расфокусе */
.hs-room {
  -webkit-mask-image: radial-gradient(ellipse 32% 25% at 44.5% 52%, transparent 62%, #000 100%);
          mask-image: radial-gradient(ellipse 32% 25% at 44.5% 52%, transparent 62%, #000 100%);
}
/* Резкий мастер — проявляется при наезде (фокус-пул) */
.hs-sharp {
  opacity: 0;
  -webkit-mask-image: radial-gradient(ellipse 38% 29% at 44.5% 50%, #000 58%, transparent 100%);
          mask-image: radial-gradient(ellipse 38% 29% at 44.5% 50%, #000 58%, transparent 100%);
}

/* Свет ламп — единственный «цветной» градиент: изображает свет */
.hs-lamp {
  position: absolute;
  width: calc(var(--r) * 2);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}
.hs-lamp::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 199, 128, .30), rgba(226, 162, 76, .10) 55%, rgba(226, 162, 76, 0) 100%);
  animation: hs-lamp 6s var(--ease-breath) infinite alternate;
}
.hs-lamp-1::before { animation-duration: 7.4s; animation-delay: -2.2s; }
@keyframes hs-lamp {
  from { opacity: .72; transform: scale(1); }
  to   { opacity: 1;   transform: scale(1.04); }
}

/* Пылинки в луче торшера */
.hs-dust {
  position: absolute;
  left: 3%;
  top: 20%;
  width: 46%;
  height: 34%;
}
.hs-dust i {
  position: absolute;
  left: calc(var(--i) * 10.5% + 4%);
  top: calc(88% - var(--i) * 6%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 228, 186, .8);
  box-shadow: 0 0 4px rgba(255, 210, 150, .6);
  opacity: 0;
  animation: hs-dust calc(15s + var(--i) * 1.7s) var(--ease-breath) infinite;
  animation-delay: calc(var(--i) * -2.4s);
}
.hs-dust i:nth-child(3n) { width: 2px; height: 2px; }
@keyframes hs-dust {
  0%   { opacity: 0;   transform: translate3d(0, 0, 0); }
  20%  { opacity: .55; }
  75%  { opacity: .4; }
  100% { opacity: 0;   transform: translate3d(14px, -72px, 0); }
}

.hs-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 85% 70% at 50% 46%, rgba(22, 17, 13, 0) 55%, rgba(22, 17, 13, .6) 100%);
}
/* Скрим покоя: общее затемнение всего кадра + плотнее сверху (заголовок) и снизу (карточка) */
.hs-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(22, 17, 13, .66) 0,
    rgba(22, 17, 13, .38) 22%,
    rgba(22, 17, 13, .38) 52%,
    rgba(22, 17, 13, .86) 100%);
}
.hs-veil {
  position: absolute;
  inset: 0;
  background: var(--wood-900);
  opacity: 0;
}

body.hs-paused .hs *,
body.hs-paused .hs *::before,
body.hs-paused .wt * { animation-play-state: paused !important; }
.hs-lite .hs-dust { display: none; }
.hs-lite .hs-breath { animation: none; }

/* ══ UI ДОМА ══════════════════════════════════════════════════════ */
.home {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 0;
  color: var(--text);
}
.home-top { position: relative; z-index: 2; }
.home-h1 {
  margin: 0 0 6px;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--text);
  text-shadow: 0 1px 14px rgba(10, 5, 0, .55);
}
.home-sub {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.4;
  color: var(--text-2);
  text-shadow: 0 1px 10px rgba(10, 5, 0, .6);
}

.home-bottom {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 10px;
}
.home-diary {
  font: inherit;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: transform 100ms var(--ease-out), background-color 180ms var(--ease-soft);
}
.home-diary:active { transform: scale(.98); }
.home-diary:focus-visible,
.wt button:focus-visible { outline: 2px solid var(--honey); outline-offset: 3px; }

.home-diary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: rgba(22, 17, 13, .8);
  color: var(--text);
}
.home-diary:hover { background: rgba(37, 29, 23, .92); }
.home-diary-ico svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.home-diary-text { font-size: .9375rem; font-weight: 600; flex: 1; }
.home-diary-meta { font-size: .8125rem; color: var(--text-2); }

/* ══ КАРТА КУРСА В ДОМЕ ════════════════════════════════════════════ */
.home-map {
  position: relative;
  flex: 1 1 auto;
  min-height: 260px;
  max-height: 520px;
  margin: 0 -20px;
  margin-top: auto;
  z-index: 2;
  overflow: visible;
  pointer-events: none; /* клики проходят на точки и меню */
}
.home-map-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.home-map-path {
  fill: none;
  stroke: var(--honey);
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-opacity: .32;
  filter: drop-shadow(0 0 4px rgba(226, 162, 76, .25));
  animation: hm-path-breath 6s var(--ease-breath) infinite alternate;
}
@keyframes hm-path-breath {
  from { stroke-opacity: .28; }
  to   { stroke-opacity: .45; }
}

.home-map-points,
.home-map-labels {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.home-map-point {
  position: absolute;
  width: 44px;
  height: 52px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--honey);
  transform: translate(-50%, -50%);
  transform-origin: center center;
  opacity: .58;
  cursor: pointer;
  pointer-events: auto;
  transition: opacity 180ms var(--ease-soft), color 180ms var(--ease-soft);
  animation: hm-note-breath 5s var(--ease-breath) infinite alternate;
}
.home-map-point svg { display: block; width: 100%; height: 100%; overflow: visible; }
.home-map-note-head { fill: currentColor; stroke: none; }
.home-map-note-stem,
.home-map-note-flag { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.home-map-point:nth-child(2) { animation-delay: -1.2s; }
.home-map-point:nth-child(3) { animation-delay: -2.4s; }
.home-map-point:nth-child(4) { animation-delay: -3.6s; }
.home-map-point:nth-child(5) { animation-delay: -4.8s; }
@keyframes hm-note-breath {
  from { opacity: .5; }
  to   { opacity: .85; }
}
.home-map-point:hover,
.home-map-point:focus-visible {
  color: var(--honey-light);
  opacity: 1;
}
.home-map-point:focus-visible {
  outline: 2px solid var(--honey);
  outline-offset: 4px;
  border-radius: 50%;
}
.home-map-point.is-done { opacity: .92; }
.home-map-point.is-current {
  color: var(--honey-light);
  filter: drop-shadow(0 0 9px rgba(226, 162, 76, .5));
  opacity: 1;
}
.home-map-point.is-locked {
  color: var(--text-3);
  opacity: .24;
  cursor: default;
  animation: none;
}
.home-map-point.is-locked .home-map-note-head {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.home-map-label {
  position: absolute;
  transform: translate(-50%, calc(-100% - 34px));
  padding: 2px 6px;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.1;
  color: var(--text-2);
  text-align: center;
  max-width: 86px;
  white-space: normal;
  opacity: .5;
  text-shadow: 0 1px 6px rgba(10, 5, 0, .7);
  pointer-events: none;
}

.home-map-marker {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 3px rgba(156, 191, 110, .2), 0 0 16px rgba(156, 191, 110, .6);
  transform: translate(-50%, -50%);
  transition: left 1400ms var(--ease-settle), top 1400ms var(--ease-settle);
  pointer-events: none;
  z-index: 1;
  animation: hm-marker-pulse 3.2s var(--ease-breath) infinite alternate;
}
.home-map-marker::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(156, 191, 110, .5);
  animation: hm-marker-ring 3.2s var(--ease-breath) infinite;
}
@keyframes hm-marker-pulse {
  from { box-shadow: 0 0 0 3px rgba(156, 191, 110, .18), 0 0 12px rgba(156, 191, 110, .45); }
  to   { box-shadow: 0 0 0 4px rgba(156, 191, 110, .26), 0 0 20px rgba(156, 191, 110, .7); }
}
@keyframes hm-marker-ring {
  0%   { transform: scale(.55); opacity: .7; }
  100% { transform: scale(1.5); opacity: 0; }
}
.home-map-progress {
  position: absolute;
  transform: translate(-50%, calc(-50% + 24px));
  font-size: .8125rem;
  font-weight: 700;
  color: var(--good);
  text-shadow: 0 1px 8px rgba(10, 5, 0, .7);
  transition: left 1400ms var(--ease-settle), top 1400ms var(--ease-settle);
  pointer-events: none;
  z-index: 3;
}

/* Меню уроков главы */
.home-map-menu-wrap {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.home-map-menu-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 11, 8, .45);
}
.home-map-menu {
  position: relative;
  width: min(360px, 100%);
  max-height: 72vh;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  outline: none;
}
.home-map-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.home-map-menu-head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}
.home-map-menu-close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}
.home-map-menu-close svg { width: 20px; height: 20px; }
.home-map-menu-close:hover { background: var(--surface-2); }
.home-map-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.home-map-menu-list li:not(:last-child) { border-bottom: 1px solid var(--line-soft); }
.home-map-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 10px 16px;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: background-color 180ms var(--ease-soft), transform 100ms var(--ease-out);
}
.home-map-menu-item:hover { background: var(--surface-2); }
.home-map-menu-item:active { transform: scale(.99); }
.home-map-menu-item.is-current { background: rgba(226, 162, 76, .12); }
.home-map-menu-item.is-locked {
  opacity: .55;
  cursor: default;
}
.home-map-menu-item.is-locked:hover { background: transparent; }
.home-map-menu-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: .8125rem;
  font-weight: 700;
}
.home-map-menu-num svg {
  display: block;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.home-map-menu-item.is-current .home-map-menu-num {
  background: var(--honey);
  color: var(--on-honey);
}
.home-map-menu-main {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.home-map-menu-title {
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}
.home-map-menu-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .75rem;
  color: var(--text-2);
}
.home-map-menu-hand svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.home-map-menu-chev {
  flex: none;
  color: var(--text-3);
}
.home-map-menu-chev svg { width: 18px; height: 18px; }

/* ══ ПРОСМОТР УРОКА ═══════════════════════════════════════════════ */
.wt {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  color: var(--text);
}
.wt-top, .wt-foot, .wt-frame { pointer-events: auto; }
.wt-shade {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(ellipse 90% 70% at 50% 46%, rgba(22, 17, 13, .5), rgba(16, 12, 9, .94) 72%);
}
.wt-top {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 12px);
  left: 12px;
  right: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  opacity: 0;
}
:where(.wt) button { font: inherit; cursor: pointer; }
.wt svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.wt-home {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
  min-height: 44px;
  padding: 0 14px 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(37, 29, 23, .92);
  color: var(--text);
  font-size: .9375rem;
  font-weight: 600;
  transition: transform 100ms var(--ease-out), background-color 180ms var(--ease-soft), border-color 180ms var(--ease-soft);
}
.wt-home:active { transform: scale(.98); }
.wt-home svg { width: 22px; height: 22px; }
.wt-head { flex: 1; min-width: 0; padding-top: 2px; }
.wt-kicker {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-2);
}
.wt-title {
  margin: 2px 0 0;
  font-size: 1.0625rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--text);
  outline: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wt-frame {
  position: fixed;
  overflow: hidden;
  border-radius: 12px;
  background: #0f0b08;
  box-shadow: var(--shadow-3);
  opacity: 0;
}
.wt-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  transition: opacity 320ms var(--ease-out);
}
/* Долгое нажатие по сцене и кадру видео не должно открывать системные
   меню браузера («сохранить кадр», «меню видео» в Яндексе и т.п.). */
.hs-stage, .wt-frame {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.wt-frame iframe.is-loaded { opacity: 1; }
.wt-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: .8125rem;
  color: var(--text-2);
}
.wt-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--honey);
  animation: wt-dot 1200ms var(--ease-breath) infinite alternate;
}
@keyframes wt-dot { from { opacity: .35; } to { opacity: 1; } }
/* Карточка «Урок закончен» — вместо рекомендаций ВК */
.wt-end {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 14px;
  background: radial-gradient(ellipse 120% 100% at 50% 0%, rgba(30, 22, 14, .55), rgba(15, 11, 8, .94));
}
.wt-end[hidden] { display: none; }
.wt-end-card {
  flex: none;
  width: min(380px, 100%);
  margin: auto;
  background: var(--paper);
  color: var(--ink);
  border-radius: 16px 16px 16px 6px;
  padding: 14px 16px 16px;
  text-align: center;
  box-shadow: var(--shadow-2);
}
.wt-end-kicker {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.wt-end-title {
  margin: 5px 0 2px;
  font-family: var(--font-hand);
  font-size: 1.375rem;
  /* Caveat — рукописный: у «з», «д», «у» хвосты уходят ниже строки.
     С зажатым line-height и line-clamp они обрезались. */
  line-height: 1.3;
  padding-bottom: 3px;
  color: var(--ink);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.wt-end-text { margin: 0 0 10px; font-size: .8125rem; color: var(--ink-2); }
.wt-end-actions { display: flex; gap: 8px; }
.wt-end-actions button {
  flex: 1;
  min-height: 38px;
  border-radius: 12px;
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
}
.wt-end-primary { border: 0; background: var(--honey); color: var(--on-honey); }
.wt-end-primary:hover { background: var(--honey-light); }
.wt-end-actions button:focus-visible { outline: 2px solid var(--honey); outline-offset: 2px; }
@media (max-width: 380px) {
  .wt-end { padding: 8px; }
  .wt-end-card { padding: 12px 14px 14px; }
  .wt-end-title { font-size: 1.25rem; margin: 4px 0 2px; }
  .wt-end-text { font-size: .75rem; margin-bottom: 8px; }
  .wt-end-actions button { min-height: 34px; font-size: .8125rem; }
}

.wt-foot {
  position: absolute;
  top: calc(var(--frame-bottom, 70vh) + 16px);
  left: 0;
  right: 0;
  margin: 0 auto;
  width: min(880px, calc(100% - 32px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  opacity: 0;
}
.wt-steps {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 0 10px 0 16px;
  border: 0;
  border-radius: 12px;
  background: var(--honey);
  color: var(--on-honey);
  font-size: .9375rem;
  font-weight: 600;
  box-shadow: var(--shadow-1);
  transition: transform 100ms var(--ease-out), background-color 180ms var(--ease-soft);
}
.wt-steps:hover { background: var(--honey-light); }
.wt-steps:active { transform: scale(.98); }
.wt-steps svg { width: 20px; height: 20px; }
.wt-meta { font-size: .8125rem; color: var(--text-2); text-align: right; }

/* ══ ЕЖЕДНЕВНИК ═══════════════════════════════════════════════════ */
.dy {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  box-sizing: border-box;
  /* Шапка «Дома» остаётся видимой над ежедневником.
     Указатель уроков теперь живёт в корешке, жёлоб под закладки не нужен. */
  --dy-gutter: 0px;
  padding: var(--home-head) var(--dy-gutter) 0;
}
.dy-backdrop {
  position: absolute;
  top: var(--home-head);
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
}
.dy-sheet {
  position: relative;
  display: flex;
  flex-direction: row;
  align-self: stretch;
  flex: none;
  width: 600px;
  border-radius: 20px 20px 0 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-3);
  outline: none;
}
.dy-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--paper);
  border-radius: 0 20px 0 0;
  overflow: hidden;
}
.dy-spine {
  position: relative;
  flex: none;
  width: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 14px 0 12px;
  background: var(--wood-900);
  border-radius: 20px 0 0 0;
  box-shadow: inset -2px 0 4px rgba(10,5,0,.35);
  --dy-surface: var(--wood-900);
}

/* Указатель уроков: одна точка = один урок, номер внутри.
   На широком экране точки стоят столбиком в корешке, на телефоне —
   строкой над листом. Полное название урока живёт в .dy-now. */
.dy-lessons-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
}
/* Стрелки остаются в разметке ради клавиатуры и скринридеров,
   визуально их заменяет сам указатель. */
.dy-lessons-arrow {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.dy-lessons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  max-height: 100%;
  padding: 2px 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.dy-lessons::-webkit-scrollbar { display: none; }
.dy-lesson {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  cursor: pointer;
  transition: transform 160ms var(--ease-out);
}
.dy-lesson:hover { transform: scale(1.08); }
.dy-lesson:active { transform: scale(.94); }
.dy-lesson-num {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--mark, var(--paper-shade));
  color: var(--ink);
  font-size: .75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: width 180ms var(--ease-soft), height 180ms var(--ease-soft), box-shadow 180ms var(--ease-soft);
}
.dy-lesson.is-current .dy-lesson-num {
  width: 30px;
  height: 30px;
  font-size: .8125rem;
  box-shadow: 0 0 0 2px var(--honey);
}
.dy-lesson.is-locked { opacity: .6; }
.dy-lesson.is-locked .dy-lesson-num {
  background: transparent;
  color: var(--text-2);
  box-shadow: inset 0 0 0 1.5px var(--text-3);
}
.dy .dy-lesson-num svg {
  display: block;
  width: 13px;
  height: 13px;
  margin: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dy-lesson-flag {
  position: absolute;
  right: -1px;
  bottom: -1px;
  display: grid;
  place-items: center;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--wood-900);
  color: var(--honey);
  box-shadow: 0 0 0 1.5px var(--dy-surface);
  pointer-events: none;
}
.dy-lesson-flag.is-bonus { background: #4a7a7a; color: rgba(241, 230, 214, .95); }
.dy .dy-lesson-flag svg {
  display: block;
  width: 8px;
  height: 8px;
  margin: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dy .dy-lesson-flag.is-bonus svg { fill: currentColor; stroke: none; width: 7px; height: 7px; }
.dy-mark-1 { background: #c78d3f; }
.dy-mark-2 { background: #7a9b4f; }
.dy-mark-3 { background: #c46b52; }
.dy-mark-4 { background: #bca285; }
.dy-mark-5 { background: var(--wood-600); opacity: .7; }
.dy-balance {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
}
.dy-balance-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.dy-balance-ico svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--text-2);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dy-balance-bar {
  width: 6px;
  height: 48px;
  border-radius: 999px;
  background: var(--wood-700);
  overflow: hidden;
  position: relative;
}
.dy-balance-bar i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--honey);
  border-radius: inherit;
  transition: height 560ms var(--ease-settle);
}
.dy-balance-row:last-child .dy-balance-bar i { background: var(--good); }
:where(.dy) button { font: inherit; color: inherit; cursor: pointer; }
.dy svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.dy :focus-visible { outline: 2px solid var(--ink-honey); outline-offset: 2px; }
.dy-grip {
  width: 40px;
  height: 4px;
  margin: 8px auto 0;
  border-radius: 999px;
  background: var(--paper-shade);
}
.dy-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px 0 20px;
}
.dy-title { margin: 0; font-size: 1.25rem; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); }
.dy-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-2) !important;
}
.dy-close svg { width: 22px; height: 22px; }
.dy-close:hover { background: rgba(201, 181, 148, .35); }
/* Название открытого урока под шапкой: указатель в корешке — только
   точки с номерами, поэтому полное имя живёт здесь. */
.dy-now {
  margin: 4px 20px 0;
  font-family: var(--font-hand);
  font-size: 1.125rem;
  line-height: 1.2;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.dy-now[hidden] { display: none; }
.dy-now-num {
  margin-right: 8px;
  font-family: var(--font-ui);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}
.dy-label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.dy-hand { margin: 4px 0 0; font-size: 1.0625rem; line-height: 1.35; color: var(--ink); }
.dy-hand-2 { font-size: .9375rem; color: var(--ink-2); }
.dy-empty { margin: 8px 0; font-size: .9375rem; color: var(--ink-2); }

/* ── Телефон и узкое окно: указатель уроков — строкой над листом ──
   Тот же компонент, что и в корешке на десктопе, только точки
   встают горизонтально и корешок становится полосой бумаги. */
@media (max-width: 980px) {
  .dy {
    --dy-gutter: 0px;
    padding: var(--home-head) 0 0;
  }
  .dy-sheet {
    width: 100%;
    /* Не растягиваем «книгу» на всю ширину: на десктопе ВК-iframe уже 980px,
       и раньше включался телефонный макет во всю ширину окна. Ограничиваем
       и центрируем (flex-центрирование задано в .dy). */
    max-width: 600px;
    flex-direction: column;
  }
  .dy-spine {
    --dy-surface: var(--paper);
    flex-direction: row;
    align-items: center;
    gap: 0;
    width: 100%;
    padding: 10px 16px 2px;
    background: transparent;
    border-radius: 20px 20px 0 0;
    box-shadow: none;
  }
  .dy-lessons-row {
    flex-direction: row;
    align-items: center;
    flex: 1 1 auto;
    width: 100%;
    gap: 4px;
  }
  .dy-lessons {
    flex-direction: row;
    align-items: center;
    width: 100%;
    max-height: none;
    padding: 2px 0;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-padding: 0 12px;
    /* Мягкое растворение краёв вместо случайно обрезанной точки. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 16px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 16px), transparent 100%);
  }
  .dy-lesson {
    width: 34px;
    height: 34px;
    scroll-snap-align: center;
  }
  .dy-lesson-num { width: 26px; height: 26px; }
  .dy-lesson.is-current .dy-lesson-num { width: 30px; height: 30px; }
  .dy-lesson-flag { right: 0; bottom: 2px; }
  .dy-balance { display: none; }
  .dy-page { border-radius: 0; }
  .dy-now { margin: 2px 16px 0; font-size: 1rem; }
  .dy-transition-book { width: 100%; max-width: 600px; }
}

/* ══ РАЗВОРОТ УРОКА В ЕЖЕДНЕВНИКЕ ═══════════════════════════════════ */
.dy-spread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0 24px;
}
.dy-spread[hidden] { display: none !important; }
.dy-spread-inner {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 100%;
}
@media (min-width: 560px) {
  .dy-spread-inner { flex-direction: row; }
}

/* Голова разворота: переключатель «Шаги / Таймкоды». На широком экране
   не нужна — обе страницы рядом. */
.dy-spread-head {
  display: none;
  position: sticky;
  top: 0;
  z-index: 3;
  margin: 0 0 8px;
  padding: 2px 16px 10px;
  background: var(--paper);
  border-bottom: 1px dashed var(--paper-edge);
}
.dy-spread-tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 12px;
  background: rgba(201, 181, 148, .28);
}
.dy-spread-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 180ms var(--ease-soft), color 180ms var(--ease-soft), box-shadow 180ms var(--ease-soft);
}
.dy-spread-tab:hover { color: var(--ink); }
.dy-spread-tab.is-active {
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-1);
}
.dy-spread-tab-count {
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
.dy-spread-tab.is-active .dy-spread-tab-count { color: var(--ink-honey); }

/* Телефон: одна страница за раз, вторая прячется за кнопкой */
@media (max-width: 559px) {
  .dy-spread-head { display: block; }
  /* Липкая голова разворота должна прилипать к самому верху листа.
     Верхний отступ листа-прокрутки не даёт ей это сделать (липкий элемент
     не может выйти за верх родителя) — в щели видно проскролленное.
     Убираем отступ у листа и переносим его внутрь самой головы. */
  .dy-spread { padding-top: 0; }
  .dy-spread-head { padding-top: 6px; }
  .dy-page-left[data-panel], .dy-page-right[data-panel] { display: none; }
  .dy-page-left[data-panel].is-active, .dy-page-right[data-panel].is-active { display: flex; }
  .dy-page-left, .dy-page-right { padding-top: 0; border-top: 0; }
  .dy-page-left .dy-page-kicker, .dy-page-right .dy-page-kicker { display: none; }
}
.dy-page-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 8px 16px 16px;
}
.dy-page-right {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding: 8px 16px 16px;
  border-top: 1px dashed var(--paper-edge);
}
/* Линовка — за страницей шагов, с какой бы стороны она ни стояла. */
.dy-page-steps {
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 27px,
    rgba(46, 34, 24, .06) 27px,
    rgba(46, 34, 24, .06) 28px
  );
}
@media (min-width: 560px) {
  .dy-page-right { border-top: 0; border-left: 1px dashed var(--paper-edge); }
}
.dy-page-kicker {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.dy-page-title {
  margin: 4px 0 14px;
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--ink);
}
.dy-timecodes {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.dy-tc {
  --stagger: 40ms;
  opacity: 0;
  transform: translateY(8px);
  animation: dy-tc-in 320ms var(--ease-out) forwards;
  animation-delay: calc(var(--i) * var(--stagger));
}
@keyframes dy-tc-in {
  to { opacity: 1; transform: none; }
}
.dy-tc-btn {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px 10px 16px;
  border: 0;
  border-radius: 4px 12px 12px 4px;
  background: rgba(201, 181, 148, .35);
  color: var(--ink);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: transform 100ms var(--ease-out), background-color 180ms var(--ease-soft), box-shadow 180ms var(--ease-soft);
}
.dy-tc-btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 5px;
  border-radius: 0 3px 3px 0;
  background: var(--paper-shade);
  transition: background-color 180ms var(--ease-soft), width 180ms var(--ease-soft);
}
.dy-tc-btn:hover { background: rgba(201, 181, 148, .55); }
.dy-tc-btn:active { transform: scale(.98); }
.dy-tc.is-current .dy-tc-btn {
  background: rgba(226, 162, 76, .22);
  box-shadow: inset 0 0 0 1px rgba(226, 162, 76, .35);
}
.dy-tc.is-current .dy-tc-btn::before {
  width: 7px;
  background: var(--honey);
}
.dy-tc-time {
  flex: none;
  font-family: var(--font-ui);
  font-size: .8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-honey);
  min-width: 42px;
}
.dy-tc.is-current .dy-tc-time { color: var(--honey-deep); }
.dy-tc-label {
  flex: 1;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--ink);
  text-align: center;
}
.dy-page-soon {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  color: var(--ink-2);
  font-size: .9375rem;
  text-align: center;
}
.dy-page-soon-line {
  width: 48px;
  height: 3px;
  border-radius: 999px;
  background: var(--paper-shade);
}

/* ══ ПРАВАЯ СТРАНИЦА УРОКА: шаги, аудио, кнопки ═══════════════════ */
.dy-steps-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 6px;
}
.dy-step-item {
  --stagger: 55ms;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 52px;
  padding: 8px 10px 8px 8px;
  border-radius: 10px;
  background: rgba(201, 181, 148, .22);
  color: var(--ink);
  text-align: left;
  font: inherit;
  cursor: pointer;
  border: 0;
  width: 100%;
  transition: transform 100ms var(--ease-out), background-color 180ms var(--ease-soft);
  opacity: 1;
}
/* Первое появление: «пишется» слева направо */
.dy-page-steps.is-writing .dy-step-item {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  animation: dy-write-in 520ms var(--ease-settle) forwards;
  animation-delay: calc(var(--i) * var(--stagger));
}
@keyframes dy-write-in {
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}
.dy-step-item:hover { background: rgba(201, 181, 148, .4); }
.dy-step-item:active { transform: scale(.99); }
.dy-step-item.is-done { background: rgba(201, 181, 148, .12); }
.dy-step-item.is-easy .dy-step-task {
  text-decoration: line-through;
  text-decoration-color: var(--ink-2);
  text-decoration-thickness: 1px;
  color: var(--ink-2);
}
/* Загнутый уголок: шаг к повторению */
.dy-step-item.is-review::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 18px;
  height: 18px;
  background: linear-gradient(225deg, var(--paper-shade) 46%, rgba(201,181,148,.55) 50%, transparent 52%);
  border-radius: 0 0 0 5px;
  box-shadow: -1px 1px 2px rgba(46,34,24,.12);
  pointer-events: none;
}
.dy-step-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--paper-edge);
  color: var(--ink-2);
  font-size: .8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dy-step-item.is-done .dy-step-num {
  background: var(--ink-moss);
  color: var(--paper);
}
.dy-step-item.is-hard .dy-step-num {
  background: var(--warn);
  color: var(--on-honey);
  font-size: 1rem;
}
.dy-step-item.is-retry .dy-step-num {
  background: var(--bad);
  color: var(--on-honey);
  font-size: 1rem;
}
.dy-step-main {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.dy-step-task {
  font-family: var(--font-hand);
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--ink);
}
.dy-step-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-size: .75rem;
  color: var(--ink-2);
}
.dy-step-hand {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.dy-step-hand svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dy-step-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-items: center;
}
.dy-step-check {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid var(--paper-shade);
  background: var(--paper);
  display: grid;
  place-items: center;
}
.dy-step-check.is-on {
  background: var(--ink-moss);
  border-color: var(--ink-moss);
}
.dy-step-check.is-on svg {
  width: 10px;
  height: 10px;
  stroke: var(--paper);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Аудиослоты */
.dy-audio-slots {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px dashed var(--paper-edge);
}
.dy-audio-label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 8px;
}
.dy-audio-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  max-width: 300px;
}
.dy-audio-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: start;
  justify-self: stretch;
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 0;
  overflow: hidden;
  padding: 6px 5px;
  border-radius: 10px;
  background: rgba(201, 181, 148, .25);
  border: 1px dashed var(--paper-shade);
  cursor: pointer;
  transition: background-color 180ms var(--ease-soft), transform 100ms var(--ease-out);
}
.dy-audio-slot:hover { background: rgba(201, 181, 148, .42); }
.dy-audio-slot:active { transform: scale(.98); }
.dy-audio-slot.is-recording {
  --rec-level: 0;
  background: rgba(226, 162, 76, .22);
  border-style: solid;
  border-color: var(--honey);
  box-shadow: 0 0 0 calc(2px + var(--rec-level, 0) * 7px) rgba(226, 162, 76, .22);
}
.dy-audio-slot.is-recording .dy-audio-empty svg {
  color: var(--honey-deep);
  transform: scale(calc(.9 + var(--rec-level, 0) * 1.15));
  filter: drop-shadow(0 0 calc(2px + var(--rec-level, 0) * 12px) rgba(226, 162, 76, 1));
  transition: transform 70ms linear, filter 70ms linear;
}
.dy-audio-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--ink-2);
  font-size: .6875rem;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
}
.dy-audio-empty svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dy-audio-empty.is-icon-only svg {
  width: 22px;
  height: 22px;
}
.dy-audio-filled {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  min-height: 0;
}
.dy-audio-name {
  display: block;
  width: 100%;
  font-family: var(--font-hand);
  font-size: .9375rem;
  line-height: 1.15;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-bottom: 1px dashed transparent;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.dy-audio-name.is-empty {
  color: var(--ink-2);
  opacity: .7;
  font-style: italic;
}
.dy-audio-slot:hover .dy-audio-name { border-bottom-color: var(--paper-shade); }
.dy-audio-note {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px dashed var(--paper-shade);
  background: none;
  outline: none;
  font-family: var(--font-hand);
  font-size: 1rem;
  line-height: 1.15;
  color: var(--ink);
}
.dy-audio-note::placeholder { color: var(--ink-2); opacity: .6; font-style: italic; }
.dy-audio-date {
  font-size: .625rem;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.dy-audio-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-top: auto;
  padding-top: 2px;
}
.dy-audio-play {
  position: relative;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--honey);
  color: var(--on-honey);
  font-size: .6875rem;
  font-weight: 700;
  cursor: pointer;
}
.dy-audio-play::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(var(--honey-deep) calc(var(--play-progress, 0) * 1turn), rgba(226, 162, 76, .16) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  opacity: 0;
  transition: opacity 160ms var(--ease-soft);
  pointer-events: none;
}
.dy-audio-slot.is-playing .dy-audio-play::after { opacity: 1; }
.dy-audio-slot.is-playing .dy-audio-play {
  animation: dy-play-beat 1100ms var(--ease-breath) infinite alternate;
}
@keyframes dy-play-beat {
  from { transform: scale(1); }
  to   { transform: scale(1.1); }
}
.dy-audio-play svg { width: 11px; height: 11px; fill: currentColor; stroke: none; }
.dy-audio-repeat {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: rgba(201, 181, 148, .55);
  color: var(--ink-2);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.dy-audio-repeat:hover { background: rgba(201, 181, 148, .85); color: var(--ink); }
.dy-audio-repeat svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.75; }

/* Нижняя часть разворота: мягкое предложение + прогресс */
.dy-spread-bottom {
  flex: none;
  width: 100%;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px dashed var(--paper-edge);
  background: rgba(201, 181, 148, .12);
}
.dy-next-up { margin-bottom: 14px; }
.dy-next-up-label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 8px;
}
.dy-next-up-text {
  margin: -4px 0 10px;
  font-size: .9375rem;
  color: var(--ink-2);
}
.dy-next-up-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.dy-next-up-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: rgba(201, 181, 148, .32);
  color: var(--ink);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: transform 100ms var(--ease-out), background-color 180ms var(--ease-soft);
}
.dy-next-up-item:hover { background: rgba(201, 181, 148, .5); }
.dy-next-up-item:active { transform: scale(.99); }
.dy-next-up-main {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
  text-align: center;
}
.dy-next-up-title {
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.35;
}
.dy-next-up-sub {
  font-size: .8125rem;
  color: var(--ink-2);
}
.dy-next-up-badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--paper-edge);
  color: var(--ink-2);
  font-size: .9375rem;
  font-weight: 700;
}
.dy-next-up-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dy-next-up-actions .dy-btn-primary,
.dy-next-up-actions .dy-btn-ghost {
  flex: 1 1 140px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 12px;
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: transform 100ms var(--ease-out), background-color 180ms var(--ease-soft);
}
.dy-next-up-actions .dy-btn-primary:active,
.dy-next-up-actions .dy-btn-ghost:active { transform: scale(.98); }
.dy-btn-primary {
  border: 0;
  background: var(--honey);
  color: var(--on-honey);
  box-shadow: var(--shadow-1);
}
.dy-btn-primary:hover { background: var(--honey-light); }
.dy-btn-primary.is-locked {
  background: transparent;
  color: var(--ink-2);
  border: 1px dashed var(--paper-shade);
  box-shadow: none;
}
.dy-btn-ghost {
  border: 1px solid var(--paper-shade);
  background: transparent;
  color: var(--ink);
}
.dy-btn-ghost:hover { background: rgba(201, 181, 148, .35); }

/* Мягкое подёргивание следующего шага: «ждёт тебя» */
.dy-next-up-item.is-waiting {
  transform-origin: left center;
}
.dy-next-up-item.is-nudging {
  animation: dy-step-nudge 1.4s var(--ease-out);
  transform-origin: left center;
}
@keyframes dy-step-nudge {
  0%   { transform: translateX(0) rotate(0deg); }
  20%  { transform: translateX(2px) rotate(.35deg); }
  45%  { transform: translateX(-1.5px) rotate(-.25deg); }
  75%  { transform: translateX(1px) rotate(.15deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

/* Приглашение «перейди в другой урок» — закладка над блоком */
.dy-next-up.is-done {
  position: relative;
  padding-top: 18px;
}
.dy-invite-bookmark {
  position: absolute;
  top: -6px;
  left: 50%;
  padding: 6px 14px 8px;
  border-radius: 0 0 10px 10px;
  background: var(--honey);
  color: var(--on-honey);
  font-family: var(--font-hand);
  font-size: 1.05rem;
  line-height: 1;
  white-space: nowrap;
  box-shadow: var(--shadow-1);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-100%);
  animation: dy-invite-bookmark-in 700ms var(--ease-settle) 500ms forwards,
             dy-invite-bookmark-sway 5s var(--ease-breath) 1.4s infinite alternate;
}
@keyframes dy-invite-bookmark-in {
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes dy-invite-bookmark-sway {
  from { transform: translateX(-50%) rotate(-1.2deg); }
  to   { transform: translateX(-50%) rotate(1.2deg); }
}

.dy-spread-progress {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--paper-edge);
}
.dy-spread-progress-text {
  text-align: center;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.dy-spread-bar {
  position: relative;
  height: 3px;
  border-radius: 999px;
  background: var(--paper-shade);
  overflow: hidden;
}
.dy-spread-bar i {
  position: absolute;
  inset: 0;
  background: var(--honey);
  transform-origin: left center;
  border-radius: inherit;
}

/* ══ БОНУС-ЧЕЛЛЕНДЖ ═══════════════════════════════════════════════ */
.dy-bonus {
  margin-top: 18px;
  padding: 14px 14px 16px;
  border-radius: 14px 14px 14px 4px;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 25px,
      rgba(46, 34, 24, .05) 25px,
      rgba(46, 34, 24, .05) 26px
    ),
    rgba(201, 181, 148, .28);
  box-shadow: inset 0 0 0 1px rgba(46, 34, 24, .08);
}
.dy-bonus-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.dy-bonus-ico {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: #4a7a7a;
}
.dy-bonus-ico svg { width: 18px; height: 18px; }
.dy-bonus-label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.dy-bonus-title {
  margin: 0 0 10px;
  font-family: var(--font-hand);
  font-size: 1.35rem;
  line-height: 1.25;
  color: var(--ink);
}
.dy-bonus-list {
  margin: 0 0 12px;
  padding-left: 18px;
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--ink);
}
.dy-bonus-list li { margin-bottom: 4px; }
.dy-bonus-closing {
  margin: 0 0 14px;
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--ink-2);
  font-style: italic;
}
.dy-bonus-closing p { margin: 0 0 10px; }
.dy-bonus-closing p:last-child { margin-bottom: 0; }
.dy-bonus-lead {
  margin-bottom: 10px;
  color: var(--ink);
  font-style: normal;
}
.dy-bonus-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px dashed var(--paper-shade);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 100ms var(--ease-out), background-color 180ms var(--ease-soft), border-color 180ms var(--ease-soft);
}
.dy-bonus-btn:active { transform: scale(.97); }
.dy-bonus-btn svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dy-bonus-btn.is-done {
  border-style: solid;
  border-color: var(--ink-moss);
  background: rgba(75, 95, 37, .12);
  color: var(--ink-moss);
}
.dy-bonus.is-done .dy-bonus-btn { pointer-events: auto; }

.dy-step-warm {
  display: inline-flex;
  align-items: center;
  font-size: .75rem;
  font-weight: 600;
  color: var(--ink-honey);
}
.dy-balance-hint {
  width: 100%;
  margin-top: 8px;
  font-size: .6875rem;
  line-height: 1.35;
  color: var(--text-2);
  text-align: center;
  opacity: .9;
}

/* ══ ONBOARDING ═══════════════════════════════════════════════════ */
.ob {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}
.ob-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 11, 8, .45);
  opacity: 0;
  animation: ob-fade-in 320ms var(--ease-out) forwards;
}
.ob-spot {
  position: fixed;
  border: 2px solid var(--honey);
  border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(16, 11, 8, .45), 0 0 18px rgba(226, 162, 76, .35);
  pointer-events: none;
  transition: all 320ms var(--ease-out);
  z-index: 1;
}
.ob-card, .ob-plan { pointer-events: auto; }

.ob-card {
  position: fixed;
  width: min(320px, calc(100vw - 32px));
  padding: 16px;
  border-radius: 16px 16px 16px 4px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-3);
  pointer-events: auto;
  z-index: 2;
}
.ob-text {
  margin: 0 0 14px;
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--ink);
}
.ob-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.ob-actions button {
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 12px;
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 100ms var(--ease-out), background-color 180ms var(--ease-soft);
}
.ob-actions button:active { transform: scale(.98); }
.ob-skip {
  border: 0;
  background: transparent;
  color: var(--ink-2);
}
.ob-skip:hover { color: var(--ink); }
.ob-next {
  border: 0;
  background: var(--honey);
  color: var(--on-honey);
  box-shadow: var(--shadow-1);
}
.ob-next:hover { background: var(--honey-light); }

.ob-plan {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(360px, calc(100vw - 32px));
  max-height: 84vh;
  overflow-y: auto;
  border-radius: 20px 20px 20px 6px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-3);
  pointer-events: auto;
  z-index: 3;
}
.ob-plan-inner { padding: 20px; }
.ob-plan-lead {
  margin: 0 0 16px;
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--ink);
}
.ob-plan-group { margin-bottom: 18px; }
.ob-plan-group .dy-label { margin-bottom: 8px; }
.ob-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ob-chip {
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--paper-shade);
  border-radius: 999px;
  background: rgba(201, 181, 148, .25);
  color: var(--ink);
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 100ms var(--ease-out), background-color 180ms var(--ease-soft), border-color 180ms var(--ease-soft);
}
.ob-chip:hover { background: rgba(201, 181, 148, .45); }
.ob-chip:active { transform: scale(.96); }
.ob-chip.is-selected {
  background: var(--honey);
  border-color: var(--honey);
  color: var(--on-honey);
}
.ob-custom {
  width: 100%;
  min-height: 44px;
  margin-top: 10px;
  padding: 8px 12px;
  border: 1px solid var(--paper-shade);
  border-radius: 12px;
  background: rgba(255,255,255,.4);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  outline: none;
}
.ob-custom:focus { border-color: var(--honey); box-shadow: 0 0 0 3px rgba(226,162,76,.2); }
.ob-write-btn,
.ob-done-btn {
  width: 100%;
  min-height: 52px;
  margin-top: 4px;
  border: 0;
  border-radius: 14px;
  background: var(--honey);
  color: var(--on-honey);
  font: inherit;
  font-size: .9375rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: transform 100ms var(--ease-out), background-color 180ms var(--ease-soft);
}
.ob-write-btn:disabled {
  background: var(--paper-shade);
  color: var(--ink-2);
  cursor: not-allowed;
}
.ob-write-btn:not(:disabled):hover,
.ob-done-btn:hover { background: var(--honey-light); }
.ob-write-btn:not(:disabled):active,
.ob-done-btn:active { transform: scale(.98); }

.ob-page {
  padding: 20px;
}
.ob-page-sheet {
  padding: 20px 18px 18px;
  border-radius: 14px 14px 14px 4px;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 27px,
      rgba(46, 34, 24, .06) 27px,
      rgba(46, 34, 24, .06) 28px
    ),
    var(--paper);
  box-shadow: inset 0 0 0 1px rgba(46,34,24,.08);
}
.ob-page-line {
  margin: 8px 0 0;
  padding: 0 2px;
  font-family: var(--font-hand);
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--ink);
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  animation: ob-write 700ms var(--ease-settle) forwards;
}
.ob-page-line:nth-child(3) { animation-delay: 350ms; }
@keyframes ob-write {
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes ob-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body.ob-active { overflow: hidden; }

/* ══ ПЕРЕХОД МЕЖДУ ГЛАВАМИ ═══════════════════════════════════════ */
.dy-transition {
  position: absolute;
  top: var(--home-head);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}
.dy-transition[hidden] { display: none !important; }
.dy-transition-book {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 600px;
  height: 100%;
  perspective: 1200px;
}
.dy-transition-spine {
  flex: none;
  width: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0 12px;
  gap: 10px;
  background: var(--wood-900);
  border-radius: 20px 0 0 0;
  box-shadow: inset -2px 0 4px rgba(10,5,0,.35);
}
.dy-transition-mark {
  width: 18px;
  height: 44px;
  border-radius: 4px 4px 0 0;
  transform: translateY(-24px);
  opacity: 0;
}
.dy-transition-sheet {
  flex: 1;
  display: flex;
  background: var(--paper);
  border-radius: 0 20px 0 0;
  box-shadow: var(--shadow-3);
  transform-origin: left center;
  transform: rotateY(90deg);
  opacity: 0;
}
.dy-transition-sheet-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 27px,
      rgba(46, 34, 24, .06) 27px,
      rgba(46, 34, 24, .06) 28px
    ),
    url("../assets/textures/paper.png");
  background-size: 100% 28px, 512px auto;
  background-repeat: repeat, repeat;
}
.dy-transition-kicker {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 4px;
  opacity: 0;
}
.dy-transition-title {
  margin: 0 0 8px;
  font-family: var(--font-hand);
  font-size: 2.25rem;
  line-height: 1.1;
  color: var(--ink);
  opacity: 0;
  clip-path: inset(0 100% 0 0);
}
.dy-transition-lead {
  margin: 0;
  font-family: var(--font-hand);
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--ink-honey);
  opacity: 0;
  clip-path: inset(0 100% 0 0);
}

/* Анимации перехода */
.dy-transition.is-animating .dy-transition-sheet {
  animation: dy-page-turn 1200ms var(--ease-settle) forwards;
}
.dy-transition.is-animating .dy-transition-mark-prev {
  animation: dy-mark-place 560ms var(--ease-settle) 900ms forwards;
}
.dy-transition.is-animating .dy-transition-mark-next {
  animation: dy-mark-appear 560ms var(--ease-settle) 1400ms forwards;
}
.dy-transition.is-animating .dy-transition-kicker {
  animation: dy-fade-in 500ms var(--ease-out) 1700ms forwards;
}
.dy-transition.is-animating .dy-transition-title {
  animation: dy-write-in 4000ms var(--ease-settle) 1900ms forwards;
}
.dy-transition.is-animating .dy-transition-lead {
  animation: dy-write-in 900ms var(--ease-settle) 6200ms forwards;
}
@keyframes dy-page-turn {
  from { transform: rotateY(90deg); opacity: 0; }
  to   { transform: rotateY(0deg);  opacity: 1; }
}
@keyframes dy-mark-place {
  from { transform: translateY(-24px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
@keyframes dy-mark-appear {
  from { transform: translateY(-16px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
@keyframes dy-write-in {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes dy-fade-in {
  to { opacity: 1; }
}
.dy-transition.is-leaving {
  animation: dy-transition-out 320ms var(--ease-in) forwards;
}
@keyframes dy-transition-out {
  to { opacity: 0; transform: translateY(24px); }
}

/* Темы глав: мягкое изменение света ламп в Доме */
.hs { --lamp-hue: 0deg; --lamp-sat: 1; }
.hs-theme-2 { --lamp-hue: -8deg; --lamp-sat: 1.05; }
.hs-theme-3 { --lamp-hue: 6deg;  --lamp-sat: 1.05; }
.hs-theme-4 { --lamp-hue: -14deg; --lamp-sat: 1.08; }
.hs-lamp::before {
  filter: hue-rotate(var(--lamp-hue)) saturate(var(--lamp-sat));
}

/* ══ Reduced motion: без перемещений и без непрерывных движений ═══ */
@media (prefers-reduced-motion: reduce) {
  .hs-breath { animation: none; transform: scale(1.03); }
  .hs-dust { display: none; }
  .hs-lamp::before { animation: none; opacity: .9; }
  .wt-dot { animation: none; }
  .dy-audio-slot.is-recording .dy-audio-empty svg { transition: none; }
  .dy-audio-slot.is-playing .dy-audio-play { animation: none; }
  .home-diary:active, .dy-tc-btn:active { transform: none; }
  .home-map-point { animation: none; opacity: .7; }
  .home-map-point.is-current { opacity: 1; }
  .home-map-marker, .home-map-marker::after { animation: none; }
  .home-map-marker, .home-map-progress { transition: none; }
  .home-map-path { animation: none; }
  .dy-balance-bar i { transition: none; }
  .dy-lesson { transition: none; }
  .dy-tc { animation: none; opacity: 1; transform: none; }
  .dy-page-steps.is-writing .dy-step-item { animation: none; opacity: 1; clip-path: none; }
  .dy-step-item, .dy-audio-slot { transform: none !important; }
  .ob-backdrop { animation: none; opacity: 1; }
  .ob-page-line { animation: none; opacity: 1; clip-path: none; }
  .ob-card { transform: none !important; }
  .ob-plan { transform: translate(-50%, -50%) !important; }
  .dy-transition, .dy-transition-sheet, .dy-transition-mark,
  .dy-transition-title, .dy-transition-lead,
  .dy-transition-kicker { animation: none !important; opacity: 1 !important; clip-path: none !important; transform: none !important; }
  .st-sheet { animation: none; }
  .st-timer.is-running .st-timer-icon svg { animation: none; }
  .dy-next-up-item.is-waiting,
  .dy-next-up-item.is-nudging { animation: none !important; transform: none !important; }
  .dy-invite-bookmark { animation: none !important; opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ══ ЭКРАН ШАГА 2.0 ═══════════════════════════════════════════════ */
.st-screen {
  min-height: 100%;
  padding-top: env(safe-area-inset-top);
  max-width: 600px;
  margin: 0 auto;
  color: var(--ink);
}

.st-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  min-height: 44px;
}

.st-back {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
  transition: transform 100ms var(--ease-out), background 180ms var(--ease-soft);
}
.st-back:active { transform: scale(.96); background: var(--surface-2); }

.st-topbar-main { flex: 1; min-width: 0; }

.st-topbar-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.st-step-pos {
  margin: -4px 0 12px;
  font-size: .8125rem;
  color: var(--ink-2);
  line-height: 1.4;
}

.st-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 8px;
  margin-bottom: 4px;
  scrollbar-width: none;
}
.st-tabs::-webkit-scrollbar { display: none; }

.st-tab {
  position: relative;
  flex: none;
  min-width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  color: var(--text-2);
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 100ms var(--ease-out), background 180ms var(--ease-soft), color 180ms var(--ease-soft), border-color 180ms var(--ease-soft);
}
.st-tab svg { width: 18px; height: 18px; }
.st-tab:active { transform: scale(.96); }

.st-tab.is-current {
  background: var(--honey);
  border-color: var(--honey);
  color: var(--on-honey);
  box-shadow: var(--shadow-1);
}

.st-tab.is-done {
  background: var(--good-bg);
  border-color: var(--good-line);
  color: var(--good);
}
.st-tab.is-hard {
  background: var(--warn-bg);
  border-color: var(--warn-line);
  color: var(--warn);
}
.st-tab.is-retry {
  background: var(--bad-bg);
  border-color: var(--bad-line);
  color: var(--bad);
}
.st-tab.is-hard, .st-tab.is-retry { font-size: 1.125rem; font-weight: 700; }
.st-tab.is-current.is-done,
.st-tab.is-current.is-hard,
.st-tab.is-current.is-retry {
  box-shadow: 0 0 0 2px var(--honey);
}

.st-tab.is-review {
  position: relative;
}
.st-tab.is-review::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -4px;
  width: 10px;
  height: 10px;
  background: var(--honey);
  border-radius: 0 8px 0 8px;
}

@keyframes st-hourglass {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(180deg); }
}

.st-sheet {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  border-radius: 20px 20px 20px 6px;
  padding: 28px 20px 24px;
  box-shadow: var(--shadow-2);
  background-image: repeating-linear-gradient(to bottom, transparent, transparent 27px, var(--paper-edge) 27px, var(--paper-edge) 28px);
  background-size: 100% 28px;
}
.st-sheet::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--paper-shade) 50%, transparent 50%);
  border-radius: 0 0 0 6px;
}

.st-phase {
  position: absolute;
  top: -12px;
  left: 20px;
  padding: 6px 14px;
  border-radius: 12px 12px 0 0;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--on-honey);
  background: var(--honey);
  box-shadow: var(--shadow-1);
}
.st-phase.is-reflect { background: var(--warn); color: #1f1409; }
.st-phase.is-done { background: var(--good); color: var(--on-good); }

.st-section { margin-bottom: 24px; }
.st-section-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-2);
  margin-bottom: 8px;
}

.st-task {
  font-family: var(--font-hand);
  font-size: 2.25rem;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}

.st-retrieval {
  background: var(--honey-bg);
  border: 1px solid var(--honey-line);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 24px;
}
.st-retrieval-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--honey-light);
  margin-bottom: 8px;
}
.st-retrieval-text {
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 12px;
  text-align: center;
}
.st-retrieval-name {
  display: block;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  margin-bottom: 6px;
}
.st-retrieval-question { display: block; }
.st-retrieval-hint {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  color: var(--text-2);
  font-size: .9375rem;
  line-height: 1.5;
  border-top: 1px solid var(--honey-line);
  transition: max-height 320ms var(--ease-settle), opacity 240ms var(--ease-out), padding-top 320ms var(--ease-settle);
}
.st-retrieval.revealed .st-retrieval-hint {
  max-height: 400px;
  opacity: 1;
  padding-top: 12px;
}
.st-retrieval-btn {
  background: transparent;
  border: 1px solid var(--honey-line);
  color: var(--honey-light);
  border-radius: 12px;
  padding: 8px 14px;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 180ms var(--ease-soft), border-color 180ms var(--ease-soft);
}
.st-retrieval-btn:active { background: rgba(226,162,76,.12); }

.st-inst {
  list-style: none;
  margin: 0;
  padding: 0;
}
.st-inst li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  cursor: pointer;
  min-height: 48px;
}

.st-check {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  border: 2px solid var(--ink-2);
  border-radius: 6px;
  display: grid;
  place-items: center;
  transition: background 180ms var(--ease-soft), border-color 180ms var(--ease-soft);
}
.st-check svg {
  width: 14px;
  height: 14px;
  color: var(--on-honey);
  opacity: 0;
  transform: scale(.8);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.st-inst li.on .st-check {
  background: var(--honey);
  border-color: var(--honey);
}
.st-inst li.on .st-check svg {
  opacity: 1;
  transform: scale(1);
}

.st-inst-text {
  flex: 1;
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--ink);
}
.st-inst li.on .st-inst-text {
  text-decoration: line-through;
  color: var(--ink-2);
}

.st-timer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  background: var(--wood-800);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
}
.st-timer-icon {
  flex: none;
  color: var(--honey);
}
.st-timer-icon svg { width: 24px; height: 24px; }
.st-timer.is-running .st-timer-icon svg { animation: st-hourglass 60s linear infinite; }

.st-clock {
  flex: 1 1 auto;
  min-width: 84px;
  font-size: 1.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: var(--text);
}

.st-timer-btn {
  flex: none;
  min-height: 36px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--surface-1);
  color: var(--text);
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 180ms var(--ease-soft), transform 100ms var(--ease-out);
}
.st-timer-btn.ghost {
  background: transparent;
  border-color: var(--line);
}
.st-timer-btn:active { transform: scale(.96); background: var(--surface-2); }

.st-motivation {
  background: var(--paper-shade);
  border-radius: 16px;
  padding: 16px;
  font-family: var(--font-hand);
  font-size: 1.25rem;
  line-height: 1.35;
  color: var(--ink);
}

.st-stamps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}
.st-stamp {
  min-height: 64px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface-1);
  color: var(--text);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: transform 100ms var(--ease-out), background 180ms var(--ease-soft), border-color 180ms var(--ease-soft);
}
.st-stamp:active { transform: scale(.96); }
.st-stamp.good { background: var(--good-bg); border-color: var(--good-line); color: var(--good); }
.st-stamp.warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.st-stamp.bad { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad); }
.st-stamp.is-chosen {
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px currentColor;
}

.st-nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}
.st-nav a, .st-nav .st-nav-btn {
  flex: 1 1 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-1);
  color: var(--text);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  padding: 8px 12px;
  transition: transform 100ms var(--ease-out), background 180ms var(--ease-soft);
}
.st-nav a:active, .st-nav .st-nav-btn:active { transform: scale(.98); background: var(--surface-2); }
.st-nav a.is-disabled, .st-nav .st-nav-btn.is-disabled { opacity: .4; pointer-events: none; }

/* Пейволл внутри шага — сохраняем v1 paywallHtml, но оборачиваем */
.st-paywall {
  background: var(--paper);
  border-radius: 20px;
  padding: 24px;
  box-shadow: var(--shadow-2);
}

/* ══ ШАГ ВНУТРИ ЕЖЕДНЕВНИКА ═══════════════════════════════════════ */
.st-in-diary {
  display: block;
  padding: 4px 16px 28px;
  max-width: 600px;
  margin: 0 auto;
}

/* ══ ПЕЙВОЛЛ-МОДАЛКА (в Доме, новый дизайн) ═══════════════════════ */
.pw-modal-wrap {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.pw-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 11, 8, .62);
}
.pw-modal {
  position: relative;
  width: min(520px, 100%);
  max-height: 88svh;
  overflow-y: auto;
  border-radius: 20px;
  background: var(--surface-1);
  color: var(--text);
  padding: 20px;
  box-shadow: var(--shadow-3);
  outline: none;
}
.pw-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.pw-modal-kicker {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-2);
}
.pw-modal-title {
  margin: 0 0 16px;
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--text);
}
.pw-modal-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}
.pw-modal-close:hover { background: rgba(201, 181, 148, .35); }
.pw-modal-close svg { width: 22px; height: 22px; }
.pw-modal .paywall { box-shadow: none; border: 0; }
.pw-modal .paywall a, .pw-modal .paywall button { font: inherit; }

/* Заглушка-пейволл внутри разворота ежедневника (закрытый урок) */
.dy-locked {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 20px 18px 24px;
}
.dy-locked-card {
  width: min(460px, 100%);
  background: var(--surface-1);
  color: var(--text);
  border-radius: var(--r-16, 16px);
  padding: 20px;
  box-shadow: var(--shadow-2);
}
.dy-locked-kicker {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-2);
}
.dy-locked-title {
  margin: 2px 0 14px;
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--text);
}
.dy-locked-card .paywall {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}
.dy-locked-card .paywall a, .dy-locked-card .paywall button { font: inherit; }

/* ══ КНОПКА МУЗЫКИ (правый верхний угол) ══════════════════════════ */
.snd-toggle {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 16px);
  right: max(20px, calc((100vw - 600px) / 2 + 20px));
  z-index: 70;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(37, 29, 23, .78);
  color: var(--text);
  box-shadow: 0 6px 18px rgba(10, 5, 0, .3);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background .18s var(--ease-out), color .18s var(--ease-out),
              transform .18s var(--ease-out), opacity .18s var(--ease-out);
}
.snd-toggle:hover { background: rgba(37, 29, 23, .95); }
.snd-toggle:active { transform: scale(.96); }
.snd-toggle:focus-visible { outline: 2px solid var(--honey); outline-offset: 3px; }
.snd-toggle svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.snd-toggle .snd-off { display: none; }
.snd-toggle.is-muted { color: var(--text-2); opacity: .82; }
.snd-toggle.is-muted .snd-on { display: none; }
.snd-toggle.is-muted .snd-off { display: block; }

/* Не перекрывать заголовки; на онбординге и вне «Дома» не показывать */
.home-top { padding-right: 56px; }
.wt-head { padding-right: 56px; }
body:not(.is-home) .snd-toggle,
body.ob-active .snd-toggle { display: none; }

@media (prefers-reduced-motion: reduce) {
  .snd-toggle { transition: none; }
  .snd-toggle:active { transform: none; }
}