.ls-learning-shell,
.ls-language-selection {
  min-height: 100dvh;
  background: var(--ls-color-cream);
  color: var(--ls-color-ink);
}

.ls-learning-shell *,
.ls-language-selection * {
  min-width: 0;
}

.ls-learning-sidebar {
  display: none;
}

.ls-learning-stage {
  min-height: 100dvh;
  padding-bottom: calc(76px + var(--safe-bottom));
}

.ls-learning-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  min-height: 68px;
  border-bottom: 1px solid var(--ls-color-line);
  background: rgb(255 250 244 / 0.94);
  padding: max(10px, var(--safe-top)) max(12px, var(--safe-right)) 10px max(12px, var(--safe-left));
  backdrop-filter: blur(14px);
}

.ls-learning-topbar__brand,
.ls-learning-topbar__course {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: var(--ls-radius-lg);
  color: var(--ls-color-ink);
  text-decoration: none;
}

.ls-learning-topbar__brand img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.ls-learning-topbar__course {
  grid-template-columns: 1fr auto;
  border: 1px solid var(--ls-color-line);
  background: rgb(255 255 255 / 0.68);
  font-size: var(--ls-font-size-sm);
  font-weight: var(--ls-font-weight-bold);
}

.ls-learning-topbar__title {
  display: grid;
  justify-items: center;
  padding: 0 var(--ls-space-2);
  text-align: center;
}

.ls-learning-topbar__title span {
  color: var(--ls-color-graphite);
  font-size: 0.625rem;
  font-weight: var(--ls-font-weight-bold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.ls-learning-topbar__title strong {
  max-width: 100%;
  overflow: hidden;
  font-size: var(--ls-font-size-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ls-learning-content {
  width: min(100%, 760px);
  margin: 0 auto;
  padding: var(--ls-space-5) var(--ls-space-4) var(--ls-space-10);
  outline: 0;
}

.ls-primary-nav--mobile {
  position: fixed;
  inset: auto 0 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--ls-color-line);
  background: rgb(255 250 244 / 0.96);
  padding: var(--ls-space-2) max(var(--ls-space-2), var(--safe-right)) max(var(--ls-space-2), var(--safe-bottom)) max(var(--ls-space-2), var(--safe-left));
  box-shadow: 0 -8px 24px rgb(29 41 63 / 0.07);
  backdrop-filter: blur(16px);
}

.ls-primary-nav__item {
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: var(--ls-space-1);
  border-radius: var(--ls-radius-lg);
  color: var(--ls-color-graphite);
  font-size: 0.6875rem;
  font-weight: var(--ls-font-weight-bold);
  line-height: 1;
  text-decoration: none;
  transition: color var(--ls-motion-default) var(--ls-ease-standard), background-color var(--ls-motion-default) var(--ls-ease-standard);
}

.ls-primary-nav--mobile .ls-primary-nav__item {
  flex-direction: column;
}

.ls-primary-nav__item.is-active {
  background: rgb(224 114 88 / 0.1);
  color: var(--ls-color-red-dark);
}

.ls-page-heading {
  display: flex;
  flex-direction: column;
  gap: var(--ls-space-4);
  margin-bottom: var(--ls-space-6);
}

.ls-page-heading > div > span,
.ls-section-heading span,
.ls-eyebrow {
  display: block;
  color: var(--ls-color-red-dark);
  font-size: var(--ls-font-size-xs);
  font-weight: var(--ls-font-weight-extrabold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ls-page-heading h1 {
  margin: var(--ls-space-2) 0 0;
  font-size: clamp(1.875rem, 8vw, 2.5rem);
  font-weight: var(--ls-font-weight-black);
  letter-spacing: -0.035em;
  line-height: 1.08;
  outline: 0;
}

.ls-page-heading p {
  max-width: 620px;
  margin: var(--ls-space-3) 0 0;
  color: var(--ls-color-charcoal);
  font-size: var(--ls-font-size-base);
  line-height: 1.7;
}

.ls-status {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  gap: var(--ls-space-1-5);
  border: 1px solid transparent;
  border-radius: var(--ls-radius-full);
  padding: var(--ls-space-1) var(--ls-space-2-5);
  font-size: 0.6875rem;
  font-weight: var(--ls-font-weight-bold);
  line-height: 1.1;
  white-space: nowrap;
}

.ls-status--red { border-color: rgb(224 114 88 / 0.18); background: rgb(224 114 88 / 0.1); color: var(--ls-color-red-dark); }
.ls-status--teal { border-color: rgb(44 122 123 / 0.2); background: rgb(44 122 123 / 0.1); color: #1f5f60; }
.ls-status--blue { border-color: rgb(61 127 168 / 0.2); background: rgb(61 127 168 / 0.1); color: #2f698e; }
.ls-status--amber { border-color: rgb(124 85 72 / 0.18); background: var(--ls-color-mist); color: var(--ls-color-brown); }
.ls-status--muted { border-color: var(--ls-color-line); background: rgb(255 255 255 / 0.48); color: var(--ls-color-graphite); }
.ls-status--danger { border-color: rgb(191 91 69 / 0.24); background: rgb(224 114 88 / 0.1); color: var(--ls-color-red-dark); }

.ls-progress {
  display: grid;
  gap: var(--ls-space-2);
}

.ls-progress__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ls-space-2);
  color: var(--ls-color-graphite);
  font-size: var(--ls-font-size-xs);
  font-weight: var(--ls-font-weight-semibold);
}

.ls-progress__meta strong { color: var(--ls-color-ink); }

.ls-progress__track {
  height: 8px;
  overflow: hidden;
  border-radius: var(--ls-radius-full);
  background: var(--ls-color-mist);
  box-shadow: inset 0 0 0 1px rgb(222 214 204 / 0.55);
}

.ls-progress__fill {
  display: block;
  width: var(--ls-progress-value);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ls-color-red-dark), var(--ls-color-red), var(--ls-color-amber));
  transition: width var(--ls-motion-image-fade) var(--ls-ease-standard);
}

.ls-progress--compact { width: 100%; }
.ls-progress--compact .ls-progress__track { height: 6px; }

.ls-illustration {
  position: relative;
  min-height: 150px;
  overflow: hidden;
  border: 1px solid rgb(222 214 204 / 0.82);
  border-radius: var(--ls-radius-lg);
  background: linear-gradient(145deg, var(--ls-color-snow), var(--ls-color-panel));
}

.ls-illustration__wash {
  position: absolute;
  width: 140px;
  height: 140px;
  right: -30px;
  bottom: -45px;
  border-radius: 50%;
  background: rgb(224 114 88 / 0.16);
}

.ls-illustration--teal .ls-illustration__wash { background: rgb(44 122 123 / 0.15); }
.ls-illustration--blue .ls-illustration__wash { background: rgb(61 127 168 / 0.15); }
.ls-illustration--amber .ls-illustration__wash { background: rgb(241 183 166 / 0.3); }
.ls-illustration--slate .ls-illustration__wash { background: rgb(72 84 105 / 0.12); }

.ls-illustration__number {
  position: absolute;
  top: var(--ls-space-3);
  left: var(--ls-space-3);
  color: rgb(29 41 63 / 0.16);
  font-size: 2.5rem;
  font-weight: var(--ls-font-weight-black);
  line-height: 1;
}

.ls-illustration__icon {
  position: absolute;
  right: var(--ls-space-5);
  bottom: var(--ls-space-5);
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border-radius: var(--ls-radius-lg);
  background: var(--ls-color-panel);
  color: var(--ls-color-red-dark);
  box-shadow: var(--ls-shadow-action);
  transform: rotate(-3deg);
}

.ls-continue-card,
.ls-category-hero,
.ls-review-hero,
.ls-progress-overview {
  display: grid;
  gap: var(--ls-space-5);
  overflow: hidden;
  border: 1px solid rgb(224 114 88 / 0.22);
  border-radius: var(--ls-radius-lg);
  background: linear-gradient(135deg, var(--ls-color-panel), #fff7ef 56%, #f0f7f5);
  padding: var(--ls-space-5);
  box-shadow: var(--ls-shadow-sm);
}

.ls-continue-card__copy > p:first-of-type,
.ls-category-hero > div > p:first-of-type {
  margin: var(--ls-space-3) 0 0;
  color: var(--ls-color-red-dark);
  font-size: var(--ls-font-size-xs);
  font-weight: var(--ls-font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ls-continue-card h2,
.ls-category-hero h1,
.ls-review-hero h2,
.ls-progress-overview h2 {
  margin: var(--ls-space-1) 0 0;
  font-size: clamp(1.5rem, 7vw, 2rem);
  font-weight: var(--ls-font-weight-black);
  letter-spacing: -0.025em;
  line-height: 1.12;
  outline: 0;
}

.ls-continue-card__copy > p:last-of-type,
.ls-category-hero > div > p:nth-of-type(2),
.ls-review-hero p,
.ls-progress-overview p {
  margin: var(--ls-space-3) 0 0;
  color: var(--ls-color-charcoal);
  line-height: 1.65;
}

.ls-continue-card__action-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ls-space-3);
  margin-top: var(--ls-space-5);
}

.ls-continue-card__action-row > span {
  color: var(--ls-color-graphite);
  font-size: var(--ls-font-size-xs);
  font-weight: var(--ls-font-weight-semibold);
}

.ls-continue-card__visual { display: grid; gap: var(--ls-space-3); }

.ls-section-heading {
  display: flex;
  flex-direction: column;
  gap: var(--ls-space-2);
  margin-bottom: var(--ls-space-4);
}

.ls-section-heading h2 {
  margin: var(--ls-space-1) 0 0;
  font-size: var(--ls-font-size-xl);
  font-weight: var(--ls-font-weight-black);
  letter-spacing: -0.02em;
}

.ls-section-heading > p {
  margin: 0;
  color: var(--ls-color-graphite);
  font-size: var(--ls-font-size-sm);
}

.ls-journey,
.ls-lessons,
.ls-review-groups,
.ls-settings-section {
  margin-top: var(--ls-space-8);
}

.ls-journey__list,
.ls-lessons__list {
  position: relative;
  display: grid;
  gap: var(--ls-space-5);
}

.ls-journey__list::before {
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 20px;
  width: 2px;
  background: linear-gradient(var(--ls-color-red), var(--ls-color-line) 70%);
  content: "";
}

.ls-category-card {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: var(--ls-space-3);
}

.ls-journey-marker {
  position: relative;
  z-index: 2;
  padding-top: var(--ls-space-4);
}

.ls-journey-marker span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 3px solid var(--ls-color-cream);
  border-radius: 50%;
  background: var(--ls-color-sidebar);
  color: white;
  font-size: var(--ls-font-size-xs);
  font-weight: var(--ls-font-weight-bold);
  box-shadow: 0 0 0 1px var(--ls-color-line);
}

.ls-category-card--completed .ls-journey-marker span,
.ls-category-card--review_due .ls-journey-marker span { background: var(--ls-color-teal); }
.ls-category-card--locked .ls-journey-marker span { background: var(--ls-color-mist); color: var(--ls-color-graphite); }

.ls-category-card__panel {
  display: grid;
  overflow: hidden;
  border: 1px solid rgb(222 214 204 / 0.84);
  border-radius: var(--ls-radius-lg);
  background: var(--ls-color-panel);
  box-shadow: var(--ls-shadow-sm);
  transition: border-color var(--ls-motion-explicit) var(--ls-ease-standard), box-shadow var(--ls-motion-explicit) var(--ls-ease-standard), transform var(--ls-motion-explicit) var(--ls-ease-standard);
}

.ls-category-card:not(.ls-category-card--locked) .ls-category-card__panel:hover {
  border-color: rgb(224 114 88 / 0.45);
  box-shadow: var(--ls-shadow-card-hover);
  transform: translateY(-2px);
}

.ls-category-card--locked .ls-category-card__panel { background: rgb(248 246 242 / 0.78); }
.ls-category-card__panel .ls-illustration { min-height: 122px; border: 0; border-bottom: 1px solid var(--ls-color-line); border-radius: 0; }

.ls-category-card__content { padding: var(--ls-space-4); }
.ls-category-card__heading,
.ls-lesson-card__heading,
.ls-language-card__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ls-space-3);
}

.ls-category-card__heading p,
.ls-lesson-card__heading p,
.ls-language-card__heading p {
  margin: 0;
  color: var(--ls-color-graphite);
  font-size: 0.6875rem;
  font-weight: var(--ls-font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ls-category-card__heading h2,
.ls-lesson-card__heading h2,
.ls-language-card__heading h2 {
  margin: var(--ls-space-1) 0 0;
  font-size: var(--ls-font-size-xl);
  font-weight: var(--ls-font-weight-black);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.ls-category-card__description {
  margin: var(--ls-space-3) 0 0;
  color: var(--ls-color-charcoal);
  font-size: var(--ls-font-size-sm);
  line-height: 1.6;
}

.ls-category-card__meta,
.ls-category-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ls-space-3);
  margin-top: var(--ls-space-4);
  color: var(--ls-color-graphite);
  font-size: var(--ls-font-size-xs);
  font-weight: var(--ls-font-weight-semibold);
}

.ls-category-card__meta span,
.ls-category-hero__meta span,
.ls-lesson-card__footer > span { display: inline-flex; align-items: center; gap: var(--ls-space-1-5); }
.ls-category-card__content > .ls-progress { margin-top: var(--ls-space-4); }
.ls-category-card__action { width: 100%; margin-top: var(--ls-space-4); }

.ls-locked-note {
  display: flex;
  align-items: flex-start;
  gap: var(--ls-space-2);
  margin-top: var(--ls-space-4);
  border-radius: var(--ls-radius-lg);
  background: var(--ls-color-mist);
  color: var(--ls-color-graphite);
  padding: var(--ls-space-3);
  font-size: var(--ls-font-size-xs);
  font-weight: var(--ls-font-weight-semibold);
  line-height: 1.45;
}

.ls-back-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: var(--ls-space-2);
  margin-bottom: var(--ls-space-4);
  color: var(--ls-color-charcoal);
  font-size: var(--ls-font-size-sm);
  font-weight: var(--ls-font-weight-bold);
  text-decoration: none;
}

.ls-category-hero .ls-illustration { min-height: 180px; }
.ls-category-hero .ls-progress { margin-top: var(--ls-space-5); }

.ls-lesson-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: var(--ls-space-3);
  border: 1px solid rgb(222 214 204 / 0.84);
  border-radius: var(--ls-radius-lg);
  background: var(--ls-color-panel);
  padding: var(--ls-space-4);
  box-shadow: var(--ls-shadow-sm);
}

.ls-lesson-card--locked { background: rgb(248 246 242 / 0.74); }
.ls-lesson-card__number {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: var(--ls-color-sidebar);
  color: white;
  font-size: var(--ls-font-size-xs);
  font-weight: var(--ls-font-weight-bold);
}
.ls-lesson-card--completed .ls-lesson-card__number { background: var(--ls-color-teal); }
.ls-lesson-card--locked .ls-lesson-card__number { background: var(--ls-color-mist); color: var(--ls-color-graphite); }

.ls-word-preview {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ls-space-2);
  margin: var(--ls-space-4) 0 0;
  padding: 0;
  list-style: none;
}

.ls-word-preview li {
  border: 1px solid rgb(222 214 204 / 0.72);
  border-radius: var(--ls-radius-full);
  background: rgb(255 255 255 / 0.64);
  padding: var(--ls-space-1) var(--ls-space-2-5);
  color: var(--ls-color-charcoal);
  font-size: var(--ls-font-size-sm);
  font-weight: var(--ls-font-weight-semibold);
}

.ls-lesson-card__footer {
  display: grid;
  gap: var(--ls-space-3);
  margin: var(--ls-space-4) 0;
  color: var(--ls-color-graphite);
  font-size: var(--ls-font-size-xs);
  font-weight: var(--ls-font-weight-semibold);
}

.ls-lesson-card__body > a { width: 100%; }

.ls-language-selection {
  min-width: 320px;
  background: linear-gradient(145deg, var(--ls-color-snow), var(--ls-color-cream) 48%, var(--ls-color-mist));
}

.ls-selection-topbar {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: var(--ls-space-4);
  padding: max(var(--ls-space-3), var(--safe-top)) max(var(--ls-space-4), var(--safe-right)) var(--ls-space-3) max(var(--ls-space-4), var(--safe-left));
}

.ls-selection-topbar a { display: inline-flex; min-height: 44px; align-items: center; }
.ls-selection-topbar img { width: 150px; }
.ls-selection-topbar > span {
  border-radius: var(--ls-radius-full);
  background: rgb(255 255 255 / 0.64);
  color: var(--ls-color-graphite);
  padding: var(--ls-space-1) var(--ls-space-2-5);
  font-size: 0.6875rem;
  font-weight: var(--ls-font-weight-bold);
}

.ls-selection-content {
  width: min(100%, 880px);
  margin: 0 auto;
  padding: clamp(32px, 8vh, 80px) var(--ls-space-4) var(--ls-space-12);
}

.ls-selection-intro { max-width: 660px; margin-bottom: var(--ls-space-6); }
.ls-selection-intro h1 {
  margin: var(--ls-space-2) 0 0;
  font-size: clamp(2rem, 10vw, 3.5rem);
  font-weight: var(--ls-font-weight-black);
  letter-spacing: -0.045em;
  line-height: 1.02;
  outline: 0;
}
.ls-selection-intro p { margin: var(--ls-space-4) 0 0; color: var(--ls-color-charcoal); line-height: 1.7; }

.ls-language-card {
  display: grid;
  overflow: hidden;
  border: 1px solid rgb(222 214 204 / 0.9);
  border-radius: var(--ls-radius-lg);
  background: var(--ls-color-panel);
  box-shadow: 0 18px 42px rgb(29 41 63 / 0.09);
}

.ls-language-card__art {
  position: relative;
  min-height: 180px;
  overflow: hidden;
  background: linear-gradient(140deg, var(--ls-color-sidebar), var(--ls-color-slate));
  color: white;
}

.ls-language-card__art::before,
.ls-language-card__art::after {
  position: absolute;
  border-radius: 50%;
  background: rgb(241 183 166 / 0.18);
  content: "";
}
.ls-language-card__art::before { width: 180px; height: 180px; right: -60px; top: -70px; }
.ls-language-card__art::after { width: 110px; height: 110px; left: -25px; bottom: -35px; }

.ls-language-card__character {
  position: absolute;
  left: var(--ls-space-6);
  bottom: var(--ls-space-4);
  font-size: 6rem;
  font-weight: var(--ls-font-weight-black);
  line-height: 1;
  opacity: 0.95;
}

.ls-language-card__seal {
  position: absolute;
  right: var(--ls-space-5);
  bottom: var(--ls-space-5);
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 0.26);
  border-radius: var(--ls-radius-lg);
  background: var(--ls-color-red);
  font-size: var(--ls-font-size-xs);
  font-weight: var(--ls-font-weight-bold);
  letter-spacing: 0.1em;
  writing-mode: vertical-rl;
}

.ls-language-card__content { padding: var(--ls-space-5); }
.ls-language-card__heading h2 { font-size: 1.75rem; }
.ls-language-card__description { margin: var(--ls-space-4) 0 0; color: var(--ls-color-charcoal); line-height: 1.65; }

.ls-language-card__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ls-space-2);
  margin: var(--ls-space-5) 0;
}
.ls-language-card__facts div { border-radius: var(--ls-radius-lg); background: rgb(255 255 255 / 0.62); padding: var(--ls-space-3); }
.ls-language-card__facts dt { color: var(--ls-color-graphite); font-size: 0.625rem; font-weight: var(--ls-font-weight-bold); letter-spacing: 0.08em; text-transform: uppercase; }
.ls-language-card__facts dd { margin: var(--ls-space-1) 0 0; color: var(--ls-color-ink); font-size: var(--ls-font-size-xs); font-weight: var(--ls-font-weight-bold); }
.ls-language-card__actions { display: flex; flex-direction: column; gap: var(--ls-space-2); margin-top: var(--ls-space-5); }
.ls-language-card__actions > * { width: 100%; }
.ls-language-card__message { display: flex; gap: var(--ls-space-2); margin: var(--ls-space-3) 0 0; border-radius: var(--ls-radius-lg); background: var(--ls-color-mist); color: var(--ls-color-brown); padding: var(--ls-space-3); font-size: var(--ls-font-size-xs); font-weight: var(--ls-font-weight-semibold); line-height: 1.45; }
.ls-language-card__message--error { background: rgb(224 114 88 / 0.1); color: var(--ls-color-red-dark); }

.ls-state-preview { margin-top: var(--ls-space-4); border: 1px solid rgb(222 214 204 / 0.82); border-radius: var(--ls-radius-lg); background: rgb(255 250 244 / 0.76); padding: var(--ls-space-3); }
.ls-state-preview summary { display: flex; min-height: 44px; cursor: pointer; align-items: center; gap: var(--ls-space-2); color: var(--ls-color-charcoal); font-size: var(--ls-font-size-sm); font-weight: var(--ls-font-weight-bold); }
.ls-state-preview > p { margin: var(--ls-space-2) 0; color: var(--ls-color-graphite); font-size: var(--ls-font-size-xs); }
.ls-state-preview__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ls-space-2); }
.ls-state-preview__actions button { min-height: 44px; border: 1px solid var(--ls-color-line); border-radius: var(--ls-radius-lg); background: rgb(255 255 255 / 0.62); color: var(--ls-color-charcoal); padding: var(--ls-space-2); font-size: 0.6875rem; font-weight: var(--ls-font-weight-bold); }
.ls-state-preview__actions button[aria-pressed="true"] { border-color: var(--ls-color-red); background: rgb(224 114 88 / 0.1); color: var(--ls-color-red-dark); }
.ls-selection-note { display: flex; align-items: center; justify-content: center; gap: var(--ls-space-2); margin: var(--ls-space-5) 0 0; color: var(--ls-color-graphite); font-size: var(--ls-font-size-xs); text-align: center; }

.ls-offline-banner {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: var(--ls-space-2);
  background: var(--ls-color-sidebar);
  color: white;
  padding: var(--ls-space-2) var(--ls-space-4);
  font-size: var(--ls-font-size-xs);
  font-weight: var(--ls-font-weight-semibold);
  text-align: center;
}

.ls-lesson-preview-header { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: var(--ls-space-3); margin-bottom: var(--ls-space-3); }
.ls-lesson-preview-header > a { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--ls-color-line); border-radius: var(--ls-radius-lg); background: rgb(255 255 255 / 0.62); color: var(--ls-color-ink); }
.ls-lesson-preview-header > div { display: grid; }
.ls-lesson-preview-header > div span { color: var(--ls-color-graphite); font-size: 0.625rem; font-weight: var(--ls-font-weight-bold); letter-spacing: 0.08em; text-transform: uppercase; }
.ls-lesson-preview-header > div strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-lesson-preview-header > span { color: var(--ls-color-graphite); font-size: var(--ls-font-size-xs); font-weight: var(--ls-font-weight-bold); }

.ls-exercise-preview { margin-top: var(--ls-space-5); overflow: hidden; border: 1px solid rgb(222 214 204 / 0.88); border-radius: var(--ls-radius-lg); background: var(--ls-color-panel); box-shadow: var(--ls-shadow-sm); }
.ls-exercise-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--ls-color-line); }
.ls-exercise-tabs button { display: flex; min-height: 52px; align-items: center; justify-content: center; gap: var(--ls-space-1-5); border: 0; background: var(--ls-color-snow); color: var(--ls-color-graphite); font-size: 0.6875rem; font-weight: var(--ls-font-weight-bold); }
.ls-exercise-tabs button[aria-pressed="true"] { background: var(--ls-color-panel); color: var(--ls-color-red-dark); box-shadow: inset 0 -3px var(--ls-color-red); }
.ls-exercise-preview__stage { min-height: 390px; padding: var(--ls-space-6) var(--ls-space-4); }
.ls-exercise-prompt { text-align: center; }
.ls-exercise-prompt > span { color: var(--ls-color-red-dark); font-size: var(--ls-font-size-xs); font-weight: var(--ls-font-weight-bold); letter-spacing: 0.1em; text-transform: uppercase; }
.ls-exercise-prompt h2 { margin: var(--ls-space-4) 0 0; font-size: clamp(2rem, 12vw, 4rem); font-weight: var(--ls-font-weight-black); letter-spacing: -0.04em; line-height: 1.05; }
.ls-exercise-prompt p { margin: var(--ls-space-3) auto 0; color: var(--ls-color-graphite); line-height: 1.6; }
.ls-exercise-prompt .ls-pronunciation { color: var(--ls-color-red-dark); font-size: var(--ls-font-size-base); font-weight: var(--ls-font-weight-bold); }
.ls-word-presentation { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--ls-space-3); margin-top: var(--ls-space-8); border-radius: var(--ls-radius-lg); background: var(--ls-color-mist); padding: var(--ls-space-4); }
.ls-word-presentation button { display: grid; width: 48px; height: 48px; place-items: center; border: 0; border-radius: 50%; background: var(--ls-color-sidebar); color: white; }
.ls-word-presentation small { color: var(--ls-color-graphite); font-size: 0.625rem; font-weight: var(--ls-font-weight-bold); letter-spacing: 0.08em; text-transform: uppercase; }
.ls-word-presentation p { margin: var(--ls-space-1) 0; font-size: var(--ls-font-size-lg); font-weight: var(--ls-font-weight-bold); }
.ls-word-presentation span { color: var(--ls-color-graphite); font-size: var(--ls-font-size-sm); }
.ls-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ls-space-3); margin-top: var(--ls-space-8); }
.ls-choice-grid button,
.ls-word-bank button { min-height: 56px; border: 1px solid var(--ls-color-line); border-radius: var(--ls-radius-lg); background: rgb(255 255 255 / 0.66); color: var(--ls-color-charcoal); font-weight: var(--ls-font-weight-bold); }
.ls-choice-grid button.is-selected { border-color: var(--ls-color-red); background: rgb(224 114 88 / 0.1); color: var(--ls-color-red-dark); box-shadow: 0 0 0 2px rgb(224 114 88 / 0.12); }
.ls-match-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ls-space-3); margin-top: var(--ls-space-7); }
.ls-match-grid span { display: grid; min-height: 54px; place-items: center; border: 1px solid var(--ls-color-line); border-radius: var(--ls-radius-lg); background: rgb(255 255 255 / 0.62); font-weight: var(--ls-font-weight-bold); }
.ls-match-grid span:nth-child(4n+1), .ls-match-grid span:nth-child(4n+2) { border-color: rgb(61 127 168 / 0.35); background: rgb(61 127 168 / 0.08); }
.ls-order-answer { display: flex; min-height: 82px; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--ls-space-2); margin-top: var(--ls-space-6); border-bottom: 2px solid var(--ls-color-line); }
.ls-order-answer span { border-radius: var(--ls-radius-lg); background: var(--ls-color-sidebar); color: white; padding: var(--ls-space-2) var(--ls-space-3); font-size: var(--ls-font-size-lg); font-weight: var(--ls-font-weight-bold); }
.ls-word-bank { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ls-space-2); margin-top: var(--ls-space-6); }
.ls-word-bank button { min-width: 64px; padding: 0 var(--ls-space-3); }
.ls-dialogue-preview { display: grid; gap: var(--ls-space-3); margin-top: var(--ls-space-6); }
.ls-dialogue-preview > div { display: grid; grid-template-columns: 34px minmax(0, 1fr) 44px; align-items: center; gap: var(--ls-space-2); border: 1px solid var(--ls-color-line); border-radius: var(--ls-radius-lg); background: rgb(255 255 255 / 0.58); padding: var(--ls-space-3); }
.ls-dialogue-preview > div.is-current { border-color: rgb(224 114 88 / 0.38); background: rgb(224 114 88 / 0.08); }
.ls-dialogue-preview b { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: var(--ls-color-sidebar); color: white; }
.ls-dialogue-preview p { margin: 0; font-weight: var(--ls-font-weight-semibold); line-height: 1.55; }
.ls-dialogue-preview button { display: grid; width: 44px; height: 44px; place-items: center; border: 0; border-radius: 50%; background: var(--ls-color-mist); color: var(--ls-color-red-dark); }
.ls-story-preview { margin-top: var(--ls-space-6); border-radius: var(--ls-radius-lg); background: linear-gradient(145deg, var(--ls-color-mist), var(--ls-color-snow)); padding: var(--ls-space-5); }
.ls-story-preview button { display: inline-flex; min-height: 44px; align-items: center; gap: var(--ls-space-2); border: 0; border-radius: var(--ls-radius-lg); background: var(--ls-color-sidebar); color: white; padding: 0 var(--ls-space-3); font-size: var(--ls-font-size-sm); font-weight: var(--ls-font-weight-bold); }
.ls-story-preview p { margin: var(--ls-space-4) 0 0; font-size: var(--ls-font-size-lg); line-height: 1.9; }
.ls-exercise-preview__footer { display: flex; flex-direction: column; gap: var(--ls-space-3); border-top: 1px solid var(--ls-color-line); background: var(--ls-color-snow); padding: var(--ls-space-4); }
.ls-exercise-preview__footer p { display: flex; gap: var(--ls-space-2); margin: 0; color: var(--ls-color-graphite); font-size: var(--ls-font-size-xs); line-height: 1.45; }

.ls-review-hero__count { display: grid; place-items: center; border-radius: var(--ls-radius-lg); background: var(--ls-color-sidebar); color: white; padding: var(--ls-space-5); }
.ls-review-hero__count strong { font-size: 3.75rem; line-height: 1; }
.ls-review-hero__count span { margin-top: var(--ls-space-2); font-size: var(--ls-font-size-xs); font-weight: var(--ls-font-weight-bold); }
.ls-review-hero button { margin-top: var(--ls-space-5); }
.ls-review-groups > div:last-child,
.ls-progress-details { display: grid; gap: var(--ls-space-3); }
.ls-review-groups article { display: flex; align-items: center; gap: var(--ls-space-3); border: 1px solid var(--ls-color-line); border-radius: var(--ls-radius-lg); background: var(--ls-color-panel); padding: var(--ls-space-4); }
.ls-review-groups article > svg { color: var(--ls-color-red-dark); }
.ls-review-groups article span { display: grid; }
.ls-review-groups article small { color: var(--ls-color-graphite); }
.ls-review-options { display: grid; gap: var(--ls-space-3); }
.ls-review-options button { display: flex; min-height: 76px; align-items: center; gap: var(--ls-space-3); border: 1px solid var(--ls-color-line); border-radius: var(--ls-radius-lg); background: var(--ls-color-panel); padding: var(--ls-space-4); color: var(--ls-color-ink); text-align: left; }
.ls-review-options button > svg { color: var(--ls-color-red-dark); }
.ls-review-options button span { display: grid; gap: 2px; }
.ls-review-options button small { color: var(--ls-color-graphite); }
.ls-review-options button:disabled { opacity: .48; }
.ls-review-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ls-space-3); margin-top: var(--ls-space-6); }
.ls-review-stats article { display: grid; gap: var(--ls-space-1); border: 1px solid var(--ls-color-line); border-radius: var(--ls-radius-lg); background: var(--ls-color-panel); padding: var(--ls-space-4); }
.ls-review-stats span { color: var(--ls-color-graphite); font-size: var(--ls-font-size-xs); font-weight: var(--ls-font-weight-bold); text-transform: uppercase; }
.ls-review-stats strong { font-size: var(--ls-font-size-sm); }
.ls-review-categories { margin-top: var(--ls-space-6); }
.ls-review-categories > div:last-child { display: flex; flex-wrap: wrap; gap: var(--ls-space-2); }
.ls-review-categories button { display: inline-flex; min-height: 44px; align-items: center; gap: var(--ls-space-2); border: 1px solid var(--ls-color-line); border-radius: 999px; background: var(--ls-color-panel); padding: 0 var(--ls-space-4); color: var(--ls-color-ink); }
.ls-review-categories button strong { color: var(--ls-color-red-dark); font-size: var(--ls-font-size-xs); }
.ls-review-error { border-radius: var(--ls-radius-md); background: rgb(190 60 45 / .1); padding: var(--ls-space-3); color: var(--ls-color-danger); }
.ls-review-callout { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ls-space-3); margin-top: var(--ls-space-4); border: 1px solid rgb(224 114 88 / .25); border-radius: var(--ls-radius-lg); background: var(--ls-color-panel); padding: var(--ls-space-4); }
.ls-review-callout > span { color: var(--ls-color-red-dark); }
.ls-review-callout > div { display: grid; flex: 1; }
.ls-review-callout small { color: var(--ls-color-graphite); }
.ls-nav-badge { display: grid; min-width: 20px; height: 20px; place-items: center; margin-left: auto; border-radius: 999px; background: var(--ls-color-red); color: white; padding: 0 5px; font-size: 10px; }

.ls-week-bars { display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; gap: var(--ls-space-2); min-height: 160px; border-radius: var(--ls-radius-lg); background: rgb(255 255 255 / 0.48); padding: var(--ls-space-4); }
.ls-week-bars span { display: grid; height: 120px; grid-template-rows: 1fr auto; align-items: end; gap: var(--ls-space-2); text-align: center; }
.ls-week-bars i { display: block; width: 100%; height: max(4px, var(--bar)); border-radius: var(--ls-radius-full) var(--ls-radius-full) 3px 3px; background: linear-gradient(var(--ls-color-amber), var(--ls-color-red)); }
.ls-week-bars small { color: var(--ls-color-graphite); font-size: 0.625rem; font-weight: var(--ls-font-weight-bold); }
.ls-progress-details { margin-top: var(--ls-space-5); }
.ls-progress-details article { border: 1px solid var(--ls-color-line); border-radius: var(--ls-radius-lg); background: var(--ls-color-panel); padding: var(--ls-space-5); box-shadow: var(--ls-shadow-sm); }
.ls-progress-details article > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: var(--ls-radius-lg); background: rgb(224 114 88 / 0.1); color: var(--ls-color-red-dark); }
.ls-progress-details article > p { margin: var(--ls-space-4) 0 0; color: var(--ls-color-graphite); font-size: var(--ls-font-size-xs); font-weight: var(--ls-font-weight-bold); letter-spacing: 0.08em; text-transform: uppercase; }
.ls-progress-details article h2 { margin: var(--ls-space-1) 0 0; font-size: var(--ls-font-size-xl); font-weight: var(--ls-font-weight-black); }
.ls-progress-details article small { display: block; margin-top: var(--ls-space-2); color: var(--ls-color-graphite); line-height: 1.5; }
.ls-progress-details .ls-progress { margin-top: var(--ls-space-4); }

.ls-settings-list { overflow: hidden; border: 1px solid var(--ls-color-line); border-radius: var(--ls-radius-lg); background: var(--ls-color-panel); }
.ls-settings-list > a,
.ls-settings-list > button { display: grid; width: 100%; min-height: 72px; grid-template-columns: 44px minmax(0, 1fr) 20px; align-items: center; gap: var(--ls-space-3); border: 0; border-bottom: 1px solid var(--ls-color-line); background: transparent; color: var(--ls-color-ink); padding: var(--ls-space-3); text-align: left; text-decoration: none; }
.ls-settings-list > :last-child { border-bottom: 0; }
.ls-settings-list__icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: var(--ls-radius-lg); background: var(--ls-color-mist); color: var(--ls-color-red-dark); font-weight: var(--ls-font-weight-black); }
.ls-settings-list > * > span:nth-child(2) { display: grid; }
.ls-settings-list strong { font-size: var(--ls-font-size-sm); }
.ls-settings-list small { margin-top: var(--ls-space-1); color: var(--ls-color-graphite); font-size: var(--ls-font-size-xs); line-height: 1.4; }
.ls-settings-reset { width: 100%; margin-top: var(--ls-space-5); }
.ls-settings-controls { display: grid; gap: var(--ls-space-3); }
.ls-setting-control, .ls-setting-toggle { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) minmax(150px, auto); align-items: center; gap: var(--ls-space-4); border: 1px solid var(--ls-color-line); border-radius: var(--ls-radius-lg); background: var(--ls-color-panel); color: var(--ls-color-ink); padding: var(--ls-space-4); text-align: left; }
.ls-setting-control > span, .ls-setting-toggle > span:nth-child(2) { display: grid; gap: var(--ls-space-1); }
.ls-setting-control small, .ls-setting-toggle small { color: var(--ls-color-graphite); font-size: var(--ls-font-size-xs); font-weight: var(--ls-font-weight-regular); line-height: 1.45; }
.ls-setting-control select { min-height: 42px; max-width: 290px; border: 1px solid var(--ls-color-line); border-radius: var(--ls-radius-md); background: white; color: var(--ls-color-ink); padding: 0 var(--ls-space-3); }
.ls-setting-toggle { grid-template-columns: 44px minmax(0, 1fr); cursor: pointer; }
.ls-audio-status, .ls-settings-error { margin: 0; color: var(--ls-color-graphite); font-size: var(--ls-font-size-sm); }
.ls-settings-error { border: 1px solid rgb(172 55 42 / .3); border-radius: var(--ls-radius-lg); background: rgb(172 55 42 / .08); color: var(--ls-color-danger); padding: var(--ls-space-3); }
.ls-progress-streak { display: grid; gap: var(--ls-space-1); margin-top: var(--ls-space-4); border-radius: var(--ls-radius-lg); background: rgb(255 255 255 / .62); padding: var(--ls-space-3); }
.ls-progress-streak small { color: var(--ls-color-graphite); }
.ls-progress-categories, .ls-progress-activity { margin-top: var(--ls-space-7); }
.ls-progress-category-grid { display: grid; gap: var(--ls-space-2); }
.ls-progress-category-grid > a { display: flex; align-items: center; justify-content: space-between; gap: var(--ls-space-4); border: 1px solid var(--ls-color-line); border-radius: var(--ls-radius-lg); background: var(--ls-color-panel); color: var(--ls-color-ink); padding: var(--ls-space-4); text-decoration: none; }
.ls-progress-category-grid > a span { display: grid; gap: var(--ls-space-1); }
.ls-progress-category-grid small { color: var(--ls-color-graphite); }
.ls-progress-category-grid b { color: var(--ls-color-red-dark); }
.ls-progress-activity > article { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--ls-space-3); border-bottom: 1px solid var(--ls-color-line); padding: var(--ls-space-3) 0; }
.ls-progress-activity > article > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: var(--ls-color-mist); color: var(--ls-color-red-dark); }
.ls-progress-activity article div { display: grid; gap: var(--ls-space-1); }
.ls-progress-activity small { color: var(--ls-color-graphite); }
.ls-category-progress-detail { border: 1px solid var(--ls-color-line); border-radius: var(--ls-radius-xl); background: var(--ls-color-panel); padding: var(--ls-space-5); }
.ls-category-progress-detail dl { display: grid; gap: var(--ls-space-3); margin: var(--ls-space-5) 0 0; }
.ls-category-progress-detail dl div { display: flex; justify-content: space-between; gap: var(--ls-space-4); border-bottom: 1px solid var(--ls-color-line); padding-bottom: var(--ls-space-2); }
.ls-category-progress-detail dt { color: var(--ls-color-graphite); }
.ls-category-progress-detail dd { margin: 0; font-weight: var(--ls-font-weight-bold); text-transform: capitalize; }
.ls-privacy-copy { display: grid; gap: var(--ls-space-3); border: 1px solid var(--ls-color-line); border-radius: var(--ls-radius-lg); background: var(--ls-color-panel); padding: var(--ls-space-5); }
.ls-privacy-copy p { margin: 0; color: var(--ls-color-graphite); line-height: 1.65; }
.ls-story-display-options { display: flex; flex-wrap: wrap; gap: var(--ls-space-2); margin-bottom: var(--ls-space-4); }
.ls-story-display-options button { border: 1px solid var(--ls-color-line); border-radius: 999px; background: var(--ls-color-panel); padding: var(--ls-space-2) var(--ls-space-3); }
.ls-story-reader { display: grid; gap: var(--ls-space-4); border: 1px solid var(--ls-color-line); border-radius: var(--ls-radius-xl); background: var(--ls-color-panel); padding: var(--ls-space-5); }
.ls-story-reader p { display: grid; gap: var(--ls-space-1); margin: 0; }
.ls-story-reader strong { font-size: var(--ls-font-size-xl); line-height: 1.6; }
.ls-story-reader span, .ls-story-reader small { color: var(--ls-color-graphite); }
.ls-confirmation__field { display: grid; gap: var(--ls-space-2); margin-top: var(--ls-space-5); text-align: left; }
.ls-confirmation__field input { min-height: 44px; border: 1px solid var(--ls-color-line); border-radius: var(--ls-radius-md); padding: 0 var(--ls-space-3); }
html[data-learning-motion="reduce"] .ls-learning-shell *, html[data-learning-motion="reduce"] .ls-language-selection * { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }

.ls-download-status { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--ls-space-3); border: 1px solid var(--ls-color-line); border-radius: var(--ls-radius-lg); background: var(--ls-color-panel); padding: var(--ls-space-4); }
.ls-download-status__icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: var(--ls-radius-lg); background: rgb(44 122 123 / 0.1); color: var(--ls-color-teal); }
.ls-download-status > div { display: grid; }
.ls-download-status p { margin: 0; color: var(--ls-color-graphite); font-size: 0.625rem; font-weight: var(--ls-font-weight-bold); letter-spacing: 0.08em; text-transform: uppercase; }
.ls-download-status strong { margin-top: var(--ls-space-1); }
.ls-download-status small { margin-top: var(--ls-space-1); color: var(--ls-color-graphite); font-size: var(--ls-font-size-xs); }
.ls-download-status > .ls-status { grid-column: 1 / -1; justify-self: start; }

.ls-state-card { border: 1px solid var(--ls-color-line); border-radius: var(--ls-radius-lg); background: var(--ls-color-panel); padding: var(--ls-space-6); text-align: center; }
.ls-state-card__icon { display: grid; width: 48px; height: 48px; place-items: center; margin: 0 auto; border-radius: var(--ls-radius-lg); background: var(--ls-color-mist); color: var(--ls-color-red-dark); }
.ls-state-card h2 { margin: var(--ls-space-4) 0 0; font-size: var(--ls-font-size-xl); }
.ls-state-card p { margin: var(--ls-space-2) 0 0; color: var(--ls-color-graphite); }
.ls-state-card--error { border-color: rgb(224 114 88 / 0.28); background: rgb(224 114 88 / 0.06); }

.ls-confirmation { text-align: center; }
.ls-confirmation__icon { display: grid; width: 52px; height: 52px; place-items: center; margin: 0 auto; border-radius: var(--ls-radius-lg); background: rgb(224 114 88 / 0.1); color: var(--ls-color-red-dark); }
.ls-confirmation h2 { margin: var(--ls-space-4) 0 0; font-size: var(--ls-font-size-2xl); font-weight: var(--ls-font-weight-black); letter-spacing: -0.03em; }
.ls-confirmation p { margin: var(--ls-space-3) 0 0; color: var(--ls-color-graphite); line-height: 1.6; }
.ls-confirmation__actions { display: grid; gap: var(--ls-space-2); margin-top: var(--ls-space-6); border-top: 1px solid var(--ls-color-line); padding-top: var(--ls-space-4); }

@media (min-width: 640px) {
  .ls-learning-content { padding: var(--ls-space-7) var(--ls-space-6) var(--ls-space-12); }
  .ls-continue-card,
  .ls-category-hero,
  .ls-review-hero,
  .ls-progress-overview { padding: var(--ls-space-6); }
  .ls-continue-card { grid-template-columns: minmax(0, 1.2fr) minmax(210px, 0.8fr); align-items: center; }
  .ls-category-card__panel { grid-template-columns: 180px minmax(0, 1fr); }
  .ls-category-card__panel .ls-illustration { min-height: 100%; border-right: 1px solid var(--ls-color-line); border-bottom: 0; }
  .ls-category-card__content { padding: var(--ls-space-5); }
  .ls-category-card__action { width: auto; }
  .ls-lesson-card { grid-template-columns: 44px minmax(0, 1fr); padding: var(--ls-space-5); }
  .ls-lesson-card__footer { grid-template-columns: auto minmax(180px, 1fr); align-items: center; }
  .ls-lesson-card__body > a { width: auto; }
  .ls-language-card { grid-template-columns: minmax(230px, 0.72fr) minmax(0, 1.28fr); }
  .ls-language-card__art { min-height: 100%; }
  .ls-language-card__content { padding: var(--ls-space-6); }
  .ls-language-card__actions { flex-direction: row; }
  .ls-language-card__actions > * { width: auto; }
  .ls-state-preview__actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ls-exercise-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ls-exercise-preview__stage { min-height: 420px; padding: var(--ls-space-8); }
  .ls-exercise-preview__footer { flex-direction: row; align-items: center; justify-content: space-between; }
  .ls-exercise-preview__footer p { max-width: 360px; }
  .ls-review-hero { grid-template-columns: 170px minmax(0, 1fr); align-items: center; }
  .ls-review-groups > div:last-child,
  .ls-progress-details { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ls-review-options,
  .ls-review-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ls-progress-overview { grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr); align-items: center; }
  .ls-progress-category-grid, .ls-category-progress-detail dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ls-download-status { grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; }
  .ls-download-status > .ls-status { grid-column: auto; }
  .ls-confirmation__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
  .ls-setting-control { grid-template-columns: 1fr; }
  .ls-setting-control select { width: 100%; max-width: none; }
}

@media (min-width: 1024px) {
  .ls-learning-shell { display: grid; grid-template-columns: 270px minmax(0, 1fr); }
  .ls-learning-sidebar { position: sticky; top: 0; display: flex; height: 100dvh; flex-direction: column; border-right: 1px solid rgb(0 0 0 / 0.12); background: var(--ls-color-sidebar); color: white; padding: var(--ls-space-6) var(--ls-space-4); }
  .ls-learning-brand { display: flex; min-height: 58px; align-items: center; gap: var(--ls-space-3); color: white; text-decoration: none; }
  .ls-learning-brand img { width: 48px; height: 48px; object-fit: contain; }
  .ls-learning-brand span { display: grid; }
  .ls-learning-brand strong { font-size: 0.9375rem; }
  .ls-learning-brand small { margin-top: 2px; color: rgb(255 255 255 / 0.55); font-size: 0.6875rem; }
  .ls-primary-nav--desktop { display: grid; gap: var(--ls-space-2); margin-top: var(--ls-space-8); }
  .ls-primary-nav--desktop .ls-primary-nav__item { min-height: 48px; justify-content: flex-start; gap: var(--ls-space-3); padding: 0 var(--ls-space-3); color: rgb(255 255 255 / 0.7); font-size: var(--ls-font-size-sm); }
  .ls-primary-nav--desktop .ls-primary-nav__item.is-active { background: rgb(255 255 255 / 0.1); color: white; }
  .ls-primary-nav--desktop .ls-primary-nav__item:hover { background: rgb(255 255 255 / 0.07); color: white; }
  .ls-learning-sidebar__course { display: flex; align-items: center; gap: var(--ls-space-3); margin-top: auto; border: 1px solid rgb(255 255 255 / 0.1); border-radius: var(--ls-radius-lg); background: rgb(255 255 255 / 0.06); padding: var(--ls-space-3); }
  .ls-learning-sidebar__course-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: var(--ls-radius-lg); background: var(--ls-color-red); font-weight: var(--ls-font-weight-black); }
  .ls-learning-sidebar__course > span:last-child { display: grid; }
  .ls-learning-sidebar__course small { color: rgb(255 255 255 / 0.5); font-size: 0.625rem; font-weight: var(--ls-font-weight-bold); letter-spacing: 0.08em; text-transform: uppercase; }
  .ls-learning-sidebar__course strong { margin-top: 2px; font-size: var(--ls-font-size-xs); }
  .ls-learning-sidebar__back { display: flex; min-height: 44px; align-items: center; gap: var(--ls-space-2); margin-top: var(--ls-space-3); color: rgb(255 255 255 / 0.62); font-size: var(--ls-font-size-xs); font-weight: var(--ls-font-weight-semibold); text-decoration: none; }
  .ls-learning-sidebar__user { display: flex; min-height: 48px; align-items: center; gap: var(--ls-space-3); margin-top: var(--ls-space-2); border-top: 1px solid rgb(255 255 255 / 0.1); padding-top: var(--ls-space-3); }
  .ls-learning-sidebar__user > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: rgb(255 255 255 / 0.1); font-size: var(--ls-font-size-xs); font-weight: var(--ls-font-weight-bold); }
  .ls-learning-sidebar__user strong { font-size: var(--ls-font-size-xs); }
  .ls-learning-stage { padding-bottom: 0; }
  .ls-learning-topbar,
  .ls-primary-nav--mobile { display: none; }
  .ls-learning-content { width: min(100%, 820px); padding: var(--ls-space-10) var(--ls-space-8) var(--ls-space-16); }
  .ls-learning-shell--wide .ls-learning-content { width: min(100%, 980px); }
  .ls-page-heading { margin-bottom: var(--ls-space-8); }
  .ls-page-heading h1 { font-size: 2.75rem; }
  .ls-section-heading { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .ls-offline-banner { position: sticky; top: 0; z-index: 20; }
}

@media (prefers-reduced-motion: reduce) {
  .ls-category-card__panel,
  .ls-progress__fill { transition: none; }
  .ls-category-card:not(.ls-category-card--locked) .ls-category-card__panel:hover { transform: none; }
}

/* Phase 4 lesson engine */
.ls-engine-root,
.ls-lesson-shell,
.ls-lesson-intro,
.ls-lesson-results,
.ls-engine-loading { min-height: 100dvh; background: var(--ls-color-cream); color: var(--ls-color-ink); }
.ls-engine-loading { display: grid; place-content: center; justify-items: center; gap: var(--ls-space-3); padding: var(--ls-space-6); text-align: center; }
.ls-engine-loading > span { display: grid; width: 56px; height: 56px; place-items: center; border-radius: var(--ls-radius-lg); background: var(--ls-color-panel); color: var(--ls-color-red-dark); box-shadow: var(--ls-shadow-sm); }
.ls-engine-loading h1 { margin: 0; font-size: var(--ls-font-size-2xl); font-weight: var(--ls-font-weight-black); }
.ls-engine-loading p { max-width: 440px; margin: 0; color: var(--ls-color-graphite); }
.ls-lesson-intro > a { display: inline-flex; min-height: 44px; align-items: center; gap: var(--ls-space-2); margin: var(--ls-space-3); color: var(--ls-color-graphite); font-size: var(--ls-font-size-sm); font-weight: var(--ls-font-weight-semibold); text-decoration: none; }
.ls-lesson-intro main,
.ls-lesson-results main { width: min(calc(100% - 2rem), 680px); margin: 0 auto; padding: var(--ls-space-8) 0 var(--ls-space-12); text-align: center; }
.ls-lesson-intro h1,
.ls-lesson-results h1 { margin: var(--ls-space-3) 0 0; font-size: clamp(2rem, 8vw, 3.25rem); font-weight: var(--ls-font-weight-black); letter-spacing: -0.045em; line-height: 1.05; }
.ls-lesson-intro main > p,
.ls-lesson-results main > p { max-width: 560px; margin: var(--ls-space-4) auto 0; color: var(--ls-color-graphite); line-height: 1.65; }
.ls-lesson-intro__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ls-space-3); margin-top: var(--ls-space-6); color: var(--ls-color-charcoal); font-size: var(--ls-font-size-sm); font-weight: var(--ls-font-weight-semibold); }
.ls-lesson-intro__facts span { display: inline-flex; align-items: center; gap: var(--ls-space-2); }
.ls-lesson-intro__words { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ls-space-2); margin: var(--ls-space-6) 0; text-align: left; }
.ls-lesson-intro__words > span { display: grid; border: 1px solid var(--ls-color-line); border-radius: var(--ls-radius-lg); background: var(--ls-color-panel); padding: var(--ls-space-3); font-size: var(--ls-font-size-lg); font-weight: var(--ls-font-weight-bold); }
.ls-lesson-intro__words small { margin-top: 2px; color: var(--ls-color-graphite); font-family: var(--ls-font-sans); font-size: var(--ls-font-size-xs); font-weight: var(--ls-font-weight-medium); }
.ls-lesson-intro main > button,
.ls-lesson-results main > button,
.ls-lesson-results main > a { width: 100%; margin-top: var(--ls-space-2); }
.ls-lesson-header { position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: var(--ls-space-3); border-bottom: 1px solid var(--ls-color-line); background: rgb(243 240 235 / 0.96); padding: var(--ls-space-2) var(--ls-space-3); backdrop-filter: blur(12px); }
.ls-lesson-header > button { display: grid; width: 44px; height: 44px; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--ls-color-graphite); }
.ls-lesson-header > span { color: var(--ls-color-graphite); font-size: var(--ls-font-size-xs); font-weight: var(--ls-font-weight-bold); }
.ls-lesson-progress { display: grid; gap: 3px; }
.ls-lesson-progress > div { height: 9px; overflow: hidden; border-radius: 999px; background: var(--ls-color-line); }
.ls-lesson-progress > div span { display: block; width: var(--ls-progress-value); height: 100%; border-radius: inherit; background: var(--ls-color-red); transition: width var(--ls-motion-default) var(--ls-ease-standard); }
.ls-lesson-progress small { color: var(--ls-color-graphite); font-size: 0.6875rem; }
.ls-lesson-main { display: grid; min-height: calc(100dvh - 170px); place-items: center; padding: var(--ls-space-5) var(--ls-space-4) calc(150px + env(safe-area-inset-bottom)); }
.ls-lesson-card { width: min(100%, 720px); border: 1px solid var(--ls-color-line); border-radius: var(--ls-radius-lg); background: var(--ls-color-panel); padding: var(--ls-space-5); box-shadow: var(--ls-shadow-sm); }
.ls-exercise-prompt { text-align: center; }
.ls-exercise-prompt > span { color: var(--ls-color-red-dark); font-size: var(--ls-font-size-xs); font-weight: var(--ls-font-weight-bold); letter-spacing: normal; text-transform: uppercase; }
.ls-exercise-prompt h1 { margin: var(--ls-space-2) 0 0; font-size: clamp(1.25rem, 3.5vw, 1.75rem); font-weight: var(--ls-font-weight-black); letter-spacing: normal; line-height: 1.3; }
.ls-engine-choices { display: grid; gap: var(--ls-space-2); margin-top: var(--ls-space-6); }
.ls-engine-choices button,
.ls-engine-wordbank button,
.ls-engine-order__answer button,
.ls-engine-match button { min-height: 52px; border: 1px solid var(--ls-color-line); border-radius: var(--ls-radius-lg); background: white; color: var(--ls-color-ink); padding: var(--ls-space-3); font-weight: var(--ls-font-weight-semibold); text-align: left; }
.ls-engine-choices button { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: var(--ls-space-2); }
.ls-engine-choices button kbd { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid var(--ls-color-line); border-radius: 6px; background: var(--ls-color-snow); color: var(--ls-color-graphite); font: inherit; font-size: var(--ls-font-size-xs); }
.ls-engine-choices button.is-selected,
.ls-engine-match button:focus { border-color: var(--ls-color-red); background: rgb(224 114 88 / .08); box-shadow: 0 0 0 2px rgb(224 114 88 / .16); }
.ls-engine-type { display: grid; gap: var(--ls-space-2); margin-top: var(--ls-space-6); color: var(--ls-color-charcoal); font-size: var(--ls-font-size-sm); font-weight: var(--ls-font-weight-semibold); }
.ls-engine-type input { min-height: 56px; border: 1px solid var(--ls-color-line); border-radius: var(--ls-radius-lg); background: white; padding: 0 var(--ls-space-4); color: var(--ls-color-ink); font-size: var(--ls-font-size-lg); }
.ls-engine-order { margin-top: var(--ls-space-6); }
.ls-engine-order__answer { display: flex; min-height: 84px; flex-wrap: wrap; align-content: flex-start; gap: var(--ls-space-2); border: 1px dashed var(--ls-color-line); border-radius: var(--ls-radius-lg); background: var(--ls-color-snow); padding: var(--ls-space-3); }
.ls-engine-order__answer > span { align-self: center; margin: auto; color: var(--ls-color-muted); font-size: var(--ls-font-size-sm); }
.ls-engine-order__answer button,
.ls-engine-wordbank button { min-height: 44px; padding: var(--ls-space-2) var(--ls-space-3); text-align: center; }
.ls-engine-wordbank { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ls-space-2); margin-top: var(--ls-space-4); }
.ls-engine-match { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ls-space-3); margin-top: var(--ls-space-6); }
.ls-engine-match > div { display: grid; gap: var(--ls-space-2); }
.ls-engine-match button:disabled { opacity: .4; }
.ls-engine-match__status { margin: var(--ls-space-3) 0 0; color: var(--ls-color-graphite); text-align: center; }
.ls-engine-word { margin-top: var(--ls-space-5); text-align: center; }
.ls-audio-button,
.ls-engine-listen { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: var(--ls-space-2); border: 1px solid rgb(61 127 168 / .28); border-radius: 999px; background: rgb(61 127 168 / .08); color: var(--ls-color-blue); padding: 0 var(--ls-space-4); font-weight: var(--ls-font-weight-bold); }
.ls-engine-word h2 { margin: var(--ls-space-3) 0 0; font-size: clamp(3rem, 15vw, 5.5rem); font-weight: var(--ls-font-weight-black); line-height: 1; }
.ls-engine-word .ls-pronunciation { margin: var(--ls-space-3) 0 0; color: var(--ls-color-red-dark); font-size: var(--ls-font-size-lg); }
.ls-engine-word__meaning { margin: var(--ls-space-2) 0 0; font-size: var(--ls-font-size-xl); font-weight: var(--ls-font-weight-bold); }
.ls-engine-note { color: var(--ls-color-graphite); font-size: var(--ls-font-size-sm); line-height: 1.55; }
.ls-engine-example { margin-top: var(--ls-space-5); border-radius: var(--ls-radius-lg); background: var(--ls-color-snow); padding: var(--ls-space-4); text-align: left; }
.ls-engine-example small,
.ls-engine-story__heading span { color: var(--ls-color-graphite); font-size: var(--ls-font-size-xs); font-weight: var(--ls-font-weight-bold); letter-spacing: .06em; text-transform: uppercase; }
.ls-engine-example p { margin: var(--ls-space-2) 0 0; font-size: var(--ls-font-size-lg); }
.ls-engine-example span { color: var(--ls-color-graphite); font-size: var(--ls-font-size-sm); }
.ls-engine-listen { display: flex; width: max-content; margin: var(--ls-space-6) auto 0; }
.ls-engine-dialogue { display: grid; gap: var(--ls-space-2); max-height: 220px; overflow-y: auto; margin-top: var(--ls-space-5); }
.ls-engine-dialogue > div { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0 var(--ls-space-2); border-radius: var(--ls-radius-lg); background: var(--ls-color-snow); padding: var(--ls-space-3); text-align: left; }
.ls-engine-dialogue p { margin: 0; }
.ls-engine-dialogue small { grid-column: 2; color: var(--ls-color-graphite); }
.ls-engine-story { margin-top: var(--ls-space-5); text-align: left; }
.ls-engine-story__heading { display: flex; align-items: center; justify-content: space-between; gap: var(--ls-space-3); border-bottom: 1px solid var(--ls-color-line); padding-bottom: var(--ls-space-4); }
.ls-engine-story h2 { margin: 2px 0 0; font-size: var(--ls-font-size-xl); }
.ls-engine-story > p { margin: var(--ls-space-4) 0 0; font-size: var(--ls-font-size-lg); line-height: 1.75; }
.ls-engine-story > small { display: block; color: var(--ls-color-graphite); }
.ls-lesson-footer { position: fixed; inset: auto 0 0; z-index: 11; display: flex; flex-direction: column; gap: var(--ls-space-3); border-top: 1px solid var(--ls-color-line); background: var(--ls-color-panel); padding: var(--ls-space-3) var(--ls-space-4) calc(var(--ls-space-3) + env(safe-area-inset-bottom)); box-shadow: 0 -8px 28px rgb(29 41 63 / .07); }
.ls-lesson-footer > span { color: var(--ls-color-graphite); font-size: var(--ls-font-size-sm); }
.ls-lesson-footer > button { width: 100%; }
.ls-lesson-footer.is-correct { border-color: rgb(44 122 123 / .28); background: #eff8f5; }
.ls-lesson-footer.is-incorrect { border-color: rgb(224 114 88 / .28); background: #fff1ed; }
.ls-feedback { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--ls-space-2); }
.ls-feedback > span { color: currentColor; }
.ls-feedback strong { font-size: var(--ls-font-size-lg); }
.ls-feedback p { margin: 2px 0 0; color: var(--ls-color-charcoal); }
.ls-feedback small { color: var(--ls-color-graphite); }
.ls-lesson-footer.is-correct .ls-feedback { color: var(--ls-color-teal); }
.ls-lesson-footer.is-incorrect .ls-feedback { color: var(--ls-color-red-dark); }
.ls-exit-layer { position: fixed; inset: 0; z-index: 30; display: grid; place-items: end center; background: rgb(29 41 63 / .55); padding: var(--ls-space-3); }
.ls-exit-layer > div { width: min(100%, 440px); border-radius: var(--ls-radius-lg); background: var(--ls-color-panel); padding: var(--ls-space-6); text-align: center; box-shadow: var(--ls-shadow-media); }
.ls-exit-layer h2 { margin: var(--ls-space-3) 0 0; font-size: var(--ls-font-size-2xl); font-weight: var(--ls-font-weight-black); }
.ls-exit-layer p { color: var(--ls-color-graphite); }
.ls-exit-layer button { width: 100%; margin-top: var(--ls-space-2); }
.ls-lesson-results { display: grid; place-items: center; }
.ls-lesson-results__icon { display: grid; width: 76px; height: 76px; place-items: center; margin: 0 auto var(--ls-space-5); border-radius: 50%; background: rgb(44 122 123 / .1); color: var(--ls-color-teal); }
.ls-lesson-results dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ls-space-2); margin: var(--ls-space-6) 0; }
.ls-lesson-results dl div { display: grid; gap: 2px; border: 1px solid var(--ls-color-line); border-radius: var(--ls-radius-lg); background: var(--ls-color-panel); padding: var(--ls-space-3); }
.ls-lesson-results dt { color: var(--ls-color-graphite); font-size: var(--ls-font-size-xs); }
.ls-lesson-results dd { margin: 0; font-size: var(--ls-font-size-xl); font-weight: var(--ls-font-weight-black); }

@media (min-width: 640px) {
  .ls-lesson-intro__words { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ls-lesson-intro main > button,
  .ls-lesson-results main > button,
  .ls-lesson-results main > a { width: auto; min-width: 220px; }
  .ls-lesson-card { padding: var(--ls-space-8); }
  .ls-engine-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ls-lesson-footer { display: grid; grid-template-columns: minmax(0, 720px) auto; align-items: center; justify-content: center; padding: var(--ls-space-4) max(var(--ls-space-6), calc((100vw - 900px) / 2)); }
  .ls-lesson-footer > button { width: auto; min-width: 150px; }
  .ls-exit-layer { place-items: center; }
  .ls-exit-layer > div { border-radius: var(--ls-radius-lg); }
}

@media (prefers-reduced-motion: reduce) {
  .ls-lesson-progress > div span { transition: none; }
}