/* Learnara visual tour — all selectors and animations are intentionally namespaced. */
.lvt-root {
  --lvt-amber: #f5a623;
  --lvt-amber-light: #ffd37a;
  --lvt-rust: #c95732;
  --lvt-text: #eee9e4;
  --lvt-muted: #817b86;
  width: 100%;
  min-width: 0;
  color: var(--lvt-text);
  font-family: Nunito, -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.25;
  isolation: isolate;
}

.lvt-root *,
.lvt-root *::before,
.lvt-root *::after { box-sizing: border-box; }

.lvt-root button,
.lvt-root b,
.lvt-root strong,
.lvt-root em,
.lvt-root i,
.lvt-root small,
.lvt-root span { font-family: inherit; }

.lvt-frame {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 15px;
  background: #101015;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}

.lvt-topbar {
  position: relative;
  z-index: 10;
  height: 28px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: #121217;
}

.lvt-wordmark { color: #eee9e4; font-size: 7px; font-weight: 800; letter-spacing: -.15px; }
.lvt-wordmark em { color: var(--lvt-amber); font-style: normal; }
.lvt-surface { margin-left: auto; color: #706b76; font-size: 6px; font-weight: 760; letter-spacing: .7px; text-transform: uppercase; }

.lvt-pointer {
  position: absolute;
  z-index: 30;
  width: 20px;
  height: 25px;
  color: var(--lvt-amber-light);
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 5px rgba(245,166,35,.95)) drop-shadow(0 4px 4px rgba(0,0,0,.65));
  transform-origin: 4px 4px;
}

.lvt-pointer svg { width: 100%; height: 100%; display: block; overflow: visible; }

.lvt-root[data-lvt-mobile="true"] .lvt-pointer {
  width: 20px;
  height: 20px;
  border: 2px solid var(--lvt-amber-light);
  border-radius: 50%;
  background: rgba(245,166,35,.22);
  box-shadow: 0 0 0 5px rgba(245,166,35,.11), 0 0 14px rgba(245,166,35,.75);
  filter: none;
  transform-origin: center;
}

.lvt-root[data-lvt-mobile="true"] .lvt-pointer::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--lvt-amber-light);
}

.lvt-root[data-lvt-mobile="true"] .lvt-pointer svg { display: none; }

/* Coordinate-free click targeting: these pointers live inside the exact control they press. */
.lvt-control-pointer {
  left: 50%;
  top: 50%;
  margin-left: -2px;
  margin-top: -2px;
}
.lvt-root[data-lvt-mobile="true"] .lvt-control-pointer {
  margin-left: -10px;
  margin-top: -10px;
}

/* Shared Home miniature: the actual web layout is two independent cards. */
.lvt-split-home {
  height: calc(100% - 28px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 8px;
}

.lvt-first-card,
.lvt-branch-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  background: linear-gradient(155deg,#1b191e,#101015);
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}

.lvt-first-card {
  display: flex;
  flex-direction: column;
  padding: 10px 9px 8px;
  background: radial-gradient(circle at 5% 5%,rgba(201,87,50,.11),transparent 43%),linear-gradient(155deg,#1b191e,#101015);
}

.lvt-first-head { display: flex; align-items: center; gap: 5px; }
.lvt-first-head > span { color: #d18f2d; font-size: 5px; font-weight: 850; letter-spacing: .75px; text-transform: uppercase; }
.lvt-first-nav { position: relative; display: flex; align-items: center; gap: 3px; margin-left: auto; color: #706b76; font-size: 4px; }
.lvt-first-nav button,
.lvt-branch-controls button {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(245,166,35,.22);
  color: #ffc15b;
  background: #242229;
  pointer-events: none;
}

.lvt-first-nav button { width: 17px; height: 17px; border-radius: 6px; font-size: 8px; }
.lvt-first-count { position: relative; width: 24px; height: 10px; }
.lvt-first-count i,
.lvt-branch-count i { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-weight: 700; }
.lvt-first-count i:not(.lvt-state-1),
.lvt-branch-count i:not(.lvt-state-1) { opacity: 0; }

.lvt-lesson-slides { position: relative; height: 64px; margin-top: 6px; }
.lvt-lesson-slides > div { position: absolute; inset: 0; }
.lvt-lesson-slides > div:not(.lvt-state-1) { opacity: 0; }
.lvt-lesson-slides h4 { margin: 0 0 4px; color: #f2ece7; font: 400 11px/1.16 Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.lvt-lesson-slides p { margin: 0; color: #817b86; font-size: 5px; line-height: 1.4; }
.lvt-lesson-meta { display: none; }

.lvt-first-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: auto; }
.lvt-first-settings > span {
  height: 27px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 0 6px;
  border: 1px solid rgba(245,166,35,.17);
  border-radius: 7px;
  background: linear-gradient(180deg,#29272d,#151419);
}
.lvt-first-settings small { color: #716c76; font-size: 3.6px; font-weight: 820; letter-spacing: .5px; text-transform: uppercase; }
.lvt-first-settings b { color: #ddd7df; font-size: 5px; }
.lvt-start-lesson {
  position: relative;
  height: 25px;
  margin-top: 5px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  color: #1b1304;
  background: linear-gradient(180deg,#ffd37a,#f5a623);
  box-shadow: 0 2px 0 #8e5409;
  font-size: 5.5px;
  font-weight: 820;
  pointer-events: none;
}

.lvt-lesson-loading {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  color: #eee9e4;
  background: radial-gradient(circle at 50% 42%,rgba(245,166,35,.10),transparent 43%),#111116;
  opacity: 0;
}
.lvt-mobile-lesson-loader > i,
.lvt-spinner,
.lvt-create-loading > i {
  border: 2px solid rgba(245,166,35,.16);
  border-top-color: var(--lvt-amber);
  border-radius: 50%;
  animation: lvt-spin .72s linear infinite;
}
.lvt-mobile-lesson-loader { display: none; }
.lvt-mobile-lesson-loader > i { width: 28px; height: 28px; }
.lvt-mobile-lesson-loader > b { font: 400 9px Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.lvt-web-forging-loader {
  width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 8px; text-align: center;
}
.lvt-web-forging-loader > small { color: #c98a27; font-size: 4px; font-weight: 850; letter-spacing: .85px; text-transform: uppercase; }
.lvt-web-forging-loader > b { max-width: 92%; margin-top: 3px; color: #eee9e4; font: 400 8px/1.15 Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.lvt-web-forging-loader > em { margin-top: 5px; color: #716c76; font-size: 4px; font-style: normal; }
.lvt-web-forging-visual { position: relative; width: 60px; height: 60px; display: block; margin: 4px 0 2px; }
.lvt-web-forging-visual::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: radial-gradient(circle,rgba(245,166,35,.13),transparent 67%); filter: blur(2px); }
.lvt-web-forging-visual svg { position: relative; width: 100%; height: 100%; display: block; overflow: visible; animation: lvt-forging-turn 7s linear infinite; }
.lvt-forging-orbit { fill: none; stroke: rgba(245,166,35,.28); stroke-width: 1; stroke-dasharray: 2.5 4.5; }
.lvt-forging-orbit-b { stroke: rgba(255,211,122,.18); stroke-dasharray: 8 6; }
.lvt-forging-path { fill: none; stroke: rgba(245,166,35,.38); stroke-width: 1.4; stroke-linecap: round; }
.lvt-forging-node { fill: #f5a623; filter: drop-shadow(0 0 3px rgba(245,166,35,.85)); }
.lvt-forging-node-b { fill: #ffd37a; }
.lvt-forging-core { fill: #111116; stroke: #ffd37a; stroke-width: 1.8; filter: drop-shadow(0 0 5px rgba(245,166,35,.8)); }
.lvt-web-forging-track { position: relative; width: 112px; height: 2px; overflow: hidden; border-radius: 2px; background: rgba(245,158,11,.10); }
.lvt-web-forging-track > i { position: absolute; inset: 0 auto 0 0; width: 56px; border-radius: inherit; background: linear-gradient(90deg,transparent,#f5a623 42%,#fbbf24 50%,#f5a623 58%,transparent); box-shadow: 0 0 6px rgba(245,166,35,.55); animation: lvt-forging-sweep 1.5s linear infinite; }
@keyframes lvt-forging-turn { to { transform: rotate(360deg); } }
@keyframes lvt-forging-sweep { from { transform: translateX(-112px); } to { transform: translateX(224px); } }

.lvt-branch-card {
  background: radial-gradient(circle at 72% 43%,rgba(57,175,179,.14),transparent 41%),linear-gradient(155deg,#1b191e,#101015);
}
.lvt-branch-copy { position: relative; z-index: 2; width: 53%; padding: 14px 0 0 12px; }
.lvt-branch-kicker { display: block; color: #d18f2d; font-size: 4.5px; font-weight: 850; letter-spacing: .9px; text-transform: uppercase; }
.lvt-branch-titles { position: relative; height: 33px; margin-top: 5px; }
.lvt-branch-titles strong { position: absolute; inset: 0; color: #f2ece7; font: 400 12px/1.12 Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.lvt-branch-subs { position: relative; height: 20px; }
.lvt-branch-subs span { position: absolute; inset: 0; color: #817b86; font-size: 4.8px; line-height: 1.35; }
.lvt-branch-titles > *:not(.lvt-state-1),
.lvt-branch-subs > *:not(.lvt-state-1) { opacity: 0; }
.lvt-branch-art { position: absolute; top: 4px; right: -4px; width: 55%; height: 122px; display: grid; place-items: center; }
.lvt-branch-art::before { content: ""; position: absolute; width: 98px; height: 98px; border-radius: 50%; background: radial-gradient(circle,rgba(68,188,190,.14),transparent 67%); }
.lvt-real-branch-icon { position: relative; width: 111px; height: 111px; overflow: visible; filter: drop-shadow(0 14px 12px rgba(0,0,0,.38)); }
.lvt-branch-switch {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
  height: 39px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg,rgba(35,33,39,.96),rgba(19,18,23,.99));
}
.lvt-branch-switch > span { min-width: 0; flex: 1; }
.lvt-branch-switch b { display: block; color: #dcd6df; font-size: 5px; }
.lvt-branch-switch small { display: block; margin-top: 2px; color: #716c76; font-size: 3.8px; }
.lvt-branch-controls { display: flex; align-items: center; gap: 3px; color: #706b76; font-size: 3.8px; }
.lvt-branch-controls button { width: 20px; height: 20px; border-radius: 50%; font-size: 9px; }
.lvt-branch-count { position: relative; width: 24px; height: 11px; }
.lvt-branch-next { position: relative; }
.lvt-branch-pointer { right: -9px; bottom: -8px; }

.lvt-playing .lvt-branch-animates .lvt-branch-titles .lvt-state-1,
.lvt-playing .lvt-branch-animates .lvt-branch-subs .lvt-state-1,
.lvt-playing .lvt-branch-animates .lvt-branch-count .lvt-state-1 { animation: lvt-branch-one 4.8s ease-in-out infinite; }
.lvt-playing .lvt-branch-animates .lvt-branch-titles .lvt-state-2,
.lvt-playing .lvt-branch-animates .lvt-branch-subs .lvt-state-2,
.lvt-playing .lvt-branch-animates .lvt-branch-count .lvt-state-2 { animation: lvt-branch-two 4.8s ease-in-out infinite; }
.lvt-playing .lvt-branch-animates .lvt-branch-titles .lvt-state-3,
.lvt-playing .lvt-branch-animates .lvt-branch-subs .lvt-state-3,
.lvt-playing .lvt-branch-animates .lvt-branch-count .lvt-state-3 { animation: lvt-branch-three 4.8s ease-in-out infinite; }
.lvt-playing .lvt-branch-animates .lvt-branch-titles .lvt-state-4,
.lvt-playing .lvt-branch-animates .lvt-branch-subs .lvt-state-4,
.lvt-playing .lvt-branch-animates .lvt-branch-count .lvt-state-4 { animation: lvt-branch-four 4.8s ease-in-out infinite; }
.lvt-playing .lvt-branch-pointer { animation: lvt-branch-taps 4.8s cubic-bezier(.2,.8,.2,1) infinite; }

@keyframes lvt-branch-one { 0%,12%{opacity:1;transform:none}15%,91%{opacity:0;transform:translateY(-3px)}96%,100%{opacity:1;transform:none} }
@keyframes lvt-branch-two { 0%,12%{opacity:0;transform:translateY(3px)}15%,27%{opacity:1;transform:none}30%,100%{opacity:0;transform:translateY(-3px)} }
@keyframes lvt-branch-three { 0%,27%{opacity:0;transform:translateY(3px)}30%,42%{opacity:1;transform:none}45%,100%{opacity:0;transform:translateY(-3px)} }
@keyframes lvt-branch-four { 0%,42%{opacity:0;transform:translateY(3px)}45%,89%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(-3px)} }
@keyframes lvt-branch-taps {
  0%,3%{opacity:0;transform:translate(9px,7px)}6%{opacity:1;transform:none}10%{transform:scale(.7)}13%,24%{opacity:1;transform:scale(1)}
  27%{transform:scale(.7)}30%,39%{opacity:1;transform:scale(1)}42%{transform:scale(.7)}45%,84%{opacity:1;transform:scale(1)}88%,100%{opacity:0}
}

.lvt-playing .lvt-lesson-cycles .lvt-lesson-slides .lvt-state-1,
.lvt-playing .lvt-lesson-cycles .lvt-first-count .lvt-state-1 { animation: lvt-lesson-one 5.8s ease-in-out infinite; }
.lvt-playing .lvt-lesson-cycles .lvt-lesson-slides .lvt-state-2,
.lvt-playing .lvt-lesson-cycles .lvt-first-count .lvt-state-2 { animation: lvt-lesson-two 5.8s ease-in-out infinite; }
.lvt-playing .lvt-lesson-cycles .lvt-lesson-slides .lvt-state-3,
.lvt-playing .lvt-lesson-cycles .lvt-first-count .lvt-state-3 { animation: lvt-lesson-three 5.8s ease-in-out infinite; }
.lvt-playing .lvt-lesson-arrow-pointer { animation: lvt-lesson-arrow-taps 5.8s cubic-bezier(.2,.8,.2,1) infinite; }
.lvt-playing .lvt-lesson-start-pointer { animation: lvt-lesson-start-tap 5.8s cubic-bezier(.2,.8,.2,1) infinite; }
.lvt-playing .lvt-lesson-cycles .lvt-start-lesson { animation: lvt-start-press 5.8s ease-in-out infinite; }
.lvt-playing .lvt-lesson-cycles .lvt-lesson-loading { animation: lvt-lesson-loading 5.8s ease-in-out infinite; }

@keyframes lvt-lesson-one { 0%,14%{opacity:1;transform:none}17%,91%{opacity:0;transform:translateY(-3px)}96%,100%{opacity:1;transform:none} }
@keyframes lvt-lesson-two { 0%,14%{opacity:0;transform:translateY(3px)}17%,29%{opacity:1;transform:none}32%,100%{opacity:0;transform:translateY(-3px)} }
@keyframes lvt-lesson-three { 0%,29%{opacity:0;transform:translateY(3px)}32%,84%{opacity:1;transform:none}90%,100%{opacity:0;transform:translateY(-3px)} }
@keyframes lvt-lesson-arrow-taps {
  0%,3%{opacity:0;transform:scale(1)}6%{opacity:1;transform:scale(1)}10%{transform:scale(.68)}13%,21%{opacity:1;transform:scale(1)}
  24%{transform:scale(.68)}27%,33%{opacity:1;transform:scale(1)}36%{transform:scale(.68)}39%,42%{opacity:1;transform:scale(1)}45%,100%{opacity:0;transform:scale(1)}
}
@keyframes lvt-lesson-start-tap {
  0%,40%{opacity:0;transform:scale(1)}43%{opacity:1;transform:scale(1)}47%{transform:scale(.68)}50%,54%{opacity:1;transform:scale(1)}58%,100%{opacity:0;transform:scale(1)}
}
@keyframes lvt-start-press { 0%,42%,100%{transform:none;filter:none}45%{transform:translateY(2px) scale(.985);filter:brightness(1.1)}49%,54%{filter:brightness(1.08)}60%{filter:none} }
@keyframes lvt-lesson-loading { 0%,53%{opacity:0}56%,70%{opacity:1}75%,100%{opacity:0} }

/* Difficulty and Length — two separate controls, just like the product. */
.lvt-settings { position: relative; height: calc(100% - 28px); padding: 13px; background: radial-gradient(circle at 69% 20%,rgba(245,166,35,.075),transparent 42%),#101015; }
.lvt-settings-heading { display: flex; align-items: end; gap: 6px; margin-bottom: 9px; }
.lvt-settings-heading span { color: #d18f2d; font-size: 5.5px; font-weight: 850; letter-spacing: .9px; text-transform: uppercase; }
.lvt-settings-heading b { min-width: 0; margin-left: auto; overflow: hidden; color: #77717c; font-size: 5.5px; text-overflow: ellipsis; white-space: nowrap; }
.lvt-setting-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lvt-setting {
  position: relative;
  height: 69px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 13px;
  border: 1px solid rgba(245,166,35,.24);
  border-top-color: rgba(255,218,143,.34);
  border-radius: 13px;
  background: radial-gradient(105% 180% at 4% -80%,rgba(245,166,35,.16),transparent 55%),linear-gradient(180deg,#29272d,#1b1a20 55%,#111116);
  box-shadow: inset 0 1px rgba(255,255,255,.11), inset 0 -2px rgba(0,0,0,.5), 0 3px #08080b, 0 9px 19px rgba(0,0,0,.28);
}
.lvt-setting::after { content: ""; position: absolute; inset: 5px; border: 1px solid transparent; border-radius: 9px; }
.lvt-setting small { color: #77717c; font-size: 5.5px; font-weight: 850; letter-spacing: .8px; text-transform: uppercase; }
.lvt-setting > div { position: relative; height: 20px; display: flex; align-items: center; margin-top: 6px; }
.lvt-setting b { position: absolute; left: 0; color: #f1ebe6; font: 400 13px Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.lvt-setting .lvt-setting-after { color: #ffc15b; opacity: 0; }
.lvt-setting > div > i { margin-left: auto; color: #c88a2c; font-size: 9px; font-style: normal; }

.lvt-difficulty-menu,
.lvt-length-menu {
  position: absolute;
  z-index: 12;
  top: 99px;
  width: calc(50% - 17px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  background: #211f25;
  box-shadow: 0 12px 24px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.05);
  opacity: 0;
}
.lvt-difficulty-menu { left: 13px; padding: 5px; }
.lvt-length-menu { right: 13px; padding: 8px; }
.lvt-difficulty-menu > span { position: relative; height: 18px; display: flex; align-items: center; padding: 0 7px; border-radius: 6px; color: #aaa4ae; font-size: 6px; }
.lvt-difficulty-menu i { margin-left: auto; color: #ffc15b; font-style: normal; }
.lvt-difficulty-menu .lvt-choice { color: #aaa4ae; background: transparent; }
.lvt-difficulty-menu .lvt-choice i { opacity: 0; }
.lvt-length-menu { color: #aaa4ae; font-size: 6px; }
.lvt-length-stepper { height: 38px; display: flex; align-items: center; justify-content: space-between; }
.lvt-length-stepper > span { color: #aaa4ae; font-size: 7px; }
.lvt-length-controls { display: grid; grid-template-columns: 24px 28px 24px; align-items: center; }
.lvt-length-controls > i { position: relative; height: 24px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.09); color: #d99b39; background: transparent; font-size: 12px; font-style: normal; }
.lvt-length-controls > i:first-child { border-radius: 7px 0 0 7px; }
.lvt-length-controls > i:last-child { border-radius: 0 7px 7px 0; }
.lvt-length-count { position: relative; height: 24px; border-top: 1px solid rgba(255,255,255,.09); border-bottom: 1px solid rgba(255,255,255,.09); background: #17161b; }
.lvt-length-count b { position: absolute; inset: 0; display: grid; place-items: center; color: #eee9e4; font: 400 9px Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; opacity: 0; }
.lvt-length-count b:first-child { opacity: 1; }
.lvt-length-count b:last-child { color: #ffc15b; }

.lvt-playing .lvt-difficulty::after { animation: lvt-difficulty-focus 8s ease-in-out infinite; }
.lvt-playing .lvt-length::after { animation: lvt-length-focus 8s ease-in-out infinite; }
.lvt-playing .lvt-difficulty-menu { animation: lvt-difficulty-menu 8s ease-in-out infinite; }
.lvt-playing .lvt-length-menu { animation: lvt-length-menu 8s ease-in-out infinite; }
.lvt-playing .lvt-difficulty-open-pointer { animation: lvt-difficulty-open-tap 8s cubic-bezier(.2,.8,.2,1) infinite; }
.lvt-playing .lvt-difficulty-choice-pointer { animation: lvt-difficulty-choice-tap 8s cubic-bezier(.2,.8,.2,1) infinite; }
.lvt-playing .lvt-length-open-pointer { animation: lvt-length-open-tap 8s cubic-bezier(.2,.8,.2,1) infinite; }
.lvt-playing .lvt-length-plus-pointer { animation: lvt-length-plus-taps 8s cubic-bezier(.2,.8,.2,1) infinite; }
.lvt-playing .lvt-length-plus { animation: lvt-length-plus-presses 8s ease-in-out infinite; }
.lvt-playing .lvt-difficulty .lvt-setting-before { animation: lvt-difficulty-before 8s linear infinite; }
.lvt-playing .lvt-difficulty .lvt-setting-after { animation: lvt-difficulty-after 8s linear infinite; }
.lvt-playing .lvt-length .lvt-setting-before { animation: lvt-length-before 8s linear infinite; }
.lvt-playing .lvt-length .lvt-setting-after { animation: lvt-length-after 8s linear infinite; }
.lvt-playing .lvt-check-before { animation: lvt-check-before 8s linear infinite; }
.lvt-playing .lvt-choice { animation: lvt-difficulty-choice-picked 8s ease-in-out infinite; }
.lvt-playing .lvt-choice i { animation: lvt-check-after 8s linear infinite; }
.lvt-playing .lvt-length-count b:nth-child(1) { animation: lvt-count-one 8s linear infinite; }
.lvt-playing .lvt-length-count b:nth-child(2) { animation: lvt-count-two 8s linear infinite; }
.lvt-playing .lvt-length-count b:nth-child(3) { animation: lvt-count-three 8s linear infinite; }
.lvt-playing .lvt-length-count b:nth-child(4) { animation: lvt-count-four 8s linear infinite; }
.lvt-playing .lvt-length-count b:nth-child(5) { animation: lvt-count-five 8s linear infinite; }

@keyframes lvt-difficulty-focus { 5%,29%{border-color:rgba(255,199,92,.72);box-shadow:0 0 0 3px rgba(245,166,35,.07)}0%,35%,100%{border-color:transparent;box-shadow:none} }
@keyframes lvt-length-focus { 45%,80%{border-color:rgba(255,199,92,.72);box-shadow:0 0 0 3px rgba(245,166,35,.07)}0%,40%,88%,100%{border-color:transparent;box-shadow:none} }
@keyframes lvt-difficulty-menu { 0%,10%{opacity:0;transform:translateY(-3px) scale(.98)}14%,32%{opacity:1;transform:none}38%,100%{opacity:0;transform:translateY(-2px)} }
@keyframes lvt-length-menu { 0%,49%{opacity:0;transform:translateY(-3px) scale(.98)}53%,84%{opacity:1;transform:none}90%,100%{opacity:0;transform:translateY(-2px)} }
@keyframes lvt-difficulty-open-tap { 0%,3%{opacity:0;transform:scale(1)}6%{opacity:1;transform:scale(1)}9%{transform:scale(.68)}12%,14%{opacity:1;transform:scale(1)}17%,100%{opacity:0;transform:scale(1)} }
@keyframes lvt-difficulty-choice-tap { 0%,19%{opacity:0;transform:scale(1)}21%{opacity:1;transform:scale(1)}24%{transform:scale(.68)}27%,31%{opacity:1;transform:scale(1)}34%,100%{opacity:0;transform:scale(1)} }
@keyframes lvt-length-open-tap { 0%,42%{opacity:0;transform:scale(1)}45%{opacity:1;transform:scale(1)}49%{transform:scale(.68)}52%,56%{opacity:1;transform:scale(1)}59%,100%{opacity:0;transform:scale(1)} }
@keyframes lvt-length-plus-taps {
  0%,57%{opacity:0;transform:scale(1)}60%{opacity:1;transform:scale(1)}62%{transform:scale(.68)}64%,66%{opacity:1;transform:scale(1)}
  67%{transform:scale(.68)}69%,71%{transform:scale(1)}72%{transform:scale(.68)}74%,76%{transform:scale(1)}77%{transform:scale(.68)}80%,84%{opacity:1;transform:scale(1)}89%,100%{opacity:0;transform:scale(1)}
}
@keyframes lvt-length-plus-presses {
  0%,61%,63%,66%,68%,71%,73%,76%,78%,100%{color:#d99b39;background:transparent;filter:none}
  62%,67%,72%,77%{color:#ffd37a;background:rgba(245,166,35,.12);filter:brightness(1.15)}
}
@keyframes lvt-difficulty-before { 0%,25%{opacity:1}28%,96%{opacity:0}98%,100%{opacity:1} }
@keyframes lvt-difficulty-after { 0%,25%{opacity:0}28%,96%{opacity:1}98%,100%{opacity:0} }
@keyframes lvt-length-before { 0%,75%{opacity:1}79%,96%{opacity:0}98%,100%{opacity:1} }
@keyframes lvt-length-after { 0%,75%{opacity:0}79%,96%{opacity:1}98%,100%{opacity:0} }
@keyframes lvt-check-before { 0%,24%{opacity:1}27%,96%{opacity:0}98%,100%{opacity:1} }
@keyframes lvt-check-after { 0%,24%{opacity:0}27%,35%{opacity:1}38%,100%{opacity:0} }
@keyframes lvt-difficulty-choice-picked { 0%,22%,38%,100%{color:#aaa4ae;background:transparent}25%,35%{color:#ffc15b;background:rgba(245,166,35,.09)} }
@keyframes lvt-count-one { 0%,59%{opacity:1}61%,100%{opacity:0} }
@keyframes lvt-count-two { 0%,59%,66%,100%{opacity:0}61%,64%{opacity:1} }
@keyframes lvt-count-three { 0%,64%,71%,100%{opacity:0}66%,69%{opacity:1} }
@keyframes lvt-count-four { 0%,69%,76%,100%{opacity:0}71%,74%{opacity:1} }
@keyframes lvt-count-five { 0%,74%{opacity:0}76%,100%{opacity:1} }

/* Topic generation. */
.lvt-create { position: relative; height: calc(100% - 28px); display: grid; place-items: center; padding: 10px 16px; background: radial-gradient(circle at 50% 16%,rgba(245,166,35,.075),transparent 44%),#101015; }
.lvt-create-form { width: min(100%, 320px); }
.lvt-create-form > small { display: block; color: #d18f2d; font-size: 5px; font-weight: 850; letter-spacing: .85px; text-align: center; text-transform: uppercase; }
.lvt-create-form h4 { margin: 5px 0 0; color: #eee9e4; font: 400 16px/1.12 Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-align: center; }
.lvt-create-form h4 em { color: #ffc15b; font-style: italic; }
.lvt-topic-line { height: 38px; display: flex; align-items: center; margin-top: 10px; padding: 0 11px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: #151419; }
.lvt-topic-line span { display: inline-block; max-width: 0; overflow: hidden; border-right: 1px solid var(--lvt-amber); color: #eee9e4; font: 400 10px Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; white-space: nowrap; }
.lvt-create-form > p { margin: 3px 0 0; color: #6e6973; font-size: 4.6px; }
.lvt-create-controls { display: flex; align-items: center; gap: 5px; margin-top: 8px; }
.lvt-create-controls > span { padding: 5px 7px; border: 1px solid rgba(255,255,255,.09); border-radius: 999px; color: #8e8993; background: rgba(255,255,255,.025); font-size: 5.5px; }
.lvt-create-controls button { position: relative; height: 25px; margin-left: auto; padding: 0 10px; border: 0; border-radius: 7px; color: #1b1304; background: linear-gradient(180deg,#ffd37a,#f5a623); box-shadow: 0 2px #8e5409; font-size: 6px; font-weight: 820; pointer-events: none; }
.lvt-create-loading { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; align-content: center; gap: 6px; text-align: center; background: radial-gradient(circle at 50% 46%,rgba(245,166,35,.10),transparent 42%),#101015; opacity: 0; }
.lvt-create-loading > i { width: 32px; height: 32px; }
.lvt-create-loading b { color: #eee9e4; font: 400 10px Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.lvt-create-loading span { color: #77717c; font-size: 5px; }
.lvt-playing .lvt-topic-line span { animation: lvt-type-topic 6.2s steps(32,end) infinite; }
.lvt-playing .lvt-create-pointer { animation: lvt-create-pointer 6.2s cubic-bezier(.2,.8,.2,1) infinite; }
.lvt-playing .lvt-create-controls button { animation: lvt-create-press 6.2s ease-in-out infinite; }
.lvt-playing .lvt-create-loading { animation: lvt-create-loading 6.2s ease-in-out infinite; }
@keyframes lvt-type-topic { 0%,6%{max-width:0}42%,88%{max-width:250px}96%,100%{max-width:0} }
@keyframes lvt-create-pointer { 0%,43%{opacity:0;transform:scale(1)}47%{opacity:1;transform:scale(1)}53%{transform:scale(.68)}57%,61%{opacity:1;transform:scale(1)}65%,100%{opacity:0;transform:scale(1)} }
@keyframes lvt-create-press { 0%,51%,100%{transform:none;filter:none}54%{transform:translateY(2px);filter:brightness(1.1)}58%,63%{filter:brightness(1.08)}68%{filter:none} }
@keyframes lvt-create-loading { 0%,59%{opacity:0}63%,84%{opacity:1}90%,100%{opacity:0} }

/* Study. There is intentionally no top navigation/pill here; web opens Study from its menu. */
.lvt-study-frame { background: #101015; }
.lvt-study-stage { position: absolute; inset: 0; overflow: hidden; padding: 11px 13px; background: #101015; opacity: 0; }
.lvt-study-upload { opacity: 1; }
.lvt-study-upload h4 { margin: 0; color: #eee9e4; font: 400 12px Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.lvt-study-upload > p { margin: 3px 0 8px; color: #77717c; font-size: 5.5px; }
.lvt-dropzone { position: relative; height: 159px; display: grid; place-items: center; align-content: center; gap: 5px; border: 1px dashed rgba(245,166,35,.4); border-radius: 12px; background: rgba(245,166,35,.025); text-align: center; }
.lvt-upload-symbol { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: #201505; background: linear-gradient(180deg,#ffd37a,#f5a623); box-shadow: 0 5px 15px rgba(245,166,35,.22); font-size: 15px; }
.lvt-dropzone > b { color: #ddd7df; font-size: 7px; }
.lvt-dropzone > small { color: #6e6873; font-size: 4.7px; }
.lvt-drag-file { position: absolute; z-index: 8; left: 50%; top: 50%; width: max-content; opacity: 0; }
.lvt-drag-file > span { height: 25px; display: flex; align-items: center; gap: 5px; padding: 0 8px; border: 1px solid rgba(255,255,255,.15); border-radius: 7px; color: #eee8f0; background: #28252c; box-shadow: 0 8px 18px rgba(0,0,0,.5); font-size: 5.2px; }
.lvt-drag-file > span i { color: #ffc15b; font-style: normal; font-weight: 850; }
.lvt-drag-pointer { right: -12px; bottom: -10px; opacity: 1; }

.lvt-study-progress { display: grid; place-items: center; background: rgba(7,7,10,.92); }
.lvt-progress-card { width: min(100%, 294px); padding: 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 15px; background: linear-gradient(155deg,#27242b,#17161b); box-shadow: 0 18px 42px rgba(0,0,0,.58); }
.lvt-progress-head { display: flex; align-items: center; gap: 9px; }
.lvt-progress-head > i { width: 31px; height: 35px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(245,166,35,.35); border-radius: 7px; color: #ffc15b; background: rgba(245,166,35,.07); font-size: 7px; font-style: normal; font-weight: 850; }
.lvt-progress-head > span { min-width: 0; flex: 1; }
.lvt-progress-head > span b { display: block; color: #eee9e4; font: 400 10px Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.lvt-progress-head > span small { display: block; margin-top: 2px; overflow: hidden; color: #817b86; font-size: 5px; text-overflow: ellipsis; white-space: nowrap; }
.lvt-progress-head strong { position: relative; width: 36px; height: 15px; color: #ffc15b; font-size: 9px; text-align: right; }
.lvt-progress-head strong em { position: absolute; inset: 0; font-style: normal; opacity: 0; }
.lvt-upload-track { position: relative; height: 7px; margin-top: 12px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.08); }
.lvt-upload-track > i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#c95732,#f5a623,#ffd37a); box-shadow: 0 0 9px rgba(245,166,35,.42); }
.lvt-progress-card > p { position: relative; height: 12px; margin: 7px 0 0; color: #8b8590; font-size: 5px; }
.lvt-progress-card > p span { position: absolute; inset: 0; opacity: 0; }
.lvt-progress-card > p span:last-child { color: #73ca9d; }

.lvt-study-outline { padding: 11px 14px; }
.lvt-study-mobile-actions,
.lvt-study-mobile-extra,
.lvt-mobile-study-tabs { display: none; }
.lvt-study-section-wrap { display: contents; }
.lvt-study-document { height: 37px; display: flex; align-items: center; gap: 8px; padding: 0 9px; border: 1px solid rgba(255,255,255,.09); border-radius: 9px; background: linear-gradient(155deg,#242229,#17161b); }
.lvt-study-document > i { width: 22px; height: 25px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 5px; color: #ffc15b; background: rgba(245,166,35,.08); font-size: 5px; font-style: normal; font-weight: 850; }
.lvt-study-document > span { min-width: 0; flex: 1; }
.lvt-study-document b { display: block; overflow: hidden; color: #d8d2db; font-size: 5.7px; text-overflow: ellipsis; white-space: nowrap; }
.lvt-study-document small { display: block; margin-top: 2px; color: #716c76; font-size: 4px; text-transform: uppercase; }
.lvt-study-document em { color: #d18f2d; font-size: 5px; font-style: normal; }
.lvt-contents-head { display: flex; align-items: end; margin-top: 8px; }
.lvt-contents-head b { color: #eee9e4; font: 400 11px Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.lvt-contents-head span { margin-left: auto; color: #706b76; font: 4.5px ui-monospace, monospace; }
.lvt-toc-track { height: 3px; margin-top: 4px; border-radius: 99px; background: rgba(255,255,255,.07); }
.lvt-toc-track i { display: block; width: 18%; height: 100%; border-radius: inherit; background: #45af78; }
.lvt-part { display: block; margin: 7px 0 4px; color: #d18f2d; font-size: 4.7px; font-weight: 850; letter-spacing: .75px; text-transform: uppercase; }
.lvt-section { height: 23px; display: flex; align-items: center; gap: 6px; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
.lvt-section span { color: #d18f2d; font-size: 5px; }
.lvt-section b { color: #d5cfd8; font: 400 7px Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.lvt-section em { margin-left: auto; color: #706b76; font-size: 4px; font-style: normal; }
.lvt-section-copy { margin: 4px 0 3px 21px; color: #77717c; font: italic 4.5px/1.3 Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.lvt-study-lesson { height: 30px; display: flex; align-items: center; gap: 6px; padding-left: 21px; }
.lvt-study-lesson > i { width: 10px; height: 10px; flex: 0 0 auto; border: 1px solid #716c76; border-radius: 50%; }
.lvt-study-lesson > span { min-width: 0; flex: 1 1 auto; overflow: hidden; color: #aaa4ae; font-size: 5.2px; text-overflow: ellipsis; white-space: nowrap; }
/* Matches the real study.html lesson row: title flexes, the Study action sits at the row's end. */
.lvt-study-lesson > button {
  position: relative;
  min-width: 64px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-left: auto;
  margin-right: 0;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(180deg,#33333f,#17171d);
  box-shadow: 0 5px 12px rgba(0,0,0,.4), inset 0 1px rgba(255,255,255,.08);
  font-size: 6.4px;
  font-weight: 850;
  pointer-events: none;
}
.lvt-study-button-icon { width: 12px; height: 12px; display: block; flex: 0 0 auto; }
.lvt-study-pointer { left: 50%; top: 50%; }

.lvt-study-tools,
.lvt-study-preview,
.lvt-study-generating,
.lvt-study-quiz { padding: 0; background: linear-gradient(rgba(7,7,10,.76),rgba(7,7,10,.86)),#101015; }
.lvt-study-modal { position: absolute; inset: 11px 35px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 13px; background: linear-gradient(155deg,#242229,#141318); box-shadow: 0 18px 45px rgba(0,0,0,.64); }
.lvt-modal-head { height: 28px; display: flex; align-items: center; gap: 7px; padding: 0 9px; border-bottom: 1px solid rgba(255,255,255,.08); }
.lvt-modal-head b { min-width: 0; flex: 1; overflow: hidden; color: #e4dee7; font: 400 7px Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.lvt-modal-head span { color: #716c76; font-size: 8px; }
.lvt-tool-copy { padding: 8px 10px 5px; }
.lvt-tool-copy h4 { margin: 0; color: #eee9e4; font: 400 9px Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.lvt-tool-copy p { margin: 3px 0 0; color: #77717c; font-size: 4.7px; }
.lvt-tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 0 10px 8px; }
.lvt-study-tool { position: relative; height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 7px; border: 1px solid rgba(255,255,255,.08); border-radius: 7px; color: #a29ca7; background: linear-gradient(160deg,#29262e,#19181d); }
.lvt-study-tool-icon { width: 23px; height: 23px; flex: 0 0 auto; overflow: visible; filter: drop-shadow(0 4px 4px rgba(0,0,0,.42)); }
.lvt-study-tool-icon > :not(.lvt-icon-line):not(.lvt-icon-dark):not(.lvt-icon-dot):not(.lvt-icon-shine) { fill: #eba41f; }
.lvt-study-tool-icon .lvt-icon-shine { fill: rgba(255,255,255,.24); }
.lvt-study-tool-icon .lvt-icon-line { fill: none; stroke: #754807; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lvt-study-tool-icon .lvt-icon-dark,
.lvt-study-tool-icon .lvt-icon-dot { fill: #754807; stroke: #754807; stroke-width: 2.2; stroke-linecap: round; }
.lvt-study-tool b { font-size: 5px; }
.lvt-tool-pointer { right: -4px; bottom: -5px; }

.lvt-preview-body,
.lvt-generating-body { height: calc(100% - 28px); display: grid; place-items: center; align-content: center; gap: 5px; text-align: center; }
.lvt-quiz-icon { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 50%; color: #734708; background: linear-gradient(180deg,#fcd34d,#e08608); box-shadow: 0 9px 13px rgba(0,0,0,.52); font-size: 20px; font-style: normal; font-weight: 900; }
.lvt-preview-body > b { color: #eee9e4; font: 400 10px Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.lvt-preview-body > span { color: #77717c; font-size: 5px; }
.lvt-preview-body > button { position: relative; height: 25px; margin-top: 3px; padding: 0 14px; border: 0; border-radius: 7px; color: #211505; background: linear-gradient(180deg,#ffd37a,#f5a623); box-shadow: 0 2px #8e5409; font-size: 5.5px; font-weight: 850; pointer-events: none; }
.lvt-preview-pointer { right: -8px; bottom: -7px; }
.lvt-spinner { width: 35px; height: 35px; }
.lvt-generating-body > b { color: #eee9e4; font: 400 9px Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.lvt-generating-body > span { color: #77717c; font-size: 5px; }
.lvt-generating-body > div { width: 140px; height: 4px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.07); }
.lvt-generating-body > div > i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#c95732,#f5a623); }

.lvt-quiz-body { padding: 8px 10px; }
.lvt-quiz-body > div { display: flex; justify-content: space-between; color: #d18f2d; font-size: 4px; letter-spacing: .55px; text-transform: uppercase; }
.lvt-quiz-progress { display: block; width: 20%; height: 2px; margin: 5px 0 6px; background: var(--lvt-amber); }
.lvt-quiz-body h4 { margin: 0 0 6px; color: #eee9e4; font: 400 7.5px/1.25 Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.lvt-quiz-body > p { display: grid; gap: 4px; margin: 0; }
.lvt-quiz-body > p > span { height: 24px; display: flex; align-items: center; gap: 6px; padding: 0 7px; border: 1px solid rgba(255,255,255,.08); border-radius: 6px; color: #918b96; background: rgba(255,255,255,.025); font-size: 5px; }
.lvt-quiz-body > p i { width: 13px; height: 13px; display: grid; place-items: center; border-radius: 50%; color: #716c76; background: #27252b; font-size: 4px; font-style: normal; }
.lvt-quiz-body > p .lvt-correct { border-color: rgba(73,189,128,.34); color: #9ad7b8; background: rgba(73,189,128,.06); }
.lvt-quiz-body > p .lvt-correct i { color: #092419; background: #59c78d; }
.lvt-quiz-body > small { display: block; margin-top: 5px; color: #75cb9f; font-size: 4.5px; }

.lvt-playing .lvt-study-upload { animation: lvt-study-upload-stage 12s ease-in-out infinite; }
.lvt-playing .lvt-study-progress { animation: lvt-study-progress-stage 12s ease-in-out infinite; }
.lvt-playing .lvt-study-outline { animation: lvt-study-outline-stage 12s ease-in-out infinite; }
.lvt-playing .lvt-study-tools { animation: lvt-study-tools-stage 12s ease-in-out infinite; }
.lvt-playing .lvt-study-preview { animation: lvt-study-preview-stage 12s ease-in-out infinite; }
.lvt-playing .lvt-study-generating { animation: lvt-study-generating-stage 12s ease-in-out infinite; }
.lvt-playing .lvt-study-quiz { animation: lvt-study-quiz-stage 12s ease-in-out infinite; }
.lvt-playing .lvt-drag-file { animation: lvt-file-drag 12s cubic-bezier(.2,.8,.2,1) infinite; }
.lvt-playing .lvt-dropzone { animation: lvt-drop-ready 12s ease-in-out infinite; }
.lvt-playing .lvt-upload-track > i { animation: lvt-upload-fill 12s ease-in-out infinite; }
.lvt-playing .lvt-progress-head strong em:nth-child(1) { animation: lvt-pct-zero 12s linear infinite; }
.lvt-playing .lvt-progress-head strong em:nth-child(2) { animation: lvt-pct-mid 12s linear infinite; }
.lvt-playing .lvt-progress-head strong em:nth-child(3) { color: #73ca9d; animation: lvt-pct-done 12s linear infinite; }
.lvt-playing .lvt-progress-card > p span:nth-child(1) { animation: lvt-status-upload 12s linear infinite; }
.lvt-playing .lvt-progress-card > p span:nth-child(2) { animation: lvt-status-prepare 12s linear infinite; }
.lvt-playing .lvt-progress-card > p span:nth-child(3) { animation: lvt-status-ready 12s linear infinite; }
.lvt-playing .lvt-study-pointer { animation: lvt-study-tap 12s cubic-bezier(.2,.8,.2,1) infinite; }
.lvt-playing .lvt-quiz-tool { animation: lvt-tool-press 12s ease-in-out infinite; }
.lvt-playing .lvt-tool-pointer { animation: lvt-tool-tap 12s cubic-bezier(.2,.8,.2,1) infinite; }
.lvt-playing .lvt-preview-pointer { animation: lvt-preview-tap 12s cubic-bezier(.2,.8,.2,1) infinite; }
.lvt-playing .lvt-generating-body > div > i { animation: lvt-generation-fill 12s linear infinite; }

@keyframes lvt-study-upload-stage { 0%,11%{opacity:1;transform:none}13%,98%{opacity:0;transform:translateY(-3px)}100%{opacity:1;transform:none} }
@keyframes lvt-study-progress-stage { 0%,11%{opacity:0}13%,29%{opacity:1}31%,100%{opacity:0} }
@keyframes lvt-study-outline-stage { 0%,29%{opacity:0;transform:translateY(3px)}31%,47%{opacity:1;transform:none}49%,100%{opacity:0;transform:translateY(-3px)} }
@keyframes lvt-study-tools-stage { 0%,47%{opacity:0;transform:translateY(3px)}49%,61%{opacity:1;transform:none}63%,100%{opacity:0;transform:translateY(-3px)} }
@keyframes lvt-study-preview-stage { 0%,61%{opacity:0;transform:translateY(3px)}63%,71%{opacity:1;transform:none}73%,100%{opacity:0} }
@keyframes lvt-study-generating-stage { 0%,71%{opacity:0}73%,82%{opacity:1}84%,100%{opacity:0} }
@keyframes lvt-study-quiz-stage { 0%,82%{opacity:0;transform:translateY(3px)}84%,98%{opacity:1;transform:none}100%{opacity:0} }
@keyframes lvt-file-drag {
  0%,1%{opacity:0;transform:translate(calc(-50% - 180px),calc(-50% - 68px)) rotate(-5deg) scale(.94)}
  2%{opacity:1}8%{opacity:1;transform:translate(-50%,-50%) rotate(0) scale(1)}10%{opacity:1;transform:translate(-50%,-50%) scale(.97)}12%,100%{opacity:0;transform:translate(-50%,-50%) scale(.97)}
}
@keyframes lvt-drop-ready { 0%,3%,11%,100%{border-color:rgba(245,166,35,.4);background:rgba(245,166,35,.025);box-shadow:none}5%,9%{border-color:#ffd37a;background:rgba(245,166,35,.09);box-shadow:inset 0 0 0 3px rgba(245,166,35,.06),0 0 16px rgba(245,166,35,.12)} }
@keyframes lvt-upload-fill { 0%,13%{width:0}17%{width:38%}23%{width:76%}28%,100%{width:100%} }
@keyframes lvt-pct-zero { 13%,16%{opacity:1}0%,17%,100%{opacity:0} }
@keyframes lvt-pct-mid { 17%,22%{opacity:1}0%,16%,23%,100%{opacity:0} }
@keyframes lvt-pct-done { 23%,30%{opacity:1}0%,22%,31%,100%{opacity:0} }
@keyframes lvt-status-upload { 13%,20%{opacity:1}0%,21%,100%{opacity:0} }
@keyframes lvt-status-prepare { 21%,26%{opacity:1}0%,20%,27%,100%{opacity:0} }
@keyframes lvt-status-ready { 27%,30%{opacity:1}0%,26%,31%,100%{opacity:0} }
@keyframes lvt-study-tap { 0%,35%{opacity:0;transform:translate(calc(-50% + 9px),calc(-50% + 7px))}37%{opacity:1;transform:translate(-50%,-50%)}41%{transform:translate(-50%,-50%) scale(.7)}44%,46%{opacity:1;transform:translate(-50%,-50%) scale(1)}48%,100%{opacity:0;transform:translate(-50%,-50%)} }
@keyframes lvt-tool-press { 52%,59%{border-color:#ffd37a;color:#ffc15b;background:rgba(245,166,35,.09);box-shadow:0 0 0 3px rgba(245,166,35,.06)}0%,50%,62%,100%{border-color:rgba(255,255,255,.08);color:#a29ca7;background:linear-gradient(160deg,#29262e,#19181d);box-shadow:none} }
@keyframes lvt-tool-tap { 0%,50%{opacity:0;transform:translate(9px,7px)}52%{opacity:1;transform:none}56%{transform:scale(.7)}59%,61%{opacity:1;transform:scale(1)}63%,100%{opacity:0} }
@keyframes lvt-preview-tap { 0%,64%{opacity:0;transform:translate(9px,7px)}66%{opacity:1;transform:none}69%{transform:scale(.7)}71%,72%{opacity:1;transform:scale(1)}74%,100%{opacity:0} }
@keyframes lvt-generation-fill { 0%,73%{width:0}76%{width:25%}79%{width:58%}82%,100%{width:100%} }

/* Exact key artwork and light treatment from the Learnara paywall. */
.lvt-key-frame { display: grid; place-items: center; background: radial-gradient(circle at 50% 45%,rgba(245,166,35,.13),transparent 42%),#101015; }
.lvt-key-emblem { position: relative; width: 112px; height: 104px; display: flex; align-items: center; justify-content: center; }
.lvt-key-gem { width: 88px; height: 88px; overflow: visible; filter: drop-shadow(0 10px 30px rgba(245,158,11,.45)); }
.lvt-key-emblem::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 12px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  background: linear-gradient(115deg,transparent 38%,rgba(255,240,205,.5) 47%,rgba(255,255,255,.72) 50%,rgba(255,240,205,.5) 53%,transparent 62%);
  background-size: 230% 230%;
  background-repeat: no-repeat;
}
.lvt-key-spark { position: absolute; }
.lvt-spark-one { top: 0; left: 10px; width: 21px; height: 21px; }
.lvt-spark-two { top: 20px; right: 6px; width: 13px; height: 13px; opacity: .8; }
.lvt-spark-three { bottom: 6px; left: 24px; width: 11px; height: 11px; opacity: .7; }
.lvt-playing .lvt-key-emblem { animation: lvt-key-float 3.4s ease-in-out infinite; }
.lvt-playing .lvt-key-emblem::after { animation: lvt-key-shimmer 5.8s ease-in-out infinite; }
@keyframes lvt-key-float { 0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)} }
@keyframes lvt-key-shimmer { 0%{background-position:140% 0}55%,100%{background-position:-40% 0} }
@keyframes lvt-spin { to{transform:rotate(360deg)} }

/* mWeb uses the approved native compositions, not scaled desktop miniatures. */
.lvt-root[data-lvt-mobile="true"] {
  width: calc(100% - 20px);
  margin: 0 10px;
}
.lvt-root[data-lvt-mobile="true"] .lvt-frame { height: 180px; border-radius: 14px; }
.lvt-root[data-lvt-mobile="true"][data-lvt-step="lesson"] .lvt-frame { height: 248px; }
.lvt-root[data-lvt-mobile="true"][data-lvt-step="study"] .lvt-frame { height: 226px; }
.lvt-root[data-lvt-mobile="true"][data-lvt-step="key"] .lvt-frame { height: 178px; }
.lvt-root[data-lvt-mobile="true"] .lvt-topbar { display: none; }

/* A 24px finger pulse is centered inside the exact control being tapped. */
.lvt-root[data-lvt-mobile="true"] .lvt-pointer {
  width: 24px;
  height: 24px;
  border: 1.5px solid rgba(255,218,143,.92);
  background: radial-gradient(circle,#fff6df 0 9%,#f5a623 10% 25%,rgba(245,166,35,.30) 27% 52%,rgba(245,166,35,.07) 54% 69%,transparent 71%);
  box-shadow: 0 0 0 4px rgba(245,166,35,.10),0 0 16px rgba(245,166,35,.78),0 5px 9px rgba(0,0,0,.58);
}
.lvt-root[data-lvt-mobile="true"] .lvt-pointer::after { display: none; }
.lvt-root[data-lvt-mobile="true"] .lvt-control-pointer { margin-left: -12px; margin-top: -12px; }

/* Step 1 — centered branch title, real branch scene and compact arrow controls. */
.lvt-root[data-lvt-mobile="true"] .lvt-split-home { height: 100%; display: block; padding: 0; }
.lvt-root[data-lvt-mobile="true"] .lvt-split-home > .lvt-first-card { display: none; }
.lvt-root[data-lvt-mobile="true"] .lvt-split-home > .lvt-branch-card { width: 100%; height: 100%; }
.lvt-root[data-lvt-mobile="true"] .lvt-branch-card {
  border: 0;
  border-radius: 0;
  background: radial-gradient(circle at 50% 57%,rgba(57,175,179,.13),transparent 38%),#101015;
  box-shadow: none;
}
.lvt-root[data-lvt-mobile="true"] .lvt-branch-copy { width: 100%; display: flex; flex-direction: column; align-items: center; padding: 5px 10px 0; text-align: center; }
.lvt-root[data-lvt-mobile="true"] .lvt-branch-kicker { display: none; }
.lvt-root[data-lvt-mobile="true"] .lvt-branch-titles { width: 100%; height: 31px; margin-top: 0; }
.lvt-root[data-lvt-mobile="true"] .lvt-branch-titles strong { font-size: 13px; line-height: 1.08; }
.lvt-root[data-lvt-mobile="true"] .lvt-branch-subs { width: 100%; height: 12px; }
.lvt-root[data-lvt-mobile="true"] .lvt-branch-subs span { font-size: 5.8px; }
.lvt-root[data-lvt-mobile="true"] .lvt-branch-art { left: 0; right: 0; top: 43px; width: 100%; height: 104px; }
.lvt-root[data-lvt-mobile="true"] .lvt-branch-art::before { width: 115px; height: 115px; }
.lvt-root[data-lvt-mobile="true"] .lvt-real-branch-icon { width: 132px; height: 112px; }
.lvt-root[data-lvt-mobile="true"] .lvt-branch-switch { height: 31px; justify-content: center; padding: 0; border: 0; background: transparent; }
.lvt-root[data-lvt-mobile="true"] .lvt-branch-switch > span { display: none; }
.lvt-root[data-lvt-mobile="true"] .lvt-branch-controls { gap: 6px; font-size: 5.5px; }
.lvt-root[data-lvt-mobile="true"] .lvt-branch-controls button { width: 19px; height: 19px; font-size: 8px; }
.lvt-root[data-lvt-mobile="true"] .lvt-branch-count { width: 27px; }
.lvt-root[data-lvt-mobile="true"] .lvt-branch-pointer { left: 50%; top: 50%; right: auto; bottom: auto; margin: -12px 0 0 -12px; }

/* Step 2 — one connected two-way settings control with native-size menus. */
.lvt-root[data-lvt-mobile="true"] .lvt-settings { height: 100%; padding: 9px 11px; background: #101015; }
.lvt-root[data-lvt-mobile="true"] .lvt-settings-heading { margin-bottom: 7px; }
.lvt-root[data-lvt-mobile="true"] .lvt-settings-heading span { font-size: 4.8px; }
.lvt-root[data-lvt-mobile="true"] .lvt-settings-heading b { max-width: 130px; font-size: 4.8px; white-space: nowrap; }
.lvt-root[data-lvt-mobile="true"] .lvt-setting-boxes {
  height: 58px;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  overflow: visible;
  border: 1px solid rgba(245,166,35,.24);
  border-radius: 13px;
  background: linear-gradient(180deg,#242229,#17161b);
  box-shadow: 0 3px 0 #08080b,0 9px 18px rgba(0,0,0,.28);
}
.lvt-root[data-lvt-mobile="true"] .lvt-setting {
  height: 58px;
  padding: 0 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.lvt-root[data-lvt-mobile="true"] .lvt-setting:first-child { border-right: 1px solid rgba(255,255,255,.08); }
.lvt-root[data-lvt-mobile="true"] .lvt-setting::after { inset: 4px; border-radius: 9px; }
.lvt-root[data-lvt-mobile="true"] .lvt-setting small { font-size: 4.5px; }
.lvt-root[data-lvt-mobile="true"] .lvt-setting > div { height: 17px; margin-top: 5px; }
.lvt-root[data-lvt-mobile="true"] .lvt-setting b {
  right: 15px;
  overflow: hidden;
  font-size: 9.5px;
  line-height: 1;
  text-overflow: clip;
  white-space: nowrap;
}
.lvt-root[data-lvt-mobile="true"] .lvt-setting > div > i { font-size: 8px; }
.lvt-root[data-lvt-mobile="true"] .lvt-difficulty-menu,
.lvt-root[data-lvt-mobile="true"] .lvt-length-menu { top: 80px; width: 132px; border-radius: 9px; }
.lvt-root[data-lvt-mobile="true"] .lvt-difficulty-menu { left: 11px; padding: 4px; }
.lvt-root[data-lvt-mobile="true"] .lvt-length-menu { right: 11px; padding: 8px; }
.lvt-root[data-lvt-mobile="true"] .lvt-difficulty-menu > span { height: 19px; padding: 0 6px; border-radius: 5px; font-size: 5.4px; white-space: nowrap; }
.lvt-root[data-lvt-mobile="true"] .lvt-length-stepper { height: 39px; }
.lvt-root[data-lvt-mobile="true"] .lvt-length-stepper > span { font-size: 5.5px; }
.lvt-root[data-lvt-mobile="true"] .lvt-length-controls { grid-template-columns: 25px 30px 25px; }
.lvt-root[data-lvt-mobile="true"] .lvt-length-controls > i,
.lvt-root[data-lvt-mobile="true"] .lvt-length-count { height: 25px; }
.lvt-root[data-lvt-mobile="true"] .lvt-length-count b { font-size: 7px; }

/* Step 3 — a taller native lesson sheet, rapid lesson taps, Start, then loading. */
.lvt-root[data-lvt-mobile="true"] .lvt-lesson-home { height: 100%; padding: 8px; background: #0b0b0e; }
.lvt-root[data-lvt-mobile="true"] .lvt-lesson-home > .lvt-first-card { width: 100%; height: 100%; display: flex; }
.lvt-root[data-lvt-mobile="true"] .lvt-lesson-home > .lvt-branch-card { display: none; }
.lvt-root[data-lvt-mobile="true"] .lvt-first-card {
  padding: 10px 11px 9px;
  border-radius: 16px;
  background: #111116;
  box-shadow: 0 10px 22px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.025);
}
.lvt-root[data-lvt-mobile="true"] .lvt-first-head { min-height: 28px; gap: 5px; }
.lvt-root[data-lvt-mobile="true"] .lvt-first-head > span { font-size: 6.2px; }
.lvt-root[data-lvt-mobile="true"] .lvt-first-nav { gap: 4px; font-size: 5px; }
.lvt-root[data-lvt-mobile="true"] .lvt-first-nav button { width: 21px; height: 21px; border-radius: 7px; font-size: 8px; }
.lvt-root[data-lvt-mobile="true"] .lvt-first-count { width: 29px; height: 11px; }
.lvt-root[data-lvt-mobile="true"] .lvt-lesson-slides { height: 88px; margin-top: 7px; }
.lvt-root[data-lvt-mobile="true"] .lvt-lesson-slides h4 { margin-bottom: 6px; font-size: 16px; line-height: 1.08; }
.lvt-root[data-lvt-mobile="true"] .lvt-lesson-slides p { max-width: 225px; font-size: 6.5px; line-height: 1.45; }
.lvt-root[data-lvt-mobile="true"] .lvt-lesson-meta { display: block; margin-top: 6px; color: #66616c; font-size: 5.2px; }
.lvt-root[data-lvt-mobile="true"] .lvt-first-settings { gap: 0; overflow: hidden; border: 1px solid rgba(245,166,35,.20); border-radius: 8px; background: #1b1a20; }
.lvt-root[data-lvt-mobile="true"] .lvt-first-settings > span { height: 36px; gap: 3px; padding: 0 9px; border: 0; border-radius: 0; background: transparent; }
.lvt-root[data-lvt-mobile="true"] .lvt-first-settings > span:first-child { border-right: 1px solid rgba(255,255,255,.08); }
.lvt-root[data-lvt-mobile="true"] .lvt-first-settings small { font-size: 4.2px; }
.lvt-root[data-lvt-mobile="true"] .lvt-first-settings b { font-size: 6.2px; }
.lvt-root[data-lvt-mobile="true"] .lvt-start-lesson { height: 35px; margin-top: 7px; border-radius: 9px; font-size: 7px; }
.lvt-root[data-lvt-mobile="true"] .lvt-lesson-loading { background: #111116; }
.lvt-root[data-lvt-mobile="true"] .lvt-web-forging-loader { display: none; }
.lvt-root[data-lvt-mobile="true"] .lvt-mobile-lesson-loader { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.lvt-root[data-lvt-mobile="true"] .lvt-mobile-lesson-loader > i { width: 27px; height: 27px; }
.lvt-root[data-lvt-mobile="true"] .lvt-mobile-lesson-loader > b { font-size: 8px; }
.lvt-root[data-lvt-mobile="true"] .lvt-lesson-cycles .lvt-lesson-slides > div,
.lvt-root[data-lvt-mobile="true"] .lvt-lesson-cycles .lvt-first-count > i,
.lvt-root[data-lvt-mobile="true"] .lvt-lesson-arrow-pointer,
.lvt-root[data-lvt-mobile="true"] .lvt-lesson-start-pointer,
.lvt-root[data-lvt-mobile="true"] .lvt-lesson-cycles .lvt-start-lesson,
.lvt-root[data-lvt-mobile="true"] .lvt-lesson-cycles .lvt-lesson-loading { animation-duration: 5.3s; }

/* Step 4 — underlined native topic input, two choices and one full-width CTA. */
.lvt-root[data-lvt-mobile="true"] .lvt-create { height: 100%; display: block; padding: 8px 12px; background: #101015; }
.lvt-root[data-lvt-mobile="true"] .lvt-create-form { width: 100%; text-align: center; }
.lvt-root[data-lvt-mobile="true"] .lvt-create-form > small { font-size: 4.6px; letter-spacing: .9px; }
.lvt-root[data-lvt-mobile="true"] .lvt-create-form h4 { margin: 3px 0 5px; font-size: 13px; }
.lvt-root[data-lvt-mobile="true"] .lvt-topic-line {
  height: 30px;
  justify-content: center;
  margin-top: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(245,166,35,.38);
  border-radius: 0;
  background: transparent;
}
.lvt-root[data-lvt-mobile="true"] .lvt-topic-line span { font-size: 7.4px; }
.lvt-root[data-lvt-mobile="true"] .lvt-create-form > p { margin-top: 3px; font-size: 4.4px; text-align: center; }
.lvt-root[data-lvt-mobile="true"] .lvt-create-controls { flex-wrap: wrap; justify-content: center; gap: 5px; margin-top: 7px; }
.lvt-root[data-lvt-mobile="true"] .lvt-create-controls > span { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 25px; padding: 4px 7px; font-size: 5.6px; }
.lvt-root[data-lvt-mobile="true"] .lvt-create-controls button { flex: 0 0 100%; height: 30px; margin: 0; border-radius: 8px; font-size: 6.4px; }
.lvt-root[data-lvt-mobile="true"] .lvt-create-loading { inset: 0; padding-top: 24px; gap: 6px; background: #101015; }
.lvt-root[data-lvt-mobile="true"] .lvt-create-loading > i { width: 28px; height: 28px; }
.lvt-root[data-lvt-mobile="true"] .lvt-create-loading b { font-size: 8px; }
.lvt-root[data-lvt-mobile="true"] .lvt-create-loading span { font-size: 4.7px; }

/* Step 5 — native Study upload, progress, contents, tools and quiz stages. */
.lvt-root[data-lvt-mobile="true"] .lvt-study-stage { padding: 8px 10px; }
.lvt-root[data-lvt-mobile="true"] .lvt-study-upload h4 { font-size: 10.5px; }
.lvt-root[data-lvt-mobile="true"] .lvt-study-upload > p { margin: 3px 0 7px; font-size: 5.2px; }
.lvt-root[data-lvt-mobile="true"] .lvt-dropzone { height: 155px; gap: 4px; border-radius: 12px; }
.lvt-root[data-lvt-mobile="true"] .lvt-upload-symbol { width: 43px; height: 43px; border-radius: 12px; font-size: 18px; }
.lvt-root[data-lvt-mobile="true"] .lvt-dropzone > b { font-size: 7.2px; }
.lvt-root[data-lvt-mobile="true"] .lvt-dropzone > small { font-size: 4.2px; }
.lvt-root[data-lvt-mobile="true"] .lvt-drag-file { font-size: 5px; }
.lvt-root[data-lvt-mobile="true"] .lvt-progress-card { width: 242px; padding: 15px 16px; border-radius: 16px; }
.lvt-root[data-lvt-mobile="true"] .lvt-progress-head { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 5px 9px; }
.lvt-root[data-lvt-mobile="true"] .lvt-progress-head > i { width: 42px; height: 48px; grid-row: 1; border-radius: 10px; font-size: 7px; }
.lvt-root[data-lvt-mobile="true"] .lvt-progress-head > span b { font-size: 10px; }
.lvt-root[data-lvt-mobile="true"] .lvt-progress-head > span small { margin-top: 3px; font-size: 5px; }
.lvt-root[data-lvt-mobile="true"] .lvt-progress-head strong { grid-column: 1 / -1; width: 100%; height: 31px; margin-top: 4px; font-size: 23px; text-align: center; }
.lvt-root[data-lvt-mobile="true"] .lvt-progress-head strong em { text-align: center; }
.lvt-root[data-lvt-mobile="true"] .lvt-upload-track { height: 7px; margin-top: 8px; }
.lvt-root[data-lvt-mobile="true"] .lvt-progress-card > p { height: 12px; margin-top: 7px; font-size: 5px; text-align: center; }
.lvt-root[data-lvt-mobile="true"] .lvt-study-outline { display: flex; flex-direction: column; padding: 8px 10px; }
.lvt-root[data-lvt-mobile="true"] .lvt-study-document { display: none; }
.lvt-root[data-lvt-mobile="true"] .lvt-contents-head { order: 1; margin-top: 0; }
.lvt-root[data-lvt-mobile="true"] .lvt-contents-head b { font-size: 9.5px; }
.lvt-root[data-lvt-mobile="true"] .lvt-contents-head span { font-size: 4.5px; }
.lvt-root[data-lvt-mobile="true"] .lvt-toc-track { order: 2; height: 4px; margin-top: 5px; }
.lvt-root[data-lvt-mobile="true"] .lvt-study-mobile-actions { order: 3; height: 30px; display: grid; grid-template-columns: repeat(2,1fr); gap: 6px; margin-top: 7px; }
.lvt-root[data-lvt-mobile="true"] .lvt-study-mobile-actions > span { display: flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; color: #aaa4ae; background: linear-gradient(160deg,#211f25,#151419); font-size: 5.5px; }
.lvt-root[data-lvt-mobile="true"] .lvt-study-mobile-actions i { color: #ffc15b; font-size: 7px; font-style: normal; }
.lvt-root[data-lvt-mobile="true"] .lvt-part { order: 4; margin: 8px 0 4px; font-size: 4.8px; }
.lvt-root[data-lvt-mobile="true"] .lvt-study-section-wrap { order: 5; height: 105px; display: block; padding: 7px 8px; border: 1px solid rgba(255,255,255,.09); border-radius: 9px; background: linear-gradient(155deg,#211f25,#131217); }
.lvt-root[data-lvt-mobile="true"] .lvt-section { height: 18px; gap: 5px; border: 0; }
.lvt-root[data-lvt-mobile="true"] .lvt-section span { font-size: 5.2px; }
.lvt-root[data-lvt-mobile="true"] .lvt-section b { font-size: 6.2px; }
.lvt-root[data-lvt-mobile="true"] .lvt-section em { font-size: 4px; }
.lvt-root[data-lvt-mobile="true"] .lvt-section-copy { margin: 5px 0 3px; font-size: 4.4px; }
.lvt-root[data-lvt-mobile="true"] .lvt-study-lesson { height: 31px; gap: 5px; padding-left: 0; border-top: 1px solid rgba(255,255,255,.06); }
.lvt-root[data-lvt-mobile="true"] .lvt-study-lesson > span { flex: 1 1 auto; font-size: 5px; }
.lvt-root[data-lvt-mobile="true"] .lvt-study-lesson > button { min-width: 62px; height: 27px; display: flex; align-items: center; justify-content: center; gap: 4px; margin-left: auto; margin-right: 0; padding: 0 9px; border-color: rgba(255,255,255,.14); color: #fff; background: #25242d; box-shadow: none; font-size: 6px; }
.lvt-root[data-lvt-mobile="true"] .lvt-study-button-icon { width: 12px; height: 12px; display: block; flex: 0 0 auto; }
.lvt-root[data-lvt-mobile="true"] .lvt-study-mobile-extra { display: flex; }
.lvt-root[data-lvt-mobile="true"] .lvt-study-modal { inset: 0; border: 0; border-radius: 0; box-shadow: none; }
.lvt-root[data-lvt-mobile="true"] .lvt-modal-head { height: 24px; gap: 6px; padding: 0 8px; }
.lvt-root[data-lvt-mobile="true"] .lvt-modal-head b { font-size: 6.5px; }
.lvt-root[data-lvt-mobile="true"] .lvt-modal-head span { font-size: 8px; }
.lvt-root[data-lvt-mobile="true"] .lvt-mobile-study-tabs { height: 19px; display: flex; align-items: center; gap: 10px; overflow: hidden; padding: 0 8px; border-bottom: 1px solid rgba(255,255,255,.07); color: #716c76; font-size: 4.1px; white-space: nowrap; }
.lvt-root[data-lvt-mobile="true"] .lvt-mobile-study-tabs .active { color: #ffc15b; font-weight: 750; }
.lvt-root[data-lvt-mobile="true"] .lvt-tool-copy { padding: 7px 9px 6px; }
.lvt-root[data-lvt-mobile="true"] .lvt-tool-copy h4 { font-size: 8px; }
.lvt-root[data-lvt-mobile="true"] .lvt-tool-copy p { margin-top: 3px; font-size: 4.2px; }
.lvt-root[data-lvt-mobile="true"] .lvt-tool-grid { gap: 4px; padding: 0 9px 7px; }
.lvt-root[data-lvt-mobile="true"] .lvt-study-tool { height: 40px; gap: 6px; padding: 0 7px; border-radius: 7px; }
.lvt-root[data-lvt-mobile="true"] .lvt-study-tool-icon { width: 27px; height: 27px; }
.lvt-root[data-lvt-mobile="true"] .lvt-study-tool b { font-size: 5.2px; }
.lvt-root[data-lvt-mobile="true"] .lvt-tool-pointer,
.lvt-root[data-lvt-mobile="true"] .lvt-preview-pointer { left: 50%; top: 50%; right: auto; bottom: auto; margin: -12px 0 0 -12px; }
.lvt-root[data-lvt-mobile="true"] .lvt-preview-body,
.lvt-root[data-lvt-mobile="true"] .lvt-generating-body { height: calc(100% - 43px); gap: 5px; }
.lvt-root[data-lvt-mobile="true"] .lvt-quiz-icon { width: 49px; height: 49px; }
.lvt-root[data-lvt-mobile="true"] .lvt-preview-body > b { font-size: 9px; }
.lvt-root[data-lvt-mobile="true"] .lvt-preview-body > span { font-size: 5px; }
.lvt-root[data-lvt-mobile="true"] .lvt-preview-body > button { height: 27px; margin-top: 3px; padding: 0 13px; font-size: 5.5px; }
.lvt-root[data-lvt-mobile="true"] .lvt-spinner { width: 34px; height: 34px; }
.lvt-root[data-lvt-mobile="true"] .lvt-generating-body > b { font-size: 8.5px; }
.lvt-root[data-lvt-mobile="true"] .lvt-generating-body > span { font-size: 5px; }
.lvt-root[data-lvt-mobile="true"] .lvt-generating-body > div { width: 130px; height: 3px; }
.lvt-root[data-lvt-mobile="true"] .lvt-quiz-body { padding: 7px 9px; }
.lvt-root[data-lvt-mobile="true"] .lvt-quiz-body > div { font-size: 4.2px; }
.lvt-root[data-lvt-mobile="true"] .lvt-quiz-progress { margin: 4px 0 6px; }
.lvt-root[data-lvt-mobile="true"] .lvt-quiz-body h4 { margin-bottom: 6px; font-size: 7px; }
.lvt-root[data-lvt-mobile="true"] .lvt-quiz-body > p { gap: 3px; }
.lvt-root[data-lvt-mobile="true"] .lvt-quiz-body > p > span { height: 25px; gap: 6px; padding: 0 7px; font-size: 4.8px; }
.lvt-root[data-lvt-mobile="true"] .lvt-quiz-body > p i { width: 13px; height: 13px; font-size: 4px; }
.lvt-root[data-lvt-mobile="true"] .lvt-quiz-body > small { margin-top: 5px; font-size: 4.2px; }

/* Step 6 — the approved floating paywall key, in a compact visual shell. */
.lvt-root[data-lvt-mobile="true"] .lvt-key-emblem { width: 100px; height: 92px; }
.lvt-root[data-lvt-mobile="true"] .lvt-key-gem { width: 78px; height: 78px; }
.lvt-root[data-lvt-mobile="true"] .lvt-key-emblem::after { left: 11px; top: 7px; width: 78px; height: 78px; }

@media (prefers-reduced-motion: reduce) {
  .lvt-root *,
  .lvt-root *::before,
  .lvt-root *::after { animation: none !important; transition: none !important; }
  .lvt-root[data-lvt-step="study"] .lvt-study-stage { opacity: 0; }
  .lvt-root[data-lvt-step="study"] .lvt-study-outline { opacity: 1; transform: none; }
  .lvt-root[data-lvt-step="key"] .lvt-key-emblem::after { background-position: 50% 0; }
}

/* Light mode mirrors the real Snow/Polar product surfaces. Keep this block after the mWeb
   compositions: those rules deliberately use complete background shorthands, so an earlier
   background-color override would leave their dark gradients painted on top. */
html[data-theme="light"] .lvt-root {
  --lvt-text: #4b4b4b;
  --lvt-muted: #777777;
  --lvt-light-canvas: #ffffff;
  --lvt-light-panel: #f7f7f7;
  --lvt-light-ink: #4b4b4b;
  --lvt-light-copy: #777777;
  --lvt-light-faint: #8a8a8a;
  --lvt-light-hair: #e5e5e5;
  --lvt-light-hair-strong: #d7d7d7;
  --lvt-light-amber-copy: #b45309;
  --lvt-light-shadow: rgba(75,75,75,.16);
  color: var(--lvt-light-ink);
}

html[data-theme="light"] .lvt-root .lvt-frame {
  border-color: var(--lvt-light-hair);
  background: var(--lvt-light-canvas);
  box-shadow: inset 0 0 0 1px rgba(75,75,75,.04);
}
html[data-theme="light"] .lvt-root .lvt-topbar {
  border-bottom-color: var(--lvt-light-hair);
  background: var(--lvt-light-panel);
}
html[data-theme="light"] .lvt-root .lvt-wordmark,
html[data-theme="light"] .lvt-root :is(
  .lvt-lesson-slides h4,
  .lvt-web-forging-loader > b,
  .lvt-branch-titles strong,
  .lvt-branch-switch b,
  .lvt-setting b,
  .lvt-create-form h4,
  .lvt-topic-line span,
  .lvt-create-loading b,
  .lvt-study-upload h4,
  .lvt-dropzone > b,
  .lvt-progress-head > span b,
  .lvt-study-document b,
  .lvt-contents-head b,
  .lvt-section b,
  .lvt-modal-head b,
  .lvt-tool-copy h4,
  .lvt-preview-body > b,
  .lvt-generating-body > b,
  .lvt-quiz-body h4
) { color: var(--lvt-light-ink); }
html[data-theme="light"] .lvt-root :is(
  .lvt-surface,
  .lvt-first-nav,
  .lvt-lesson-slides p,
  .lvt-first-settings small,
  .lvt-web-forging-loader > em,
  .lvt-branch-subs span,
  .lvt-branch-switch small,
  .lvt-branch-controls,
  .lvt-settings-heading b,
  .lvt-setting small,
  .lvt-create-form > p,
  .lvt-create-loading span,
  .lvt-study-upload > p,
  .lvt-dropzone > small,
  .lvt-progress-head > span small,
  .lvt-progress-card > p,
  .lvt-study-document small,
  .lvt-contents-head span,
  .lvt-section em,
  .lvt-section-copy,
  .lvt-study-lesson > span,
  .lvt-modal-head span,
  .lvt-tool-copy p,
  .lvt-preview-body > span,
  .lvt-generating-body > span
) { color: var(--lvt-light-copy); }
html[data-theme="light"] .lvt-root :is(
  .lvt-first-head > span,
  .lvt-web-forging-loader > small,
  .lvt-branch-kicker,
  .lvt-settings-heading span,
  .lvt-create-form > small,
  .lvt-create-form h4 em,
  .lvt-drag-file > span i,
  .lvt-progress-head strong,
  .lvt-study-document > i,
  .lvt-study-document em,
  .lvt-part,
  .lvt-section span,
  .lvt-quiz-body > div
) { color: var(--lvt-light-amber-copy); }

/* Home/path and lesson miniatures. */
html[data-theme="light"] .lvt-root :is(.lvt-first-card,.lvt-branch-card) {
  border-color: var(--lvt-light-hair);
  background: linear-gradient(155deg,var(--lvt-light-canvas),var(--lvt-light-panel));
  box-shadow: inset 0 1px rgba(255,255,255,.85);
}
html[data-theme="light"] .lvt-root .lvt-first-card {
  background: radial-gradient(circle at 5% 5%,rgba(201,87,50,.08),transparent 43%),linear-gradient(155deg,var(--lvt-light-canvas),var(--lvt-light-panel));
}
html[data-theme="light"] .lvt-root .lvt-branch-card {
  background: radial-gradient(circle at 72% 43%,rgba(57,175,179,.11),transparent 41%),linear-gradient(155deg,var(--lvt-light-canvas),var(--lvt-light-panel));
}
html[data-theme="light"] .lvt-root :is(.lvt-first-nav button,.lvt-branch-controls button) {
  border-color: rgba(180,83,9,.30);
  color: var(--lvt-light-amber-copy);
  background: var(--lvt-light-canvas);
}
html[data-theme="light"] .lvt-root .lvt-first-settings {
  border-color: var(--lvt-light-hair);
  background: var(--lvt-light-canvas);
}
html[data-theme="light"] .lvt-root .lvt-first-settings > span {
  border-color: var(--lvt-light-hair);
  background: linear-gradient(180deg,var(--lvt-light-canvas),var(--lvt-light-panel));
}
html[data-theme="light"] .lvt-root .lvt-first-settings b { color: var(--lvt-light-ink); }
html[data-theme="light"] .lvt-root .lvt-lesson-loading {
  color: var(--lvt-light-ink);
  background: radial-gradient(circle at 50% 42%,rgba(245,166,35,.09),transparent 43%),var(--lvt-light-canvas);
}
html[data-theme="light"] .lvt-root .lvt-forging-core { fill: var(--lvt-light-canvas); }
html[data-theme="light"] .lvt-root .lvt-real-branch-icon { filter: drop-shadow(0 10px 10px rgba(75,75,75,.18)); }
html[data-theme="light"] .lvt-root .lvt-branch-switch {
  border-top-color: var(--lvt-light-hair);
  background: linear-gradient(180deg,rgba(255,255,255,.96),rgba(247,247,247,.99));
}

/* Difficulty and lesson length. */
html[data-theme="light"] .lvt-root .lvt-settings {
  background: radial-gradient(circle at 69% 20%,rgba(245,166,35,.07),transparent 42%),var(--lvt-light-canvas);
}
html[data-theme="light"] .lvt-root .lvt-setting {
  border-color: rgba(180,83,9,.28);
  border-top-color: rgba(217,119,6,.36);
  background: radial-gradient(105% 180% at 4% -80%,rgba(245,166,35,.12),transparent 55%),linear-gradient(180deg,var(--lvt-light-canvas),var(--lvt-light-panel));
  box-shadow: inset 0 1px rgba(255,255,255,.9), inset 0 -1px var(--lvt-light-hair), 0 3px var(--lvt-light-hair), 0 9px 19px rgba(75,75,75,.10);
}
html[data-theme="light"] .lvt-root .lvt-setting :is(.lvt-setting-after,div > i) { color: var(--lvt-light-amber-copy); }
html[data-theme="light"] .lvt-root :is(.lvt-difficulty-menu,.lvt-length-menu) {
  border-color: var(--lvt-light-hair);
  color: var(--lvt-light-copy);
  background: var(--lvt-light-canvas);
  box-shadow: 0 12px 24px rgba(75,75,75,.16), inset 0 1px rgba(255,255,255,.85);
}
html[data-theme="light"] .lvt-root :is(.lvt-difficulty-menu > span,.lvt-difficulty-menu .lvt-choice,.lvt-length-stepper > span) { color: var(--lvt-light-copy); }
html[data-theme="light"] .lvt-root :is(.lvt-difficulty-menu i,.lvt-length-controls > i,.lvt-length-count b:last-child) { color: var(--lvt-light-amber-copy); }
html[data-theme="light"] .lvt-root .lvt-length-controls > i { border-color: var(--lvt-light-hair); }
html[data-theme="light"] .lvt-root .lvt-length-count {
  border-color: var(--lvt-light-hair);
  background: var(--lvt-light-panel);
}
html[data-theme="light"] .lvt-root .lvt-length-count b { color: var(--lvt-light-ink); }
html[data-theme="light"] .lvt-root .lvt-length-count b:last-child { color: var(--lvt-light-amber-copy); }

/* Create a visual lesson. */
html[data-theme="light"] .lvt-root .lvt-create {
  background: radial-gradient(circle at 50% 16%,rgba(245,166,35,.07),transparent 44%),var(--lvt-light-canvas);
}
html[data-theme="light"] .lvt-root .lvt-topic-line {
  border-color: var(--lvt-light-hair);
  background: var(--lvt-light-canvas);
}
html[data-theme="light"] .lvt-root .lvt-create-controls > span {
  border-color: var(--lvt-light-hair);
  color: var(--lvt-light-copy);
  background: var(--lvt-light-panel);
}
html[data-theme="light"] .lvt-root .lvt-create-loading {
  background: radial-gradient(circle at 50% 46%,rgba(245,166,35,.09),transparent 42%),var(--lvt-light-canvas);
}

/* Study upload, lesson outline, tools and quiz. */
html[data-theme="light"] .lvt-root :is(.lvt-study-frame,.lvt-study-stage) { background: var(--lvt-light-canvas); }
html[data-theme="light"] .lvt-root .lvt-dropzone { background: rgba(245,166,35,.045); }
html[data-theme="light"] .lvt-root .lvt-drag-file > span {
  border-color: var(--lvt-light-hair-strong);
  color: var(--lvt-light-ink);
  background: var(--lvt-light-canvas);
  box-shadow: 0 8px 18px rgba(75,75,75,.18);
}
html[data-theme="light"] .lvt-root .lvt-study-progress { background: rgba(247,247,247,.94); }
html[data-theme="light"] .lvt-root .lvt-progress-card {
  border-color: var(--lvt-light-hair);
  background: linear-gradient(155deg,var(--lvt-light-canvas),var(--lvt-light-panel));
  box-shadow: 0 18px 42px rgba(75,75,75,.16);
}
html[data-theme="light"] .lvt-root :is(.lvt-upload-track,.lvt-toc-track,.lvt-generating-body > div) { background: var(--lvt-light-hair); }
html[data-theme="light"] .lvt-root .lvt-study-document {
  border-color: var(--lvt-light-hair);
  background: linear-gradient(155deg,var(--lvt-light-canvas),var(--lvt-light-panel));
}
html[data-theme="light"] .lvt-root .lvt-section { border-color: var(--lvt-light-hair); }
html[data-theme="light"] .lvt-root .lvt-study-lesson > i { border-color: var(--lvt-light-copy); }
html[data-theme="light"] .lvt-root .lvt-study-lesson > button {
  border-color: #d97706;
  color: #2b1a02;
  background: linear-gradient(180deg,#ffd37a,#f5a623);
  box-shadow: 0 2px #b96c08, 0 6px 12px rgba(75,75,75,.12);
}
html[data-theme="light"] .lvt-root :is(.lvt-study-tools,.lvt-study-preview,.lvt-study-generating,.lvt-study-quiz) {
  background: linear-gradient(rgba(247,247,247,.80),rgba(247,247,247,.92)),var(--lvt-light-canvas);
}
html[data-theme="light"] .lvt-root .lvt-study-modal {
  border-color: var(--lvt-light-hair);
  background: linear-gradient(155deg,var(--lvt-light-canvas),var(--lvt-light-panel));
  box-shadow: 0 18px 45px rgba(75,75,75,.18);
}
html[data-theme="light"] .lvt-root .lvt-modal-head { border-bottom-color: var(--lvt-light-hair); }
html[data-theme="light"] .lvt-root .lvt-study-tool {
  border-color: var(--lvt-light-hair);
  color: var(--lvt-light-ink);
  background: linear-gradient(160deg,var(--lvt-light-canvas),var(--lvt-light-panel));
}
html[data-theme="light"] .lvt-root .lvt-study-tool-icon { filter: drop-shadow(0 4px 4px rgba(75,75,75,.14)); }
html[data-theme="light"] .lvt-root .lvt-quiz-icon { box-shadow: 0 9px 13px rgba(75,75,75,.16); }
html[data-theme="light"] .lvt-root .lvt-quiz-body > p > span {
  border-color: var(--lvt-light-hair);
  color: var(--lvt-light-copy);
  background: var(--lvt-light-panel);
}
html[data-theme="light"] .lvt-root .lvt-quiz-body > p i {
  color: var(--lvt-light-copy);
  background: var(--lvt-light-hair);
}
html[data-theme="light"] .lvt-root .lvt-quiz-body > p .lvt-correct {
  border-color: rgba(40,119,79,.32);
  color: #28774f;
  background: rgba(73,189,128,.10);
}
html[data-theme="light"] .lvt-root .lvt-quiz-body > small,
html[data-theme="light"] .lvt-root.lvt-playing .lvt-progress-head strong em:nth-child(3) { color: #28774f; }
html[data-theme="light"] .lvt-root .lvt-key-frame {
  background: radial-gradient(circle at 50% 45%,rgba(245,166,35,.12),transparent 42%),var(--lvt-light-canvas);
}

/* mWeb composes the same scenes differently and owns a few additional complete surfaces. */
html[data-theme="light"] .lvt-root[data-lvt-mobile="true"] .lvt-pointer {
  box-shadow: 0 0 0 4px rgba(245,166,35,.10),0 0 16px rgba(245,166,35,.55),0 5px 9px rgba(75,75,75,.20);
}
html[data-theme="light"] .lvt-root[data-lvt-mobile="true"] .lvt-branch-card {
  background: radial-gradient(circle at 50% 57%,rgba(57,175,179,.11),transparent 38%),var(--lvt-light-canvas);
}
html[data-theme="light"] .lvt-root[data-lvt-mobile="true"] .lvt-branch-switch { background: transparent; }
html[data-theme="light"] .lvt-root[data-lvt-mobile="true"] .lvt-settings { background: var(--lvt-light-canvas); }
html[data-theme="light"] .lvt-root[data-lvt-mobile="true"] .lvt-setting-boxes {
  border-color: rgba(180,83,9,.28);
  background: linear-gradient(180deg,var(--lvt-light-canvas),var(--lvt-light-panel));
  box-shadow: 0 3px 0 var(--lvt-light-hair),0 9px 18px rgba(75,75,75,.10);
}
html[data-theme="light"] .lvt-root[data-lvt-mobile="true"] .lvt-setting {
  background: transparent;
  box-shadow: none;
}
html[data-theme="light"] .lvt-root[data-lvt-mobile="true"] .lvt-setting:first-child,
html[data-theme="light"] .lvt-root[data-lvt-mobile="true"] .lvt-first-settings > span:first-child { border-right-color: var(--lvt-light-hair); }
html[data-theme="light"] .lvt-root[data-lvt-mobile="true"] .lvt-lesson-home { background: var(--lvt-light-panel); }
html[data-theme="light"] .lvt-root[data-lvt-mobile="true"] .lvt-first-card {
  background: var(--lvt-light-canvas);
  box-shadow: 0 10px 22px rgba(75,75,75,.12),inset 0 1px rgba(255,255,255,.9);
}
html[data-theme="light"] .lvt-root[data-lvt-mobile="true"] .lvt-lesson-meta { color: var(--lvt-light-copy); }
html[data-theme="light"] .lvt-root[data-lvt-mobile="true"] .lvt-first-settings { background: var(--lvt-light-panel); }
html[data-theme="light"] .lvt-root[data-lvt-mobile="true"] .lvt-first-settings > span { background: transparent; }
html[data-theme="light"] .lvt-root[data-lvt-mobile="true"] :is(.lvt-lesson-loading,.lvt-create,.lvt-create-loading) { background: var(--lvt-light-canvas); }
html[data-theme="light"] .lvt-root[data-lvt-mobile="true"] .lvt-topic-line {
  border-bottom-color: rgba(180,83,9,.38);
  background: transparent;
}
html[data-theme="light"] .lvt-root[data-lvt-mobile="true"] .lvt-study-mobile-actions > span {
  border-color: var(--lvt-light-hair);
  color: var(--lvt-light-copy);
  background: linear-gradient(160deg,var(--lvt-light-canvas),var(--lvt-light-panel));
}
html[data-theme="light"] .lvt-root[data-lvt-mobile="true"] .lvt-study-mobile-actions i,
html[data-theme="light"] .lvt-root[data-lvt-mobile="true"] .lvt-mobile-study-tabs .active { color: var(--lvt-light-amber-copy); }
html[data-theme="light"] .lvt-root[data-lvt-mobile="true"] .lvt-study-section-wrap {
  border-color: var(--lvt-light-hair);
  background: linear-gradient(155deg,var(--lvt-light-canvas),var(--lvt-light-panel));
}
html[data-theme="light"] .lvt-root[data-lvt-mobile="true"] .lvt-study-lesson { border-top-color: var(--lvt-light-hair); }
html[data-theme="light"] .lvt-root[data-lvt-mobile="true"] .lvt-study-lesson > button {
  border-color: #d97706;
  color: #2b1a02;
  background: linear-gradient(180deg,#ffd37a,#f5a623);
  box-shadow: none;
}
html[data-theme="light"] .lvt-root[data-lvt-mobile="true"] .lvt-study-modal {
  border: 0;
  background: var(--lvt-light-canvas);
  box-shadow: none;
}
html[data-theme="light"] .lvt-root[data-lvt-mobile="true"] .lvt-mobile-study-tabs {
  border-bottom-color: var(--lvt-light-hair);
  color: var(--lvt-light-copy);
}

/* Animation values participate in the cascade independently from static rules. Give light mode
   its own names so looping choices and tool presses cannot briefly repaint dark-mode cards. */
@keyframes lvt-length-plus-presses-light {
  0%,61%,63%,66%,68%,71%,73%,76%,78%,100% { color:#b45309; background:transparent; filter:none; }
  62%,67%,72%,77% { color:#b45309; background:rgba(245,166,35,.12); filter:brightness(1.05); }
}
@keyframes lvt-difficulty-choice-picked-light {
  0%,22%,38%,100% { color:#777777; background:transparent; }
  25%,35% { color:#b45309; background:rgba(245,166,35,.12); }
}
@keyframes lvt-tool-press-light {
  52%,59% { border-color:#d97706; color:#b45309; background:rgba(245,166,35,.12); box-shadow:0 0 0 3px rgba(245,166,35,.07); }
  0%,50%,62%,100% { border-color:#e5e5e5; color:#4b4b4b; background:linear-gradient(160deg,#ffffff,#f7f7f7); box-shadow:none; }
}
html[data-theme="light"] .lvt-root.lvt-playing .lvt-length-plus { animation-name: lvt-length-plus-presses-light; }
html[data-theme="light"] .lvt-root.lvt-playing .lvt-choice { animation-name: lvt-difficulty-choice-picked-light; }
html[data-theme="light"] .lvt-root.lvt-playing .lvt-quiz-tool { animation-name: lvt-tool-press-light; }