:root {
  --cream: #f7efe5;
  --cream-dim: rgba(247,239,229,.76);
  --muted: rgba(247,239,229,.58);
  --gold: #e7bf73;
  --gold-light: #f3d8a4;
  --bg-deep: #0c0a08;
  --nav-h: 78px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg-deep); }
body {
  min-height: 100%;
  margin: 0;
  color: var(--cream);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background:
    radial-gradient(circle at 50% 108%, rgba(244,223,187,.16), transparent 33%),
    radial-gradient(circle at 18% 8%, rgba(233,192,113,.08), transparent 24%),
    linear-gradient(180deg, #28221b 0%, #17130f 44%, #0c0a08 100%);
  overflow-x: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
body::-webkit-scrollbar, html::-webkit-scrollbar { display: none; width: 0; }
button { font: inherit; -webkit-tap-highlight-color: transparent; }
.app-shell { position: relative; width: min(100%, 520px); min-height: 100vh; margin: 0 auto; overflow: hidden; }
.ambient-stars { display: none; }
.app-main { position: relative; z-index: 2; min-height: 100vh; padding: 0 18px calc(var(--nav-h) + var(--safe-bottom) + 22px); }
.page { animation: page-in .16s ease-out both; }
@keyframes page-in { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform: translateY(0); } }

h1,h2,h3,p { margin-top: 0; }
.page-title, .section-title, .lesson-title, .hero-title, .home-title, .module-page-title, .lesson-page-title {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: -.04em;
}
.topline { min-height: 42px; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 10px; }
.circle-btn {
  position: relative; width: 41px; height: 41px; border-radius: 50%;
  border: 1px solid rgba(247,239,229,.13); background: rgba(30,25,20,.56); color: var(--cream);
  display: inline-flex; align-items:center; justify-content:center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 22px rgba(0,0,0,.20);
  cursor: pointer;
}
.circle-btn.gold { color: var(--gold-light); }
.back-icon::before { content:""; width:11px; height:11px; border-left:2px solid currentColor; border-bottom:2px solid currentColor; transform: rotate(45deg) translateX(2px); border-radius:1px; }
.page-title { color: var(--cream); font-size: clamp(34px, 9vw, 50px); line-height: .98; margin: 0 0 14px; }
.page-subtitle, .lead { color: var(--cream-dim); font-size: 15px; line-height: 1.45; margin: 0 0 18px; max-width: 340px; }

/* HOME */
.home-page { min-height: calc(100vh - var(--nav-h) - 18px); }
.home-stage {
  position: relative;
  min-height: calc(100vh - var(--nav-h) - 18px);
  margin-left: -18px;
  margin-right: -18px;
  overflow: hidden;
}
.home-bg-blur, .home-bg-image { position: absolute; inset: 0; width: 100%; height: 100%; }
.home-bg-blur {
  background-image: url('assets/home-moon-kids-v6.webp');
  background-size: cover;
  background-position: center center;
  filter: blur(30px);
  transform: scale(1.09);
  opacity: .70;
}
.home-bg-image { object-fit: cover; object-position: center center; }
.home-stage::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(12,10,8,.24) 0%, rgba(12,10,8,.08) 26%, rgba(12,10,8,.08) 56%, rgba(12,10,8,.66) 100%),
    radial-gradient(circle at center, transparent 20%, rgba(12,10,8,.10) 76%, rgba(12,10,8,.26) 100%);
}
.home-overlay {
  position: absolute; inset: 0; z-index: 2;
  padding: calc(max(20px, env(safe-area-inset-top, 0px)) + 54px) 18px calc(var(--nav-h) + var(--safe-bottom) + 26px);
}
.home-title-block { max-width: 340px; }
.home-title {
  color: var(--cream);
  font-size: clamp(40px, 9.4vw, 50px);
  line-height: .93;
  margin: 0 0 14px;
  max-width: 208px;
}
.home-copy {
  font-size: 14px;
  line-height: 1.42;
  color: rgba(247,239,229,.88);
  max-width: 330px;
  margin: 0 0 16px;
}
.primary-cta {
  min-height: 44px;
  border: 1px solid rgba(243,216,164,.36);
  border-radius: 16px;
  padding: 0 18px;
  color: #23180d;
  background: linear-gradient(180deg, #f4dcae, #d5aa65);
  font-weight: 760;
  font-size: 14px;
  box-shadow: 0 14px 30px rgba(213,170,101,.22), inset 0 1px 0 rgba(255,255,255,.42);
  cursor: pointer;
}

.round-symbol {
  width:40px; height:40px; border-radius:50%; border:1px solid rgba(243,216,164,.18);
  background: linear-gradient(180deg, rgba(243,216,164,.22), rgba(183,131,61,.17)); color: var(--gold-light);
  display:inline-flex; align-items:center; justify-content:center; box-shadow: inset 0 1px 0 rgba(255,255,255,.07); flex:0 0 auto;
}
.round-symbol::before { content: attr(data-symbol); font-size:18px; line-height:1; }
.chevron { width:9px; height:9px; border-top:2px solid currentColor; border-right:2px solid currentColor; color: var(--gold-light); transform: rotate(45deg); opacity:.86; margin-right:4px; }

/* STANDARD PAGES */
.learning-page, .lives-page, .profile-page { padding-top: max(18px, env(safe-area-inset-top, 0px)); }
.learning-title { font-size: 34px; margin:0; }
.gold-banner {
  min-height: 112px; margin: 2px 0 18px; border-radius:20px; padding:18px; position:relative; overflow:hidden; color:#2b1f12;
  background-image: linear-gradient(100deg, rgba(247,225,190,.96), rgba(213,174,116,.83)), url("assets/banner-gold-path.svg");
  background-size: cover; background-position: center; box-shadow: 0 12px 30px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.50);
}
.gold-banner h2 { position:relative; z-index:2; width:min(74%,290px); font-family:Georgia, "Times New Roman", serif; font-weight:500; line-height:1.1; font-size:22px; letter-spacing:-.035em; margin:0 0 8px; }
.gold-banner p { position:relative; z-index:2; font-size:12px; margin:0; opacity:.70; }
.section-title { color: var(--cream); font-size:18px; line-height:1.1; margin:18px 0 10px; display:flex; justify-content:space-between; align-items:center; }
.section-title.no-margin { margin:0; }
.counter { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size:12px; color: var(--muted); }
.list { display:flex; flex-direction:column; gap:8px; }
.row-card {
  position:relative; min-height:61px; width:100%; border:1px solid rgba(247,239,229,.13); border-radius:18px; padding:10px 12px;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px;
  background: linear-gradient(180deg, rgba(54,47,39,.74), rgba(36,31,26,.74)); color: var(--cream); text-align:left;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 22px rgba(0,0,0,.17); cursor:pointer;
}
.row-title { font-size:14px; line-height:1.18; margin:0 0 2px; letter-spacing:-.01em; font-weight:760; }
.row-text { font-size:11.5px; line-height:1.25; margin:0; color: var(--muted); }
.mini-count {
  display: inline-block;
  margin-top: 5px;
  color: var(--gold-light);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 740;
}
.module-card-with-image {
  min-height: 92px;
  padding: 8px 12px 8px 8px;
  grid-template-columns: 116px 1fr auto;
  gap: 12px;
}
.module-thumb {
  width: 116px;
  height: 74px;
  border-radius: 15px;
  background-size: cover;
  background-position: center center;
  box-shadow: inset 0 0 0 1px rgba(247,239,229,.10);
}
.module-card-copy { min-width: 0; }

.pills { display:flex; flex-wrap:wrap; gap:7px; margin:10px 0 14px; }
.pill { border:1px solid rgba(243,216,164,.20); border-radius:999px; padding:7px 10px; color: var(--gold-light); background: rgba(243,216,164,.06); font-size:11px; line-height:1; font-weight:700; }
.lesson-title { color: var(--cream); font-size: clamp(28px,7.8vw,42px); line-height:1.03; margin:0 0 8px; }

.section-header-inline {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:18px 0 10px;
}
.link-btn {
  border:0;
  background:transparent;
  color: var(--cream-dim);
  font-size:13px;
  padding:2px 0;
  cursor:pointer;
}
.story-rail {
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding: 2px 0 4px;
  scroll-snap-type: x proximity;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.story-rail::-webkit-scrollbar { display:none; }
.story-card {
  position:relative;
  flex:0 0 132px;
  height:194px;
  border-radius:20px;
  border:1px solid rgba(247,239,229,.14);
  overflow:hidden;
  background-size:cover;
  background-position:center center;
  box-shadow: 0 12px 26px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04);
  scroll-snap-align:start;
}
.story-card__overlay {
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(12,10,8,.04) 0%, rgba(12,10,8,.16) 45%, rgba(12,10,8,.82) 100%);
}
.story-card__title {
  position:absolute; left:12px; right:12px; bottom:12px; z-index:2;
  color: var(--cream);
  font-size:12px;
  line-height:1.15;
  font-weight:720;
  text-align:left;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}

/* MODULE / LESSON */
.module-page {
  padding-top: max(18px, env(safe-area-inset-top, 0px));
}
.module-topline {
  margin-bottom: 14px;
}
.module-page-title {
  color: var(--cream);
  font-size: clamp(28px, 8vw, 40px);
  line-height: .98;
  margin: 0 0 14px;
}
.full-bleed-image {
  width: calc(100% + 36px);
  margin-left: -18px;
  margin-right: -18px;
}
.module-detail-image {
  height: 224px;
  background-size: cover;
  background-position: center 38%;
  margin-bottom: 14px;
  box-shadow: none;
  border-radius: 0;
}
.module-description { margin: 0 0 12px; color: rgba(247,239,229,.82); font-size: 14px; line-height:1.42; max-width:360px; }

.lesson-list-row {
  min-height: 84px;
  padding: 10px 12px 10px 10px;
  grid-template-columns: 64px 1fr auto;
}
.lesson-thumb {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background-size: cover;
  background-position: center center;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(247,239,229,.11);
}
.lesson-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12,10,8,.02), rgba(12,10,8,.18));
}

.lesson-page-new {
  padding-top: max(18px, env(safe-area-inset-top, 0px));
}
.lesson-title-topline {
  margin-bottom: 12px;
}
.lesson-head {
  margin-bottom: 12px;
}
.lesson-kicker {
  display: inline-block;
  margin-bottom: 6px;
  color: var(--gold-light);
  font-size: 12px;
  font-weight: 780;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.lesson-page-title {
  color: var(--cream);
  font-size: clamp(30px, 8.6vw, 42px);
  line-height: .98;
  margin: 0 0 6px;
}
.lesson-subline {
  margin: 0;
  color: var(--cream-dim);
  font-size: 13px;
  line-height: 1.34;
}
.lesson-image-full {
  position: relative;
  height: 256px;
  background-size: cover;
  background-position: center center;
  margin-bottom: 18px;
}
.lesson-image-full::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12,10,8,.02) 0%, rgba(12,10,8,.08) 70%, rgba(12,10,8,.35) 100%);
}
.play-large {
  position:absolute; inset:0; margin:auto; width:72px; height:72px; border-radius:50%; border:2px solid rgba(255,255,255,.68);
  background: rgba(255,255,255,.10); backdrop-filter: blur(8px); display:flex; align-items:center; justify-content:center; z-index:2;
}
.play-large::before { content:""; width:0; height:0; border-top:11px solid transparent; border-bottom:11px solid transparent; border-left:17px solid rgba(255,255,255,.92); margin-left:5px; }
.audio-title { margin:0 0 9px; color: var(--cream); font-size:15px; font-weight:820; }
.audio-player { min-height:54px; border-radius:16px; border:1px solid rgba(247,239,229,.11); background: rgba(74,64,52,.82); padding:8px 11px; display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center; }
.play-small { width:38px; height:38px; border-radius:13px; background: linear-gradient(180deg, #f3d8a4, #c99a52); display:flex; align-items:center; justify-content:center; color:#25190d; }
.play-small::before { content:""; width:0; height:0; border-top:8px solid transparent; border-bottom:8px solid transparent; border-left:12px solid currentColor; margin-left:3px; }
.wave { height:28px; display:flex; gap:3px; align-items:center; }
.wave i { display:block; width:2px; border-radius:99px; background: linear-gradient(180deg, var(--gold-light), rgba(243,216,164,.30)); }
.audio-time { margin-top:3px; display:flex; justify-content:space-between; color: var(--muted); font-size:10px; }
.material-heading { margin:18px 0 10px; font-size:15px; font-weight:820; }
.text-card { border:1px solid rgba(247,239,229,.13); border-radius:18px; background: linear-gradient(180deg, rgba(54,47,39,.74), rgba(36,31,26,.74)); padding:16px; margin-bottom:10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 22px rgba(0,0,0,.17); }
.text-card h3 { color: var(--gold-light); font-size:17px; line-height:1.15; margin:0 0 6px; }
.text-card p { margin:0; color: var(--muted); font-size:14px; line-height:1.42; }
.version-note { margin-top:14px; color: rgba(247,239,229,.35); font-size:11px; }

/* BOTTOM NAV */
.bottom-nav {
  position: fixed; z-index:20; left:50%; bottom:max(10px, env(safe-area-inset-bottom,0px)); transform: translateX(-50%);
  width:min(calc(100% - 28px), 484px); min-height: var(--nav-h); padding:8px 10px;
  display:grid; grid-template-columns: repeat(4, 1fr); gap:4px;
  border:1px solid rgba(247,239,229,.13); border-radius:27px; background: rgba(29,24,20,.86); backdrop-filter: blur(20px);
  box-shadow: 0 18px 44px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}
.bottom-nav::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -18px -14px -20px;
  border-radius: 36px;
  background: rgba(8, 6, 5, .48);
  backdrop-filter: blur(18px);
  box-shadow: 0 -18px 40px rgba(8,6,5,.36);
}
.nav-item {
  border:0; border-radius:18px; background:transparent; color: rgba(247,239,229,.76);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  font-size:11px; font-weight:720; padding:4px 0; cursor:pointer;
}
.nav-item.active { color: var(--gold-light); }
.nav-icon {
  width: 23px; height: 23px; display:block; background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.nav-home {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3 3 10.2v10.3h6.2v-6h5.6v6H21V10.2Zm7 15.5h-2.2v-6H7.2v6H5V11.2L12 5.6l7 5.6Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3 3 10.2v10.3h6.2v-6h5.6v6H21V10.2Zm7 15.5h-2.2v-6H7.2v6H5V11.2L12 5.6l7 5.6Z'/%3E%3C/svg%3E");
}
.nav-book {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 6.2c-1.55-1.05-3.55-1.7-6-1.7H4.2A1.7 1.7 0 0 0 2.5 6.2v12.1A1.7 1.7 0 0 0 4.2 20H6c2.3 0 4.15.55 5.45 1.55l.55.42.55-.42C13.85 20.55 15.7 20 18 20h1.8a1.7 1.7 0 0 0 1.7-1.7V6.2a1.7 1.7 0 0 0-1.7-1.7H18c-2.45 0-4.45.65-6 1.7Zm-.85 12.9C9.75 18.4 8.05 18 6 18H4.5V6.5H6c2.05 0 3.75.45 5.15 1.35Zm1.7 0V7.85C14.25 6.95 15.95 6.5 18 6.5h1.5V18H18c-2.05 0-3.75.4-5.15 1.1Z'/%3E%3Cpath fill='black' d='M6.2 9h3.2v1.35H6.2Zm0 3h3.2v1.35H6.2Zm8.4-3h3.2v1.35h-3.2Zm0 3h3.2v1.35h-3.2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 6.2c-1.55-1.05-3.55-1.7-6-1.7H4.2A1.7 1.7 0 0 0 2.5 6.2v12.1A1.7 1.7 0 0 0 4.2 20H6c2.3 0 4.15.55 5.45 1.55l.55.42.55-.42C13.85 20.55 15.7 20 18 20h1.8a1.7 1.7 0 0 0 1.7-1.7V6.2a1.7 1.7 0 0 0-1.7-1.7H18c-2.45 0-4.45.65-6 1.7Zm-.85 12.9C9.75 18.4 8.05 18 6 18H4.5V6.5H6c2.05 0 3.75.45 5.15 1.35Zm1.7 0V7.85C14.25 6.95 15.95 6.5 18 6.5h1.5V18H18c-2.05 0-3.75.4-5.15 1.1Z'/%3E%3Cpath fill='black' d='M6.2 9h3.2v1.35H6.2Zm0 3h3.2v1.35H6.2Zm8.4-3h3.2v1.35h-3.2Zm0 3h3.2v1.35h-3.2Z'/%3E%3C/svg%3E");
}
.nav-signal {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7.2 3.8h9.6a3.4 3.4 0 0 1 3.4 3.4v9.6a3.4 3.4 0 0 1-3.4 3.4H7.2a3.4 3.4 0 0 1-3.4-3.4V7.2a3.4 3.4 0 0 1 3.4-3.4Zm0 1.8a1.6 1.6 0 0 0-1.6 1.6v9.6a1.6 1.6 0 0 0 1.6 1.6h9.6a1.6 1.6 0 0 0 1.6-1.6V7.2a1.6 1.6 0 0 0-1.6-1.6Z'/%3E%3Cpath fill='black' d='M8.2 8.1a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5Zm7.6 0a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5ZM12 10.75a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5Zm-3.8 2.65a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5Zm7.6 0a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7.2 3.8h9.6a3.4 3.4 0 0 1 3.4 3.4v9.6a3.4 3.4 0 0 1-3.4 3.4H7.2a3.4 3.4 0 0 1-3.4-3.4V7.2a3.4 3.4 0 0 1 3.4-3.4Zm0 1.8a1.6 1.6 0 0 0-1.6 1.6v9.6a1.6 1.6 0 0 0 1.6 1.6h9.6a1.6 1.6 0 0 0 1.6-1.6V7.2a1.6 1.6 0 0 0-1.6-1.6Z'/%3E%3Cpath fill='black' d='M8.2 8.1a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5Zm7.6 0a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5ZM12 10.75a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5Zm-3.8 2.65a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5Zm7.6 0a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5Z'/%3E%3C/svg%3E");
}
.nav-profile {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 4.2a4.3 4.3 0 1 1-4.3 4.3A4.3 4.3 0 0 1 12 4.2Zm0 1.5a2.8 2.8 0 1 0 2.8 2.8A2.8 2.8 0 0 0 12 5.7ZM12 14c4.2 0 7.3 2.1 8 5.2l.1.5h-1.5l-.1-.3c-.5-2.2-2.9-3.9-6.5-3.9s-6 1.7-6.5 3.9l-.1.3H3.9l.1-.5C4.7 16.1 7.8 14 12 14Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 4.2a4.3 4.3 0 1 1-4.3 4.3A4.3 4.3 0 0 1 12 4.2Zm0 1.5a2.8 2.8 0 1 0 2.8 2.8A2.8 2.8 0 0 0 12 5.7ZM12 14c4.2 0 7.3 2.1 8 5.2l.1.5h-1.5l-.1-.3c-.5-2.2-2.9-3.9-6.5-3.9s-6 1.7-6.5 3.9l-.1.3H3.9l.1-.5C4.7 16.1 7.8 14 12 14Z'/%3E%3C/svg%3E");
}

@media (max-width: 390px) {
  .app-main { padding-left:16px; padding-right:16px; }
  .home-stage { margin-left:-16px; margin-right:-16px; }
  .home-overlay { padding-left:16px; padding-right:16px; }
  .full-bleed-image { width: calc(100% + 32px); margin-left: -16px; margin-right: -16px; }
  .module-card-with-image { grid-template-columns: 102px 1fr auto; }
  .module-thumb { width:102px; height:68px; }
  .story-card { flex-basis: 124px; height: 184px; }
  .lesson-list-row { grid-template-columns: 58px 1fr auto; }
  .lesson-thumb { width:58px; height:58px; border-radius:15px; }
}

@media (min-width: 700px) {
  .app-shell { width:min(100%, 740px); }
  .app-main { padding-left:24px; padding-right:24px; }
  .home-stage { margin-left:-24px; margin-right:-24px; }
  .home-overlay { padding-left:24px; padding-right:24px; }
  .full-bleed-image { width: calc(100% + 48px); margin-left: -24px; margin-right: -24px; }
  .list.gridable { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-rail { gap:14px; }
}





/* HOME HERO V13 */
.home-page--poster {
  min-height: calc(100vh - var(--nav-h) - 18px);
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-bottom: 0;
}
.home-stage--v13 {
  min-height: auto;
  background: transparent;
  position: relative;
}
.home-poster-image--v13 {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  object-fit: cover;
  object-position: center top;
}
.home-overlay--v13 {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: calc(max(18px, env(safe-area-inset-top, 0px)) + 58px) 18px calc(var(--nav-h) + var(--safe-bottom) + 22px);
  pointer-events: none;
}
.home-title-block--v13 {
  max-width: 290px;
}
.home-title--v13 {
  max-width: 200px;
  font-size: clamp(34px, 8.4vw, 44px);
  line-height: .93;
  margin: 0 0 16px;
  text-wrap: balance;
}
.home-copy--v13 {
  max-width: 320px;
  font-size: 14px;
  line-height: 1.44;
  color: rgba(247,239,229,.90);
  margin: 0;
  text-wrap: balance;
}


/* HOME AGREED HERO V15 */
html, body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
  width: 0;
}
.home-page--poster {
  min-height: calc(100dvh - var(--nav-h) - var(--safe-bottom) - 18px);
  padding: 0;
  margin: 0;
  display: block;
}
.home-stage--v15 {
  position: relative;
  min-height: calc(100dvh - var(--nav-h) - var(--safe-bottom) - 18px);
  margin-left: -18px;
  margin-right: -18px;
  overflow: hidden;
  background: #0c0a08;
}
.home-stage--v15::after {
  display: none;
}
.home-stage--v15 .home-overlay,
.home-stage--v15 .home-title-block,
.home-stage--v15 .home-title,
.home-stage--v15 .home-copy,
.home-cta-wrap,
.primary-cta--home {
  display: none !important;
}
.home-poster-image--v15 {
  display: block;
  width: 100%;
  height: calc(100dvh - var(--nav-h) - var(--safe-bottom) - 18px);
  min-height: 0;
  object-fit: cover;
  object-position: center top;
}
@media (max-width: 390px) {
  .home-stage--v15 {
    margin-left: -16px;
    margin-right: -16px;
  }
}
@media (min-width: 700px) {
  .home-stage--v15 {
    margin-left: -24px;
    margin-right: -24px;
  }
}


/* CONTENT UPDATE V15.2 */
.lesson-list-row .row-title,
.module-card-with-image .row-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lesson-list-row .row-text,
.module-card-with-image .row-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lesson-image-full .play-large {
  display: none !important;
}


/* V17 library story full-width artwork */
.library-story-page {
  position: relative;
}
.library-story-stage {
  position: relative;
  overflow: hidden;
  background: #0c0a08;
  margin-bottom: 0;
}
.library-story-image {
  display: block;
  width: 100%;
  height: auto;
}
.library-story-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(12,10,8,.16) 0%, rgba(12,10,8,.04) 26%, rgba(12,10,8,.00) 54%, rgba(12,10,8,.26) 72%, rgba(12,10,8,.68) 100%),
    linear-gradient(180deg, rgba(12,10,8,.14) 0%, rgba(12,10,8,0) 22%, rgba(12,10,8,0) 74%, rgba(12,10,8,.84) 100%);
  pointer-events: none;
}
.library-story-top {
  position: absolute;
  inset: 0;
  padding: 0 18px 18px;
  z-index: 2;
}
.library-story-head {
  margin-bottom: 0;
  max-width: 82%;
}
.library-story-page .lesson-page-title,
.library-story-page .lesson-subline,
.library-story-page .lesson-kicker {
  text-shadow: 0 2px 14px rgba(0,0,0,.34);
}
.library-story-panel {
  position: relative;
  z-index: 3;
  margin-top: clamp(-280px, -30vh, -210px);
}
.library-story-page .audio-title,
.library-story-page .material-heading {
  position: relative;
  z-index: 3;
}
.library-story-page .audio-player,
.library-story-page .row-card {
  position: relative;
  z-index: 3;
  background: rgba(65, 56, 47, .58);
  backdrop-filter: blur(14px);
}
@media (max-width: 399px) {
  .library-story-top {
    padding-left: 16px;
    padding-right: 16px;
  }
  .library-story-panel {
    margin-top: -220px;
  }
}
@media (min-width: 700px) {
  .library-story-top {
    padding-left: 24px;
    padding-right: 24px;
  }
  .library-story-head {
    max-width: 66%;
  }
  .library-story-panel {
    margin-top: -260px;
  }
}


/* V18 real audio links */
.audio-player.has-audio {
  cursor: pointer;
}
.audio-player.has-audio audio {
  display: none;
}
.audio-player .play-small {
  border: 0;
  flex: 0 0 auto;
  cursor: pointer;
}
.audio-player.is-placeholder {
  opacity: .86;
}
.audio-player.is-playing .play-small::before {
  width: 13px;
  height: 16px;
  border: 0;
  margin-left: 0;
  background:
    linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65% 100%);
}
.audio-player.is-playing .wave i {
  opacity: .95;
}


/* V19 audio player controls */
.audio-player {
  grid-template-columns: auto 1fr auto;
}
.audio-main {
  min-width: 0;
}
.audio-range {
  --track-h: 5px;
  width: 100%;
  height: 28px;
  display: block;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}
.audio-range::-webkit-slider-runnable-track {
  height: var(--track-h);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-light) 0 var(--progress), rgba(247,239,229,.18) var(--progress) 100%);
}
.audio-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  margin-top: -6px;
  background: linear-gradient(180deg, #f7dfae, #d5aa65);
  border: 1px solid rgba(255,255,255,.46);
  box-shadow: 0 2px 9px rgba(0,0,0,.35), 0 0 0 5px rgba(231,191,115,.08);
}
.audio-range::-moz-range-track {
  height: var(--track-h);
  border-radius: 999px;
  background: rgba(247,239,229,.18);
}
.audio-range::-moz-range-progress {
  height: var(--track-h);
  border-radius: 999px;
  background: var(--gold-light);
}
.audio-range::-moz-range-thumb {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f7dfae, #d5aa65);
  border: 1px solid rgba(255,255,255,.46);
  box-shadow: 0 2px 9px rgba(0,0,0,.35);
}
.audio-speed {
  width: 44px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(243,216,164,.22);
  background: rgba(243,216,164,.08);
  color: var(--gold-light);
  font-size: 12px;
  line-height: 1;
  font-weight: 780;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.audio-player.is-playing {
  border-color: rgba(243,216,164,.22);
}
.audio-player.is-playing .audio-range::-webkit-slider-thumb {
  box-shadow: 0 2px 9px rgba(0,0,0,.35), 0 0 0 6px rgba(231,191,115,.12);
}
@media (max-width: 390px) {
  .audio-player {
    grid-template-columns: auto 1fr auto;
    gap: 9px;
  }
  .audio-speed {
    width: 39px;
    font-size: 11px;
  }
}


/* V24 relive immersive background */
.relive-page {
  padding: 0;
  min-height: calc(100dvh - var(--nav-h) - var(--safe-bottom));
}
.relive-page .topline {
  margin-bottom: 6px;
}
.relive-stage {
  position: relative;
  min-height: calc(100dvh - var(--nav-h) - var(--safe-bottom) - 8px);
  background: #0c0a08;
  overflow: hidden;
}
.relive-bg,
.relive-shade,
.relive-top,
.relive-audio-panel {
  position: absolute;
  inset: 0;
}
.relive-bg {
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(8,6,4,.58) 0%, rgba(8,6,4,.10) 36%, rgba(8,6,4,.28) 72%, rgba(8,6,4,.76) 100%),
    url('assets/relive-talents-runway-poster.jpg') center center / cover no-repeat;
}
.relive-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  transform: none;
  background: #080604;
  filter: saturate(1.02) brightness(.96);
}
.relive-video-breath {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .14;
  background:
    radial-gradient(58% 34% at 50% 78%, rgba(243,196,108,.18) 0%, rgba(243,196,108,.07) 38%, rgba(243,196,108,0) 76%),
    radial-gradient(42% 26% at 40% 34%, rgba(255,229,174,.07) 0%, rgba(255,229,174,0) 72%);
  mix-blend-mode: screen;
  animation: reliveVideoBreath 8s ease-in-out infinite alternate paused;
}
.relive-page.is-relive-active .relive-video-breath {
  animation-play-state: running;
}
.relive-scene,
.relive-mist,
.relive-shimmer,
.relive-stars,
.relive-breath {
  position: absolute;
  inset: 0;
}
.relive-scene {
  inset: -2%;
  background-size: cover;
  background-position: center center;
  will-change: transform, opacity, filter;
}
.relive-scene--base {
  opacity: 1;
  filter: saturate(1.02) brightness(.92);
  transform: scale(1.04) translate3d(0,0,0);
  animation: relivePan 22s ease-in-out infinite alternate paused;
}
.relive-scene--soft {
  opacity: .28;
  mix-blend-mode: screen;
  filter: blur(16px) saturate(1.08) brightness(1.10);
  transform: scale(1.06);
  animation: reliveGlow 10.5s ease-in-out infinite alternate paused;
}
.relive-page.is-relive-active .relive-scene--base,
.relive-page.is-relive-active .relive-scene--soft,
.relive-page.is-relive-active .relive-mist,
.relive-page.is-relive-active .relive-shimmer,
.relive-page.is-relive-active .relive-stars,
.relive-page.is-relive-active .relive-breath {
  animation-play-state: running;
}
.relive-mist {
  opacity: .34;
  mix-blend-mode: screen;
  animation: reliveMist 12.5s ease-in-out infinite alternate paused;
}
.relive-mist--a {
  background:
    radial-gradient(60% 40% at 50% 84%, rgba(226,185,104,.26) 0%, rgba(226,185,104,.12) 34%, rgba(226,185,104,0) 72%),
    radial-gradient(34% 22% at 24% 62%, rgba(244,216,164,.10) 0%, rgba(244,216,164,0) 76%);
}
.relive-mist--b {
  background:
    radial-gradient(34% 24% at 78% 24%, rgba(244,216,164,.10) 0%, rgba(244,216,164,0) 74%),
    radial-gradient(42% 28% at 72% 70%, rgba(226,185,104,.14) 0%, rgba(226,185,104,0) 76%);
  animation-duration: 16s;
  animation-direction: alternate-reverse;
}
.relive-shimmer {
  opacity: .22;
  mix-blend-mode: screen;
  animation: reliveShimmer 15s ease-in-out infinite alternate paused;
}
.relive-shimmer--a {
  background:
    radial-gradient(24% 14% at 22% 34%, rgba(255,229,174,.18) 0%, rgba(255,229,174,0) 70%),
    radial-gradient(20% 12% at 74% 28%, rgba(255,213,140,.16) 0%, rgba(255,213,140,0) 72%),
    radial-gradient(34% 18% at 55% 66%, rgba(255,205,120,.12) 0%, rgba(255,205,120,0) 76%);
}
.relive-shimmer--b {
  opacity: .12;
  animation-duration: 18s;
  animation-direction: alternate-reverse;
  background:
    linear-gradient(110deg, rgba(255,222,162,0) 8%, rgba(255,222,162,.06) 28%, rgba(255,222,162,.12) 40%, rgba(255,222,162,0) 58%),
    radial-gradient(18% 10% at 62% 42%, rgba(255,232,190,.14) 0%, rgba(255,232,190,0) 74%);
}
.relive-stars {
  opacity: .42;
  background-repeat: no-repeat;
  animation: reliveTwinkle 5.4s ease-in-out infinite alternate paused;
}
.relive-stars--a {
  background-image:
    radial-gradient(circle at 18% 16%, rgba(255,230,174,.95) 0 1.2px, transparent 2px),
    radial-gradient(circle at 72% 14%, rgba(255,230,174,.88) 0 1.6px, transparent 2.2px),
    radial-gradient(circle at 84% 28%, rgba(255,230,174,.72) 0 1px, transparent 1.8px),
    radial-gradient(circle at 36% 31%, rgba(255,230,174,.82) 0 1.2px, transparent 2px),
    radial-gradient(circle at 61% 38%, rgba(255,230,174,.95) 0 1.1px, transparent 1.9px),
    radial-gradient(circle at 22% 54%, rgba(255,230,174,.72) 0 1px, transparent 1.7px),
    radial-gradient(circle at 88% 63%, rgba(255,230,174,.88) 0 1.4px, transparent 2.1px),
    radial-gradient(circle at 57% 72%, rgba(255,230,174,.68) 0 1.1px, transparent 1.8px);
}
.relive-stars--b {
  opacity: .22;
  animation-duration: 6.6s;
  animation-delay: 1.2s;
  background-image:
    radial-gradient(circle at 12% 26%, rgba(255,230,174,.9) 0 1.1px, transparent 1.8px),
    radial-gradient(circle at 46% 20%, rgba(255,230,174,.7) 0 1px, transparent 1.7px),
    radial-gradient(circle at 78% 18%, rgba(255,230,174,.9) 0 1.3px, transparent 2px),
    radial-gradient(circle at 68% 48%, rgba(255,230,174,.68) 0 1px, transparent 1.7px),
    radial-gradient(circle at 28% 68%, rgba(255,230,174,.82) 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 80% 78%, rgba(255,230,174,.72) 0 1px, transparent 1.8px);
}
.relive-breath {
  background: radial-gradient(58% 36% at 50% 84%, rgba(243,196,108,.28) 0%, rgba(243,196,108,.12) 38%, rgba(243,196,108,0) 76%);
  opacity: .48;
  animation: reliveBreath 7.2s ease-in-out infinite alternate paused;
}
.relive-shade {
  background:
    linear-gradient(180deg, rgba(12,10,8,.28) 0%, rgba(12,10,8,.12) 20%, rgba(12,10,8,.02) 42%, rgba(12,10,8,.08) 56%, rgba(12,10,8,.32) 74%, rgba(12,10,8,.68) 100%),
    linear-gradient(180deg, rgba(12,10,8,.04) 0%, rgba(12,10,8,0) 18%, rgba(12,10,8,0) 76%, rgba(12,10,8,.78) 100%);
  pointer-events: none;
}
.relive-top {
  z-index: 4;
  padding: 34px 18px 0;
}
.relive-head {
  margin-top: 2px;
  max-width: min(70%, 260px);
  transition: opacity .45s ease, transform .45s ease, filter .45s ease;
}
.relive-page .lesson-kicker {
  font-size: 10px;
  margin-bottom: 3px;
  opacity: .96;
}
.relive-page .lesson-page-title {
  font-size: clamp(18px, 6.4vw, 27px);
  line-height: .96;
  margin-bottom: 4px;
}
.relive-page .lesson-subline {
  font-size: 10px;
  opacity: .82;
}
.relive-page .lesson-kicker,
.relive-page .lesson-page-title,
.relive-page .lesson-subline,
.relive-page .audio-title {
  text-shadow: 0 4px 20px rgba(0,0,0,.44);
}
.relive-page.is-relive-active .relive-head {
  opacity: .32;
  transform: translateY(-2px);
  filter: saturate(.94);
}
.relive-audio-panel {
  inset: auto 18px 18px 18px;
  z-index: 5;
}
.relive-audio-panel .audio-title {
  display: none;
}
.relive-page .audio-player {
  background: rgba(64, 55, 46, .42);
  backdrop-filter: blur(16px);
  border-color: rgba(243,216,164,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 26px rgba(0,0,0,.26);
}
@keyframes relivePan {
  0% { transform: scale(1.035) translate3d(-1.2%, -.7%, 0); }
  50% { transform: scale(1.06) translate3d(.4%, .6%, 0); }
  100% { transform: scale(1.075) translate3d(1.1%, 1.0%, 0); }
}
@keyframes reliveGlow {
  0%, 100% { opacity: .16; transform: scale(1.04) translate3d(0,0,0); }
  50% { opacity: .34; transform: scale(1.09) translate3d(.6%, -.5%, 0); }
}
@keyframes reliveMist {
  0% { transform: translate3d(-2.4%, .4%, 0) scale(1); opacity: .18; }
  50% { transform: translate3d(.8%, -1.8%, 0) scale(1.05); opacity: .34; }
  100% { transform: translate3d(2.8%, 1.4%, 0) scale(1.09); opacity: .22; }
}
@keyframes reliveShimmer {
  0% { transform: translate3d(-5%, -.6%, 0) scale(1); opacity: .10; }
  50% { transform: translate3d(2.2%, -1.2%, 0) scale(1.05); opacity: .24; }
  100% { transform: translate3d(5%, 1.2%, 0) scale(1.08); opacity: .12; }
}
@keyframes reliveTwinkle {
  0%, 100% { opacity: .20; }
  25% { opacity: .52; }
  50% { opacity: .30; }
  75% { opacity: .58; }
}
@keyframes reliveBreath {
  0%, 100% { opacity: .30; transform: scale(1); }
  50% { opacity: .56; transform: scale(1.08); }
}
@media (max-width: 390px) {
  .relive-top {
    padding: 34px 16px 0;
  }
  .relive-audio-panel {
    left: 16px;
    right: 16px;
    bottom: 12px;
  }
  .relive-head {
    max-width: 74%;
  }
}
@media (min-width: 700px) {
  .relive-top {
    padding: 36px 24px 0;
  }
  .relive-audio-panel {
    left: 24px;
    right: 24px;
    bottom: 18px;
    max-width: 520px;
  }
}

@keyframes reliveVideoBreath {
  0% { opacity: .10; transform: scale(1); }
  100% { opacity: .22; transform: scale(1.035); }
}


/* V29 live lesson info */
.live-lesson-page .material-heading,
.live-lesson-page .list {
  display: none;
}
.live-info-card {
  margin-top: 18px;
  border: 1px solid rgba(247,239,229,.13);
  border-radius: 22px;
  background:
    radial-gradient(circle at 18% 0%, rgba(231,191,115,.16), transparent 34%),
    linear-gradient(180deg, rgba(54,47,39,.78), rgba(28,24,20,.78));
  padding: 18px 18px 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 28px rgba(0,0,0,.20);
}
.live-info-card p {
  margin: 0 0 14px;
  color: var(--cream-dim);
  font-size: 14px;
  line-height: 1.5;
}
.live-info-card blockquote {
  margin: 0 0 16px;
  padding: 0 0 0 14px;
  border-left: 2px solid rgba(243,216,164,.62);
  color: var(--cream);
  font-family: var(--serif);
  font-size: clamp(20px, 6.3vw, 30px);
  line-height: 1.08;
  letter-spacing: -.03em;
}
.live-expert {
  margin: 0 0 18px;
  display: grid;
  gap: 3px;
}
.live-expert span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
}
.live-expert strong {
  color: var(--gold-light);
  font-size: 17px;
  line-height: 1.2;
}
.live-info-card h2 {
  margin: 0 0 10px;
  color: var(--cream);
  font-size: 16px;
  line-height: 1.25;
}
.live-info-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}
.live-info-card li {
  position: relative;
  padding-left: 18px;
  color: var(--cream-dim);
  font-size: 14px;
  line-height: 1.42;
}
.live-info-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--gold-light);
  box-shadow: 0 0 10px rgba(243,216,164,.55);
}

/* V29 games section */
.games-page .lead {
  max-width: 520px;
}
.games-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}
.game-card {
  position: relative;
  width: 100%;
  min-height: 96px;
  border: 1px solid rgba(243,216,164,.14);
  border-radius: 24px;
  padding: 14px 15px;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 13px;
  align-items: center;
  text-align: left;
  color: var(--cream);
  background:
    radial-gradient(circle at 0% 0%, rgba(231,191,115,.18), transparent 32%),
    linear-gradient(135deg, rgba(56,48,40,.80), rgba(24,21,18,.76));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 14px 30px rgba(0,0,0,.22);
}
.game-card::after {
  content: "";
  position: absolute;
  right: 15px;
  top: 16px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(243,216,164,.82);
  box-shadow: -12px 10px 0 rgba(243,216,164,.28), -3px 26px 0 rgba(243,216,164,.18);
}
.game-orb {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-light);
  font-size: 23px;
  background: radial-gradient(circle at 40% 30%, rgba(243,216,164,.28), rgba(65,55,42,.74));
  border: 1px solid rgba(243,216,164,.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.game-eyebrow {
  display: block;
  margin-bottom: 4px;
  color: rgba(243,216,164,.72);
  font-size: 10px;
  font-weight: 820;
  text-transform: uppercase;
  letter-spacing: .09em;
}
.game-copy h3 {
  margin: 0 0 4px;
  color: var(--cream);
  font-size: 17px;
  line-height: 1.13;
  letter-spacing: -.01em;
}
.game-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.34;
}
@media (min-width: 700px) {
  .games-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}






/* HOME HERO V39 — keep original illustration color without dark overlay */
.home-stage--v39 {
  background: #0c0a08;
}
.home-stage--v39::after {
  display: none !important;
}
.home-poster-image--v39 {
  display: block;
  width: 100%;
  height: calc(100dvh - var(--nav-h) - var(--safe-bottom) - 18px);
  object-fit: cover;
  object-position: center top;
  filter: none !important;
  opacity: 1 !important;
}


/* V40 lesson text content */
.lesson-extra-content {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}
.story-commentary-card,
.immersive-info-card {
  border: 1px solid rgba(247,239,229,.13);
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 0%, rgba(231,191,115,.16), transparent 36%),
    linear-gradient(180deg, rgba(54,47,39,.78), rgba(28,24,20,.82));
  padding: 18px 18px 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 14px 30px rgba(0,0,0,.22);
}
.content-eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  color: rgba(243,216,164,.78);
  font-size: 10.5px;
  font-weight: 820;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.story-commentary-card h2,
.immersive-info-card h2 {
  margin: 0 0 10px;
  color: var(--cream);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: clamp(24px, 7vw, 34px);
  line-height: 1.02;
  letter-spacing: -.035em;
}
.content-subtitle,
.story-commentary-card p,
.immersive-info-card p {
  color: var(--cream-dim);
  font-size: 14px;
  line-height: 1.52;
  margin: 0 0 13px;
}
.content-meta {
  display: grid;
  gap: 4px;
  margin: 0 0 16px;
  padding: 12px 13px;
  border-radius: 16px;
  background: rgba(9,7,6,.24);
  border: 1px solid rgba(243,216,164,.10);
}
.content-meta span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}
.content-meta strong {
  color: var(--gold-light);
  font-size: 14px;
  line-height: 1.25;
}
.commentary-points {
  display: grid;
  gap: 12px;
}
.commentary-point {
  padding: 13px 13px 12px;
  border-radius: 17px;
  background: rgba(12,10,8,.22);
  border: 1px solid rgba(247,239,229,.08);
}
.commentary-point h3 {
  margin: 0 0 7px;
  color: var(--cream);
  font-size: 14px;
  line-height: 1.32;
}
.commentary-point p {
  margin-bottom: 0;
}
.content-signoff {
  margin-top: 15px !important;
  color: var(--gold-light) !important;
}
.tasks-section {
  margin-top: 2px;
}
.tasks-header {
  margin: 0 0 10px;
}
.task-counter {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
}
.tasks-carousel {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 2px 2px 14px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tasks-carousel::-webkit-scrollbar {
  display: none;
}
.task-card {
  scroll-snap-align: start;
  flex: 0 0 min(86vw, 360px);
  min-height: 340px;
  border: 1px solid rgba(243,216,164,.14);
  border-radius: 24px;
  padding: 16px 16px 18px;
  background:
    radial-gradient(circle at 0% 0%, rgba(231,191,115,.16), transparent 38%),
    linear-gradient(150deg, rgba(56,48,40,.82), rgba(20,17,14,.86));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 14px 28px rgba(0,0,0,.22);
}
.task-card--intro,
.task-card--final {
  background:
    radial-gradient(circle at 14% 0%, rgba(243,216,164,.22), transparent 40%),
    linear-gradient(150deg, rgba(65,54,40,.86), rgba(23,18,14,.86));
}
.task-number {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  border-radius: 999px;
  padding: 0 10px;
  margin-bottom: 12px;
  color: #2a1b0e;
  background: linear-gradient(180deg, #f3d8a4, #cfa15e);
  font-size: 11px;
  font-weight: 820;
}
.task-card h3 {
  margin: 0 0 9px;
  color: var(--cream);
  font-size: 19px;
  line-height: 1.08;
  letter-spacing: -.015em;
}
.task-card p,
.task-card li {
  color: var(--cream-dim);
  font-size: 13px;
  line-height: 1.42;
}
.task-card p {
  margin: 0 0 12px;
}
.task-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.task-card li {
  position: relative;
  padding-left: 17px;
}
.task-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--gold-light);
  box-shadow: 0 0 10px rgba(243,216,164,.52);
}
.task-note {
  margin-top: 13px !important;
  color: var(--gold-light) !important;
  font-size: 12.5px !important;
}
.immersive-info-card {
  margin: 18px;
}
.immersive-info-card p:last-child {
  margin-bottom: 0;
}


/* V41 lesson UX refinements */
.lesson-extra-content--story {
  gap: 16px;
}
.story-action-list,
.immersive-info-wrap {
  display: grid;
  gap: 10px;
}
.lesson-expand {
  border: 1px solid rgba(243,216,164,.16);
  border-radius: 22px;
  background:
    radial-gradient(circle at 0% 0%, rgba(239,207,145,.18), transparent 34%),
    linear-gradient(180deg, rgba(68,57,44,.72), rgba(41,35,30,.72));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 26px rgba(0,0,0,.18);
  overflow: hidden;
}
.lesson-expand--compact {
  margin-top: 18px;
}
.lesson-expand__summary {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  align-items: center;
  padding: 14px 16px;
  cursor: pointer;
}
.lesson-expand__summary::-webkit-details-marker { display: none; }
.lesson-expand__eyebrow {
  grid-column: 1 / 2;
  color: rgba(243,216,164,.78);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.lesson-expand__title {
  grid-column: 1 / 2;
  color: var(--cream);
  font-size: 15px;
  line-height: 1.24;
  font-weight: 760;
  letter-spacing: -.015em;
}
.lesson-expand__chevron {
  grid-column: 2 / 3;
  grid-row: 1 / span 2;
  align-self: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(243,216,164,.16);
  background: rgba(255,255,255,.03);
  position: relative;
}
.lesson-expand__chevron::before,
.lesson-expand__chevron::after {
  content: "";
  position: absolute;
  top: 16px;
  width: 8px;
  height: 1.7px;
  background: var(--gold-light);
  border-radius: 999px;
}
.lesson-expand__chevron::before { left: 10px; transform: rotate(40deg); }
.lesson-expand__chevron::after { right: 10px; transform: rotate(-40deg); }
.lesson-expand[open] .lesson-expand__chevron::before { transform: rotate(-40deg); }
.lesson-expand[open] .lesson-expand__chevron::after { transform: rotate(40deg); }
.lesson-expand__body {
  padding: 0 12px 12px;
}
.story-placeholder-card,
.story-commentary-card,
.immersive-info-card {
  border: 1px solid rgba(243,216,164,.12);
  border-radius: 20px;
  background:
    radial-gradient(circle at 0% 0%, rgba(244,222,177,.18), transparent 34%),
    linear-gradient(180deg, rgba(73,61,47,.72), rgba(39,33,28,.76));
  padding: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 22px rgba(0,0,0,.16);
}
.story-placeholder-card h2,
.story-commentary-card h2,
.immersive-info-card h2 {
  font-size: clamp(21px, 6vw, 31px);
  line-height: 1.05;
}
.story-placeholder-card p,
.story-commentary-card p,
.immersive-info-card p,
.story-placeholder-card li,
.story-commentary-card li,
.immersive-info-card li {
  color: rgba(248,241,230,.88);
}
.story-placeholder-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.52;
}
.commentary-point {
  background: rgba(17,13,10,.18);
}
.tasks-header {
  margin: 0 0 12px;
}
.task-counter {
  color: rgba(243,216,164,.82);
}
.tasks-carousel {
  gap: 14px;
  padding: 4px 3px 16px;
}
.task-card {
  flex: 0 0 min(88vw, 370px);
  min-height: 360px;
  border: 1px solid rgba(243,216,164,.20);
  border-radius: 26px;
  padding: 18px 17px 20px;
  background:
    radial-gradient(circle at 12% 10%, rgba(255,232,190,.34), transparent 26%),
    radial-gradient(circle at 100% 0%, rgba(241,190,114,.14), transparent 34%),
    linear-gradient(180deg, rgba(93,76,57,.92), rgba(52,42,34,.88));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 28px rgba(0,0,0,.18);
}
.task-card::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 18px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,236,200,.88);
  box-shadow: -12px 8px 0 rgba(255,236,200,.28), -2px 20px 0 rgba(255,236,200,.18);
}
.task-card { position: relative; }
.task-card--intro,
.task-card--final {
  background:
    radial-gradient(circle at 10% 8%, rgba(255,236,202,.38), transparent 28%),
    radial-gradient(circle at 100% 0%, rgba(241,190,114,.16), transparent 36%),
    linear-gradient(180deg, rgba(104,84,61,.94), rgba(59,47,37,.90));
}
.task-number {
  min-height: 26px;
  padding: 0 11px;
  margin-bottom: 13px;
  font-size: 11.5px;
}
.task-card h3 {
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.08;
}
.task-card p,
.task-card li {
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(251,246,239,.92);
}
.task-card ul {
  gap: 9px;
}
.task-note {
  color: #f3ddb0 !important;
}
.lesson-next-nav {
  margin-top: 18px;
  margin-bottom: 14px;
}
.next-lesson-btn {
  width: 100%;
  border: 1px solid rgba(243,216,164,.18);
  border-radius: 22px;
  padding: 15px 17px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 14px;
  text-align: left;
  color: var(--cream);
  background:
    radial-gradient(circle at 0% 0%, rgba(239,207,145,.18), transparent 34%),
    linear-gradient(180deg, rgba(74,60,45,.82), rgba(42,35,29,.80));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 24px rgba(0,0,0,.16);
}
.next-lesson-btn__eyebrow {
  color: rgba(243,216,164,.78);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.next-lesson-btn__title {
  color: var(--cream);
  font-size: 17px;
  line-height: 1.22;
  font-weight: 760;
  letter-spacing: -.015em;
}
.next-lesson-btn__arrow {
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--gold-light);
  font-size: 22px;
}
/* Override earlier wide card for immersive descriptions */
.immersive-info-card {
  margin: 0;
}


/* V42 lesson layout fixes */
.lesson-page,
.lesson-page * {
  box-sizing: border-box;
}
.lesson-page {
  overflow-x: hidden;
}
.story-action-list,
.lesson-extra-content,
.tasks-section,
.immersive-info-wrap,
.lesson-next-nav {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.lesson-expand {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: 20px;
}
.lesson-expand__summary {
  grid-template-columns: minmax(0, 1fr) 34px;
  padding: 13px 15px;
}
.lesson-expand__eyebrow,
.lesson-expand__title {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}
.lesson-expand__eyebrow {
  font-size: 10px;
  letter-spacing: .13em;
}
.lesson-expand__title {
  font-size: clamp(17px, 5vw, 20px);
  line-height: 1.14;
}
.lesson-expand__body {
  max-width: 100%;
  overflow: hidden;
  padding: 0 10px 10px;
}
.story-placeholder-card,
.story-commentary-card,
.immersive-info-card {
  max-width: 100%;
  overflow: hidden;
}
.story-commentary-card h2,
.immersive-info-card h2,
.story-placeholder-card h2 {
  font-size: clamp(21px, 6.2vw, 30px);
  line-height: 1.06;
  overflow-wrap: anywhere;
}
.content-subtitle,
.story-commentary-card p,
.immersive-info-card p,
.story-placeholder-card p,
.content-meta span,
.content-meta strong {
  font-size: 14px;
  line-height: 1.48;
  overflow-wrap: anywhere;
}
.commentary-point h3 {
  font-size: 15px;
  line-height: 1.28;
  overflow-wrap: anywhere;
}
.commentary-point p {
  font-size: 14px;
  line-height: 1.44;
}
.tasks-section {
  overflow: visible;
}
.tasks-carousel {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
  padding: 4px 0 18px;
  scroll-snap-type: x proximity;
  scroll-padding-left: 0;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}
.task-card {
  flex: 0 0 calc(100vw - 64px);
  width: calc(100vw - 64px);
  max-width: 360px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 17px 16px 19px;
  border-radius: 25px;
  background:
    radial-gradient(circle at 11% 9%, rgba(255,238,204,.34), transparent 28%),
    radial-gradient(circle at 100% 0%, rgba(245,203,136,.18), transparent 34%),
    linear-gradient(180deg, rgba(102,84,63,.92), rgba(56,45,35,.90));
}
.task-card h3 {
  font-size: clamp(20px, 6.2vw, 25px);
  line-height: 1.08;
  overflow-wrap: anywhere;
}
.task-card p,
.task-card li {
  font-size: clamp(13.5px, 4.15vw, 15.5px);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.task-card li {
  padding-left: 16px;
}
.modal-open-card {
  width: 100%;
  border: 1px solid rgba(243,216,164,.18);
  border-radius: 20px;
  padding: 14px 15px;
  display: grid;
  grid-template-columns: minmax(0,1fr) 36px;
  gap: 6px 12px;
  text-align: left;
  color: var(--cream);
  background:
    radial-gradient(circle at 0% 0%, rgba(239,207,145,.18), transparent 34%),
    linear-gradient(180deg, rgba(68,57,44,.72), rgba(41,35,30,.72));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 24px rgba(0,0,0,.16);
}
.modal-open-card__eyebrow {
  color: rgba(243,216,164,.78);
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.modal-open-card__title {
  color: var(--cream);
  font-size: clamp(16px, 4.9vw, 19px);
  line-height: 1.18;
  font-weight: 760;
  overflow-wrap: anywhere;
}
.modal-open-card__icon {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-light);
  border: 1px solid rgba(243,216,164,.16);
  background: rgba(255,255,255,.03);
}
.immersive-info-wrap {
  margin: 16px 18px 0;
}
.lesson-next-nav--pair {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  margin-bottom: 14px;
}
.lesson-next-nav--pair.has-two {
  grid-template-columns: 1fr 1fr;
}
.lesson-nav-btn {
  min-width: 0;
  border: 1px solid rgba(243,216,164,.16);
  border-radius: 18px;
  padding: 11px 12px;
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 9px;
  align-items: center;
  text-align: left;
  color: var(--cream);
  background:
    radial-gradient(circle at 0% 0%, rgba(239,207,145,.14), transparent 34%),
    linear-gradient(180deg, rgba(66,54,41,.76), rgba(37,31,26,.74));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 20px rgba(0,0,0,.14);
}
.lesson-nav-btn--next {
  grid-template-columns: minmax(0,1fr) auto;
}
.lesson-nav-btn--next .lesson-nav-btn__arrow {
  grid-column: 2;
  grid-row: 1;
}
.lesson-nav-btn--next .lesson-nav-btn__copy {
  grid-column: 1;
  grid-row: 1;
}
.lesson-nav-btn__arrow {
  color: var(--gold-light);
  font-size: 18px;
  line-height: 1;
}
.lesson-nav-btn__copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.lesson-nav-btn__eyebrow {
  color: rgba(243,216,164,.78);
  font-size: 9px;
  line-height: 1;
  font-weight: 820;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.lesson-nav-btn__title {
  color: var(--cream);
  font-size: 12.5px;
  line-height: 1.18;
  font-weight: 730;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lesson-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
}
.lesson-modal.is-open {
  display: block;
}
.lesson-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8,6,4,.72);
  backdrop-filter: blur(10px);
}
.lesson-modal__panel {
  position: absolute;
  left: 16px;
  right: 16px;
  top: max(56px, env(safe-area-inset-top, 0px) + 34px);
  bottom: calc(var(--safe-bottom) + 22px);
  border: 1px solid rgba(243,216,164,.18);
  border-radius: 26px;
  background:
    radial-gradient(circle at 12% 0%, rgba(239,207,145,.16), transparent 34%),
    linear-gradient(180deg, rgba(54,47,39,.96), rgba(22,18,15,.97));
  box-shadow: 0 24px 60px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06);
  overflow: hidden;
}
.lesson-modal__close {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(243,216,164,.18);
  background: rgba(255,255,255,.05);
  color: var(--cream);
  font-size: 25px;
  line-height: 1;
}
.lesson-modal__content {
  height: 100%;
  overflow-y: auto;
  padding: 58px 14px 18px;
  -webkit-overflow-scrolling: touch;
}
.lesson-modal__content .immersive-info-card {
  margin: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0 4px 8px;
}
body.modal-open {
  overflow: hidden;
}
@media (max-width: 370px) {
  .lesson-next-nav--pair.has-two {
    grid-template-columns: 1fr;
  }
  .task-card {
    flex-basis: calc(100vw - 48px);
    width: calc(100vw - 48px);
  }
}


/* V43 fixes: relive/emotive layout, compact story modal buttons */
.relive-page {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  padding-bottom: 10px;
}
.relive-page .relive-stage.full-bleed-image {
  width: calc(100% + 36px) !important;
  max-width: none !important;
  margin-left: -18px !important;
  margin-right: -18px !important;
  min-height: calc(100dvh - var(--nav-h) - var(--safe-bottom) - 18px);
  border-radius: 0;
}
.relive-page .relive-bg,
.relive-page .relive-shade,
.relive-page .relive-top,
.relive-page .relive-audio-panel {
  left: 0;
  right: 0;
}
.relive-page .relive-video {
  object-fit: cover;
  object-position: center center;
  background: #080604;
}
.relive-page .relive-scene {
  background-size: cover;
  background-position: center center;
}
.relive-page .immersive-info-wrap {
  margin: 16px 0 0 !important;
  width: 100%;
  max-width: 100%;
}
.relive-page .lesson-next-nav--pair {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}
.relive-page .modal-open-card,
.relive-page .lesson-nav-btn {
  max-width: 100%;
}
.story-action-list--modal {
  display: grid;
  gap: 9px;
  margin-top: 2px;
}
.story-action-list--modal .modal-open-card {
  min-height: 76px;
  border-radius: 20px;
  padding: 10px 12px 10px 10px;
  grid-template-columns: 52px minmax(0,1fr) 32px;
  align-items: center;
  gap: 12px;
  background:
    radial-gradient(circle at 15% 0%, rgba(243,216,164,.16), transparent 34%),
    linear-gradient(180deg, rgba(54,47,39,.74), rgba(36,31,26,.74));
}
.modal-open-card__copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.story-action-list--modal .modal-open-card__symbol {
  width: 48px;
  height: 48px;
  border-radius: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-light);
  font-size: 19px;
  background: radial-gradient(circle at 40% 30%, rgba(243,216,164,.28), rgba(65,55,42,.74));
  border: 1px solid rgba(243,216,164,.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.story-action-list--modal .modal-open-card__eyebrow {
  font-size: 10px;
  line-height: 1;
}
.story-action-list--modal .modal-open-card__title {
  font-size: 17px;
  line-height: 1.15;
  font-weight: 780;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.story-action-list--modal .modal-open-card__icon {
  width: 30px;
  height: 30px;
  border-radius: 11px;
  font-size: 16px;
}
.lesson-modal__content .story-commentary-card,
.lesson-modal__content .story-placeholder-card {
  margin: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0 4px 8px;
}
.lesson-modal__content .commentary-point {
  background: rgba(255,255,255,.04);
  border-color: rgba(243,216,164,.10);
}
.lesson-modal__content .story-commentary-card h2,
.lesson-modal__content .story-placeholder-card h2 {
  font-size: clamp(24px, 7vw, 34px);
}
.lesson-modal__content .story-commentary-card p,
.lesson-modal__content .story-placeholder-card p {
  font-size: 14.5px;
  line-height: 1.52;
}
@media (max-width: 370px) {
  .story-action-list--modal .modal-open-card {
    grid-template-columns: 46px minmax(0,1fr) 30px;
  }
  .story-action-list--modal .modal-open-card__symbol {
    width: 44px;
    height: 44px;
  }
}


/* V44 emergency width/layout fixes */
.lesson-page-new {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* All ordinary lesson images must be full screen width */
.lesson-page-new .lesson-image-full.full-bleed-image,
.live-lesson-page .lesson-image-full.full-bleed-image {
  width: calc(100% + 36px) !important;
  max-width: none !important;
  margin-left: -18px !important;
  margin-right: -18px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Immersive pages: undo the horizontal squeeze and keep controls inside screen */
.relive-page {
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow-x: hidden !important;
}
.relive-page .relive-stage.full-bleed-image {
  width: calc(100% + 36px) !important;
  max-width: none !important;
  margin-left: -18px !important;
  margin-right: -18px !important;
  min-height: calc(100dvh - var(--nav-h) - var(--safe-bottom) - 18px) !important;
  overflow: hidden !important;
}
.relive-page .relive-bg,
.relive-page .relive-shade,
.relive-page .relive-top,
.relive-page .relive-audio-panel {
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  max-width: none !important;
}
.relive-page .relive-audio-panel {
  inset: auto 18px 18px 18px !important;
  z-index: 8;
}
.relive-page .audio-player {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.relive-page .audio-range-wrap,
.relive-page .audio-main,
.relive-page .audio-track {
  min-width: 0 !important;
  max-width: 100% !important;
}
.relive-page .relive-video {
  object-fit: cover !important;
  object-position: center center !important;
}
.relive-page .relive-scene {
  background-size: cover !important;
  background-position: center center !important;
}

/* Blocks under immersive screens must align with page, not overflow */
.relive-page .immersive-info-wrap,
.relive-page .lesson-next-nav--pair {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow: hidden !important;
}

/* Fix story modal buttons: icon/copy/arrow grid was conflicting with old columns */
.story-action-list--modal .modal-open-card {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) 34px !important;
  grid-template-rows: auto !important;
  align-items: center !important;
}
.story-action-list--modal .modal-open-card__symbol {
  grid-column: 1 !important;
  grid-row: 1 !important;
}
.story-action-list--modal .modal-open-card__copy {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
.story-action-list--modal .modal-open-card__icon {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  align-self: center !important;
}
.story-action-list--modal .modal-open-card__eyebrow,
.story-action-list--modal .modal-open-card__title {
  grid-column: auto !important;
  grid-row: auto !important;
  max-width: 100% !important;
}
.story-action-list--modal .modal-open-card__title {
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Keep all generic modal buttons inside the screen */
.modal-open-card {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.modal-open-card__copy,
.modal-open-card__title,
.modal-open-card__eyebrow {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Prevent lesson nav from pushing outside the viewport */
.lesson-next-nav--pair {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
.lesson-nav-btn {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
.lesson-nav-btn__copy,
.lesson-nav-btn__title {
  min-width: 0 !important;
  max-width: 100% !important;
}


/* V45 final width + typography refinements */

/* Force lesson illustrations to the real screen width, not just content width */
.lesson-page-new .lesson-image-full.full-bleed-image,
.live-lesson-page .lesson-image-full.full-bleed-image,
.relive-page .relive-stage.full-bleed-image,
.library-story-stage.full-bleed-image {
  width: 100dvw !important;
  max-width: 100dvw !important;
  margin-left: calc(50% - 50dvw) !important;
  margin-right: calc(50% - 50dvw) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Fallback for browsers where dvw is not supported */
@supports not (width: 100dvw) {
  .lesson-page-new .lesson-image-full.full-bleed-image,
  .live-lesson-page .lesson-image-full.full-bleed-image,
  .relive-page .relive-stage.full-bleed-image,
  .library-story-stage.full-bleed-image {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
}

/* Keep immersive audio inside the true screen width after full-bleed reset */
.relive-page .relive-audio-panel {
  left: 18px !important;
  right: 18px !important;
  width: auto !important;
  max-width: none !important;
}
.relive-page .audio-player {
  width: 100% !important;
  max-width: 100% !important;
}

/* Story lesson titles: 25% smaller, calmer */
.lesson-page-new:not(.relive-page):not(.library-story-page):not(.live-lesson-page) .lesson-page-title {
  font-size: clamp(24px, 6.45vw, 32px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.04em !important;
}

/* Buttons: 15% smaller text */
.story-action-list--modal .modal-open-card__title,
.immersive-info-wrap .modal-open-card__title,
.modal-open-card__title {
  font-size: clamp(14px, 4.15vw, 16px) !important;
  line-height: 1.16 !important;
}
.story-action-list--modal .modal-open-card__eyebrow,
.immersive-info-wrap .modal-open-card__eyebrow,
.modal-open-card__eyebrow {
  font-size: 9px !important;
  letter-spacing: .12em !important;
}

/* Compact lesson material-like buttons keep the text from feeling oversized */
.story-action-list--modal .modal-open-card {
  min-height: 70px !important;
  padding-top: 9px !important;
  padding-bottom: 9px !important;
}
.immersive-info-wrap .modal-open-card {
  min-height: 72px !important;
  padding-top: 11px !important;
  padding-bottom: 11px !important;
}


/* V46 real full-bleed lesson images fix
   The bug was app-main horizontal padding. For lesson routes we remove page padding
   and return padding only to text/control blocks. */
body.is-lesson-route .app-main {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.is-lesson-route .lesson-page-new {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* Text/control blocks keep the normal safe side rhythm */
body.is-lesson-route .lesson-page-new > .topline,
body.is-lesson-route .lesson-page-new > .lesson-head,
body.is-lesson-route .lesson-page-new > .audio-title,
body.is-lesson-route .lesson-page-new > .audio-player,
body.is-lesson-route .lesson-page-new > .live-info-card,
body.is-lesson-route .lesson-page-new > .lesson-extra-content,
body.is-lesson-route .lesson-page-new > .immersive-info-wrap,
body.is-lesson-route .lesson-page-new > .lesson-next-nav,
body.is-lesson-route .lesson-page-new > .material-heading,
body.is-lesson-route .lesson-page-new > .list {
  margin-left: 18px !important;
  margin-right: 18px !important;
  width: auto !important;
  max-width: none !important;
}

/* Illustrations occupy the full page/app width */
body.is-lesson-route .lesson-page-new > .lesson-image-full.full-bleed-image,
body.is-lesson-route .lesson-page-new > .relive-stage.full-bleed-image,
body.is-lesson-route .lesson-page-new > .library-story-stage.full-bleed-image,
body.is-lesson-route .live-lesson-page > .lesson-image-full.full-bleed-image {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Reset earlier viewport-based attempts that could be ignored/unstable in iOS */
body.is-lesson-route .lesson-page-new .lesson-image-full.full-bleed-image,
body.is-lesson-route .relive-page .relive-stage.full-bleed-image {
  transform: none !important;
}

/* Immersive stage must be full width, but its player stays inside */
body.is-lesson-route .relive-page .relive-stage.full-bleed-image {
  min-height: calc(100dvh - var(--nav-h) - var(--safe-bottom) - 18px) !important;
}
body.is-lesson-route .relive-page .relive-audio-panel {
  left: 18px !important;
  right: 18px !important;
  width: auto !important;
  max-width: none !important;
  inset-block-start: auto !important;
  bottom: 18px !important;
}
body.is-lesson-route .relive-page .audio-player {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

/* Keep the bottom lesson nav aligned with other controls */
body.is-lesson-route .lesson-next-nav--pair {
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* V54 live Q&A container */
.live-qa-card {
  margin-top: 14px;
}
.live-qa-card .content-eyebrow {
  display: inline-flex;
  margin-bottom: 8px;
}


/* V55 library story title/theme display */
.library-story-meta-card {
  margin: 0 0 14px;
  padding: 15px 15px 14px;
  border-radius: 22px;
  border: 1px solid rgba(247,239,229,.12);
  background: linear-gradient(180deg, rgba(247,239,229,.075), rgba(247,239,229,.035));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.library-story-meta-card h2 {
  margin: 0 0 7px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(21px, 6.2vw, 30px);
  line-height: 1.04;
  letter-spacing: -.04em;
  color: var(--cream);
}
.library-story-meta-card p {
  margin: 0;
  color: rgba(247,239,229,.78);
  font-size: 14px;
  line-height: 1.35;
}


/* V57 library story cleanup */
.library-story-page .lesson-page-title {
  font-size: clamp(21px, 5.8vw, 28px);
  line-height: 1.02;
  max-width: 100%;
}
.library-story-page .lesson-subline {
  font-size: 12px;
}
.library-story-page .library-story-panel {
  padding-top: 2px;
}
.library-story-page .audio-title {
  margin: 24px 0 14px;
  font-size: clamp(18px, 5vw, 24px);
  line-height: 1.08;
}
.library-story-page .audio-player {
  margin-bottom: 28px;
}
.library-story-page .tasks-section {
  margin-top: 24px;
}
.library-story-page .tasks-header {
  margin: 0 0 14px;
}
.library-story-page .tasks-header .section-title {
  margin: 0;
  font-size: clamp(22px, 6.2vw, 30px);
  line-height: 1.02;
}
.library-story-page .task-counter {
  padding-top: 6px;
  font-size: 12px;
}


/* V58 library story content width fix */
.library-story-panel {
  margin-left: 18px;
  margin-right: 18px;
  width: auto;
  max-width: none;
}
@media (min-width: 700px) {
  .library-story-panel {
    margin-left: 24px;
    margin-right: 24px;
  }
}


/* V59 test: illustrated task-card backgrounds for talents:2 */
.task-card--illustrated {
  border: 1px solid rgba(208, 173, 123, .48);
  background: linear-gradient(180deg, rgba(255,248,235,.82), rgba(250,241,224,.74)), var(--task-card-bg) center bottom / cover no-repeat;
  box-shadow: 0 18px 34px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.56);
}
.task-card--illustrated::after {
  background: rgba(190, 154, 104, .78);
  box-shadow: -12px 8px 0 rgba(190, 154, 104, .34), -2px 20px 0 rgba(190, 154, 104, .18);
}
.task-card--illustrated h3,
.task-card--illustrated .task-note,
.task-card--illustrated .task-number {
  color: #4c3829;
}
.task-card--illustrated p,
.task-card--illustrated li {
  color: #5b4534;
}
.task-card--illustrated .task-number {
  background: rgba(241, 217, 174, .96);
  border-color: rgba(183, 146, 90, .34);
  box-shadow: 0 8px 16px rgba(95, 71, 46, .14);
}
.task-card--illustrated li::before {
  color: #d0a15a;
}
.task-card--illustrated p,
.task-card--illustrated ul {
  margin-top: 10px;
}


/* V62: image-based task cards for talents:2 */
.task-card--image-only {
  padding: 0;
  min-height: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.task-card--image-only::after {
  display: none;
}
.task-card__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 25px;
  box-shadow: 0 16px 32px rgba(0,0,0,.20);
  border: 1px solid rgba(214, 181, 130, .38);
}


/* V63 story buttons row + light reading modals */
.story-action-list--modal {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 2px;
}
.story-action-list--modal .modal-open-card {
  min-height: 88px;
  border-radius: 22px;
  padding: 12px 12px 12px 10px;
  grid-template-columns: 48px minmax(0,1fr) 28px;
  align-items: center;
  gap: 10px;
}
.story-action-list--modal .modal-open-card__symbol {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  font-size: 18px;
}
.story-action-list--modal .modal-open-card__copy {
  gap: 5px;
}
.story-action-list--modal .modal-open-card__eyebrow {
  font-size: 9px;
  letter-spacing: .14em;
}
.story-action-list--modal .modal-open-card__title {
  font-size: clamp(15px, 4.2vw, 18px);
  line-height: 1.14;
  font-weight: 770;
}
.story-action-list--modal .modal-open-card__icon {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  font-size: 14px;
}
@media (max-width: 370px) {
  .story-action-list--modal {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .story-action-list--modal .modal-open-card {
    min-height: 82px;
    grid-template-columns: 42px minmax(0,1fr) 26px;
    padding: 10px 10px 10px 9px;
    gap: 9px;
  }
  .story-action-list--modal .modal-open-card__symbol {
    width: 40px;
    height: 40px;
    border-radius: 14px;
  }
  .story-action-list--modal .modal-open-card__title {
    font-size: 14px;
  }
}
.lesson-modal--light .lesson-modal__panel {
  border-color: rgba(201, 162, 102, .42);
  background:
    radial-gradient(circle at 12% 0%, rgba(255,242,211,.94), transparent 34%),
    linear-gradient(180deg, rgba(252,245,229,.98), rgba(241,226,196,.985));
  box-shadow: 0 24px 60px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.68);
}
.lesson-modal--light .lesson-modal__close {
  border-color: rgba(187,145,82,.28);
  background: rgba(255,255,255,.52);
  color: #6b4a28;
}
.lesson-modal--light .lesson-modal__content {
  color: #5c4532;
}
.lesson-modal--light .lesson-modal__content .story-commentary-card,
.lesson-modal--light .lesson-modal__content .story-placeholder-card {
  margin: 0;
  padding: 0 4px 8px;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.lesson-modal--light .lesson-modal__content .content-eyebrow {
  color: #aa7a46;
}
.lesson-modal--light .lesson-modal__content .story-commentary-card h2,
.lesson-modal--light .lesson-modal__content .story-placeholder-card h2 {
  color: #503925;
}
.lesson-modal--light .lesson-modal__content .content-subtitle,
.lesson-modal--light .lesson-modal__content .story-commentary-card p,
.lesson-modal--light .lesson-modal__content .story-placeholder-card p,
.lesson-modal--light .lesson-modal__content .story-commentary-card li,
.lesson-modal--light .lesson-modal__content .story-placeholder-card li {
  color: #6a513b;
}
.lesson-modal--light .lesson-modal__content .content-meta {
  background: rgba(255,255,255,.54);
  border: 1px solid rgba(196,155,97,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}
.lesson-modal--light .lesson-modal__content .content-meta span {
  color: #806149;
}
.lesson-modal--light .lesson-modal__content .content-meta strong {
  color: #84572f;
}
.lesson-modal--light .lesson-modal__content .commentary-point {
  background: rgba(255,251,243,.86);
  border: 1px solid rgba(208,173,123,.20);
  box-shadow: 0 8px 18px rgba(156,118,66,.08), inset 0 1px 0 rgba(255,255,255,.6);
}
.lesson-modal--light .lesson-modal__content .commentary-point h3 {
  color: #4f3927;
}
.lesson-modal--light .lesson-modal__content .content-signoff {
  color: #8a6134 !important;
}


/* V64 story action buttons readability fix */
.story-action-list--modal {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 4px !important;
}
.story-action-list--modal .modal-open-card {
  min-width: 0 !important;
  width: 100% !important;
  min-height: 72px !important;
  border-radius: 20px !important;
  padding: 12px 12px !important;
  grid-template-columns: minmax(0, 1fr) 28px !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  gap: 0 !important;
}
.story-action-list--modal .modal-open-card__symbol {
  display: none !important;
}
.story-action-list--modal .modal-open-card__copy {
  min-width: 0 !important;
  display: grid !important;
  gap: 5px !important;
  align-self: center !important;
}
.story-action-list--modal .modal-open-card__eyebrow {
  display: block !important;
  font-size: 8.8px !important;
  line-height: 1 !important;
  letter-spacing: .16em !important;
  white-space: normal !important;
}
.story-action-list--modal .modal-open-card__title {
  display: block !important;
  color: var(--cream) !important;
  font-size: clamp(14px, 3.8vw, 16px) !important;
  line-height: 1.12 !important;
  font-weight: 780 !important;
  letter-spacing: -.02em !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
}
.story-action-list--modal .modal-open-card__icon {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: end !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  flex: 0 0 auto !important;
}
@media (max-width: 370px) {
  .story-action-list--modal {
    gap: 10px !important;
  }
  .story-action-list--modal .modal-open-card {
    min-height: 70px !important;
    padding: 11px 10px !important;
    grid-template-columns: minmax(0, 1fr) 26px !important;
  }
  .story-action-list--modal .modal-open-card__title {
    font-size: 13.5px !important;
  }
  .story-action-list--modal .modal-open-card__icon {
    width: 26px !important;
    height: 26px !important;
  }
}


/* V65 hard fix: readable two-button row */
.story-action-list--modal {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
}
.story-action-list--modal .modal-open-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  min-width: 0 !important;
  width: 100% !important;
  min-height: 74px !important;
  padding: 13px 14px !important;
  align-items: center !important;
  justify-items: start !important;
  text-align: left !important;
}
.story-action-list--modal .modal-open-card__symbol,
.story-action-list--modal .modal-open-card__icon {
  display: none !important;
}
.story-action-list--modal .modal-open-card__copy {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  width: 100% !important;
  display: grid !important;
  gap: 6px !important;
  justify-items: start !important;
  text-align: left !important;
}
.story-action-list--modal .modal-open-card__eyebrow {
  display: block !important;
  width: 100% !important;
  font-size: 8.8px !important;
  line-height: 1 !important;
  letter-spacing: .16em !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  text-align: left !important;
}
.story-action-list--modal .modal-open-card__title {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  color: var(--cream) !important;
  font-size: clamp(15px, 4.25vw, 17px) !important;
  line-height: 1.12 !important;
  font-weight: 780 !important;
  letter-spacing: -.02em !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  text-align: left !important;
}
@media (max-width: 370px) {
  .story-action-list--modal {
    gap: 10px !important;
  }
  .story-action-list--modal .modal-open-card {
    min-height: 70px !important;
    padding: 12px 11px !important;
  }
  .story-action-list--modal .modal-open-card__title {
    font-size: 14px !important;
  }
}


/* V66 story buttons aesthetic refinement */
.story-action-list--modal{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:14px !important;
  margin-top:8px !important;
}
.story-action-list--modal .modal-open-card{
  position:relative !important;
  display:grid !important;
  grid-template-columns:58px minmax(0,1fr) 22px !important;
  align-items:start !important;
  column-gap:12px !important;
  min-width:0 !important;
  width:100% !important;
  min-height:104px !important;
  padding:14px 14px 14px 14px !important;
  border-radius:22px !important;
  text-align:left !important;
  background:
    radial-gradient(120% 140% at 15% 0%, rgba(255,223,168,.15), transparent 42%),
    radial-gradient(90% 90% at 90% 100%, rgba(255,190,120,.09), transparent 35%),
    linear-gradient(180deg, rgba(80,58,39,.96), rgba(44,32,23,.98)) !important;
  border:1px solid rgba(222,190,140,.30) !important;
  box-shadow:
    0 14px 28px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,245,224,.14),
    inset 0 -1px 0 rgba(255,214,154,.08),
    0 0 0 1px rgba(255,214,154,.03) !important;
  overflow:hidden !important;
}
.story-action-list--modal .modal-open-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,223,168,.08), transparent 36%, transparent 70%, rgba(255,223,168,.05));
  pointer-events:none;
}
.story-action-list--modal .modal-open-card__symbol{
  position:relative !important;
  z-index:2 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:58px !important;
  height:58px !important;
  border-radius:16px !important;
  overflow:hidden !important;
  background:radial-gradient(circle at 50% 38%, rgba(255,234,191,.22), rgba(255,217,150,.09) 48%, rgba(255,202,124,.04) 75%) !important;
  border:1px solid rgba(236,196,131,.24) !important;
  box-shadow:inset 0 1px 0 rgba(255,247,229,.20), 0 10px 20px rgba(0,0,0,.14) !important;
}
.story-action-list--modal .modal-open-card--with-image .modal-open-card__symbol img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}
.story-action-list--modal .modal-open-card__copy{
  position:relative !important;
  z-index:2 !important;
  display:grid !important;
  gap:7px !important;
  align-content:start !important;
  justify-items:start !important;
  min-width:0 !important;
  width:100% !important;
  padding-top:2px !important;
  text-align:left !important;
}
.story-action-list--modal .modal-open-card__eyebrow{
  display:block !important;
  width:100% !important;
  color:rgba(247,231,202,.88) !important;
  font-size:10px !important;
  line-height:1.05 !important;
  letter-spacing:.22em !important;
  font-weight:760 !important;
  text-transform:uppercase !important;
  margin:0 !important;
}
.story-action-list--modal .modal-open-card__title{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  color:#fff8eb !important;
  font-size:clamp(12px, 3.45vw, 14px) !important;
  line-height:1.12 !important;
  font-weight:720 !important;
  letter-spacing:-.012em !important;
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:anywhere !important;
  overflow:visible !important;
  text-overflow:clip !important;
  -webkit-line-clamp:unset !important;
  -webkit-box-orient:unset !important;
  margin:0 !important;
}
.story-action-list--modal .modal-open-card__icon{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
  align-self:start !important;
  position:relative !important;
  z-index:2 !important;
  width:22px !important;
  height:22px !important;
  margin-top:6px !important;
  color:#f2d4a0 !important;
  font-size:19px !important;
  line-height:1 !important;
  opacity:.92 !important;
}
.story-action-list--modal .modal-open-card:hover,
.story-action-list--modal .modal-open-card:active{
  transform:translateY(-1px);
  border-color:rgba(227,194,140,.34) !important;
  box-shadow:
    0 16px 30px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,244,223,.16),
    0 0 0 1px rgba(255,227,174,.04),
    0 0 26px rgba(255,197,104,.06) !important;
}
@media (max-width: 370px){
  .story-action-list--modal{
    gap:12px !important;
  }
  .story-action-list--modal .modal-open-card{
    grid-template-columns:52px minmax(0,1fr) 20px !important;
    column-gap:10px !important;
    min-height:96px !important;
    padding:13px 12px !important;
  }
  .story-action-list--modal .modal-open-card__copy{
    gap:6px !important;
  }
  .story-action-list--modal .modal-open-card__eyebrow{
    font-size:8.4px !important;
  }
  .story-action-list--modal .modal-open-card__title{
    font-size:12px !important;
  }
  .story-action-list--modal .modal-open-card__symbol{
    width:52px !important;
    height:52px !important;
    right:12px !important;
    font-size:15px !important;
  }
}


/* V68 hard layout fix for premium story buttons */
.story-action-list--modal .modal-open-card {
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) 22px !important;
  grid-template-rows: 1fr !important;
  align-items: start !important;
  justify-items: stretch !important;
  column-gap: 12px !important;
}
.story-action-list--modal .modal-open-card__symbol {
  position: relative !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: start !important;
  justify-self: start !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}
.story-action-list--modal .modal-open-card__copy {
  position: relative !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: start !important;
  justify-self: stretch !important;
  min-width: 0 !important;
  width: 100% !important;
  padding-right: 0 !important;
  padding-top: 2px !important;
  margin: 0 !important;
}
.story-action-list--modal .modal-open-card__icon {
  display: flex !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  align-self: start !important;
  justify-self: end !important;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  margin: 6px 0 0 0 !important;
  flex: 0 0 auto !important;
}
.story-action-list--modal .modal-open-card__eyebrow,
.story-action-list--modal .modal-open-card__title {
  text-align: left !important;
}
@media (max-width: 370px) {
  .story-action-list--modal .modal-open-card {
    grid-template-columns: 52px minmax(0, 1fr) 20px !important;
    column-gap: 10px !important;
  }
  .story-action-list--modal .modal-open-card__symbol {
    width: 52px !important;
    height: 52px !important;
    position: relative !important;
    grid-column: 1 !important;
    right: auto !important;
    top: auto !important;
  }
  .story-action-list--modal .modal-open-card__copy {
    grid-column: 2 !important;
    padding-right: 0 !important;
  }
  .story-action-list--modal .modal-open-card__icon {
    grid-column: 3 !important;
  }
}


/* V69 final compact premium story buttons */
.story-action-list--modal {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 8px !important;
  width: 100% !important;
}

.story-action-list--modal .modal-open-card {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  align-items: start !important;
  column-gap: 9px !important;
  min-width: 0 !important;
  width: 100% !important;
  min-height: 82px !important;
  height: 82px !important;
  padding: 12px 13px !important;
  border-radius: 18px !important;
  text-align: left !important;
  background:
    radial-gradient(105% 120% at 10% 0%, rgba(255, 222, 166, .22), transparent 42%),
    linear-gradient(180deg, rgba(101, 73, 45, .98), rgba(55, 38, 26, .98)) !important;
  border: 1px solid rgba(232, 195, 137, .38) !important;
  box-shadow:
    0 12px 24px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,244,222,.20),
    inset 0 -1px 0 rgba(255,210,145,.10),
    0 0 22px rgba(224, 166, 82, .08) !important;
  overflow: hidden !important;
}

.story-action-list--modal .modal-open-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, rgba(255,226,176,.10), transparent 38%, rgba(255,205,132,.06)) !important;
  pointer-events: none !important;
}

.story-action-list--modal .modal-open-card__symbol {
  position: relative !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  display: flex !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  max-width: 42px !important;
  max-height: 42px !important;
  margin: 0 !important;
  align-self: start !important;
  justify-self: start !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 13px !important;
  overflow: hidden !important;
  z-index: 2 !important;
  background: rgba(34, 22, 15, .36) !important;
  border: 1px solid rgba(238, 197, 132, .24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,245,224,.18),
    0 8px 16px rgba(0,0,0,.16),
    0 0 14px rgba(225, 165, 82, .08) !important;
}

.story-action-list--modal .modal-open-card--with-image .modal-open-card__symbol img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.story-action-list--modal .modal-open-card__copy {
  position: relative !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: grid !important;
  gap: 6px !important;
  align-content: start !important;
  align-self: start !important;
  justify-self: stretch !important;
  min-width: 0 !important;
  width: 100% !important;
  padding: 1px 18px 0 0 !important;
  margin: 0 !important;
  z-index: 2 !important;
  text-align: left !important;
}

.story-action-list--modal .modal-open-card__eyebrow {
  display: block !important;
  width: 100% !important;
  color: rgba(255, 232, 193, .90) !important;
  font-size: 8px !important;
  line-height: 1 !important;
  letter-spacing: .20em !important;
  font-weight: 760 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  margin: 0 !important;
  text-align: left !important;
}

.story-action-list--modal .modal-open-card__title {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  color: #fff6e6 !important;
  font-size: clamp(11px, 3.35vw, 13px) !important;
  line-height: 1.11 !important;
  font-weight: 740 !important;
  letter-spacing: -.035em !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  margin: 0 !important;
  text-align: left !important;
}

.story-action-list--modal .modal-open-card__icon {
  position: absolute !important;
  top: 14px !important;
  right: 12px !important;
  left: auto !important;
  bottom: auto !important;
  display: flex !important;
  width: 22px !important;
  height: 22px !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  border-radius: 8px !important;
  background: rgba(255, 233, 194, .08) !important;
  border: 1px solid rgba(232, 195, 137, .16) !important;
  color: #f5d6a0 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  opacity: .95 !important;
  z-index: 3 !important;
}

.story-action-list--modal .modal-open-card:hover,
.story-action-list--modal .modal-open-card:active {
  transform: translateY(-1px) !important;
  border-color: rgba(238, 203, 148, .46) !important;
  box-shadow:
    0 14px 27px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,244,222,.24),
    0 0 26px rgba(224, 166, 82, .10) !important;
}

@media (max-width: 370px) {
  .story-action-list--modal {
    gap: 10px !important;
  }

  .story-action-list--modal .modal-open-card {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    column-gap: 0 !important;
    height: 78px !important;
    min-height: 78px !important;
    padding: 11px 11px !important;
    border-radius: 17px !important;
  }

  .story-action-list--modal .modal-open-card__symbol {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    border-radius: 12px !important;
  }

  .story-action-list--modal .modal-open-card__copy {
    gap: 5px !important;
    padding-right: 17px !important;
  }

  .story-action-list--modal .modal-open-card__eyebrow {
    font-size: 7.4px !important;
    letter-spacing: .17em !important;
  }

  .story-action-list--modal .modal-open-card__title {
    font-size: 10.8px !important;
    line-height: 1.10 !important;
  }

  .story-action-list--modal .modal-open-card__icon {
    top: 12px !important;
    right: 10px !important;
    width: 20px !important;
    height: 20px !important;
    font-size: 14px !important;
  }
}


/* V70 story buttons retune per review */
.lesson-extra-content--story {
  gap: 24px !important;
}

.story-action-list--modal {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 10px !important;
  margin-bottom: 4px !important;
  width: 100% !important;
}

.story-action-list--modal .modal-open-card {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 12px !important;
  min-width: 0 !important;
  width: 100% !important;
  min-height: 92px !important;
  height: 92px !important;
  padding: 14px 14px 14px 14px !important;
  border-radius: 22px !important;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(240,190,112,.14), transparent 42%),
    linear-gradient(180deg, rgba(46,32,21,.96), rgba(34,24,17,.98)) !important;
  border: 1px solid rgba(224, 171, 92, .34) !important;
  box-shadow:
    0 14px 28px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,245,228,.10),
    inset 0 -1px 0 rgba(255,191,101,.06) !important;
  overflow: hidden !important;
}

.story-action-list--modal .modal-open-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, rgba(255,221,160,.06), transparent 38%, rgba(255,200,120,.04)) !important;
  pointer-events: none !important;
}

.story-action-list--modal .modal-open-card__symbol {
  position: relative !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  max-width: 52px !important;
  max-height: 52px !important;
  border-radius: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  align-self: start !important;
  justify-self: start !important;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,215,142,.16), rgba(61,40,24,.96)) !important;
  border: 1px solid rgba(232, 187, 111, .26) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,245,230,.08),
    0 8px 18px rgba(0,0,0,.20),
    0 0 0 1px rgba(255,195,108,.06) !important;
  z-index: 2 !important;
}
.story-action-list--modal .modal-open-card--with-image .modal-open-card__symbol img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.story-action-list--modal .modal-open-card__copy {
  display: grid !important;
  align-content: start !important;
  gap: 0 !important;
  min-width: 0 !important;
  padding: 2px 24px 0 0 !important;
  z-index: 2 !important;
}
.story-action-list--modal .modal-open-card__eyebrow {
  display: none !important;
}
.story-action-list--modal .modal-open-card__title {
  color: #fff6e9 !important;
  font-size: clamp(12px, 3.6vw, 14px) !important;
  line-height: 1.12 !important;
  font-weight: 760 !important;
  letter-spacing: -.03em !important;
  display: block !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  text-align: left !important;
  margin: 0 !important;
  align-self: start !important;
}
.story-action-list--modal .modal-open-card__icon {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 233, 194, .08) !important;
  border: 1px solid rgba(232, 195, 137, .16) !important;
  color: #efd2a4 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  z-index: 3 !important;
}

.audio-title {
  margin: 0 0 14px !important;
}

.tasks-section {
  margin-top: 6px !important;
}
.tasks-header {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: end !important;
  gap: 10px !important;
  margin: 0 0 12px !important;
}
.tasks-header .section-title.no-margin {
  grid-column: 2 !important;
  justify-self: center !important;
  text-align: center !important;
  font-size: 20.7px !important;
  line-height: 1.05 !important;
}
.tasks-header .task-counter {
  grid-column: 3 !important;
  justify-self: end !important;
  align-self: center !important;
}

@media (max-width: 370px) {
  .story-action-list--modal {
    gap: 10px !important;
  }
  .story-action-list--modal .modal-open-card {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    min-height: 88px !important;
    height: 88px !important;
    padding: 12px !important;
    border-radius: 20px !important;
  }
  .story-action-list--modal .modal-open-card__symbol {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    border-radius: 15px !important;
  }
  .story-action-list--modal .modal-open-card__copy {
    padding-right: 22px !important;
  }
  .story-action-list--modal .modal-open-card__title {
    font-size: 11.6px !important;
    line-height: 1.10 !important;
  }
  .story-action-list--modal .modal-open-card__icon {
    top: 11px !important;
    right: 10px !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 14px !important;
  }
  .tasks-header .section-title.no-margin {
    font-size: 19.4px !important;
  }
}


/* V71 story button structure fix: two-row content area */
.story-action-list--modal {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  width: 100% !important;
  margin-top: 12px !important;
  margin-bottom: 10px !important;
}
.story-action-list--modal .modal-open-card {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 58px minmax(0,1fr) !important;
  align-items: start !important;
  gap: 14px !important;
  min-height: 96px !important;
  height: 96px !important;
  padding: 14px !important;
  border-radius: 24px !important;
  background:
    radial-gradient(130% 160% at 0% 0%, rgba(233,176,92,.10), transparent 42%),
    linear-gradient(180deg, rgba(35,25,18,.96), rgba(29,21,16,.985)) !important;
  border: 1px solid rgba(221,165,84,.32) !important;
  box-shadow:
    0 12px 26px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,245,225,.10),
    inset 0 -1px 0 rgba(255,180,92,.06) !important;
  overflow: hidden !important;
}
.story-action-list--modal .modal-open-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, rgba(255,214,147,.05), transparent 36%, rgba(255,196,114,.04)) !important;
  pointer-events: none !important;
}
.story-action-list--modal .modal-open-card__symbol {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
  max-width: 58px !important;
  max-height: 58px !important;
  border-radius: 17px !important;
  align-self: start !important;
  justify-self: start !important;
  overflow: hidden !important;
  background: radial-gradient(circle at 34% 30%, rgba(255,214,140,.18), rgba(51,34,22,.98)) !important;
  border: 1px solid rgba(236,186,109,.22) !important;
  box-shadow: inset 0 1px 0 rgba(255,248,234,.10), 0 10px 18px rgba(0,0,0,.22) !important;
}
.story-action-list--modal .modal-open-card--with-image .modal-open-card__symbol img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.story-action-list--modal .modal-open-card__copy {
  display: grid !important;
  grid-template-rows: 18px minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 10px !important;
  min-width: 0 !important;
  width: 100% !important;
  padding: 0 !important;
  overflow: visible !important;
}
.story-action-list--modal .modal-open-card__toprow {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  min-height: 15px !important;
  max-height: 15px !important;
}
.story-action-list--modal .modal-open-card__eyebrow {
  display: none !important;
}
.story-action-list--modal .modal-open-card__icon {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  border-radius: 9px !important;
  background: rgba(255,236,206,.06) !important;
  border: 1px solid rgba(235,197,136,.15) !important;
  color: #e7c99b !important;
  font-size: 15px !important;
  line-height: 1 !important;
  box-shadow: none !important;
}
.story-action-list--modal .modal-open-card__title {
  display: block !important;
  align-self: start !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  color: #fff6e8 !important;
  font-size: clamp(13px, 3.8vw, 15px) !important;
  line-height: 1.12 !important;
  font-weight: 760 !important;
  letter-spacing: -.028em !important;
  max-width: 100% !important;
  padding-right: 0 !important;
}
.audio-title { margin: 0 0 16px !important; }
.lesson-extra-content--story { gap: 28px !important; }
.tasks-header { margin-top: 2px !important; }
.tasks-header .section-title.no-margin {
  text-align: center !important;
  justify-self: center !important;
  font-size: 21.6px !important;
}
@media (max-width: 370px) {
  .story-action-list--modal { gap: 12px !important; }
  .story-action-list--modal .modal-open-card {
    grid-template-columns: 54px minmax(0,1fr) !important;
    min-height: 92px !important;
    height: 92px !important;
    padding: 12px !important;
    gap: 12px !important;
    border-radius: 22px !important;
  }
  .story-action-list--modal .modal-open-card__symbol {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
    max-width: 54px !important;
    max-height: 54px !important;
  }
  .story-action-list--modal .modal-open-card__copy {
    grid-template-rows: 17px minmax(0,1fr) !important;
    gap: 0 !important;
  }
  .story-action-list--modal .modal-open-card__toprow {
    min-height: 17px !important;
    max-height: 17px !important;
  }
  .story-action-list--modal .modal-open-card__icon {
    width: 23px !important;
    height: 23px !important;
    min-width: 23px !important;
    min-height: 23px !important;
    font-size: 14px !important;
  }
  .story-action-list--modal .modal-open-card__title {
    font-size: 12.6px !important;
    line-height: 1.10 !important;
  }
}


/* V72 story action button polish */
.story-action-list--modal {
  gap: 14px !important;
  margin-top: 14px !important;
  margin-bottom: 14px !important;
}
.story-action-list--modal .modal-open-card {
  grid-template-columns: 66px minmax(0,1fr) !important;
  gap: 10px !important;
  min-height: 88px !important;
  height: 88px !important;
  padding: 12px 14px 12px 12px !important;
  border-radius: 24px !important;
  background:
    radial-gradient(120% 150% at 0% 0%, rgba(214,146,62,.08), transparent 42%),
    linear-gradient(180deg, rgba(34,25,19,.985), rgba(29,21,16,.995)) !important;
  border: 1px solid rgba(213,154,74,.26) !important;
  box-shadow: 0 14px 26px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,246,230,.06) !important;
}
.story-action-list--modal .modal-open-card__symbol {
  width: 66px !important;
  height: 66px !important;
  min-width: 66px !important;
  min-height: 66px !important;
  max-width: 66px !important;
  max-height: 66px !important;
  border-radius: 16px !important;
  margin-left: -2px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
.story-action-list--modal .modal-open-card--with-image .modal-open-card__symbol img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transform: scale(1.22) !important;
  display: block !important;
  filter: saturate(1.02) brightness(1.02) !important;
}
.story-action-list--modal .modal-open-card__copy {
  grid-template-rows: 18px minmax(0, 1fr) !important;
  gap: 6px !important;
}
.story-action-list--modal .modal-open-card__toprow {
  justify-content: flex-end !important;
  align-items: flex-start !important;
  min-height: 15px !important;
  max-height: 15px !important;
  padding-right: 0 !important;
}
.story-action-list--modal .modal-open-card__icon {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  border-radius: 9px !important;
  margin-right: -2px !important;
  margin-top: -1px !important;
  background: rgba(255,236,206,.05) !important;
  border: 1px solid rgba(235,197,136,.14) !important;
  color: #e6c594 !important;
  font-size: 16px !important;
}
.story-action-list--modal .modal-open-card__title {
  font-size: clamp(12px, 3.45vw, 14px) !important;
  line-height: 1.08 !important;
  font-weight: 740 !important;
  letter-spacing: -.024em !important;
  align-self: start !important;
  margin-top: 1px !important;
  max-width: 94% !important;
}
.tasks-header {
  margin-top: 12px !important;
}
.tasks-header .section-title.no-margin {
  text-align: center !important;
  justify-self: center !important;
  font-size: 22.5px !important;
  line-height: 1.16 !important;
}
@media (max-width: 370px) {
  .story-action-list--modal .modal-open-card {
    grid-template-columns: 62px minmax(0,1fr) !important;
    min-height: 84px !important;
    height: 84px !important;
    padding: 11px 12px 11px 10px !important;
    gap: 9px !important;
  }
  .story-action-list--modal .modal-open-card__symbol {
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    min-height: 62px !important;
    max-width: 62px !important;
    max-height: 62px !important;
    margin-left: -2px !important;
  }
  .story-action-list--modal .modal-open-card--with-image .modal-open-card__symbol img {
    transform: scale(1.24) !important;
  }
  .story-action-list--modal .modal-open-card__icon {
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    min-height: 25px !important;
    font-size: 15px !important;
    margin-right: -2px !important;
  }
  .story-action-list--modal .modal-open-card__title {
    font-size: 11.6px !important;
    line-height: 1.06 !important;
    max-width: 96% !important;
  }
}


/* V74 icon cleanup: transparent no-frame icons */
.story-action-list--modal .modal-open-card__symbol {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.story-action-list--modal .modal-open-card--with-image .modal-open-card__symbol img {
  object-fit: contain !important;
  transform: scale(1.08) !important;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.20)) saturate(1.04) brightness(1.03) !important;
}


/* V75 replace PNG icons with clean vector icons */
.story-action-list--modal .modal-open-card--with-vector .modal-open-card__symbol {
  background:
    radial-gradient(circle at 34% 28%, rgba(255,215,142,.14), rgba(33,23,17,.94) 68%) !important;
  border: 1px solid rgba(221, 162, 82, .20) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,245,230,.08),
    0 10px 18px rgba(0,0,0,.20) !important;
}
.story-action-list--modal .modal-open-card--with-vector .modal-open-card__symbol svg {
  width: 92% !important;
  height: 92% !important;
  display: block !important;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.18));
}


/* V76 clean SVG asset icons + calmer story buttons */
.story-action-list--modal .modal-open-card--with-vector .modal-open-card__symbol,
.story-action-list--modal .modal-open-card--with-vector .modal-open-card__symbol svg {
  all: unset;
}
.story-action-list--modal .modal-open-card__symbol {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.story-action-list--modal .modal-open-card--with-image .modal-open-card__symbol img {
  object-fit: contain !important;
  transform: none !important;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.22)) saturate(1.02) brightness(1.02) !important;
}
.story-action-list--modal .modal-open-card__title {
  font-size: clamp(12px, 3.35vw, 13.5px) !important;
  line-height: 1.08 !important;
}


/* V77 reference-style story material buttons */
.story-action-list--modal {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 14px !important;
  margin-bottom: 26px !important;
  width: 100% !important;
}

.story-action-list--modal .modal-open-card {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0,1fr) 16px !important;
  align-items: center !important;
  column-gap: 9px !important;
  min-height: 58px !important;
  height: 58px !important;
  padding: 11px 12px !important;
  border-radius: 15px !important;
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(247,199,119,.10), transparent 42%),
    linear-gradient(180deg, rgba(30,22,27,.96), rgba(19,15,20,.98)) !important;
  border: 1px solid rgba(220, 170, 95, .36) !important;
  box-shadow:
    0 10px 20px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,239,210,.08),
    0 0 18px rgba(221, 162, 82, .055) !important;
  overflow: hidden !important;
  text-align: left !important;
}

.story-action-list--modal .modal-open-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, rgba(255,219,154,.055), transparent 48%) !important;
  pointer-events: none !important;
}

.story-action-list--modal .modal-open-card__symbol {
  grid-column: 1 !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  z-index: 2 !important;
}

.story-action-list--modal .modal-open-card--with-image .modal-open-card__symbol img {
  display: block !important;
  width: 32px !important;
  height: 32px !important;
  object-fit: contain !important;
  transform: none !important;
  filter: drop-shadow(0 3px 7px rgba(0,0,0,.22)) !important;
}

.story-action-list--modal .modal-open-card__copy {
  grid-column: 2 !important;
  display: block !important;
  min-width: 0 !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 2 !important;
}

.story-action-list--modal .modal-open-card__toprow {
  display: none !important;
}

.story-action-list--modal .modal-open-card__eyebrow {
  display: none !important;
}

.story-action-list--modal .modal-open-card__title {
  display: block !important;
  color: #efd19c !important;
  font-size: clamp(11.5px, 3.15vw, 13px) !important;
  line-height: 1.16 !important;
  font-weight: 520 !important;
  letter-spacing: -.01em !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  text-align: left !important;
  margin: 0 !important;
  max-width: 100% !important;
}

.story-action-list--modal .modal-open-card__icon {
  grid-column: 3 !important;
  position: relative !important;
  display: flex !important;
  top: auto !important;
  right: auto !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #dba45a !important;
  font-size: 18px !important;
  line-height: 1 !important;
  opacity: .95 !important;
  z-index: 2 !important;
}

.story-action-list--modal .modal-open-card:hover,
.story-action-list--modal .modal-open-card:active {
  border-color: rgba(236, 191, 118, .52) !important;
  box-shadow:
    0 12px 22px rgba(0,0,0,.23),
    inset 0 1px 0 rgba(255,239,210,.11),
    0 0 22px rgba(221, 162, 82, .075) !important;
}

@media (max-width: 370px) {
  .story-action-list--modal {
    gap: 9px !important;
  }

  .story-action-list--modal .modal-open-card {
    grid-template-columns: 30px minmax(0,1fr) 14px !important;
    column-gap: 7px !important;
    min-height: 54px !important;
    height: 54px !important;
    padding: 10px 10px !important;
    border-radius: 14px !important;
  }

  .story-action-list--modal .modal-open-card__symbol,
  .story-action-list--modal .modal-open-card--with-image .modal-open-card__symbol img {
    width: 29px !important;
    height: 29px !important;
    min-width: 29px !important;
    min-height: 29px !important;
    max-width: 29px !important;
    max-height: 29px !important;
  }

  .story-action-list--modal .modal-open-card__title {
    font-size: 11px !important;
    line-height: 1.12 !important;
  }

  .story-action-list--modal .modal-open-card__icon {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    font-size: 16px !important;
  }
}


/* V78 warm button tone + reduced gap before tasks */
.story-action-list--modal {
  margin-bottom: 10px !important;
}

.lesson-extra-content--story {
  gap: 12px !important;
}

.tasks-section {
  margin-top: 0 !important;
}

.tasks-header {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

.story-action-list--modal .modal-open-card {
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(224, 163, 82, .12), transparent 42%),
    linear-gradient(180deg, rgba(46, 34, 25, .98), rgba(27, 21, 17, .99)) !important;
  border-color: rgba(221, 166, 91, .34) !important;
  box-shadow:
    0 10px 20px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,239,210,.08),
    0 0 18px rgba(221, 162, 82, .045) !important;
}

.story-action-list--modal .modal-open-card::before {
  background:
    linear-gradient(135deg, rgba(255,213,144,.055), transparent 48%),
    radial-gradient(circle at 100% 0%, rgba(186,111,41,.05), transparent 35%) !important;
}

.story-action-list--modal .modal-open-card__title {
  color: #f1d4a2 !important;
}

.story-action-list--modal .modal-open-card__icon {
  color: #dca45c !important;
}

.tasks-header .section-title.no-margin {
  color: var(--cream) !important;
}


/* V79 inline descriptions for emotive adventures and relives */
.immersive-info-wrap--inline {
  display: block;
  margin-top: 14px;
}
.immersive-info-wrap--inline .immersive-info-card {
  margin: 0 !important;
  border: 1px solid rgba(207, 163, 94, .42) !important;
  border-radius: 24px !important;
  padding: 18px 18px 20px !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 240, 206, .88), transparent 34%),
    radial-gradient(circle at 100% 0%, rgba(236, 193, 120, .30), transparent 34%),
    linear-gradient(180deg, rgba(244, 230, 202, .98), rgba(226, 199, 156, .98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 12px 26px rgba(0,0,0,.16) !important;
}
.immersive-info-wrap--inline .content-eyebrow {
  color: rgba(125, 80, 29, .88) !important;
}
.immersive-info-wrap--inline .immersive-info-card h2 {
  color: #3f2814 !important;
}
.immersive-info-wrap--inline .immersive-info-card p,
.immersive-info-wrap--inline .immersive-info-card li {
  color: rgba(72, 48, 27, .92) !important;
}

body.is-lesson-route .lesson-page-new > .immersive-info-wrap--inline {
  margin-left: 18px !important;
  margin-right: 18px !important;
  width: auto !important;
  max-width: none !important;
}


/* V80 immersive heading and tasks arrow refinement */
.immersive-info-wrap--inline .immersive-info-card--inline-description .content-eyebrow {
  display: inline-block !important;
  margin-bottom: 12px !important;
  color: rgba(125, 80, 29, .88) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 820 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

.immersive-info-wrap--inline .immersive-info-card--inline-description h2 {
  margin-top: 0 !important;
}

.task-counter {
  font-size: 0 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 999px !important;
  color: #f0d4a4 !important;
  border: 1px solid rgba(227, 177, 96, .28) !important;
  background: rgba(20, 15, 11, .28) !important;
}

.task-counter::before {
  content: "→" !important;
  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 420 !important;
  color: #f0d4a4 !important;
  transform: translateY(-1px);
}


/* V84 library books: unified size, preserved spine volume, no visible duplicate titles */
.story-rail {
  display: flex !important;
  align-items: flex-end !important;
  gap: 0 !important;
  overflow-x: auto !important;
  padding: 4px 0 8px !important;
}
.story-card {
  margin-right: -6px !important;
  position: relative !important;
  flex: 0 0 126px !important;
  width: 126px !important;
  height: 218px !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  background-image: none !important;
}
.story-card__backdrop {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 28px !important;
  bottom: 14px !important;
  border-radius: 28px !important;
  background: radial-gradient(ellipse at 50% 45%, rgba(166, 112, 45, .18) 0%, rgba(116, 76, 30, .12) 38%, rgba(58, 35, 17, .04) 70%, rgba(0, 0, 0, 0) 100%) !important;
  filter: blur(14px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.story-card::after {
  content: '' !important;
  position: absolute !important;
  left: 16px !important;
  right: 16px !important;
  bottom: 10px !important;
  height: 15px !important;
  border-radius: 999px !important;
  background: radial-gradient(ellipse at center, rgba(211, 162, 84, .28) 0%, rgba(211, 162, 84, .10) 45%, rgba(211, 162, 84, 0) 78%) !important;
  filter: blur(9px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.story-card__book {
  position: absolute !important;
  left: 50% !important;
  bottom: 10px !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  height: 192px !important;
  max-width: 124px !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.28)) drop-shadow(0 2px 8px rgba(0,0,0,.16)) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
.story-card__overlay,
.story-card__title {
  display: none !important;
}
.lesson-thumb {
  background-size: cover !important;
  background-position: center center !important;
}


/* V88 library refinements: shelf nudged left + full-height book covers in library list */
.story-rail {
  margin-left: -10px !important;
  padding-left: 0 !important;
}
.story-card:first-child {
  margin-left: 0 !important;
}

.lesson-list-row--library {
  grid-template-columns: 74px 1fr auto !important;
  min-height: 98px !important;
  padding: 10px 12px 10px 10px !important;
  gap: 14px !important;
}
.lesson-book-cover {
  width: 60px !important;
  height: 86px !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center center !important;
  justify-self: start !important;
  align-self: center !important;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.24)) drop-shadow(0 2px 6px rgba(0,0,0,.14)) !important;
}
.lesson-list-row--library .row-title {
  font-size: 15px !important;
  line-height: 1.14 !important;
}
.lesson-list-row--library .row-text {
  font-size: 11.8px !important;
}

@media (max-width: 420px) {
  .lesson-list-row--library {
    grid-template-columns: 68px 1fr auto !important;
    min-height: 92px !important;
    gap: 12px !important;
  }
  .lesson-book-cover {
    width: 54px !important;
    height: 78px !important;
  }
}


/* V89: larger library book covers, subtitle replaced by story title */
.lesson-list-row--library {
  grid-template-columns: 88px 1fr auto !important;
  min-height: 112px !important;
  padding: 8px 12px 8px 10px !important;
  gap: 16px !important;
}
.lesson-book-cover {
  width: 74px !important;
  height: 104px !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center center !important;
  justify-self: start !important;
  align-self: center !important;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.24)) drop-shadow(0 2px 6px rgba(0,0,0,.14)) !important;
}
.lesson-list-row--library .row-title {
  font-size: 15px !important;
  line-height: 1.12 !important;
  margin-bottom: 4px !important;
}
.lesson-list-row--library .row-text {
  font-size: 13px !important;
  line-height: 1.14 !important;
  color: rgba(255,244,228,.8) !important;
}
@media (max-width: 420px) {
  .lesson-list-row--library {
    grid-template-columns: 82px 1fr auto !important;
    min-height: 106px !important;
    gap: 14px !important;
  }
  .lesson-book-cover {
    width: 68px !important;
    height: 98px !important;
  }
}


/* V90: tighter library section, divider, larger books in library list */
.library-cutoff {
  height: 1px;
  margin: 14px 0 10px;
  background: linear-gradient(90deg, rgba(243,216,164,0), rgba(243,216,164,.18) 16%, rgba(243,216,164,.28) 50%, rgba(243,216,164,.18) 84%, rgba(243,216,164,0));
  opacity: .9;
}
.section-header-inline--library {
  margin: 0 0 6px !important;
}
.story-rail--library {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.lesson-list-row--library {
  grid-template-columns: 96px 1fr auto !important;
  min-height: 124px !important;
  padding: 6px 12px 6px 10px !important;
  gap: 14px !important;
}
.lesson-book-cover {
  width: 82px !important;
  height: 116px !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center center !important;
  justify-self: start !important;
  align-self: center !important;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.24)) drop-shadow(0 2px 6px rgba(0,0,0,.14)) !important;
}
.lesson-list-row--library .row-title {
  font-size: 15px !important;
  line-height: 1.08 !important;
  margin-bottom: 6px !important;
}
.lesson-list-row--library .row-text {
  font-size: 13px !important;
  line-height: 1.16 !important;
  color: rgba(255,244,228,.82) !important;
}
@media (max-width: 420px) {
  .lesson-list-row--library {
    grid-template-columns: 92px 1fr auto !important;
    min-height: 118px !important;
    gap: 12px !important;
  }
  .lesson-book-cover {
    width: 78px !important;
    height: 110px !important;
  }
}


/* V91: library page uses full-width spine cards from uploaded shelf images */
.list--library-spines {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  margin-top: 6px !important;
}
.library-spine-card {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
.library-spine-card__image {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.module-page .list--library-spines .library-spine-card + .library-spine-card {
  margin-top: 2px !important;
}
.module-page .list--library-spines .library-spine-card:focus-visible {
  outline: 2px solid rgba(243,216,164,.7) !important;
  outline-offset: 2px !important;
}


/* V92: library page black stage + cropped shelf spine cards */
.module-page--library {
  background: #000 !important;
  min-height: 100vh;
  margin-left: -18px;
  margin-right: -18px;
  padding-left: 18px;
  padding-right: 18px;
  padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
}
.module-page--library .module-topline,
.module-page--library .module-head,
.module-page--library .module-description,
.module-page--library .pills,
.module-page--library .section-title,
.module-page--library .list--library-spines {
  position: relative;
  z-index: 1;
}
.module-page--library .list--library-spines {
  gap: 2px !important;
  margin-top: 4px !important;
}
.module-page--library .library-spine-card {
  overflow: hidden !important;
}
.module-page--library .library-spine-card__image {
  width: 100% !important;
  height: 104px !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
}
.module-page--library .list--library-spines .library-spine-card + .library-spine-card {
  margin-top: 0 !important;
}
@media (min-width: 420px) {
  .module-page--library .library-spine-card__image {
    height: 112px !important;
  }
}


/* V105: learning page library rail – clickable header button, divider air, stable book spacing */
.learning-page .library-cutoff {
  margin: 32px 0 12px !important;
}
.learning-page .section-header-inline--library {
  position: relative !important;
  z-index: 10 !important;
  margin: 0 0 0 !important;
  pointer-events: auto !important;
}
.learning-page .section-header-inline--library .link-btn {
  position: relative !important;
  z-index: 11 !important;
  min-height: 34px !important;
  padding: 6px 0 6px 14px !important;
  pointer-events: auto !important;
}
.learning-page .story-rail--library {
  position: relative !important;
  z-index: 1 !important;
  margin-top: -7px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  gap: 5px !important;
}
.learning-page .story-rail--library .story-card {
  flex: 0 0 132px !important;
  width: 132px !important;
  height: 236px !important;
  margin-right: 0 !important;
}
.learning-page .story-rail--library .story-card__book {
  height: 212px !important;
  max-width: 132px !important;
}
.learning-page .story-rail--library .story-card:first-child {
  margin-left: -6px !important;
}


/* V109 task cards: near-full-width carousel + denser image presentation */
.tasks-carousel {
  gap: 10px !important;
  padding: 4px 0 18px !important;
  scroll-snap-type: x mandatory !important;
  scroll-padding-left: 0 !important;
}
.task-card--image-only {
  flex: 0 0 calc(100vw - 36px) !important;
  width: calc(100vw - 36px) !important;
  max-width: none !important;
}
.task-card--image-only .task-card__image,
.task-card--image-only > .task-card__image {
  width: 100% !important;
  height: auto !important;
  border-radius: 26px !important;
}
@media (min-width: 700px) {
  .task-card--image-only {
    flex-basis: min(560px, calc(100vw - 72px)) !important;
    width: min(560px, calc(100vw - 72px)) !important;
  }
}

/* V110: task-card notes, carousel hint arrow, emotions-card modal trigger */
.tasks-header {
  align-items: center !important;
  gap: 12px !important;
}
.task-carousel-next {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 10px 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(224, 171, 92, .34);
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(243,216,164,.18), transparent 46%),
    linear-gradient(180deg, rgba(51,34,22,.82), rgba(29,20,15,.92));
  color: rgba(255,239,205,.94);
  box-shadow:
    0 10px 22px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,245,228,.10);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.task-carousel-next__label {
  font-size: 11px;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
}
.task-carousel-next__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f1d394, #bd8541);
  color: #27180d;
  font-size: 17px;
  line-height: 1;
  font-weight: 800;
  box-shadow: 0 0 18px rgba(226,174,92,.25);
}
.task-carousel-next:active {
  transform: translateY(1px);
}
.task-card--image-only {
  position: relative !important;
}
.task-card__note-overlay {
  position: absolute;
  left: 11.8%;
  right: 11.8%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding: 8px 10px 9px;
  border-radius: 14px;
  border: 1px solid rgba(151, 106, 45, .22);
  background: rgba(255, 242, 210, .54);
  color: #4a3424;
  box-shadow: 0 8px 18px rgba(89, 56, 21, .08), inset 0 1px 0 rgba(255,255,255,.24);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(12px, 3.28vw, 18px);
  line-height: 1.28;
}
.task-card__note-overlay--emotion {
  top: 61.0%;
}
.task-card__note-overlay--retell {
  top: 44.7%;
}
.task-card__emotion-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(91, 54, 24, .28);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255,231,166,.28), transparent 48%),
    linear-gradient(180deg, rgba(94,59,29,.96), rgba(57,35,20,.98));
  color: #fae4b4;
  box-shadow: 0 8px 16px rgba(65, 39, 18, .16), inset 0 1px 0 rgba(255,242,202,.16);
  font: inherit;
  font-size: clamp(11.5px, 3.05vw, 15.5px);
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.task-card__emotion-btn:active {
  transform: translateY(1px);
}
.story-emotions-card {
  min-height: 190px;
}
@media (max-width: 380px) {
  .task-carousel-next {
    gap: 5px;
    padding-left: 9px;
    padding-right: 8px;
  }
  .task-carousel-next__label {
    font-size: 10px;
  }
  .task-carousel-next__arrow {
    width: 21px;
    height: 21px;
    font-size: 16px;
  }
  .task-card__note-overlay {
    font-size: 11.8px;
    padding: 7px 9px 8px;
  }
}


/* V111: quieter task carousel hint + footnote notes without white patches */
.tasks-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 4px 0 10px !important;
}
.tasks-header .section-title.no-margin {
  grid-column: 1 !important;
  justify-self: start !important;
  align-self: center !important;
  max-width: none !important;
  text-align: left !important;
  white-space: nowrap !important;
  font-size: clamp(25px, 6.75vw, 35px) !important;
  line-height: 1 !important;
  letter-spacing: -.06em !important;
}
.task-carousel-next {
  grid-column: 2 !important;
  justify-self: end !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  min-width: 46px !important;
  min-height: 54px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(255, 238, 205, .88) !important;
  box-shadow: none !important;
}
.task-carousel-next__arrow {
  order: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background:
    radial-gradient(115% 120% at 28% 18%, rgba(255, 242, 202, .74), transparent 36%),
    linear-gradient(180deg, #f1d394, #bd8541) !important;
  color: #28190e !important;
  font-size: 27px !important;
  line-height: 1 !important;
  font-weight: 820 !important;
  box-shadow:
    0 0 18px rgba(226,174,92,.28),
    0 9px 18px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,248,222,.45) !important;
}
.task-carousel-next__label {
  order: 2 !important;
  display: block !important;
  font-size: 9.6px !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
  color: rgba(255, 238, 205, .72) !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.42) !important;
}
.task-carousel-next:active {
  transform: translateY(1px) !important;
}
.task-card__note-overlay {
  left: 13.2% !important;
  right: 10.5% !important;
  display: block !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #4a3322 !important;
  font-family: 'Literaturnaya', 'Book Antiqua', 'Times New Roman', serif !important;
  font-size: clamp(13px, 3.42vw, 18px) !important;
  line-height: 1.24 !important;
  text-shadow: 0 1px 0 rgba(255, 246, 219, .46) !important;
}
.task-card__note-overlay > span {
  position: relative !important;
  display: block !important;
  padding-left: 25px !important;
}
.task-card__note-overlay > span::before {
  content: "✦" !important;
  position: absolute !important;
  left: 0 !important;
  top: -.03em !important;
  color: #b3883f !important;
  font-size: 1.12em !important;
  line-height: 1 !important;
  text-shadow: 0 0 10px rgba(181, 136, 60, .22), 0 1px 0 rgba(255,246,219,.50) !important;
}
.task-card__note-overlay--emotion {
  top: 61.2% !important;
}
.task-card__note-overlay--retell {
  top: 45.2% !important;
}
.task-card__emotion-btn {
  margin: 8px 0 0 25px !important;
}
@media (max-width: 380px) {
  .tasks-header .section-title.no-margin {
    font-size: clamp(23.5px, 6.55vw, 28px) !important;
  }
  .task-carousel-next {
    min-width: 43px !important;
    min-height: 50px !important;
  }
  .task-carousel-next__arrow {
    width: 35px !important;
    height: 35px !important;
    font-size: 25px !important;
  }
  .task-carousel-next__label {
    font-size: 9px !important;
  }
  .task-card__note-overlay {
    font-size: 12.4px !important;
  }
}


/* V112: smaller swipe arrow, more air before task footnotes, sharper retell badge line */
.task-carousel-next {
  min-width: 38px !important;
  min-height: 54px !important;
  gap: 8px !important;
}
.task-carousel-next__arrow {
  width: 30px !important;
  height: 30px !important;
  font-size: 22px !important;
}
.task-carousel-next__label {
  margin-top: 2px !important;
}
.task-card__note-overlay--emotion {
  top: 63.7% !important;
}
.task-card__note-overlay--retell {
  top: 48.0% !important;
}
@media (max-width: 380px) {
  .task-carousel-next {
    min-width: 36px !important;
    min-height: 51px !important;
    gap: 7px !important;
  }
  .task-carousel-next__arrow {
    width: 28px !important;
    height: 28px !important;
    font-size: 20px !important;
  }
  .task-carousel-next__label {
    margin-top: 2px !important;
  }
}


/* V113: centered quieter task heading, smaller softer swipe arrow, clearer footnote marks */
.tasks-header {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 4px 0 10px !important;
  min-height: 48px !important;
}
.tasks-header .section-title.no-margin {
  grid-column: 1 !important;
  justify-self: center !important;
  width: 100% !important;
  max-width: calc(100% - 56px) !important;
  text-align: center !important;
  white-space: nowrap !important;
  font-size: clamp(22.5px, 6.1vw, 31.5px) !important;
  line-height: .98 !important;
  letter-spacing: -.06em !important;
}
.task-carousel-next {
  position: absolute !important;
  top: 50% !important;
  right: 0 !important;
  transform: translateY(-50%) !important;
  min-width: 34px !important;
  min-height: 48px !important;
  gap: 8px !important;
  opacity: .88 !important;
}
.task-carousel-next__arrow {
  width: 24px !important;
  height: 24px !important;
  font-size: 18px !important;
  opacity: .74 !important;
  background:
    radial-gradient(112% 120% at 28% 18%, rgba(255, 243, 207, .54), transparent 35%),
    linear-gradient(180deg, rgba(239, 210, 149, .86), rgba(188, 133, 65, .84)) !important;
  box-shadow:
    0 0 10px rgba(226,174,92,.16),
    0 5px 10px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,248,222,.32) !important;
}
.task-carousel-next__label {
  font-size: 9px !important;
  line-height: 1 !important;
  color: rgba(255, 238, 205, .64) !important;
}
.task-carousel-next:active {
  transform: translateY(calc(-50% + 1px)) !important;
}
.task-card__note-overlay > span {
  padding-left: 25px !important;
}
.task-card__note-overlay > span::before {
  content: "✳" !important;
  top: .22em !important;
  font-size: .68em !important;
  color: rgba(179, 136, 63, .92) !important;
  text-shadow: 0 0 8px rgba(181, 136, 60, .16), 0 1px 0 rgba(255,246,219,.42) !important;
}
@media (max-width: 380px) {
  .tasks-header .section-title.no-margin {
    font-size: clamp(21.5px, 6vw, 26px) !important;
    max-width: calc(100% - 52px) !important;
  }
  .task-carousel-next {
    min-width: 32px !important;
    min-height: 46px !important;
  }
  .task-carousel-next__arrow {
    width: 23px !important;
    height: 23px !important;
    font-size: 17px !important;
  }
  .task-carousel-next__label {
    font-size: 8.8px !important;
  }
}


/* V114: center task heading across the screen + non-emoji gold footnote mark */
.tasks-header .section-title.no-margin {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  justify-self: auto !important;
  width: auto !important;
  max-width: none !important;
  text-align: center !important;
  font-size: clamp(21px, 5.75vw, 29px) !important;
  line-height: 1 !important;
}
.task-card__note-overlay > span::before {
  content: "" !important;
  width: .62em !important;
  height: .62em !important;
  top: .36em !important;
  left: .07em !important;
  display: block !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 244, 201, .88) 0 15%, transparent 16%),
    conic-gradient(from 22.5deg,
      rgba(181, 136, 63, .92) 0 12.5%, transparent 12.5% 25%,
      rgba(181, 136, 63, .92) 25% 37.5%, transparent 37.5% 50%,
      rgba(181, 136, 63, .92) 50% 62.5%, transparent 62.5% 75%,
      rgba(181, 136, 63, .92) 75% 87.5%, transparent 87.5% 100%) !important;
  border-radius: 50% !important;
  filter: drop-shadow(0 0 4px rgba(181,136,60,.18)) !important;
  text-shadow: none !important;
}
@media (max-width: 380px) {
  .tasks-header .section-title.no-margin {
    font-size: clamp(20.5px, 5.65vw, 25px) !important;
  }
}


/* V114 final: geometric eight-point gold footnote mark */
.task-card__note-overlay > span::before {
  width: .58em !important;
  height: .58em !important;
  top: .38em !important;
  left: .08em !important;
  background: linear-gradient(180deg, rgba(220, 176, 82, .96), rgba(151, 105, 43, .94)) !important;
  clip-path: polygon(50% 0%, 61% 32%, 95% 5%, 68% 39%, 100% 50%, 68% 61%, 95% 95%, 61% 68%, 50% 100%, 39% 68%, 5% 95%, 32% 61%, 0% 50%, 32% 39%, 5% 5%, 39% 32%) !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 0 4px rgba(181,136,60,.20)) !important;
}


/* V115: reusable approved fairy task-card templates for all fairy tales except the first talent story */
.task-card--template {
  position: relative !important;
  flex: 0 0 calc(100vw - 36px) !important;
  width: calc(100vw - 36px) !important;
  max-width: none !important;
  min-height: 0 !important;
  aspect-ratio: 925 / 1701 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(214, 181, 130, .38) !important;
  border-radius: 26px !important;
  background: var(--task-card-bg) center / cover no-repeat !important;
  box-shadow: 0 16px 32px rgba(0,0,0,.20) !important;
  color: #4a3322 !important;
}
.task-card--template::after { display: none !important; }
.task-template__inner {
  position: absolute !important;
  inset: 0 !important;
  padding: 0 !important;
  font-family: 'Literaturnaya', 'Book Antiqua', 'Times New Roman', serif !important;
  color: #4a3322 !important;
  text-shadow: 0 1px 0 rgba(255, 246, 219, .48) !important;
}
.task-template__number {
  position: absolute !important;
  top: 5.8% !important;
  right: 8.6% !important;
  min-width: 34px !important;
  text-align: center !important;
  font-size: clamp(14px, 4.0vw, 25px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #3e291a !important;
}
.task-template__title {
  position: absolute !important;
  left: 11.5% !important;
  right: 11.5% !important;
  top: 5.2% !important;
  margin: 0 !important;
  color: #332217 !important;
  font-family: 'Literaturnaya', 'Book Antiqua', 'Times New Roman', serif !important;
  font-size: clamp(22px, 6.05vw, 40px) !important;
  line-height: 1.04 !important;
  font-weight: 500 !important;
  text-align: center !important;
  letter-spacing: -.035em !important;
}
.task-template__description {
  position: absolute !important;
  left: 10.5% !important;
  right: 10.5% !important;
  top: 20.2% !important;
  margin: 0 !important;
  padding: clamp(8px, 2.35vw, 16px) clamp(11px, 3vw, 22px) !important;
  border-radius: 18px !important;
  border: 1px solid rgba(153, 104, 43, .42) !important;
  background: rgba(247, 224, 177, .56) !important;
  box-shadow: inset 0 1px 0 rgba(255,248,226,.42), 0 5px 11px rgba(96, 61, 24, .08) !important;
  color: #473121 !important;
  font-family: 'Literaturnaya', 'Book Antiqua', 'Times New Roman', serif !important;
  font-size: clamp(11.5px, 3.08vw, 20px) !important;
  line-height: 1.28 !important;
  text-align: center !important;
}
.task-template__items {
  position: absolute !important;
  left: 11.3% !important;
  right: 8.7% !important;
  top: 37.0% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: grid !important;
  gap: clamp(8px, 2.4vw, 17px) !important;
}
.task-template__items li {
  position: relative !important;
  margin: 0 !important;
  padding-left: clamp(26px, 7.3vw, 49px) !important;
  color: #453021 !important;
  font-family: 'Literaturnaya', 'Book Antiqua', 'Times New Roman', serif !important;
  font-size: clamp(15px, 4.22vw, 27px) !important;
  line-height: 1.25 !important;
  font-weight: 400 !important;
}
.task-template__items li::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: .19em !important;
  width: clamp(14px, 4.2vw, 26px) !important;
  height: clamp(14px, 4.2vw, 26px) !important;
  background: linear-gradient(180deg, rgba(218, 171, 69, .96), rgba(153, 105, 42, .94)) !important;
  clip-path: polygon(50% 0%, 61% 32%, 95% 5%, 68% 39%, 100% 50%, 68% 61%, 95% 95%, 61% 68%, 50% 100%, 39% 68%, 5% 95%, 32% 61%, 0% 50%, 32% 39%, 5% 5%, 39% 32%) !important;
  filter: drop-shadow(0 0 5px rgba(181,136,60,.22)) !important;
}
.task-template__note {
  position: relative !important;
  display: block !important;
  margin-top: clamp(12px, 3.4vw, 24px) !important;
  padding-left: clamp(26px, 7.3vw, 49px) !important;
  color: #4a3322 !important;
  font-family: 'Literaturnaya', 'Book Antiqua', 'Times New Roman', serif !important;
  font-size: clamp(13px, 3.72vw, 23px) !important;
  line-height: 1.23 !important;
}
.task-template__note::before {
  content: '' !important;
  position: absolute !important;
  left: .2em !important;
  top: .34em !important;
  width: .58em !important;
  height: .58em !important;
  background: linear-gradient(180deg, rgba(220, 176, 82, .96), rgba(151, 105, 43, .94)) !important;
  clip-path: polygon(50% 0%, 61% 32%, 95% 5%, 68% 39%, 100% 50%, 68% 61%, 95% 95%, 61% 68%, 50% 100%, 39% 68%, 5% 95%, 32% 61%, 0% 50%, 32% 39%, 5% 5%, 39% 32%) !important;
  filter: drop-shadow(0 0 4px rgba(181,136,60,.20)) !important;
}
.task-template__note span {
  display: block !important;
}
.task-card--template .task-card__emotion-btn {
  margin: clamp(6px, 1.7vw, 11px) 0 0 0 !important;
}
.task-card--template-intro .task-template__title {
  left: 11% !important;
  right: 11% !important;
  top: 14.4% !important;
  font-size: clamp(24px, 6.5vw, 43px) !important;
  line-height: 1.12 !important;
}
.task-card--template-intro .task-template__description {
  display: none !important;
}
.task-card--template-intro .task-template__items {
  left: 13.5% !important;
  right: 22% !important;
  top: 44.0% !important;
  gap: clamp(9px, 2.65vw, 19px) !important;
}
.task-card--template-intro .task-template__items li {
  font-size: clamp(14.5px, 4.08vw, 26px) !important;
  line-height: 1.25 !important;
}
.task-card--template-final .task-template__title {
  left: 12% !important;
  right: 12% !important;
  top: 23% !important;
  font-size: clamp(29px, 8.7vw, 56px) !important;
  font-weight: 600 !important;
  line-height: 1.06 !important;
}
.task-card--template-final .task-template__description {
  left: 17% !important;
  right: 17% !important;
  top: 42% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: clamp(14px, 4.0vw, 25px) !important;
  line-height: 1.32 !important;
}
.task-card--template-final .task-template__items,
.task-card--template-final .task-template__note { display: none !important; }
.task-card--template-retell .task-template__items { top: 37.2% !important; }
.task-card--template-retell .task-template__note { margin-top: clamp(16px, 4.2vw, 30px) !important; }
.task-card--dense-1 .task-template__description {
  font-size: clamp(10.8px, 2.9vw, 18.5px) !important;
  line-height: 1.24 !important;
}
.task-card--dense-1 .task-template__items {
  gap: clamp(6px, 1.75vw, 13px) !important;
}
.task-card--dense-1 .task-template__items li {
  font-size: clamp(13.2px, 3.62vw, 23px) !important;
  line-height: 1.19 !important;
}
.task-card--dense-2 .task-template__description {
  font-size: clamp(10.2px, 2.72vw, 17px) !important;
  line-height: 1.18 !important;
  padding-top: clamp(7px, 2vw, 13px) !important;
  padding-bottom: clamp(7px, 2vw, 13px) !important;
}
.task-card--dense-2 .task-template__items {
  top: 35.7% !important;
  gap: clamp(5px, 1.35vw, 10px) !important;
}
.task-card--dense-2 .task-template__items li {
  font-size: clamp(12.3px, 3.32vw, 21px) !important;
  line-height: 1.15 !important;
}
.task-card--dense-2 .task-template__note {
  margin-top: clamp(9px, 2.2vw, 16px) !important;
  font-size: clamp(11.8px, 3.2vw, 20px) !important;
}
@media (min-width: 700px) {
  .task-card--template {
    flex-basis: min(560px, calc(100vw - 72px)) !important;
    width: min(560px, calc(100vw - 72px)) !important;
  }
}
@media (max-width: 380px) {
  .task-card--template .task-card__emotion-btn {
    min-height: 26px !important;
  }
}


/* V115: clickable emotion button for the excluded legacy first fairy tale without duplicating its baked footnote text */
.task-card__legacy-emotion-btn {
  position: absolute !important;
  left: 17.5% !important;
  top: 77.8% !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 28px !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(91, 54, 24, .28) !important;
  background: radial-gradient(120% 140% at 0% 0%, rgba(255,231,166,.28), transparent 48%), linear-gradient(180deg, rgba(94,59,29,.96), rgba(57,35,20,.98)) !important;
  color: #fae4b4 !important;
  box-shadow: 0 8px 16px rgba(65, 39, 18, .16), inset 0 1px 0 rgba(255,242,202,.16) !important;
  font-family: 'Literaturnaya', 'Book Antiqua', 'Times New Roman', serif !important;
  font-size: clamp(11.5px, 3.05vw, 15.5px) !important;
  line-height: 1 !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* V117: approved shared fairy cards use blank agreed templates; only story-specific questions/tasks and hints are overlaid, with stronger density handling */

.task-card--approved-static {
  position: relative !important;
  flex: 0 0 calc(100vw - 36px) !important;
  width: calc(100vw - 36px) !important;
  max-width: none !important;
  aspect-ratio: 925 / 1701 !important;
  overflow: hidden !important;
  border-radius: 26px !important;
}
.task-card--approved-static .task-card__image,
.task-card--approved-static > .task-card__image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 26px !important;
}
@media (min-width: 700px) {
  .task-card--approved-static {
    flex-basis: min(560px, calc(100vw - 72px)) !important;
    width: min(560px, calc(100vw - 72px)) !important;
  }
}

.task-card--approved-dynamic {
  position: relative !important;
  flex: 0 0 calc(100vw - 36px) !important;
  width: calc(100vw - 36px) !important;
  max-width: none !important;
  min-height: 0 !important;
  aspect-ratio: 925 / 1701 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(214, 181, 130, .38) !important;
  border-radius: 26px !important;
  background: var(--task-card-bg) center / cover no-repeat !important;
  box-shadow: 0 16px 32px rgba(0,0,0,.20) !important;
  color: #4a3322 !important;
}
.task-card--approved-dynamic::after { display: none !important; }
.task-approved__content {
  position: absolute !important;
  left: 10.9% !important;
  right: 8.0% !important;
  top: 28.4% !important;
  z-index: 2 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: 'Literaturnaya', 'Book Antiqua', 'Times New Roman', serif !important;
  color: #453021 !important;
  text-shadow: 0 1px 0 rgba(255, 246, 219, .46) !important;
}
.task-card--approved-eq .task-approved__content {
  top: 31.9% !important;
}
.task-card--approved-retell .task-approved__content {
  top: 34.2% !important;
}
.task-card--approved-creative .task-approved__content {
  top: 32.8% !important;
}
.task-approved__items {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: grid !important;
  gap: clamp(7px, 1.7vw, 12px) !important;
}
.task-approved__items li {
  position: relative !important;
  margin: 0 !important;
  padding-left: clamp(24px, 6.4vw, 38px) !important;
  color: #453021 !important;
  font-family: 'Literaturnaya', 'Book Antiqua', 'Times New Roman', serif !important;
  font-size: clamp(15.4px, 4.0vw, 23.6px) !important;
  line-height: 1.14 !important;
  font-weight: 400 !important;
}
.task-approved__items li::before {
  content: '✦' !important;
  position: absolute !important;
  left: 0 !important;
  top: .02em !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  color: #c99232 !important;
  font-family: 'Times New Roman', serif !important;
  font-size: clamp(15px, 3.65vw, 23px) !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  filter: drop-shadow(0 0 2px rgba(181,136,60,.16)) !important;
}
.task-approved__note {
  position: relative !important;
  display: block !important;
  margin-top: clamp(18px, 4.2vw, 28px) !important;
  padding-left: clamp(24px, 6.4vw, 38px) !important;
  color: #4a3322 !important;
  font-family: 'Literaturnaya', 'Book Antiqua', 'Times New Roman', serif !important;
  font-size: clamp(14px, 3.54vw, 21.3px) !important;
  line-height: 1.2 !important;
}
.task-approved__note::before {
  content: '✦' !important;
  position: absolute !important;
  left: 0 !important;
  top: .08em !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  color: #c9a25b !important;
  font-family: 'Times New Roman', serif !important;
  font-size: clamp(10.5px, 2.45vw, 15px) !important;
  line-height: 1 !important;
  filter: drop-shadow(0 0 2px rgba(181,136,60,.14)) !important;
}

.task-approved__items li,
.task-approved__note {
  overflow-wrap: anywhere !important;
}
.task-approved__note span {
  display: block !important;
}
.task-card--approved-dynamic .task-card__emotion-btn {
  margin: clamp(7px, 2.0vw, 13px) 0 0 0 !important;
}
.task-card--approved-dynamic.task-card--dense-1 .task-approved__content {
  top: 28.55% !important;
}
.task-card--approved-eq.task-card--approved-dynamic.task-card--dense-1 .task-approved__content {
  top: 32.0% !important;
}
.task-card--approved-retell.task-card--approved-dynamic.task-card--dense-1 .task-approved__content {
  top: 34.35% !important;
}
.task-card--approved-creative.task-card--approved-dynamic.task-card--dense-1 .task-approved__content {
  top: 32.9% !important;
}
.task-card--approved-dynamic.task-card--dense-1 .task-approved__items {
  gap: clamp(6px, 1.45vw, 10px) !important;
}
.task-card--approved-dynamic.task-card--dense-1 .task-approved__items li {
  font-size: clamp(15.4px, 4.0vw, 23.6px) !important;
  line-height: 1.14 !important;
}
.task-card--approved-dynamic.task-card--dense-1 .task-approved__note {
  margin-top: clamp(16px, 3.6vw, 24px) !important;
  font-size: clamp(14px, 3.54vw, 21.3px) !important;
}
.task-card--approved-dynamic.task-card--dense-2 .task-approved__content {
  top: 28.75% !important;
}
.task-card--approved-eq.task-card--approved-dynamic.task-card--dense-2 .task-approved__content {
  top: 32.15% !important;
}
.task-card--approved-retell.task-card--approved-dynamic.task-card--dense-2 .task-approved__content {
  top: 34.5% !important;
}
.task-card--approved-creative.task-card--approved-dynamic.task-card--dense-2 .task-approved__content {
  top: 33.05% !important;
}
.task-card--approved-dynamic.task-card--dense-2 .task-approved__items {
  gap: clamp(5px, 1.3vw, 9px) !important;
}
.task-card--approved-dynamic.task-card--dense-2 .task-approved__items li {
  font-size: clamp(15.4px, 4.0vw, 23.6px) !important;
  line-height: 1.12 !important;
}
.task-card--approved-dynamic.task-card--dense-2 .task-approved__note {
  margin-top: clamp(15px, 3.2vw, 22px) !important;
  font-size: clamp(14px, 3.54vw, 21.3px) !important;
}
.task-card--approved-dynamic.task-card--dense-3 .task-approved__content {
  top: 28.95% !important;
}
.task-card--approved-eq.task-card--approved-dynamic.task-card--dense-3 .task-approved__content {
  top: 32.3% !important;
}
.task-card--approved-retell.task-card--approved-dynamic.task-card--dense-3 .task-approved__content {
  top: 34.65% !important;
}
.task-card--approved-creative.task-card--approved-dynamic.task-card--dense-3 .task-approved__content {
  top: 33.2% !important;
}
.task-card--approved-dynamic.task-card--dense-3 .task-approved__items {
  gap: clamp(4px, 1.05vw, 8px) !important;
}
.task-card--approved-dynamic.task-card--dense-3 .task-approved__items li {
  font-size: clamp(15.4px, 4.0vw, 23.6px) !important;
  line-height: 1.1 !important;
}
.task-card--approved-dynamic.task-card--dense-3 .task-approved__note {
  margin-top: clamp(14px, 3vw, 20px) !important;
  font-size: clamp(14px, 3.54vw, 21.3px) !important;
}

@media (min-width: 700px) {
  
.task-card--approved-static {
  position: relative !important;
  flex: 0 0 calc(100vw - 36px) !important;
  width: calc(100vw - 36px) !important;
  max-width: none !important;
  aspect-ratio: 925 / 1701 !important;
  overflow: hidden !important;
  border-radius: 26px !important;
}
.task-card--approved-static .task-card__image,
.task-card--approved-static > .task-card__image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 26px !important;
}
@media (min-width: 700px) {
  .task-card--approved-static {
    flex-basis: min(560px, calc(100vw - 72px)) !important;
    width: min(560px, calc(100vw - 72px)) !important;
  }
}

.task-card--approved-dynamic {
    flex-basis: min(560px, calc(100vw - 72px)) !important;
    width: min(560px, calc(100vw - 72px)) !important;
  }
}


.task-card--approved-eq.task-card--approved-dynamic .task-approved__note,
.task-card--approved-retell.task-card--approved-dynamic .task-approved__note,
.task-card--approved-creative.task-card--approved-dynamic .task-approved__note {
  margin-top: clamp(28px, 6vw, 42px) !important;
}


/* v127: Корнефон — карточка 03, поднимаем весь блок текста ещё на полстроки
   и делаем подсказку светлой для читаемости */
.task-card--content-library-11.task-card--approved-eq .task-approved__content {
  transform: translateY(-1.1em) !important;
}
.task-card--content-library-11.task-card--approved-eq .task-approved__note,
.task-card--content-library-11.task-card--approved-eq .task-approved__note span {
  color: #fff8ef !important;
  text-shadow: 0 1px 2px rgba(50, 30, 14, 0.62) !important;
}
.task-card--content-library-11.task-card--approved-eq .task-approved__note::before {
  color: #fff1d0 !important;
  filter: drop-shadow(0 0 2px rgba(70, 42, 19, .24)) !important;
}


/* V128: unify screen title size + library story layout cleanup
   Requested:
   1) one common heading size across stories / EPs / relives / lives / explanatory pages
      matching the calm size used as reference in “Как Смышленыш попал в Корнефон”;
   2) in Library stories lift artwork higher (remove top blank field under status bar)
      and place audio block below the illustration instead of over it. */
:root {
  --screen-title-size-unified: clamp(24px, 6.45vw, 32px);
  --screen-title-line-unified: 1.02;
  --screen-title-tracking-unified: -.04em;
}

.page-title,
.module-page-title,
.lesson-page-title,
.relive-page .lesson-page-title,
.library-story-page .lesson-page-title,
.live-lesson-page .lesson-page-title,
.lesson-page-new:not(.relive-page):not(.library-story-page):not(.live-lesson-page) .lesson-page-title {
  font-size: var(--screen-title-size-unified) !important;
  line-height: var(--screen-title-line-unified) !important;
  letter-spacing: var(--screen-title-tracking-unified) !important;
}

/* Library story screens: image starts higher, title/back stay inside safe area */
.library-story-page {
  padding-top: 0 !important;
}
.library-story-top {
  padding-top: max(18px, env(safe-area-inset-top, 0px)) !important;
  padding-right: 18px !important;
  padding-bottom: 18px !important;
  padding-left: 18px !important;
}

/* Audio panel and other content should sit below the artwork, not float over it */
.library-story-panel {
  margin-top: 0 !important;
  padding-top: 14px !important;
}
.library-story-page .audio-title {
  margin-top: 0 !important;
}

@media (max-width: 399px) {
  .library-story-top {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
@media (min-width: 700px) {
  .library-story-top {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* V129: fixed lesson top menu + favorites/module panels */
body.is-lesson-route .lesson-page-new {
  padding-top: max(64px, calc(env(safe-area-inset-top, 0px) + 54px)) !important;
}
body.is-lesson-route .lesson-title-topline,
body.is-lesson-route .lesson-next-nav {
  display: none !important;
}
.lesson-top-menu {
  position: fixed;
  z-index: 60;
  top: max(8px, env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - 28px), 520px);
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  border: 1px solid rgba(243,216,164,.14);
  border-radius: 999px;
  background:
    radial-gradient(circle at 18% 0%, rgba(239,207,145,.13), transparent 34%),
    linear-gradient(180deg, rgba(31,25,20,.68), rgba(15,12,10,.54));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 12px 34px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.055);
}
.lesson-top-menu__side {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.lesson-top-btn {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: rgba(250, 226, 183, .82);
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lesson-top-btn svg {
  width: 21px;
  height: 21px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lesson-top-btn svg circle {
  fill: currentColor;
  stroke: none;
}
.lesson-top-btn--favorite svg {
  fill: transparent;
}
.lesson-top-btn--favorite.is-active {
  color: #f2d59a;
  background: rgba(196, 143, 61, .14);
}
.lesson-top-btn--favorite.is-active svg {
  fill: rgba(242, 213, 154, .24);
}
.lesson-top-btn:active {
  transform: translateY(1px);
}
.lesson-top-btn:disabled {
  opacity: .25;
  cursor: default;
  pointer-events: none;
}
.library-story-page .lesson-top-menu,
.relive-page .lesson-top-menu {
  background:
    radial-gradient(circle at 18% 0%, rgba(239,207,145,.13), transparent 34%),
    linear-gradient(180deg, rgba(16,12,9,.62), rgba(10,8,7,.42));
}

.lesson-modal--top-menu .lesson-modal__panel,
.lesson-modal--favorites .lesson-modal__panel {
  top: max(64px, calc(env(safe-area-inset-top, 0px) + 52px));
  left: 14px;
  right: 14px;
  bottom: calc(var(--safe-bottom) + 92px);
  border-radius: 24px;
  background:
    radial-gradient(circle at 14% 0%, rgba(239,207,145,.15), transparent 36%),
    linear-gradient(180deg, rgba(45,38,31,.96), rgba(18,14,12,.98));
}
.lesson-modal--top-menu .lesson-modal__content,
.lesson-modal--favorites .lesson-modal__content {
  padding: 56px 14px 18px;
}
.lesson-menu-panel h2,
.favorites-panel h2 {
  margin: 0 44px 14px 0;
  color: var(--cream);
  font-family: var(--serif);
  font-size: clamp(24px, 6.45vw, 32px);
  line-height: 1.02;
  letter-spacing: -.04em;
}
.lesson-menu-eyebrow {
  margin: 0 0 8px;
  color: rgba(235, 198, 132, .86);
  font-size: 10px;
  line-height: 1;
  font-weight: 820;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.lesson-menu-list {
  display: grid;
  gap: 8px;
}
.lesson-menu-row,
.favorites-row {
  width: 100%;
  border: 1px solid rgba(243,216,164,.12);
  border-radius: 17px;
  background: linear-gradient(180deg, rgba(247,239,229,.055), rgba(247,239,229,.025));
  color: var(--cream);
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  text-align: left;
}
.lesson-menu-row.is-current {
  border-color: rgba(226, 174, 92, .38);
  background: linear-gradient(180deg, rgba(226,174,92,.16), rgba(247,239,229,.04));
}
.lesson-menu-row__num {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(246,218,174,.92);
  border: 1px solid rgba(226,174,92,.22);
  background: rgba(20,15,11,.18);
  font-size: 11px;
  font-weight: 820;
}
.lesson-menu-row__copy,
.favorites-row span:last-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.lesson-menu-row strong,
.favorites-row strong {
  color: var(--cream);
  font-size: 14px;
  line-height: 1.16;
  font-weight: 760;
}
.lesson-menu-row small,
.favorites-row small {
  color: rgba(247,239,229,.58);
  font-size: 11px;
  line-height: 1.15;
}
.favorite-current-btn {
  width: 100%;
  margin: 2px 0 14px;
  min-height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(226,174,92,.28);
  background: linear-gradient(180deg, rgba(226,174,92,.18), rgba(60,42,24,.32));
  color: #f4dca9;
  font-weight: 760;
  font-size: 13px;
}
.favorite-current-btn.is-saved {
  color: rgba(247,239,229,.78);
  background: rgba(255,255,255,.045);
}
.favorites-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 0 0 12px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(10,8,7,.28);
  border: 1px solid rgba(243,216,164,.10);
}
.favorites-tab {
  min-height: 32px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(247,239,229,.62);
  font-size: 12px;
  font-weight: 760;
}
.favorites-tab.is-active {
  color: #f1d39a;
  background: rgba(226,174,92,.13);
}
.favorites-list {
  display: none;
  gap: 8px;
}
.favorites-list.is-active {
  display: grid;
}
.favorites-row__mark {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #e8c68a;
  background: rgba(226,174,92,.10);
}
.favorites-row__mark svg {
  width: 18px;
  height: 18px;
  fill: rgba(232,198,138,.16);
  stroke: currentColor;
  stroke-width: 1.8;
}
.favorites-empty {
  margin: 16px 4px 0;
  color: rgba(247,239,229,.62);
  font-size: 14px;
  line-height: 1.4;
}

/* V130: keep top lesson menu fixed during scroll.
   The page transition animation uses transform, which can make fixed children
   behave like they are attached to the scrolling page on iOS. Disable transform
   on lesson pages and force the menu to the viewport. */
body.is-lesson-route .lesson-page-new {
  animation: none !important;
  transform: none !important;
}
body.is-lesson-route .lesson-top-menu {
  position: fixed !important;
  top: max(8px, env(safe-area-inset-top, 0px)) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  z-index: 120 !important;
  will-change: transform !important;
}


/* V131: library story hero and top menu polish
   - replace three dots semantics with hamburger icon in JS
   - let artwork start higher under the fixed menu
   - move story title block lower on the illustration
   - remove redundant "Сказка" heading above the audio block */
body.is-lesson-route .library-story-page {
  padding-top: 8px !important;
}
body.is-lesson-route .library-story-page .library-story-stage.full-bleed-image {
  margin-top: 0 !important;
}
.library-story-top {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  padding-top: max(10px, env(safe-area-inset-top, 0px) + 8px) !important;
  padding-bottom: 22px !important;
}
.library-story-head {
  margin-top: auto !important;
  max-width: min(88%, 430px) !important;
}
.library-story-page .lesson-kicker {
  margin-bottom: 10px !important;
}
.library-story-page .lesson-page-title {
  margin-bottom: 10px !important;
}
.library-story-page .lesson-subline {
  margin-bottom: 0 !important;
}
.library-story-shade {
  background:
    linear-gradient(180deg, rgba(12,10,8,.10) 0%, rgba(12,10,8,.03) 22%, rgba(12,10,8,.00) 42%, rgba(12,10,8,.20) 62%, rgba(12,10,8,.70) 100%),
    linear-gradient(180deg, rgba(12,10,8,.08) 0%, rgba(12,10,8,0) 16%, rgba(12,10,8,.02) 48%, rgba(12,10,8,.84) 100%) !important;
}
.library-story-panel {
  padding-top: 12px !important;
}
.library-story-page .audio-player {
  margin-top: 0 !important;
}
@media (max-width: 399px) {
  body.is-lesson-route .library-story-page {
    padding-top: 6px !important;
  }
  .library-story-top {
    padding-bottom: 18px !important;
  }
}


/* V132: module lesson layout + bottom lesson arrows
   - on module lesson pages move the title block below the illustration;
   - remove the redundant "Сказка" audio heading from fairy pages;
   - move previous/next navigation from the top menu to the end of the page. */
.lesson-top-menu--compact {
  width: min(calc(100% - 28px), 390px) !important;
  padding-inline: 10px !important;
}
.lesson-top-menu--compact .lesson-top-menu__side--left,
.lesson-top-menu--compact .lesson-top-menu__side--right {
  min-width: 0 !important;
}
.lesson-top-menu--compact .lesson-top-menu__side--right {
  gap: 8px !important;
}

body.is-lesson-route .lesson-page-new:not(.library-story-page):not(.relive-page) {
  padding-top: max(64px, calc(env(safe-area-inset-top, 0px) + 54px)) !important;
}
body.is-lesson-route .lesson-page-new:not(.library-story-page):not(.relive-page) > .lesson-image-full.full-bleed-image {
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}
body.is-lesson-route .lesson-page-new:not(.library-story-page):not(.relive-page) > .lesson-head--below-image {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}
body.is-lesson-route .lesson-page-new:not(.library-story-page):not(.relive-page) > .lesson-head--below-image .lesson-kicker {
  margin-bottom: 8px !important;
}
body.is-lesson-route .lesson-page-new:not(.library-story-page):not(.relive-page) > .lesson-head--below-image .lesson-page-title {
  margin-bottom: 8px !important;
}

/* Restore bottom previous/next navigation as a light continuation control. */
body.is-lesson-route .lesson-page-new > .lesson-next-nav,
body.is-lesson-route .lesson-next-nav {
  display: grid !important;
  margin-top: 28px !important;
  margin-bottom: calc(var(--nav-h) + var(--safe-bottom) + 32px) !important;
}
body.is-lesson-route .lesson-next-nav--pair {
  gap: 12px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.is-lesson-route .lesson-next-nav--pair.has-two {
  grid-template-columns: 1fr 1fr !important;
}
body.is-lesson-route .lesson-next-nav--pair.has-one {
  grid-template-columns: 1fr !important;
}
body.is-lesson-route .lesson-nav-btn {
  min-height: 44px !important;
  border-radius: 999px !important;
  padding: 9px 13px !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(239,207,145,.12), transparent 34%),
    linear-gradient(180deg, rgba(44,36,28,.58), rgba(22,17,14,.54)) !important;
  border: 1px solid rgba(243,216,164,.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 10px 22px rgba(0,0,0,.12) !important;
}
body.is-lesson-route .lesson-nav-btn__arrow {
  font-size: 21px !important;
  color: rgba(244, 213, 159, .88) !important;
}
body.is-lesson-route .lesson-nav-btn__copy {
  gap: 0 !important;
}
body.is-lesson-route .lesson-nav-btn__eyebrow {
  font-size: 10px !important;
  letter-spacing: .08em !important;
  color: rgba(243,216,164,.78) !important;
}
body.is-lesson-route .lesson-nav-btn__title {
  display: none !important;
}
body.is-lesson-route .lesson-nav-btn--next {
  text-align: right !important;
}
@media (max-width: 399px) {
  .lesson-top-menu--compact {
    width: min(calc(100% - 28px), 360px) !important;
  }
  body.is-lesson-route .lesson-next-nav--pair {
    gap: 10px !important;
  }
  body.is-lesson-route .lesson-nav-btn {
    padding-inline: 11px !important;
  }
  body.is-lesson-route .lesson-nav-btn__eyebrow {
    font-size: 9px !important;
  }
}


/* V133: favorites cleanup + story divider + immersive/library-style flow */
.story-materials-divider{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  margin: 2px 0 4px !important;
  opacity:.92;
}
.story-materials-divider span{
  flex:1 1 auto;
  height:1px;
  background: linear-gradient(90deg, rgba(231,191,115,0), rgba(231,191,115,.38), rgba(231,191,115,0));
}
.story-materials-divider i{
  flex:0 0 auto;
  font-style:normal;
  color: rgba(239,207,145,.88);
  font-size: 13px;
  line-height: 1;
}

/* tighten the bottom continuation area */
body.is-lesson-route .lesson-page-new > .lesson-next-nav,
body.is-lesson-route .lesson-next-nav{
  margin-bottom: calc(var(--nav-h) + var(--safe-bottom) + 10px) !important;
}
body.is-lesson-route .app-main{
  padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + 10px) !important;
}

/* immersive audio lessons: match the library-story structure */
body.is-lesson-route .relive-page--flow{
  padding-top: max(64px, calc(env(safe-area-inset-top, 0px) + 54px)) !important;
  min-height: auto !important;
}
body.is-lesson-route .relive-page--flow .relive-stage.full-bleed-image{
  min-height: 0 !important;
  height: clamp(340px, 56vw, 520px) !important;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}
body.is-lesson-route .relive-page--flow .relive-bg,
body.is-lesson-route .relive-page--flow .relive-shade{
  position:absolute !important;
  inset:0 !important;
}
body.is-lesson-route .relive-page--flow .relive-top,
body.is-lesson-route .relive-page--flow .relive-audio-panel{
  display:none !important;
}
body.is-lesson-route .relive-page--flow > .lesson-head,
body.is-lesson-route .relive-page--flow > .audio-title,
body.is-lesson-route .relive-page--flow > .audio-player,
body.is-lesson-route .relive-page--flow > .immersive-info-wrap,
body.is-lesson-route .relive-page--flow > .lesson-next-nav{
  margin-left: 18px !important;
  margin-right: 18px !important;
}
body.is-lesson-route .relive-page--flow > .lesson-head{
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}
body.is-lesson-route .relive-page--flow > .lesson-head .lesson-kicker{
  margin-bottom: 8px !important;
}
body.is-lesson-route .relive-page--flow > .lesson-head .lesson-page-title{
  margin-bottom: 8px !important;
}
body.is-lesson-route .relive-page--flow > .audio-title{
  margin: 0 18px 12px !important;
}
body.is-lesson-route .relive-page--flow > .audio-player{
  margin-top: 0 !important;
}
body.is-lesson-route .relive-page--flow > .immersive-info-wrap--inline{
  margin-top: 18px !important;
}
body.is-lesson-route .relive-page--flow .relive-video{
  object-fit: cover !important;
}
@media (max-width: 399px){
  body.is-lesson-route .relive-page--flow .relive-stage.full-bleed-image{
    height: clamp(310px, 54vw, 430px) !important;
  }
}


/* V134: lesson favorites on all pages + tighten next/prev + immersive poster fix */
body.is-lesson-route .app-main{
  padding-bottom: 0 !important;
}
body.is-lesson-route .lesson-page-new > .lesson-next-nav,
body.is-lesson-route .lesson-next-nav{
  margin-bottom: calc(var(--nav-h) + var(--safe-bottom) - 8px) !important;
}

/* ensure the audio panel never overflows to the right edge */
body.is-lesson-route .lesson-page-new > .audio-player,
body.is-lesson-route .relive-page--flow > .audio-player,
body.is-lesson-route .live-lesson-page > .audio-player{
  width: calc(100% - 36px) !important;
  max-width: calc(100% - 36px) !important;
  box-sizing: border-box !important;
}

/* immersive lessons: use the full vertical artwork without cropping */
body.is-lesson-route .relive-page--flow{
  padding-top: max(64px, calc(env(safe-area-inset-top, 0px) + 54px)) !important;
}
body.is-lesson-route .relive-page--flow .relive-stage.full-bleed-image{
  height: auto !important;
  min-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
  background: #0c0a08 !important;
  overflow: hidden !important;
}
body.is-lesson-route .relive-page--flow .relive-stage-image{
  display:block !important;
  width:100% !important;
  height:auto !important;
}
body.is-lesson-route .relive-page--flow .relive-bg,
body.is-lesson-route .relive-page--flow .relive-shade,
body.is-lesson-route .relive-page--flow .relive-top,
body.is-lesson-route .relive-page--flow .relive-audio-panel,
body.is-lesson-route .relive-page--flow .audio-title{
  display:none !important;
}
body.is-lesson-route .relive-page--flow > .lesson-head,
body.is-lesson-route .relive-page--flow > .audio-player,
body.is-lesson-route .relive-page--flow > .immersive-info-wrap,
body.is-lesson-route .relive-page--flow > .lesson-next-nav{
  margin-left: 18px !important;
  margin-right: 18px !important;
}
body.is-lesson-route .relive-page--flow > .audio-player{
  margin-top: 0 !important;
}
body.is-lesson-route .relive-page--flow > .lesson-head{
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}


/* V135: sticky previous/next above bottom bar + immersive title on artwork + remove live audio heading */
body.is-lesson-route .lesson-page-new{
  padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + 86px) !important;
}
body.is-lesson-route .lesson-page-new > .lesson-next-nav,
body.is-lesson-route .lesson-next-nav{
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: calc(var(--nav-h) + var(--safe-bottom) + 8px) !important;
  width: min(calc(100% - 28px), 520px) !important;
  z-index: 52 !important;
  margin: 0 !important;
  display: grid !important;
}
body.is-lesson-route .lesson-next-nav--pair{
  gap: 10px !important;
}
body.is-lesson-route .lesson-page-new > .lesson-next-nav + *{
  margin-top: 0 !important;
}

/* Emotive / relive: keep full vertical image and place title in the lower part of the artwork */
body.is-lesson-route .relive-page--flow .relive-stage.full-bleed-image{
  position: relative !important;
  overflow: hidden !important;
}
body.is-lesson-route .relive-page--flow .relive-stage-shade{
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(7,5,4,0) 44%, rgba(7,5,4,.32) 68%, rgba(7,5,4,.74) 100%) !important;
  pointer-events: none !important;
}
body.is-lesson-route .relive-page--flow .relive-stage-head{
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  bottom: 18px !important;
  z-index: 2 !important;
  margin: 0 !important;
}
body.is-lesson-route .relive-page--flow .relive-stage-head .lesson-kicker,
body.is-lesson-route .relive-page--flow .relive-stage-head .lesson-page-title,
body.is-lesson-route .relive-page--flow .relive-stage-head .lesson-subline{
  color: #fbf3e8 !important;
  text-shadow: 0 4px 18px rgba(0,0,0,.42) !important;
}
body.is-lesson-route .relive-page--flow .relive-stage-head .lesson-kicker{
  margin-bottom: 8px !important;
}
body.is-lesson-route .relive-page--flow .relive-stage-head .lesson-page-title{
  margin-bottom: 8px !important;
}
body.is-lesson-route .relive-page--flow > .lesson-head,
body.is-lesson-route .relive-page--flow > .audio-title{
  display: none !important;
}
body.is-lesson-route .relive-page--flow > .audio-player{
  margin-top: 16px !important;
}

/* Live page: no separate 'Аудиодорожка' label */
body.is-lesson-route .live-lesson-page > .audio-title{
  display: none !important;
}


/* V136: restore bottom next/prev in normal flow and lift relive/emotive artwork like library stories */
body.is-lesson-route .lesson-page-new{
  padding-bottom: 0 !important;
}
body.is-lesson-route .lesson-page-new > .lesson-next-nav,
body.is-lesson-route .lesson-next-nav{
  position: static !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  bottom: auto !important;
  width: auto !important;
  z-index: auto !important;
  display: grid !important;
  margin-top: 24px !important;
  margin-bottom: calc(var(--nav-h) + var(--safe-bottom) + 8px) !important;
}
body.is-lesson-route .lesson-next-nav--pair{
  gap: 10px !important;
}

/* Relives / EPs: remove the empty top band and start the artwork higher, under the fixed top menu */
body.is-lesson-route .relive-page--flow{
  padding-top: 8px !important;
}
@media (max-width: 399px){
  body.is-lesson-route .relive-page--flow{
    padding-top: 6px !important;
  }
}
body.is-lesson-route .relive-page--flow .relive-stage.full-bleed-image{
  margin-top: 0 !important;
}


/* V137: soften bottom nav shell + immersive top edge + divider after audio */
.bottom-nav{
  box-shadow: 0 18px 44px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.bottom-nav::before{
  display:none !important;
}

body.is-lesson-route .relive-page--flow{
  padding-top: 0 !important;
}
@media (max-width: 399px){
  body.is-lesson-route .relive-page--flow{
    padding-top: 0 !important;
  }
}
body.is-lesson-route .relive-page--flow .relive-stage.full-bleed-image{
  margin-top: -2px !important;
}
body.is-lesson-route .relive-page--flow > .story-materials-divider--immersive{
  margin: 14px 18px 16px !important;
}
body.is-lesson-route .relive-page--flow > .story-materials-divider--immersive + .immersive-info-wrap--inline{
  margin-top: 0 !important;
}


/* V138: glass bottom nav + live divider + immersive title fade + tall hero for landscape EP/relive */
.bottom-nav{
  background: linear-gradient(180deg, rgba(48,39,31,.50), rgba(20,16,13,.44)) !important;
  border-color: rgba(247,239,229,.10) !important;
  backdrop-filter: blur(26px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.16) !important;
  box-shadow: 0 16px 36px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.07) !important;
}
.bottom-nav::before{
  display:block !important;
  content:"";
  position:absolute;
  z-index:-1;
  inset:-14px -10px -22px;
  border-radius:34px;
  background: linear-gradient(180deg, rgba(20,16,13,.18), rgba(20,16,13,.10));
  backdrop-filter: blur(28px) saturate(1.08);
  -webkit-backdrop-filter: blur(28px) saturate(1.08);
  box-shadow: 0 18px 42px rgba(6,5,4,.28);
  pointer-events:none;
}

body.is-lesson-route .live-lesson-page > .story-materials-divider--live,
body.is-lesson-route .relive-page--flow > .story-materials-divider--immersive{
  margin: 14px 18px 16px !important;
}
body.is-lesson-route .live-lesson-page > .story-materials-divider--live + .live-info-card{
  margin-top: 0 !important;
}

body.is-lesson-route .relive-page.is-relive-active .relive-stage-head{
  opacity: .02 !important;
  transform: translateY(10px) !important;
  filter: blur(6px) saturate(.9) !important;
  pointer-events:none;
}
body.is-lesson-route .relive-page .relive-stage-head{
  transition: opacity .42s ease, transform .42s ease, filter .42s ease !important;
}

body.is-lesson-route .relive-page--flow .relive-stage--landscape.full-bleed-image{
  height: clamp(420px, 86vw, 720px) !important;
  min-height: 420px !important;
  max-height: 720px !important;
}
body.is-lesson-route .relive-page--flow .relive-stage--landscape .relive-stage-image{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display:block !important;
}
body.is-lesson-route .relive-page--flow .relive-stage--portrait.full-bleed-image{
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
body.is-lesson-route .relive-page--flow .relive-stage--portrait .relive-stage-image{
  width:100% !important;
  height:auto !important;
  object-fit: contain !important;
  display:block !important;
}
@media (max-width: 399px){
  body.is-lesson-route .relive-page--flow .relive-stage--landscape.full-bleed-image{
    height: clamp(390px, 92vw, 620px) !important;
    min-height: 390px !important;
  }
}


/* V139: bottom blur under nav, remove shell outline, all EP/relive heroes tall portrait, softer title fade */
.bottom-nav{
  background: linear-gradient(180deg, rgba(58,47,37,.30), rgba(24,19,15,.26)) !important;
  border-color: rgba(247,239,229,.08) !important;
  backdrop-filter: blur(22px) saturate(1.06) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.06) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 24px rgba(0,0,0,.18) !important;
}
.bottom-nav::before{
  display:none !important;
  content:none !important;
}
body.is-lesson-route::after{
  content:"";
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height: calc(var(--nav-h) + var(--safe-bottom) + 46px);
  z-index: 19;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(16,12,10,0) 0%, rgba(16,12,10,.10) 24%, rgba(16,12,10,.28) 52%, rgba(16,12,10,.54) 100%);
  backdrop-filter: blur(18px) saturate(1.02);
  -webkit-backdrop-filter: blur(18px) saturate(1.02);
}

body.is-lesson-route .relive-page.is-relive-active .relive-stage-head{
  opacity: .16 !important;
  transform: translateY(4px) !important;
  filter: blur(2px) saturate(.96) !important;
  pointer-events:none;
}
body.is-lesson-route .relive-page .relive-stage-head{
  transition: opacity .38s ease, transform .38s ease, filter .38s ease !important;
}

body.is-lesson-route .relive-page--flow .relive-stage.full-bleed-image{
  height: clamp(540px, 118vw, 860px) !important;
  min-height: 540px !important;
  max-height: 860px !important;
}
body.is-lesson-route .relive-page--flow .relive-stage .relive-stage-image{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}
body.is-lesson-route .relive-page--flow .relive-stage--hero.full-bleed-image,
body.is-lesson-route .relive-page--flow .relive-stage--landscape.full-bleed-image,
body.is-lesson-route .relive-page--flow .relive-stage--portrait.full-bleed-image{
  height: clamp(540px, 118vw, 860px) !important;
  min-height: 540px !important;
  max-height: 860px !important;
}
body.is-lesson-route .relive-page--flow .relive-stage--hero .relive-stage-image,
body.is-lesson-route .relive-page--flow .relive-stage--landscape .relive-stage-image,
body.is-lesson-route .relive-page--flow .relive-stage--portrait .relive-stage-image{
  width:100% !important;
  height:100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}
@media (max-width: 399px){
  body.is-lesson-route .relive-page--flow .relive-stage.full-bleed-image,
  body.is-lesson-route .relive-page--flow .relive-stage--hero.full-bleed-image,
  body.is-lesson-route .relive-page--flow .relive-stage--landscape.full-bleed-image,
  body.is-lesson-route .relive-page--flow .relive-stage--portrait.full-bleed-image{
    height: clamp(500px, 124vw, 760px) !important;
    min-height: 500px !important;
    max-height: 760px !important;
  }
}


/* V140: narrow blur only below bottom nav, preserve immersive art without cropping, pale (not blurred) active titles */
.bottom-nav::before{
  display:none !important;
  content:none !important;
}
body.is-lesson-route::after{
  content:"";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: max(14px, calc(env(safe-area-inset-bottom, 0px) + 12px));
  z-index: 19;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(18,14,11,0.08) 0%, rgba(18,14,11,0.24) 100%);
  backdrop-filter: blur(14px) saturate(1.02);
  -webkit-backdrop-filter: blur(14px) saturate(1.02);
}

body.is-lesson-route .relive-page .relive-stage-head{
  transition: opacity .36s ease, transform .36s ease !important;
}
body.is-lesson-route .relive-page.is-relive-active .relive-stage-head{
  opacity: .28 !important;
  transform: translateY(0) !important;
  filter: none !important;
  pointer-events: none;
}

body.is-lesson-route .relive-page--flow .relive-stage.full-bleed-image,
body.is-lesson-route .relive-page--flow .relive-stage--hero.full-bleed-image,
body.is-lesson-route .relive-page--flow .relive-stage--landscape.full-bleed-image,
body.is-lesson-route .relive-page--flow .relive-stage--portrait.full-bleed-image{
  position: relative !important;
  overflow: hidden !important;
  aspect-ratio: 9 / 16 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  background: linear-gradient(180deg, rgba(9,7,6,.92), rgba(9,7,6,.98)) !important;
}
body.is-lesson-route .relive-page--flow .relive-stage .relive-stage-image,
body.is-lesson-route .relive-page--flow .relive-stage--hero .relive-stage-image,
body.is-lesson-route .relive-page--flow .relive-stage--landscape .relive-stage-image,
body.is-lesson-route .relive-page--flow .relive-stage--portrait .relive-stage-image{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center top !important;
  display: block !important;
}
body.is-lesson-route .relive-page--flow .relive-stage-head{
  left: 18px !important;
  right: 18px !important;
  bottom: 18px !important;
}
@media (max-width: 399px){
  body.is-lesson-route .relive-page--flow .relive-stage.full-bleed-image,
  body.is-lesson-route .relive-page--flow .relive-stage--hero.full-bleed-image,
  body.is-lesson-route .relive-page--flow .relive-stage--landscape.full-bleed-image,
  body.is-lesson-route .relive-page--flow .relive-stage--portrait.full-bleed-image{
    aspect-ratio: 9 / 16 !important;
  }
}


/* V148: restore V140 bottom blur logic, but make it a proper veil behind/under the bottom nav with a feathered top edge */
:root{
  --bottom-nav-veil-height: calc(var(--nav-h) + var(--safe-bottom) + 10px);
}

/* Remove the old narrow strip and replace it with one soft fixed veil. */
body::after,
body.is-lesson-route::after{
  content:"" !important;
  position:fixed !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  height:var(--bottom-nav-veil-height) !important;
  z-index:18 !important;
  pointer-events:none !important;

  background:
    linear-gradient(180deg,
      rgba(18,14,11,0.00) 0%,
      rgba(18,14,11,0.12) 12%,
      rgba(18,14,11,0.34) 34%,
      rgba(18,14,11,0.62) 68%,
      rgba(18,14,11,0.80) 100%) !important;

  backdrop-filter: blur(22px) saturate(1.06) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.06) !important;

  -webkit-mask-image:
    linear-gradient(180deg,
      rgba(0,0,0,0.00) 0%,
      rgba(0,0,0,0.18) 10%,
      rgba(0,0,0,0.58) 32%,
      rgba(0,0,0,0.92) 66%,
      rgba(0,0,0,1.00) 100%) !important;
  mask-image:
    linear-gradient(180deg,
      rgba(0,0,0,0.00) 0%,
      rgba(0,0,0,0.18) 10%,
      rgba(0,0,0,0.58) 32%,
      rgba(0,0,0,0.92) 66%,
      rgba(0,0,0,1.00) 100%) !important;
}

/* Bottom nav stays above the veil; no extra pseudo-stripes attached to it. */
.bottom-nav{
  z-index:20 !important;
}
.bottom-nav::before,
.bottom-nav::after{
  display:none !important;
  content:none !important;
}

/* Top fixed lesson menu: about 50% lighter, glossy glass rather than matte. */
.lesson-top-menu{
  border-color:rgba(243,216,164,.10) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.025)),
    radial-gradient(circle at 22% 0%, rgba(239,207,145,.11), transparent 36%),
    linear-gradient(180deg, rgba(31,25,20,.32), rgba(15,12,10,.24)) !important;
  backdrop-filter:blur(20px) saturate(1.13) !important;
  -webkit-backdrop-filter:blur(20px) saturate(1.13) !important;
  box-shadow:
    0 10px 28px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -1px 0 rgba(255,255,255,.025) !important;
}
.library-story-page .lesson-top-menu,
.relive-page .lesson-top-menu{
  background:
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.022)),
    radial-gradient(circle at 22% 0%, rgba(239,207,145,.10), transparent 36%),
    linear-gradient(180deg, rgba(16,12,9,.30), rgba(10,8,7,.20)) !important;
}




/* V150: top lesson menu icon sizing + refined back arrow */
.lesson-top-menu__side--left{
  gap: 6px !important;
}
.lesson-top-btn{
  align-self: center;
}
.lesson-top-btn svg{
  width: 22px !important;
  height: 22px !important;
}
.lesson-top-btn--back-ring svg,
.lesson-top-btn--favorite svg{
  width: 24px !important;
  height: 24px !important;
}
.lesson-top-btn--back-ring svg circle{
  fill: transparent !important;
  stroke: currentColor !important;
  stroke-width: 1.55 !important;
}
.lesson-top-btn--back-ring svg path{
  stroke-width: 2.05 !important;
}
.lesson-top-btn--favorite svg{
  fill: transparent !important;
  stroke-width: 1.95 !important;
}
.lesson-top-btn--favorite.is-active svg{
  fill: rgba(242, 213, 154, .32) !important;
  stroke: #f2d59a !important;
}


/* V151: enlarge top lesson menu icons + story action icon-buttons */
.lesson-top-btn svg{
  width: 25px !important;
  height: 25px !important;
}
.lesson-top-btn--back-ring svg,
.lesson-top-btn--favorite svg{
  width: 28px !important;
  height: 28px !important;
}
.lesson-top-btn--back-ring svg circle{
  stroke-width: 1.6 !important;
}
.lesson-top-btn--back-ring svg path,
.lesson-top-btn--favorite svg{
  stroke-width: 2.1 !important;
}

.story-action-list--icons{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
  align-items: start;
  justify-items: center;
  margin-top: 6px;
}
.story-action-icon-button{
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 9px;
  width: 100%;
  color: var(--cream);
  text-align: center;
}
.story-action-icon-button__media{
  width: min(148px, 100%);
  display: block;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 14px 26px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.05);
}
.story-action-icon-button__media img{
  display: block;
  width: 100%;
  height: auto;
}
.story-action-icon-button__label{
  display: block;
  max-width: 148px;
  color: var(--cream);
  font-size: 14.5px;
  line-height: 1.24;
  font-weight: 700;
  letter-spacing: -.01em;
  text-wrap: balance;
}
@media (max-width: 370px){
  .story-action-list--icons{
    gap: 14px 12px;
  }
  .story-action-icon-button__media,
  .story-action-icon-button__label{
    max-width: 132px;
  }
}


/* V152: reduce fairy action icon-buttons and refine top menu icon line weight */
.lesson-top-btn svg{
  stroke-width: 1.55 !important;
}
.lesson-top-btn--back-ring svg circle{
  stroke-width: 1.32 !important;
}
.lesson-top-btn--back-ring svg path{
  stroke-width: 1.82 !important;
}
.lesson-top-btn--favorite svg{
  stroke-width: 1.72 !important;
}

.story-action-list--icons{
  gap: 12px 14px !important;
}
.story-action-icon-button{
  gap: 7px !important;
}
.story-action-icon-button__media{
  width: min(82px, 100%) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 18px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.story-action-icon-button__label{
  max-width: 110px !important;
  font-size: 13.5px !important;
  line-height: 1.2 !important;
}
@media (max-width: 370px){
  .story-action-icon-button__media{
    width: min(76px, 100%) !important;
  }
  .story-action-icon-button__label{
    max-width: 96px !important;
    font-size: 12.5px !important;
  }
}


/* V153: smaller story action icons, refined labels, divider after action buttons */
.story-action-list--icons{
  gap: 10px 12px !important;
  margin-top: 4px !important;
}
.story-action-icon-button{
  gap: 6px !important;
}
.story-action-icon-button__media{
  width: min(66px, 100%) !important;
  border-radius: 15px !important;
  box-shadow: 0 8px 16px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.story-action-icon-button__label{
  max-width: 96px !important;
  font-size: 12.5px !important;
  line-height: 1.18 !important;
  font-weight: 600 !important;
  letter-spacing: -.005em !important;
  color: rgba(247, 239, 224, .96) !important;
}
.story-action-divider--after-icons{
  margin-top: 8px !important;
  margin-bottom: 6px !important;
}
@media (max-width: 370px){
  .story-action-icon-button__media{
    width: min(60px, 100%) !important;
  }
  .story-action-icon-button__label{
    max-width: 88px !important;
    font-size: 11.75px !important;
    line-height: 1.16 !important;
  }
}


/* V157: fairy action icons +20% and feathered-edge presentation */
.story-action-icon-button__media{
  width: min(96px, 100%) !important;
  border-radius: 18px !important;
  overflow: visible !important;
  box-shadow: none !important;
}
.story-action-icon-button__media img{
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.10));
}
.story-action-icon-button__label{
  max-width: 108px !important;
}
@media (max-width: 370px){
  .story-action-icon-button__media{
    width: min(86px, 100%) !important;
  }
  .story-action-icon-button__label{
    max-width: 98px !important;
  }
}


/* V159: story action icons enlarged by 20% with preserved feather */
.story-action-icon-button__media{
  width: min(96px, 100%) !important;
  border-radius: 20px !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 2px !important;
}
.story-action-icon-button__media img{
  width: 100%;
  height: auto;
  display: block;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 56%, rgba(0,0,0,.96) 68%, rgba(0,0,0,.58) 83%, transparent 100%);
  mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 56%, rgba(0,0,0,.96) 68%, rgba(0,0,0,.58) 83%, transparent 100%);
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.08));
}
@media (max-width: 370px){
  .story-action-icon-button__media{
    width: min(86px, 100%) !important;
  }
}

/* V160: enlarge only the book action icon by ~15% */
.story-action-icon-button[data-modal-section="story"] .story-action-icon-button__media{
  width: min(110px, 100%) !important;
}
@media (max-width: 370px){
  .story-action-icon-button[data-modal-section="story"] .story-action-icon-button__media{
    width: min(99px, 100%) !important;
  }
}

/* V161: align story action icons by bottom edge */
.story-action-icon-button{
  grid-template-rows: auto auto;
}
.story-action-icon-button__media{
  min-height: 118px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
}
.story-action-icon-button__media img{
  width: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
}
@media (max-width: 370px){
  .story-action-icon-button__media{
    min-height: 106px !important;
  }
}

/* V162: remove hero banner from the story library module page */
.module-page--library .module-head{
  margin-bottom: 16px;
}
.module-page--library .module-description{
  margin-top: 0;
}

/* V163: make module lesson previous/next buttons match the compact story-library rhythm */
body.is-lesson-route .lesson-page-new:not(.library-story-page) > .lesson-next-nav,
body.is-lesson-route .lesson-page-new:not(.library-story-page) .lesson-next-nav{
  width: min(calc(100% - 64px), 332px) !important;
  max-width: 332px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body.is-lesson-route .lesson-page-new:not(.library-story-page) > .lesson-next-nav.lesson-next-nav--pair,
body.is-lesson-route .lesson-page-new:not(.library-story-page) .lesson-next-nav.lesson-next-nav--pair{
  gap: 12px !important;
}
body.is-lesson-route .lesson-page-new:not(.library-story-page) > .lesson-next-nav.lesson-next-nav--pair.has-two,
body.is-lesson-route .lesson-page-new:not(.library-story-page) .lesson-next-nav.lesson-next-nav--pair.has-two{
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}
@media (max-width: 370px){
  body.is-lesson-route .lesson-page-new:not(.library-story-page) > .lesson-next-nav,
  body.is-lesson-route .lesson-page-new:not(.library-story-page) .lesson-next-nav{
    width: min(calc(100% - 54px), 318px) !important;
    max-width: 318px !important;
  }
}

/* V164: compact lesson nav without wrapping labels */
body.is-lesson-route .lesson-page-new:not(.library-story-page) > .lesson-next-nav,
body.is-lesson-route .lesson-page-new:not(.library-story-page) .lesson-next-nav{
  width: min(calc(100% - 28px), 372px) !important;
  max-width: 372px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body.is-lesson-route .lesson-page-new:not(.library-story-page) > .lesson-next-nav.lesson-next-nav--pair,
body.is-lesson-route .lesson-page-new:not(.library-story-page) .lesson-next-nav.lesson-next-nav--pair{
  gap: 12px !important;
}
body.is-lesson-route .lesson-page-new:not(.library-story-page) > .lesson-next-nav.lesson-next-nav--pair.has-two,
body.is-lesson-route .lesson-page-new:not(.library-story-page) .lesson-next-nav.lesson-next-nav--pair.has-two{
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}
body.is-lesson-route .lesson-page-new:not(.library-story-page) .lesson-nav-btn{
  padding-inline: 12px !important;
  gap: 8px !important;
}
body.is-lesson-route .lesson-page-new:not(.library-story-page) .lesson-nav-btn__eyebrow{
  white-space: nowrap !important;
  font-size: 9.6px !important;
  letter-spacing: .055em !important;
}
@media (max-width: 370px){
  body.is-lesson-route .lesson-page-new:not(.library-story-page) > .lesson-next-nav,
  body.is-lesson-route .lesson-page-new:not(.library-story-page) .lesson-next-nav{
    width: min(calc(100% - 24px), 350px) !important;
    max-width: 350px !important;
  }
  body.is-lesson-route .lesson-page-new:not(.library-story-page) .lesson-next-nav--pair{
    gap: 10px !important;
  }
  body.is-lesson-route .lesson-page-new:not(.library-story-page) .lesson-nav-btn{
    padding-inline: 10px !important;
    gap: 7px !important;
  }
  body.is-lesson-route .lesson-page-new:not(.library-story-page) .lesson-nav-btn__eyebrow{
    font-size: 9px !important;
    letter-spacing: .045em !important;
  }
}

/* AUTH / ACCOUNT / ADMIN v166 */
body.is-auth-route .bottom-nav { display: none; }
body.is-auth-route .app-main { padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)); }
.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: max(28px, env(safe-area-inset-top, 0px)) 0 max(28px, env(safe-area-inset-bottom, 0px));
}
.auth-card {
  width: 100%;
  border: 1px solid rgba(247,239,229,.14);
  border-radius: 30px;
  padding: 30px 28px;
  background:
    radial-gradient(circle at 50% 0%, rgba(231,191,115,.18), transparent 46%),
    linear-gradient(180deg, rgba(54,47,39,.82), rgba(20,17,14,.90));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 28px 60px rgba(0,0,0,.34);
}
.auth-mark {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  color: var(--gold-light);
  background: radial-gradient(circle, rgba(243,216,164,.24), rgba(39,31,22,.72));
  border: 1px solid rgba(243,216,164,.22);
  box-shadow: 0 0 35px rgba(231,191,115,.18);
}
.auth-eyebrow,
.account-label {
  margin: 0 0 8px;
  color: var(--gold-light);
  font-size: 11px;
  line-height: 1;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 780;
}
.auth-title {
  margin: 0 0 12px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: -.045em;
  font-size: clamp(42px, 11vw, 58px);
  line-height: .92;
}
.auth-copy {
  margin: 0 0 22px;
  max-width: 360px;
  color: rgba(247,239,229,.74);
  font-size: 15px;
  line-height: 1.45;
}
.auth-form { display: grid; gap: 10px; }
.auth-label {
  color: rgba(247,239,229,.72);
  font-size: 13px;
  font-weight: 700;
}
.auth-input {
  width: 100%;
  min-height: 54px;
  border: 1px solid rgba(247,239,229,.14);
  border-radius: 18px;
  padding: 0 16px;
  color: var(--cream);
  background: rgba(12,10,8,.46);
  outline: none;
  font-size: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.auth-input:focus { border-color: rgba(243,216,164,.48); box-shadow: 0 0 0 3px rgba(243,216,164,.10); }
.auth-submit,
.account-action,
.admin-small-btn {
  min-height: 50px;
  border-radius: 18px;
  border: 1px solid rgba(243,216,164,.26);
  color: #25190d;
  background: linear-gradient(180deg, #f3d9a7, #c99a50);
  font-weight: 800;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 16px 30px rgba(0,0,0,.22);
}
.auth-error { margin: 2px 0 0; color: #ffcfbb; font-size: 12px; }
.auth-note { margin: 16px 0 0; color: rgba(247,239,229,.42); font-size: 12px; }
.account-page,
.admin-page { padding-top: max(18px, env(safe-area-inset-top, 0px)); }
.account-card,
.admin-panel-card {
  border: 1px solid rgba(247,239,229,.13);
  border-radius: 24px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(54,47,39,.72), rgba(25,21,18,.78));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 16px 30px rgba(0,0,0,.18);
}
.account-hero-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.account-avatar,
.admin-user-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--gold-light);
  background: radial-gradient(circle, rgba(243,216,164,.21), rgba(39,31,22,.62));
  border: 1px solid rgba(243,216,164,.18);
  flex: 0 0 auto;
}
.account-card h2,
.account-card h3,
.admin-panel-card h2 {
  margin: 0 0 6px;
  color: var(--cream);
  font-size: 20px;
  line-height: 1.1;
}
.account-card p,
.admin-panel-card p { margin: 0; color: rgba(247,239,229,.62); font-size: 13px; line-height: 1.35; }
.account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.account-actions { display: grid; gap: 10px; margin-top: 12px; }
.account-action { width: 100%; color: var(--cream); background: linear-gradient(180deg, rgba(54,47,39,.76), rgba(24,20,17,.82)); }
.account-action--gold { color: #25190d; background: linear-gradient(180deg, #f3d9a7, #c99a50); }
.admin-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 12px; }
.admin-stat {
  border: 1px solid rgba(247,239,229,.12);
  border-radius: 20px;
  padding: 14px 10px;
  background: rgba(39,32,26,.68);
  text-align: center;
}
.admin-stat span { display:block; color: var(--gold-light); font-size: 24px; font-weight: 800; }
.admin-stat p { margin: 4px 0 0; color: rgba(247,239,229,.56); font-size: 11px; }
.admin-panel-card { margin-bottom: 12px; }
.admin-panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 12px; }
.admin-small-btn { min-height: 36px; border-radius: 999px; padding: 0 14px; font-size: 12px; }
.admin-user-list,
.admin-module-list { display:grid; gap: 8px; }
.admin-user-row,
.admin-module-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  border: 1px solid rgba(247,239,229,.09);
  border-radius: 18px;
  padding: 10px;
  background: rgba(12,10,8,.24);
}
.admin-user-row { justify-content:flex-start; }
.admin-user-row strong { display:block; color: var(--cream); font-size: 13px; line-height:1.2; word-break: break-word; }
.admin-user-row em { display:block; color: rgba(247,239,229,.48); font-style: normal; font-size: 11px; margin-top: 3px; }
.admin-module-row strong { color: var(--cream); font-size: 13px; line-height: 1.2; }
.admin-module-row span { color: var(--gold-light); font-size: 12px; white-space: nowrap; }
.admin-empty,
.admin-note { color: rgba(247,239,229,.52); font-size: 12px; line-height: 1.45; }
.admin-note { margin: 10px 2px 0; }
@media (max-width: 380px) {
  .account-grid { grid-template-columns: 1fr; }
  .admin-stats { grid-template-columns: 1fr; }
}

/* v167 backend/auth/admin refinements */
.auth-eyebrow--large {
  font-size: 18px;
  letter-spacing: .32em;
  margin-bottom: 14px;
}
.auth-card .auth-title { display: none; }
.auth-copy { margin-bottom: 24px; }
.auth-code-preview {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(243,216,164,.22);
  border-radius: 18px;
  padding: 14px 16px;
  background: rgba(12,10,8,.28);
  color: rgba(247,239,229,.72);
}
.auth-code-preview span { font-size: 12px; text-transform: uppercase; letter-spacing: .16em; color: var(--gold-light); font-weight: 800; }
.auth-code-preview strong { font-size: 30px; line-height: 1; letter-spacing: .16em; color: var(--cream); }
.auth-code-input { text-align: center; letter-spacing: .18em; font-weight: 800; }
.auth-change {
  min-height: 38px;
  border: 0;
  background: transparent;
  color: rgba(247,239,229,.62);
  font-weight: 700;
}
.auth-note { display: none; }
.access-warning { margin: 12px 0; border-color: rgba(255,206,170,.25); }
.admin-panel-head--stack { align-items: stretch; flex-direction: column; }
.admin-users-controls { display:grid; grid-template-columns: 1fr auto; gap: 10px; }
.admin-search,
.admin-filter {
  min-height: 42px;
  border-radius: 16px;
  border: 1px solid rgba(247,239,229,.12);
  color: var(--cream);
  background: rgba(12,10,8,.35);
  padding: 0 14px;
  outline: none;
  font-weight: 700;
}
.admin-filter { color: var(--gold-light); }
.admin-users-status { margin: 0 0 10px; color: rgba(247,239,229,.52); font-size: 12px; }
.admin-users-table { display:grid; gap: 8px; overflow-x:auto; }
.admin-users-header,
.admin-users-row {
  display:grid;
  grid-template-columns: minmax(190px, 1.4fr) minmax(90px, .75fr) minmax(92px, .75fr) minmax(90px, .7fr) 22px;
  gap: 10px;
  align-items:center;
  min-width: 650px;
}
.admin-users-header { color: rgba(247,239,229,.42); font-size: 11px; text-transform: uppercase; letter-spacing:.12em; padding: 0 12px; }
.admin-users-row {
  width:100%;
  text-align:left;
  border: 1px solid rgba(247,239,229,.09);
  border-radius: 18px;
  padding: 12px;
  background: rgba(12,10,8,.24);
  color: var(--cream);
  cursor:pointer;
}
.admin-users-row strong,
.admin-users-row b { display:block; font-size: 13px; line-height:1.2; }
.admin-users-row em { display:block; margin-top:4px; color: rgba(247,239,229,.48); font-size: 11px; font-style:normal; line-height:1.2; }
.admin-user-email strong { word-break: break-word; }
.access-pill { display:inline-block; padding: 4px 9px; border-radius: 999px; background: rgba(243,216,164,.13); color: var(--gold-light); font-size: 11px; }
.access-pill--blocked { color: #ffd2c5; background: rgba(255,140,120,.14); }
.access-pill--expired { color: #ddd0bf; background: rgba(255,255,255,.08); }
.admin-row-arrow { color: var(--gold-light); font-size: 24px; line-height:1; }
.admin-detail-panel h2 { margin: 0 0 14px; color: var(--cream); font-size: 24px; line-height:1.05; word-break: break-word; }
.admin-detail-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin-bottom: 14px; }
.admin-detail-grid span,
.admin-detail-columns section {
  border: 1px solid rgba(247,239,229,.10);
  border-radius: 16px;
  padding: 12px;
  background: rgba(12,10,8,.24);
}
.admin-detail-grid b { display:block; color: var(--gold-light); font-size: 11px; text-transform:uppercase; letter-spacing:.12em; }
.admin-detail-grid em { display:block; margin-top:5px; color: rgba(247,239,229,.72); font-size: 13px; font-style:normal; }
.admin-access-actions { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; margin-bottom: 14px; }
.admin-access-actions button {
  min-height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(243,216,164,.22);
  background: linear-gradient(180deg, rgba(54,47,39,.76), rgba(24,20,17,.82));
  color: var(--gold-light);
  font-weight: 800;
}
.admin-detail-columns { display:grid; gap: 10px; }
.admin-detail-columns h3 { margin:0 0 8px; color: var(--cream); font-size: 15px; }
.admin-detail-columns p { margin:0 0 8px; }
.admin-detail-columns p strong { display:block; color: var(--cream); font-size: 13px; }
.admin-detail-columns p em { display:block; color: rgba(247,239,229,.48); font-style:normal; font-size: 11px; margin-top:3px; }
@media (max-width: 520px){
  .admin-users-controls { grid-template-columns: 1fr; }
  .admin-detail-grid { grid-template-columns: 1fr; }
  .admin-access-actions { grid-template-columns: 1fr 1fr; }
}

/* v170 admin panel rebuild */
.admin-stats[data-admin-stats] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 18px;
}
.admin-stats[data-admin-stats] .admin-stat {
  min-height: 74px;
  display: grid;
  align-content: center;
}
.admin-users-section {
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  background: transparent;
}
.admin-users-section h2,
.admin-user-card-flat h2 {
  margin: 0;
  color: var(--cream);
  font-size: 26px;
  line-height: 1.05;
}
.admin-users-controls--inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, .55fr);
  gap: 8px;
}
.admin-access-manager {
  border: 1px solid rgba(243,216,164,.18);
  border-radius: 18px;
  background: rgba(15,12,9,.22);
  overflow: hidden;
}
.admin-access-manager summary {
  min-height: 44px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  color: var(--gold-light);
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}
.admin-access-manager summary::-webkit-details-marker { display: none; }
.admin-access-form {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr);
  gap: 8px;
  padding: 0 12px 12px;
}
.admin-access-form .account-action { min-height: 42px; margin: 0; }
.admin-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 18px;
  background: rgba(12,10,8,.16);
}
.admin-users-table {
  width: max-content;
  min-width: 920px;
  border-collapse: separate;
  border-spacing: 0 8px;
  color: var(--cream);
}
.admin-users-table th,
.admin-users-table td {
  padding: 10px 12px;
  vertical-align: middle;
  text-align: left;
  font-size: 12px;
  white-space: nowrap;
}
.admin-users-table thead th {
  color: rgba(247,239,229,.42);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 800;
}
.admin-users-table tbody td {
  background: rgba(33,27,22,.62);
  border-top: 1px solid rgba(247,239,229,.08);
  border-bottom: 1px solid rgba(247,239,229,.08);
}
.admin-users-table tbody td:first-child {
  border-left: 1px solid rgba(247,239,229,.08);
  border-radius: 16px 0 0 16px;
}
.admin-users-table tbody td:last-child {
  border-right: 1px solid rgba(247,239,229,.08);
  border-radius: 0 16px 16px 0;
}
.admin-users-table .admin-col-email {
  position: sticky;
  left: 0;
  z-index: 2;
  width: min(25vw, 165px);
  max-width: min(25vw, 165px);
  min-width: min(25vw, 165px);
  overflow: hidden;
  text-overflow: ellipsis;
  background: rgba(22,18,15,.96);
  box-shadow: 10px 0 14px rgba(0,0,0,.22);
}
.admin-users-table thead .admin-col-email { z-index: 3; }
.admin-users-table strong,
.admin-users-table b { display: block; font-size: 12px; line-height: 1.2; }
.admin-users-table em { display: block; margin-top: 4px; color: rgba(247,239,229,.48); font-size: 10px; font-style: normal; line-height: 1.2; }
.admin-open-btn {
  min-height: 32px;
  border-radius: 999px;
  border: 0;
  padding: 0 14px;
  color: #25190d;
  background: linear-gradient(180deg, #f3d9a7, #c99a50);
  font-weight: 900;
}
.admin-user-card-flat {
  margin: 0 0 12px;
  border: 1px solid rgba(247,239,229,.11);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(48,40,32,.64), rgba(14,11,9,.64));
  padding: 16px;
}
.admin-user-card-head {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
}
.admin-user-card-flat h3 {
  margin: 0 0 10px;
  color: var(--cream);
  font-size: 17px;
}
.admin-detail-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--cream);
}
.admin-detail-table th,
.admin-detail-table td {
  padding: 9px 8px;
  border-bottom: 1px solid rgba(247,239,229,.08);
  vertical-align: top;
  text-align: left;
  font-size: 12px;
  line-height: 1.3;
}
.admin-detail-table th {
  width: 38%;
  color: var(--gold-light);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 10px;
}
.admin-detail-table td { color: rgba(247,239,229,.78); word-break: break-word; }
.admin-detail-table--compact {
  min-width: 560px;
}
.admin-detail-table--compact th,
.admin-detail-table--compact td { white-space: nowrap; }
.admin-compact-window {
  max-height: 260px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(247,239,229,.09);
  border-radius: 16px;
  background: rgba(12,10,8,.22);
}
.admin-compact-window--small { max-height: 190px; }
@media (max-width: 520px){
  .admin-stats[data-admin-stats] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-users-controls--inline { grid-template-columns: 1fr 130px; }
  .admin-access-form { grid-template-columns: 1fr; }
  .admin-users-table .admin-col-email {
    width: 25vw;
    max-width: 25vw;
    min-width: 25vw;
  }
}
.admin-users-table { display: table; gap: 0; overflow: visible; }

/* v171 admin UX refinements */
.admin-access-manager {
  border-radius: 22px;
  border-color: rgba(243,216,164,.24);
  background: linear-gradient(180deg, rgba(46,39,31,.38), rgba(13,10,8,.26));
}
.admin-access-manager summary {
  min-height: 58px;
  padding: 0 18px;
  font-size: 20px;
  line-height: 1.1;
}
.admin-access-form {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 14px 16px;
}
.admin-access-form .admin-search,
.admin-access-form .admin-filter {
  min-height: 56px;
  border-radius: 18px;
  font-size: 15px;
  line-height: 1.2;
}
.admin-access-form .admin-search[name="email"],
.admin-access-form .admin-search[name="tariff"] {
  grid-column: 1 / -1;
}
.admin-access-form .admin-filter {
  width: 100%;
}
.admin-access-form .admin-access-submit {
  grid-column: 1 / -1;
  min-height: 58px;
  border-radius: 20px;
  font-size: 20px;
}
.admin-note {
  margin: -4px 16px 14px;
  font-size: 12px;
  color: rgba(247,239,229,.48);
}
.admin-table-scroll {
  border-radius: 0;
  background: transparent;
  margin-top: 10px;
}
.admin-users-table {
  min-width: 1120px;
  border-spacing: 0 7px;
}
.admin-users-table th,
.admin-users-table td {
  padding: 10px 11px;
}
.admin-users-table .admin-col-num {
  position: static;
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  text-align: center;
  color: var(--gold-light);
  font-weight: 900;
}
.admin-users-table .admin-col-email {
  position: sticky;
  left: 0;
  z-index: 4;
  width: min(25vw, 178px);
  max-width: min(25vw, 178px);
  min-width: min(25vw, 178px);
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  background: rgba(19,15,12,.97);
  box-shadow: 12px 0 18px rgba(0,0,0,.28);
}
.admin-users-table thead .admin-col-email { z-index: 5; }
.admin-users-table .admin-col-email strong {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.05;
  font-size: 12px;
}
.admin-users-table .admin-col-email em {
  font-size: 9px;
  margin-top: 3px;
}
.admin-users-table tbody td:first-child {
  border-radius: 16px 0 0 16px;
}
.admin-users-table tbody td:nth-child(2) {
  border-left: 1px solid rgba(247,239,229,.08);
}
.admin-users-table .access-pill + em {
  color: rgba(247,239,229,.56);
}
.admin-open-btn {
  min-height: 34px;
  padding: 0 16px;
  white-space: nowrap;
}
.admin-user-page {
  padding-top: max(82px, calc(env(safe-area-inset-top) + 66px)) !important;
}
.admin-user-page .admin-user-topline {
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.admin-user-page .admin-user-topline .page-title {
  line-height: 1.05;
}
.admin-user-main-card {
  margin-top: 6px;
}
.admin-user-card-head {
  gap: 14px;
}
.admin-access-actions {
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 9px;
}
.admin-access-actions button {
  min-height: 44px;
  border-radius: 16px;
  font-size: 15px;
}
.admin-saved-materials {
  display: grid;
  gap: 8px;
}
.admin-saved-card {
  display: grid;
  gap: 3px;
  text-align: left;
  border: 1px solid rgba(247,239,229,.10);
  border-radius: 16px;
  padding: 10px 12px;
  background: rgba(12,10,8,.24);
  color: var(--cream);
}
.admin-saved-card__type {
  color: var(--gold-light);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 900;
}
.admin-saved-card strong {
  font-size: 13px;
  line-height: 1.2;
}
.admin-saved-card small {
  color: rgba(247,239,229,.52);
  font-size: 11px;
  line-height: 1.2;
}
.admin-detail-table--compact {
  min-width: 700px;
}
.admin-detail-table--compact th,
.admin-detail-table--compact td {
  white-space: normal;
}
.admin-detail-table--compact td:nth-child(2) {
  min-width: 260px;
  max-width: 340px;
  overflow-wrap: anywhere;
}
@media (max-width: 520px){
  .admin-access-form { grid-template-columns: 1fr; }
  .admin-access-form .admin-search[name="email"],
  .admin-access-form .admin-search[name="tariff"] { grid-column: auto; }
  .admin-access-form .admin-access-submit { grid-column: auto; }
  .admin-users-table { min-width: 1080px; }
  .admin-users-table .admin-col-email {
    width: 25vw;
    max-width: 25vw;
    min-width: 25vw;
  }
  .admin-user-page {
    padding-top: max(78px, calc(env(safe-area-inset-top) + 62px)) !important;
  }
}