/* No double-tap zoom anywhere; pinch zoom stays available. */
html { touch-action: manipulation; }
/* Foundations are loaded first from tokens.css; component cascade stays here. */
:root {
  color-scheme: light;
  font-family: var(--v3-font-family-body);
  line-height: var(--v3-line-height-body);
}

html[data-theme="dark"] {
  color-scheme: dark;
}

* { box-sizing: border-box; }

html {
  min-width: 20rem;
  background: var(--v3-color-background);
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--v3-color-text);
  background: var(--v3-color-background);
}

.page-shell {
  margin-block: 1rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: 1.25rem;
  background: var(--surface);
  box-shadow: var(--shadow);
}

button, input, select { font: inherit; }

a {
  color: var(--primary-dark);
  text-underline-offset: 0.18em;
}

button, .button {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.65rem 1rem;
  border: 1px solid var(--v3-color-action-primary);
  border-radius: var(--v3-radius-button);
  color: var(--v3-color-action-primary-text);
  background: var(--v3-color-action-primary);
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

button:hover, .button:hover {
  border-color: var(--v3-color-action-primary-hover);
  background: var(--v3-color-action-primary-hover);
}

button:focus-visible, .button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible {
  outline: var(--v3-focus-width) solid var(--v3-color-focus);
  outline-offset: var(--v3-focus-offset);
}

button:disabled {
  cursor: not-allowed;
  opacity: var(--v3-opacity-disabled);
}

.button--quiet {
  border-color: var(--border);
  color: var(--text);
  background: var(--surface);
}

.button--quiet:hover {
  border-color: var(--text-muted);
  color: var(--text);
  background: var(--surface-muted);
}

.button--small {
  min-height: 2.25rem;
  padding: 0.45rem 0.75rem;
  font-size: 0.9rem;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-small);
  color: var(--v3-color-action-primary-text);
  background: var(--primary-dark);
  transform: translateY(-160%);
}

.skip-link:focus { transform: translateY(0); }

.site-header {
  position: sticky;
  z-index: 20;
  top: 0;
  border-bottom: 1px solid var(--header-border);
  background: var(--header-background);
  backdrop-filter: blur(0.8rem);
}

.site-header, .site-header .brand { color: var(--v3-color-header-text); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--v3-color-link); background: var(--v3-color-action-soft); }
.account-avatar {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 1px solid var(--v3-color-control-border);
  border-radius: 50%;
  color: var(--v3-color-link);
  background: var(--surface);
  font-weight: 750;
  text-decoration: none;
}

.site-header__inner {
  display: flex;
  width: min(100% - 2rem, var(--content-width));
  min-height: 3.5rem;
  align-items: center;
  gap: 1.25rem;
  margin-inline: auto;
}

.brand {
  display: inline-flex;
  /* 44px touch target without changing the header's height */
  padding-block: 0.65rem;
  margin-block: -0.65rem;
  align-items: center;
  gap: 0.7rem;
  color: var(--text);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.brand__mark {
  display: inline-grid;
  width: 2.2rem;
  height: 2.2rem;
  place-items: center;
  border-radius: 0.65rem;
  color: var(--v3-color-action-primary-text);
  background: var(--primary);
  font-size: 1.25rem;
}

.site-nav {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.25rem;
}

.site-nav a {
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-small);
  color: var(--text-muted);
  font-weight: 600;
  text-decoration: none;
}

.site-nav a:hover, .site-nav a[aria-current="page"] {
  color: var(--primary-dark);
  background: var(--primary-soft);
}

.header-actions, .account-menu {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.header-actions {
  margin-left: auto;
}

.script-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  margin: 0;
  padding: 0.2rem;
  border: 2px solid var(--border);
  border-radius: 0.7rem;
  background: var(--surface);
  box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
}

.script-toggle__label {
  padding-inline: 0.45rem 0.35rem;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 750;
}

.script-toggle__option {
  min-height: 2.5rem;
  padding: 0.4rem 0.65rem;
  border: 0;
  border-radius: 0.5rem;
  color: var(--text-muted);
  background: transparent;
  font-size: 0.84rem;
}

.script-toggle__mobile { display: none; }

.learn-menu { position: relative; }

.learn-menu summary {
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-small);
  color: var(--text-muted);
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}

.learn-menu summary::-webkit-details-marker { display: none; }
.learn-menu summary::after { content: " ▾"; }
.learn-menu summary:hover, .learn-menu summary[aria-current="page"] { color: var(--primary-dark); background: var(--primary-soft); }

.learn-menu__popover {
  position: absolute;
  z-index: 30;
  top: calc(100% + 0.45rem);
  left: 0;
  display: grid;
  min-width: 11rem;
  padding: 0.45rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.script-toggle__option[aria-pressed="true"] {
  color: var(--v3-color-action-primary-text);
  background: var(--primary-dark);
  box-shadow: 0 1px 3px rgb(0 0 0 / 16%);
}

.script-toggle__option:hover {
  color: var(--text);
  background: var(--surface);
}

.theme-toggle {
  min-width: 4.25rem;
}

.account-menu__identity {
  max-width: 14rem;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.88rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-menu form { margin: 0; }

.page-shell {
  width: min(100% - 2rem, var(--content-width));
  min-height: calc(100vh - 9rem);
  margin-inline: auto;
  padding-block: 2.5rem 4rem;
}

.page-header {
  max-width: var(--reading-width);
  margin-bottom: 1.75rem;
}

.page-header h1 {
  margin: 0 0 0.55rem;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.page-header p {
  margin: 0;
  color: var(--text-muted);
  font-size: 1.05rem;
}

.panel, .flashcard, .quiz-card, .result-card, .action-card {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface-raised);
  box-shadow: var(--shadow);
}

.panel { padding: 1.25rem; }

.filter-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 1rem;
  margin-bottom: 2rem;
}

.form-field {
  display: grid;
  min-width: 10rem;
  gap: 0.4rem;
}

.form-field label, fieldset legend { font-weight: 700; }

.form-help {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.88rem;
}

select, input[type="search"] {
  min-height: 2.75rem;
  border: 1px solid var(--v3-color-control-border);
  border-radius: var(--radius-small);
  color: var(--text);
  background: var(--surface);
}

select {
  padding: 0.55rem 2.3rem 0.55rem 0.75rem;
}

input[type="search"] {
  width: 100%;
  padding: 0.55rem 0.75rem;
}

input[type="search"]::placeholder {
  color: var(--text-muted);
}

.form-field--search {
  flex: 1 1 20rem;
}

.hero {
  display: grid;
  min-height: 22rem;
  align-content: center;
  padding-block: 2rem;
}

.hero__eyebrow {
  margin: 0 0 0.55rem;
  color: var(--primary);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 15ch;
  margin: 0;
  font-size: clamp(2.6rem, 8vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.hero__intro {
  max-width: 42rem;
  margin: 1.25rem 0 0;
  color: var(--text-muted);
  font-size: clamp(1.05rem, 2.5vw, 1.25rem);
}

.hero--landing {
  position: relative;
  top: -6rem;
  min-height: clamp(32rem, calc(100vh - 13rem), 44rem);
  isolation: isolate;
  overflow: clip;
}

.hero--landing .hero__content {
  position: relative;
  z-index: 1;
  max-width: 45rem;
}

.hero-visual {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(54vw, 45rem);
  color: var(--jade);
  pointer-events: none;
  user-select: none;
}

.hero-visual svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.hero-visual__layer {
  fill: none;
  stroke: currentColor;
  stroke-linecap: square;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}

.hero-visual__layer--far {
  opacity: 0.14;
  stroke-width: 54;
}

.hero-visual__layer--middle {
  color: var(--jade);
  opacity: 0.25;
  stroke-width: 38;
}

.hero-visual__layer--near {
  color: var(--v3-color-link);
  opacity: 0.42;
  stroke-width: 24;
}

html[data-theme="dark"] .hero-visual__layer--far { opacity: 0.11; }
html[data-theme="dark"] .hero-visual__layer--middle { opacity: 0.2; }
html[data-theme="dark"] .hero-visual__layer--near { opacity: 0.32; }

.action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.learning-path-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.learning-path-grid--home { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.learning-path-grid--home .action-card { min-height: 10rem; }
.learning-path-grid--home h3 { margin: 0 0 0.45rem; font-size: 1.35rem; }
.action-card--current { border-color: var(--primary); box-shadow: 0 0 0 0.12rem var(--primary-soft), var(--shadow); }
.hero--compact { min-height: 15rem; }
.home-review { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-bottom: 3rem; }
.home-review h2, .onboarding h2, .section-heading h2 { margin: 0; }
.home-review p { margin-bottom: 0; color: var(--text-muted); }
.home-review__cta { min-width: 10rem; }
.home-learn, .learn-topics { margin-top: 3rem; }
.onboarding { margin-bottom: 1.25rem; }
.onboarding__choices { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-block: 1rem; }
.topic-link-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.topic-link { display: grid; gap: 0.25rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface); text-decoration: none; }
.topic-link span { color: var(--text-muted); font-size: 0.9rem; }
.focus-settings { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 3rem; }
.focus-settings .form-help { flex-basis: 100%; }
.start-learning-form { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
.start-learning-form--primary { margin: 0 0 2rem; }
.study-session-completion { margin: 0 0 2rem; }
.study-complete { max-width: 42rem; }
.study-complete h2 { margin-top: 0; }
.study-complete p { color: var(--text-muted); }
.browse-vocabulary > h2 { margin-bottom: 1rem; }
.catalogue-state-filters { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 1rem 0 1.5rem; }
.catalogue-state-filters .is-active { border-color: var(--primary); color: var(--primary-dark); background: var(--primary-soft); }
.saved-card-form { display: inline-flex; align-items: center; gap: 0.5rem; }
.saved-card-status:not(.visually-hidden) { color: var(--danger); font-size: 0.85rem; }
.path-progress-section { margin-top: 1.25rem; }

.action-card {
  display: grid;
  min-height: 13rem;
  align-content: space-between;
  gap: 1rem;
  padding: 1.35rem;
  color: var(--text);
  text-decoration: none;
}

.action-card:hover {
  border-color: var(--primary);
  transform: translateY(-0.15rem);
}

.action-card h2, .flashcard h2, .quiz-card h2, .result-card h2 { margin: 0; }

.action-card p {
  margin: 0;
  color: var(--text-muted);
}

.action-card__link {
  color: var(--primary-dark);
  font-weight: 800;
}

.card-grid, .result-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding: 0;
  list-style: none;
}

.flashcard {
  height: 100%;
  padding: 1.25rem;
}

.flashcard__character {
  margin-bottom: 0.2rem;
  font-size: clamp(2.4rem, 8vw, 4rem);
  line-height: 1.1;
}

.flashcard__pinyin {
  margin: 0.25rem 0;
  color: var(--primary-dark);
  font-size: 1.1rem;
  font-weight: 700;
}

.flashcard__translation {
  margin: 1rem 0;
  font-size: 1.05rem;
}

.metadata { color: var(--text-muted); }

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1rem;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-block: 2rem;
}

.review-layout {
  display: grid;
  max-width: 34rem;
  gap: 1.25rem;
  margin-inline: auto;
}

.quiz-layout {
  display: grid;
  max-width: 46rem;
  gap: 1.25rem;
  margin-inline: auto;
}

.review-card, .quiz-card {
  padding: clamp(1.25rem, 4vw, 2.25rem);
  text-align: center;
}

.review-card .flashcard__character, .quiz-card .flashcard__character {
  font-size: clamp(4rem, 18vw, 8rem);
}

.review-flip-card {
  width: min(100%, 32rem);
  min-height: 25rem;
  margin-inline: auto;
  perspective: 75rem;
}

.review-flip-card__inner {
  position: relative;
  min-height: 25rem;
  transform-style: preserve-3d;
}

.review-flip-card.is-flipped .review-flip-card__inner {
  transform: rotateY(180deg);
}

.review-flip-card__face {
  position: absolute;
  inset: 0;
  display: grid;
  width: 100%;
  min-height: 25rem;
  place-items: center;
  padding: clamp(1.5rem, 5vw, 3rem);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow);
  backface-visibility: hidden;
}

.review-flip-card__front {
  align-content: center;
  gap: 2rem;
  cursor: pointer;
}

.review-flip-card__front:hover {
  border-color: var(--primary);
  background: var(--surface);
}

.review-flip-card__back {
  grid-template-rows: minmax(min-content, 1fr) auto;
  align-content: stretch;
  align-items: stretch;
  justify-items: stretch;
  gap: 0;
  overflow: auto;
  transform: rotateY(180deg);
}

.review-flip-card__answer-content {
  display: flex;
  min-height: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: clamp(0.5rem, 1.5vh, 1rem);
  padding: 3.25rem 0.5rem 1rem;
  text-align: center;
}

.review-flip-card__hanzi {
  margin: 0;
  font-size: clamp(5rem, 22vw, 10rem);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.review-hanzi--2 {
  font-size: clamp(4.75rem, 18vw, 8rem);
}

.review-hanzi--3 {
  font-size: clamp(4rem, 15vw, 6.5rem);
}

.review-hanzi--4-plus {
  font-size: clamp(3rem, 12vw, 5.25rem);
}

.review-flip-card__hint {
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 600;
}

.review-flip-card__back .flashcard__pinyin {
  margin: 0;
  font-size: 1.3rem;
}

.review-flip-card__back .flashcard__translation {
  max-width: 26rem;
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.35;
}

.review-flip-card__save {
  position: absolute;
  z-index: 1;
  top: clamp(0.75rem, 2vh, 1.25rem);
  right: clamp(0.75rem, 2vh, 1.25rem);
}

.review-flip-card__save .flashcard__actions { margin: 0; }
.review-flip-card__save .button { min-height: 2.75rem; }

.review-flip-card__back > .card-provenance {
  align-self: end;
  justify-self: center;
  margin: 0;
  padding-top: 0.5rem;
  font-size: 0.75rem;
}

.flashcard__translation--clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.flashcard__translation-more {
  min-height: auto;
  align-self: center;
  margin: 0;
  padding: 0.2rem 0.55rem;
  border: 0;
  border-radius: var(--v3-radius-button);
  color: var(--primary-dark);
  background: var(--primary-soft);
  font-size: 0.85rem;
  font-weight: 700;
}

.flashcard__translation-more:hover {
  border: 0;
  background: var(--primary-soft);
  text-decoration: underline;
}

.review-flip-card__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.review-rating-controls {
  padding-top: 0.25rem;
}

.review-rating-controls__prompt {
  margin: 0 0 0.75rem;
  color: var(--text-muted);
  text-align: center;
}

.rating-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
  margin-top: 1.25rem;
}

.rating-grid button {
  display: grid;
  min-width: 0;
  gap: 0.18rem;
  padding: 0.7rem 0.45rem;
}

.rating-grid button span {
  font-size: 0.78rem;
  font-weight: 500;
  opacity: 0.8;
}

.quiz-progress {
  margin: 0 0 0.5rem;
  color: var(--primary);
  font-weight: 800;
}

.choice-list {
  display: grid;
  gap: 0.7rem;
  margin: 1.5rem 0;
  padding: 0;
  border: 0;
}

.choice-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
}

.choice-option:hover, .choice-option:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.choice-option input {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--primary);
}

.score {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  margin: 0.5rem 0 1rem;
  color: var(--primary-dark);
}

.score__value {
  font-size: clamp(2.2rem, 8vw, 4rem);
  font-weight: 900;
  line-height: 1;
}

.result-list { margin-block: 2rem; }

.result-card {
  height: 100%;
  padding: 1.25rem;
}

.result-card--correct { border-left: 0.35rem solid var(--primary); }
.result-card--incorrect { border-left: 0.35rem solid var(--danger); }

.feedback {
  padding: 0.65rem 0.8rem;
  border-radius: var(--radius-small);
  font-weight: 700;
}

.feedback--correct {
  color: var(--primary);
  background: var(--success-soft);
}

.feedback--incorrect {
  color: var(--danger);
  background: var(--danger-soft);
}

.empty-state {
  max-width: 42rem;
  margin-inline: auto;
  padding: 2rem;
  text-align: center;
}

.status-message {
  min-height: 1.5rem;
  color: var(--text-muted);
}

.site-footer {
  width: min(100% - 2rem, var(--content-width));
  margin-inline: auto;
  padding: 1.5rem 0 2.5rem;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.88rem;
}

@media (max-width: 52rem) {
  .site-header__inner {
    flex-wrap: wrap;
    gap: 0.7rem;
    padding-block: 0.75rem;
  }

  .site-nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
  }

  .account-menu__identity { display: none; }

  .action-grid, .card-grid, .result-list, .learning-path-grid--home {
    grid-template-columns: 1fr;
  }

  .learning-path-grid--home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .script-toggle__desktop { display: none; }
  .script-toggle__mobile { display: inline; }

  .rating-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 34rem) {
  .page-shell {
    width: min(100% - 1rem, var(--content-width));
    padding-top: 1.5rem;
  }

  .brand span:last-child { display: none; }
  .account-menu { margin-left: auto; }

  .filter-form { align-items: stretch; }

  .form-field, .filter-form button { width: 100%; }

  .pagination { flex-wrap: wrap; }
  .learning-path-grid, .learning-path-grid--home, .topic-link-grid { grid-template-columns: 1fr; }
  .home-review { align-items: stretch; flex-direction: column; }
  .script-toggle { order: 3; width: 100%; }
  .script-toggle__option { flex: 1; min-height: 2.75rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .action-card, button, .button {
    transition: background-color var(--v3-duration-fast) var(--v3-easing-standard), border-color var(--v3-duration-fast) var(--v3-easing-standard), transform var(--v3-duration-fast) var(--v3-easing-standard);
  }

  .review-flip-card__inner {
    transition: transform 420ms ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .review-flip-card.is-flipped .review-flip-card__inner {
    transform: none;
  }

  .review-flip-card.is-flipped .review-flip-card__front {
    visibility: hidden;
  }

  .review-flip-card.is-flipped .review-flip-card__back {
    transform: none;
  }
}

/* Catalogue density and filter alignment. */
.filter-form {
  align-items: start;
}

.filter-form > button {
  margin-top: 1.9rem;
}

.card-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.result-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 70rem) {
  .card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 52rem) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 34rem) {
  .filter-form > button {
    margin-top: 0;
  }

  .card-grid {
    grid-template-columns: 1fr;
  }
}

/* P7.15 review session setup. */
.review-mode-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 1rem;
}

.review-mode-card {
  display: grid;
  align-content: space-between;
  min-height: 20rem;
  gap: 1.5rem;
  padding: clamp(1.25rem, 4vw, 2rem);
}

.review-mode-card h2 {
  margin-top: 0.25rem;
}

.review-mode-card--disabled {
  opacity: 0.68;
}

.review-setup-form {
  display: grid;
  gap: 1.25rem;
}

.review-setup-fieldset {
  display: grid;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.review-setup-fieldset legend {
  margin-bottom: 0.5rem;
  font-weight: 800;
}

.review-levels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.review-level-chip,
.script-choice__option {
  position: relative;
  cursor: pointer;
}

.review-level-chip input,
.script-choice__option input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.review-level-chip span,
.script-choice__option span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.65rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  color: var(--text);
  background: var(--surface);
  font-weight: 750;
}

.review-level-chip input:checked + span,
.script-choice__option input:checked + span {
  border-color: var(--primary);
  color: var(--primary-dark);
  background: var(--primary-soft);
}

.review-level-chip input:focus-visible + span,
.script-choice__option input:focus-visible + span {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.script-choice {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.review-session-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}

.text-link {
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

.text-link:hover {
  color: var(--primary);
}

.script-toggle {
  display: inline-flex;
  padding: 0.2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: var(--surface-muted);
}

.script-toggle__button {
  min-height: 2.4rem;
  padding: 0.45rem 0.7rem;
  border: 0;
  border-radius: calc(var(--radius-small) - 0.2rem);
  color: var(--text-muted);
  background: transparent;
}

.script-toggle__button:hover {
  background: transparent;
}

.script-toggle__button.is-active {
  color: var(--primary-dark);
  background: var(--surface);
  box-shadow: var(--shadow);
}

@media (max-width: 52rem) {
  .review-mode-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 34rem) {
  .review-session-header {
    align-items: stretch;
    flex-direction: column;
  }

  .script-toggle {
    align-self: start;
  }

  .review-flip-card,
  .review-flip-card__inner,
  .review-flip-card__face {
    min-height: 22rem;
  }
}

/* P7.16 Topics in Review. */
.review-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.review-topic-chip {
  position: relative;
  cursor: pointer;
}

.review-topic-chip input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.review-topic-chip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.4rem;
  padding: 0.48rem 0.72rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  color: var(--text);
  background: var(--surface);
  font-size: 0.9rem;
  font-weight: 700;
}

.review-topic-chip input:checked + span {
  border-color: var(--primary);
  color: var(--primary-dark);
  background: var(--primary-soft);
}

.review-topic-chip input:focus-visible + span {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.review-setup-actions {
  display: flex;
  justify-content: flex-start;
}

/* P7.16.11 separate review modes. */
.review-writing-panel {
  margin-bottom: 1rem;
  padding: 1rem 1.25rem;
}

.review-mode-form {
  margin: 0;
}

.review-mode-form > button {
  justify-self: start;
}

/* P7.17 My Cards. */
.flashcard__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.flashcard__actions form {
  margin: 0;
}

.my-cards-toolbar {
  display: flex;
  align-items: end;
  gap: 1rem;
  margin-bottom: 1rem;
}

.my-cards-toolbar form { width: 100%; }
.my-cards-toolbar [data-selection-count] { display: block; margin-top: 0.5rem; color: var(--text-muted); }
.my-card-select { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; cursor: pointer; }
.my-card-select input { width: 1.25rem; height: 1.25rem; accent-color: var(--primary); }
.my-card:has(input[data-card-id]:checked) { border-color: var(--primary); background: var(--primary-soft); }
.practice-actions { display: grid; margin-top: 1rem; }

@media (max-width: 720px) {
  .my-card .flashcard__actions { flex-direction: column; align-items: stretch; }
}

@media (max-width: 720px) {
  .my-cards-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
}

/* P7.18 Progress. */
.progress-summary-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 1rem;
}

.progress-stat {
  display: grid;
  gap: 0.3rem;
}

.progress-stat__value {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 750;
  line-height: 1;
}

.progress-stat__label {
  color: var(--v3-color-text-muted);
}

.progress-overview {
  display: grid;
  gap: 0.7rem;
  margin-bottom: 1rem;
}

.progress-overview > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.progress-overview progress {
  width: 100%;
}

.table-scroll {
  overflow-x: auto;
  border-radius: var(--radius-small);
}

.table-scroll:focus-visible {
  outline: var(--v3-focus-width) solid var(--v3-color-focus);
  outline-offset: var(--v3-focus-offset);
}

.progress-table {
  border-collapse: collapse;
  min-width: 680px;
  width: 100%;
}

.progress-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.submit-status:empty {
  display: none;
}

.submit-status {
  flex-basis: 100%;
  margin: 0;
  color: var(--text-muted);
  font-weight: 650;
}

.empty-state__actions {
  justify-content: center;
}

.progress-table th,
.progress-table td {
  border-bottom: 1px solid var(--border);
  padding: 0.8rem 0.6rem;
  text-align: right;
}

.progress-table th:first-child,
.progress-table td:first-child {
  text-align: left;
}

.progress-library {
  margin-top: 1rem;
}

.progress-filters {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.progress-filters label {
  font-size: 0.85rem;
  font-weight: 650;
}

@media (max-width: 820px) {
  .progress-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .progress-filters {
    align-items: stretch;
    flex-direction: column;
  }
}

/* P7.18.3 compact header controls. */
.site-header__inner {
  gap: 0.8rem;
}

.site-nav {
  white-space: nowrap;
}

.site-nav a {
  white-space: nowrap;
}

.header-actions {
  flex-shrink: 0;
  gap: 0.45rem;
}

.icon-button {
  align-items: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  height: 2.5rem;
  justify-content: center;
  padding: 0;
  width: 2.5rem;
}

.icon-button:hover {
  background: var(--surface);
}

.account-menu--compact {
  position: relative;
}

.account-menu--compact > summary {
  list-style: none;
}

.account-menu--compact > summary::-webkit-details-marker {
  display: none;
}

.account-menu__popover {
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.8rem;
  box-shadow: var(--v3-shadow-raised);
  display: grid;
  gap: 0.75rem;
  min-width: 15rem;
  padding: 0.8rem;
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 20;
}

.account-menu__popover .account-menu__identity {
  max-width: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-menu__popover form,
.account-menu__popover button {
  width: 100%;
}

.theme-toggle__sun {
  display: none;
}

/* Show the action, not the current state. */
.theme-toggle__moon {
  display: block;
}

html[data-theme="dark"] .theme-toggle__sun {
  display: block;
}

html[data-theme="dark"] .theme-toggle__moon {
  display: none;
}

.progress-card-action {
  margin-top: 0.8rem;
}

@media (max-width: 760px) {
  .brand > span:last-child {
    display: none;
  }

  .site-nav {
    flex: 1 1 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .site-nav::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 34rem) {
  .study-session-actions {
    position: sticky;
    z-index: 10;
    bottom: 0;
    margin-inline: -0.5rem;
    padding: 0.65rem 0.5rem max(0.65rem, env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    background: var(--background);
  }

  .study-session-actions form,
  .study-session-actions button,
  .empty-state__actions .button {
    width: 100%;
  }
}

/* Malun visual prototype V0. */
.brand__wordmark {
  color: var(--v3-color-header-text);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.045em;
}

.site-header .brand__wordmark { color: var(--v3-color-header-text); }

.site-footer__brand { color: var(--text); font-weight: 750; }
.home-intro { max-width: 42rem; margin-bottom: 2rem; }
.home-intro h1 { margin: 0 0 0.6rem; font-size: clamp(2.25rem, 6vw, 3.75rem); line-height: 1.02; letter-spacing: -0.05em; }
.home-intro > p:last-child, .home-primary-action p, .home-progress p { color: var(--text-muted); }
.home-focus-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 0.75fr); gap: 1rem; }
.home-primary-action, .home-review { display: flex; min-height: 13rem; align-items: flex-start; justify-content: space-between; flex-direction: column; gap: 1.5rem; margin: 0; }
.home-primary-action { border-color: var(--primary); background: var(--primary-soft); }
.home-primary-action h2, .home-review h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.home-primary-action p, .home-review p { margin: 0.5rem 0 0; }
.home-progress { margin-top: 1rem; }
.home-progress__heading, .progress-overview-card__heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.home-progress h2, .progress-overview-card h2 { margin: 0; }
.home-progress progress, .progress-bars progress { width: 100%; height: 0.55rem; margin-top: 1rem; border: 0; border-radius: 99rem; overflow: hidden; background: var(--surface-muted); }
progress::-webkit-progress-bar { background: var(--surface-muted); }
progress::-webkit-progress-value { background: var(--primary); }
progress::-moz-progress-bar { background: var(--primary); }
.home-progress p { margin: 0.55rem 0 0; font-size: 0.9rem; }
.learning-path-grid--home .action-card { min-height: 9rem; box-shadow: none; }

.study-page { max-width: 64rem; margin-inline: auto; }
.study-header { margin-inline: auto; text-align: center; }
.study-page .filter-form { box-shadow: none; }
.study-page .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.study-card { display: grid; min-height: 17rem; align-content: start; padding: 1.5rem; box-shadow: none; }
.study-card .flashcard__character { font-size: clamp(4rem, 10vw, 6.5rem); line-height: 1; letter-spacing: 0.02em; }
.study-card .flashcard__pinyin { margin-top: 0.65rem; font-size: 1.15rem; }
.study-card .flashcard__translation { margin: 0.6rem 0 1.25rem; font-size: 1.1rem; }
.study-card .flashcard__actions { margin-top: auto; padding-top: 1rem; }

.progress-overview-card { margin-bottom: 1rem; padding: clamp(1.25rem, 3vw, 2rem); }
.progress-bars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.progress-bars span { display: flex; justify-content: space-between; gap: 1rem; }
.progress-bars b { font-variant-numeric: tabular-nums; }
.progress-bars progress { margin-top: 0.5rem; }
.progress--learning::-webkit-progress-value { background: var(--learning); }
.progress--learning::-moz-progress-bar { background: var(--learning); }
.progress--unseen::-webkit-progress-value { background: var(--not-started); }
.progress--unseen::-moz-progress-bar { background: var(--not-started); }
.progress-definition { margin: 1.5rem 0 0; color: var(--text-muted); font-size: 0.9rem; }
.progress-stat { min-height: 8rem; align-content: space-between; box-shadow: none; }
.progress-stat__label { color: var(--text-muted); }
.progress-stat--mastered { border-top: 3px solid var(--success); }
.progress-stat--learning { border-top: 3px solid var(--warning); }
.progress-stat--due { border-top: 3px solid var(--danger); }
.progress-stat--unseen { border-top: 3px solid var(--border); }
.progress-activity { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; box-shadow: none; }
.progress-activity > div { display: grid; gap: 0.2rem; }
.progress-activity span, .progress-activity small { color: var(--text-muted); }
.progress-activity strong { font-size: 1.35rem; }
.progress-table thead { background: var(--surface-muted); }
.progress-table tbody tr:last-child th, .progress-table tbody tr:last-child td { border-bottom: 0; }

@media (max-width: 52rem) {
  .home-focus-grid, .progress-bars { grid-template-columns: 1fr; }
  .home-primary-action, .home-review { min-height: auto; }
}

@media (max-width: 34rem) {
  .brand > .brand__wordmark { display: inline; }
  .home-progress__heading, .progress-overview-card__heading { align-items: flex-start; flex-direction: column; }
  .progress-overview-card__heading .button { width: 100%; }
  .study-page .card-grid { grid-template-columns: 1fr; }
  .study-card { min-height: 15rem; }
  .progress-activity { grid-template-columns: 1fr; }
}

/* Malun UI pass 2: quieter hierarchy and fewer structural containers. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.theme-toggle { min-width: 2.5rem; }

.script-toggle {
  gap: 0;
  padding: 0.15rem;
  border-width: 1px;
  box-shadow: none;
}

.script-toggle__option {
  min-height: 2.2rem;
  padding: 0.35rem 0.55rem;
  font-size: 0.8rem;
}

.home-intro {
  margin-bottom: 2.5rem;
}

.home-intro h1 {
  font-size: clamp(2rem, 5vw, 3.1rem);
}

.home-focus-grid {
  grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 0.6fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.home-primary-action,
.home-review {
  min-height: 0;
  gap: 1.25rem;
  padding: 0;
  background: transparent;
  border: 0;
}

.home-primary-action h2,
.home-review h2 {
  margin: 0;
}

.home-primary-action .button {
  align-self: flex-start;
}

.home-review {
  padding-left: clamp(1.25rem, 3vw, 2.5rem);
  border-left: 1px solid var(--border);
}

.home-progress {
  max-width: 48rem;
  margin-top: clamp(3rem, 8vw, 5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.review-primary {
  max-width: 42rem;
  margin-bottom: clamp(3rem, 8vw, 5rem);
  padding-left: 1.25rem;
  border-left: 0.2rem solid var(--primary);
}

.review-primary h2,
.review-options h2,
.review-mode-form h3 {
  margin-top: 0;
}

.review-primary p {
  margin-bottom: 1.25rem;
  color: var(--text-muted);
}

.review-options {
  padding-block: 1.75rem;
  border-top: 1px solid var(--border);
}

.review-options > h2 {
  margin-bottom: 0.35rem;
  font-size: 1.35rem;
}

.review-options__intro { margin: 0 0 1.5rem; color: var(--text-muted); }
.review-category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.review-scope-group { padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.review-scope-group--wide { grid-column: 1 / -1; }
.review-scope-group h3 { margin: 0 0 0.75rem; font-size: 1rem; }
.review-levels form,
.review-topics form { margin: 0; }
.review-scope-button { min-height: 2.75rem; }
.review-saved form { margin: 0; }

.review-mode-form {
  display: grid;
  grid-template-columns: minmax(7rem, 0.25fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.25rem;
  padding-block: 1rem;
}

.review-mode-form + .review-mode-form {
  border-top: 1px solid var(--border);
}

.review-mode-form h3,
.review-mode-form p {
  margin-bottom: 0;
}

.review-mode-form--saved {
  grid-template-columns: minmax(0, 1fr) auto;
}

.review-mode-form[data-review-mode="topics"] {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.progress-overview-card {
  max-width: 58rem;
  margin-bottom: 0;
  padding: 0 0 clamp(2rem, 6vw, 3.5rem);
  border-bottom: 1px solid var(--border);
}

.progress-overview-card > progress {
  width: 100%;
  height: 0.65rem;
  margin-top: 1.5rem;
  border: 0;
  border-radius: 99rem;
  overflow: hidden;
}

.progress-summary-grid {
  margin: 1.5rem 0 0;
  gap: 0;
}

.progress-stat {
  min-height: 0;
  gap: 0.3rem;
  padding: 0 1rem;
  border-left: 1px solid var(--border);
}

.progress-stat:first-child {
  padding-left: 0;
  border-left: 0;
}

.progress-stat dt {
  color: var(--text-muted);
  font-size: 0.88rem;
}

.progress-stat dd {
  margin: 0;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.progress-stat dt::before {
  display: block;
  width: 2.75rem;
  height: 0.3rem;
  margin-bottom: 0.55rem;
  border-radius: 99rem;
  background: var(--border);
  content: "";
}

.progress-stat--mastered dt::before { background: var(--success); }
.progress-stat--learning dt::before { background: var(--learning); }
.progress-stat--due dt::before { background: var(--warning); }
.progress-stat--unseen dt::before { background: var(--not-started); }

.progress-activity {
  max-width: 58rem;
  margin: 0 0 clamp(3rem, 8vw, 5rem);
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border);
}

.progress-activity strong {
  font-size: 1.1rem;
}

.progress-section {
  padding-block: 2rem;
  border-top: 1px solid var(--border);
}

.progress-empty-state {
  padding-block: 2.5rem;
  border-block: 1px solid var(--border);
}

.progress-section:first-of-type {
  border-top: 0;
}

.path-progress-section {
  margin-top: 0;
}

@media (max-width: 52rem) {
  .home-focus-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .home-review {
    padding: 2rem 0 0;
    border-top: 1px solid var(--border);
    border-left: 0;
  }

  .review-mode-form {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }

  .review-category-grid { grid-template-columns: 1fr; }
  .review-scope-group--wide { grid-column: auto; }

  .review-mode-form > button,
  .review-mode-form > .button {
    justify-self: start;
  }
}

@media (max-width: 34rem) {
  .brand > .brand__wordmark:last-child {
    display: inline;
  }

  .script-toggle {
    width: auto;
  }

  .script-toggle__option {
    min-height: 2.2rem;
  }

  .progress-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 1.25rem;
  }

  .progress-stat:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
}

/* Malun warmth pass: quiet paper surfaces and user-driven depth. */
body {
  position: relative;
  isolation: isolate;
  background: var(--background);
}

.paper-atmosphere {
  position: fixed;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.paper-atmosphere::before {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E");
  content: "";
  opacity: 0.025;
  mix-blend-mode: multiply;
}

.paper-form {
  position: absolute;
  display: block;
  filter: blur(4.5rem);
  opacity: 0.13;
  will-change: transform;
}

.paper-form--one {
  top: -10rem;
  right: -13rem;
  width: 31rem;
  height: 25rem;
  border-radius: 43% 57% 68% 32% / 52% 39% 61% 48%;
  background: #afaaa3;
  transform: translate3d(var(--paper-x-one, 0), var(--paper-y-one, 0), 0) rotate(-8deg);
}

.paper-form--two {
  bottom: -14rem;
  left: -16rem;
  width: 38rem;
  height: 29rem;
  border-radius: 61% 39% 44% 56% / 35% 58% 42% 65%;
  background: #c7bdaa;
  transform: translate3d(var(--paper-x-two, 0), var(--paper-y-two, 0), 0) rotate(11deg);
}

html[data-theme="dark"] .paper-atmosphere::before {
  opacity: 0.018;
  mix-blend-mode: screen;
}

html[data-theme="dark"] .paper-form {
  opacity: 0.055;
}

html[data-theme="dark"] .paper-form--one { background: #817a70; }
html[data-theme="dark"] .paper-form--two { background: #817965; }

.page-shell {
  padding-block: clamp(2rem, 4vw, 3rem) clamp(3.5rem, 7vw, 5rem);
}

.page-header { margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }
.page-header h1 { font-weight: 650; }
.page-header p { line-height: 1.65; }
.hero__eyebrow { font-weight: 650; }
.hero h1, .home-intro h1 { font-weight: 650; }
.form-field label, fieldset legend { font-weight: 650; }
.action-card__link, .flashcard__pinyin { font-weight: 650; }
.site-footer__brand { font-weight: 650; }
.progress-stat dd { font-weight: 650; }

.site-header {
  border-color: var(--header-border);
  box-shadow: var(--v3-shadow-sm);
}

.learn-menu__popover,
.account-menu__popover {
  border-color: var(--border-soft);
  background: var(--surface-raised);
}

.account-menu__popover {
  box-shadow: var(--v3-shadow-raised);
}

.script-toggle,
.icon-button,
select,
input[type="search"] {
  border-color: var(--v3-color-control-border);
  background: var(--surface-raised);
}

.script-toggle__option[aria-pressed="true"] {
  color: var(--button-text);
  background: var(--jade-strong);
  box-shadow: none;
}

.button--quiet {
  border-color: var(--v3-color-control-border);
  background: var(--surface-raised);
}

.site-nav a:hover,
.site-nav a[aria-current="page"],
.learn-menu summary:hover,
.learn-menu summary[aria-current="page"],
.catalogue-state-filters .is-active {
  border-color: transparent;
  color: var(--primary-dark);
  background: var(--jade-soft);
}

.topic-link,
.choice-option,
.review-flip-card__face,
.review-scope-group {
  border-color: var(--border-soft);
  background: var(--surface-raised);
  box-shadow: var(--shadow);
}

.review-primary { border-left-color: var(--jade); }
.progress-table th,
.progress-table td,
.progress-section,
.progress-empty-state,
.site-footer,
.review-options,
.home-progress,
.home-review,
.progress-overview-card,
.progress-activity,
.progress-stat {
  border-color: var(--border-soft);
}

.empty-state { background: transparent; box-shadow: none; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  button:hover,
  .button:hover {
    transform: translateY(-1px);
  }

  .button--quiet:hover,
  .topic-link:hover {
    border-color: var(--v3-color-control-border);
  }
}

@media (prefers-reduced-motion: no-preference) {
  button,
  .button,
  .topic-link,
  .choice-option,
  .catalogue-state-filters .button,
  .script-toggle__option,
  .site-nav a,
  .learn-menu summary {
    transition: color var(--v3-duration-normal) var(--v3-easing-standard), background-color var(--v3-duration-normal) var(--v3-easing-standard), border-color var(--v3-duration-normal) var(--v3-easing-standard), box-shadow var(--v3-duration-normal) var(--v3-easing-standard), transform var(--v3-duration-normal) var(--v3-easing-standard);
  }

  .page-shell {
    animation: paper-settle 180ms ease-out both;
  }

  @keyframes paper-settle {
    from { opacity: 0; transform: translateY(3px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .paper-form { transform: none; will-change: auto; }
  .hero-visual__layer { transform: none !important; will-change: auto; }
  .page-shell { animation: none; }
}

@media (max-width: 52rem), (hover: none), (pointer: coarse) {
  .paper-form { will-change: auto; }
  .paper-form--one { right: -20rem; }
  .paper-form--two { left: -23rem; }
  .hero-visual__layer { will-change: auto; }
}

@media (max-width: 42rem) {
  .hero--landing {
    top: -1rem;
    min-height: clamp(31rem, calc(100svh - 10rem), 37rem);
    align-content: start;
    padding-top: clamp(2.5rem, 8vh, 4.5rem);
  }

  .hero--landing .hero__content { max-width: 24rem; }

  .hero-visual {
    right: 0;
    bottom: 0;
    width: min(31rem, 100%);
    opacity: 0.78;
  }

  .hero-visual__layer--far { opacity: 0.09; }
  .hero-visual__layer--middle { opacity: 0.16; }
  .hero-visual__layer--near { opacity: 0.25; }
}

/* Simplicity pass: essential actions first, supporting controls on demand. */
.disclosure {
  border-block: 1px solid var(--border-soft);
}

.disclosure > summary {
  display: flex;
  min-height: 4.5rem;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1rem;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.disclosure > summary::-webkit-details-marker { display: none; }

.disclosure > summary::after {
  flex: 0 0 auto;
  color: var(--primary-dark);
  content: "+";
  font-size: 1.35rem;
  font-weight: 400;
}

.disclosure[open] > summary::after { content: "−"; }

.disclosure > summary > span:first-child {
  display: grid;
  gap: 0.15rem;
}

.disclosure > summary strong {
  font-size: 1.1rem;
  font-weight: 650;
}

.disclosure__eyebrow {
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.disclosure__hint {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 0.86rem;
  font-weight: 400;
}

.disclosure__content { padding: 0.5rem 0 2rem; }
.disclosure--quiet { border-bottom: 0; }

.home-progress {
  opacity: 0.86;
}

.home-progress__heading h2 {
  font-size: 1.2rem;
}

.learning-path-grid .action-card:not(.action-card--current) {
  min-height: 10rem;
  box-shadow: none;
}

.learning-path-grid .action-card--current {
  grid-column: 1 / -1;
  min-height: 11rem;
  border-color: var(--jade);
  background: var(--jade-soft);
}

.learn-topics { margin-top: clamp(2.5rem, 7vw, 4.5rem); }
.learn-entry-grid { margin-bottom: clamp(2.5rem, 7vw, 4.5rem); }
.learn-entry-card { display: grid; align-content: space-between; gap: 1.25rem; }
.learn-entry-card h2 { margin-top: 0; }
.learn-entry-card .metadata { margin-bottom: 0; }
.learn-explore { margin-top: clamp(2.5rem, 7vw, 4.5rem); }
.learn-topics .topic-link-grid { margin-top: 0.25rem; }
.focus-disclosure { margin-top: 1rem; }

.focus-settings {
  margin-top: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.catalogue-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.catalogue-heading h2 { margin: 0; }
.catalogue-heading span { color: var(--text-muted); font-size: 0.88rem; }
.disclosure--tools { margin-bottom: 1.5rem; }
.disclosure--tools .filter-form { margin-bottom: 1rem; }
.disclosure--tools .catalogue-state-filters { margin-bottom: 0; }

.catalogue-secondary-actions {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-soft);
}

.review-options {
  padding-block: 0;
  border-bottom: 0;
}

.review-options > summary strong { font-size: 1rem; }
.review-options__intro { font-size: 0.92rem; }
.review-category-grid { gap: 0; }

.review-scope-group {
  padding: 1rem 0;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.review-scope-group:nth-child(odd) { padding-right: 1.5rem; }
.review-scope-group:nth-child(even) { padding-left: 1.5rem; }
.review-scope-group--wide { padding-inline: 0; }

.progress-detail { max-width: 58rem; margin-bottom: clamp(2rem, 6vw, 4rem); }
.progress-detail .progress-activity { margin: 0; padding: 0.5rem 0 1rem; border: 0; }
.progress-section { padding-block: 0; }
.progress-section .section-intro { margin-top: 0; color: var(--text-muted); }
.progress-library { margin-top: 1rem; border-bottom: 0; }
.progress-library > .disclosure__content { padding-top: 1rem; }

@media (max-width: 52rem) {
  .learning-path-grid .action-card--current { grid-column: auto; }
  .review-scope-group:nth-child(n) { padding-inline: 0; }
}

@media (max-width: 34rem) {
  .disclosure > summary {
    align-items: flex-start;
    gap: 0.75rem;
  }

  .disclosure__hint { display: none; }
  .catalogue-secondary-actions { justify-content: flex-start; }
  .learning-path-grid .action-card:not(.action-card--current) { min-height: 0; }
}

/* Learn: choose content first, then start one flashcard session. */
.learn-active-session {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.learn-active-session h2 { margin: 0; }
.learn-active-session p { margin: 0.4rem 0 0; color: var(--text-muted); }

.learn-search { margin-bottom: 2rem; }
.learn-search h2 { margin: 0; }
.learn-search p { margin: 0.35rem 0 0; color: var(--text-muted); }

.learn-search__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  margin-top: 1rem;
}

.learn-search__form .form-field { flex: 1 1 16rem; margin-bottom: 0; }
.learn-search__form button[type="submit"] { min-width: 8rem; }

.learn-search-results { margin-bottom: 2rem; }
.learn-search-results h2 { margin: 0 0 1rem; }

.learn-search-results__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.learn-search-result {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface-raised);
  padding: 0.9rem 1rem;
}

.learn-search-result__hanzi { margin: 0; font-size: 1.5rem; }
.learn-search-result p { margin: 0.3rem 0 0; }
.learn-search-result .flashcard__translation { color: var(--text-muted); }

.learn-search-result__memberships {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: 0.6rem;
}

.learn-source-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }

/* Topics span the full width so the two level selectors keep natural height. */
.learn-source-grid .learn-topics { grid-column: 1 / -1; margin-top: 0; }

.learn-source-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.learn-source-card h2 { margin: 0; }
.learn-source-card p { margin: 0.35rem 0 0; color: var(--text-muted); }
.learn-source-card .form-field { width: 100%; margin-bottom: 0; }
.learn-source-card select { width: 100%; }
.learn-source-card > button[type="submit"] { width: 100%; margin-top: auto; }

.learn-session-options { width: 100%; }
.learn-session-options .form-field { margin-bottom: 0.75rem; }
.learn-session-options .form-field:last-child { margin-bottom: 0; }

.session-start-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 2rem;
}

.session-start-form > button[type="submit"] { min-width: 12rem; }

.set-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.set-status h2 { margin: 0; font-size: 1.15rem; }
.set-status p { margin: 0.4rem 0 0; color: var(--text-muted); }
.set-status--mastered { border-color: var(--jade); background: var(--jade-soft); }

.source-detail { max-width: 42rem; padding-bottom: var(--space-4); }
.source-detail__header { margin-bottom: var(--space-4); }
.source-detail__header h1 { max-width: 100%; margin: var(--space-2) 0 0; line-height: 1.18; overflow-wrap: anywhere; }
.mobile-back-link { display: inline-flex; min-height: 2.75rem; align-items: center; gap: 0.4rem; margin-left: -0.4rem; padding: 0 0.4rem; border-radius: var(--radius-small); color: var(--text-muted); font-size: 0.9rem; font-weight: 650; text-decoration: none; }
.mobile-back-link:hover { color: var(--v3-color-link); text-decoration: none; }
.mobile-back-link:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; }
.source-detail__study { width: 100%; max-width: 28rem; }
.learn-source-row { display: flex; align-items: center; justify-content: space-between; max-width: 28rem; min-height: 3rem; margin-bottom: var(--space-4); color: var(--text); font-size: 1.05rem; font-weight: 700; text-decoration: none; }
.source-level-picker { position: relative; width: fit-content; margin-top: var(--space-3); }
.source-level-picker h1 { margin: 0; }
.source-level-picker label { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.source-level-picker select { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; opacity: 0; }
.source-launch { display: grid; max-width: 28rem; gap: var(--space-2); }
.session-size { display: flex; gap: 0.35rem; margin: 0; padding: 0; border: 0; }
.session-size legend { margin-bottom: 0.35rem; color: var(--text-muted); font-size: 0.78rem; font-weight: 650; }
.session-size label { flex: 1; cursor: pointer; }
.session-size input { position: absolute; opacity: 0; pointer-events: none; }
.session-size span { display: block; min-height: 2.5rem; align-content: center; padding: 0.4rem 0.7rem; border: 1px solid var(--border-soft); border-radius: 999px; color: var(--text-muted); text-align: center; font-weight: 700; }
.session-size input:checked + span { border-color: var(--jade); color: var(--v3-color-link); background: var(--primary-soft); }
.session-size input:focus-visible + span { outline: 2px solid var(--jade); outline-offset: 2px; }
.source-resume-form { width: fit-content; margin-top: var(--space-2); }
.source-resume { min-height: 2.75rem; padding: 0.5rem 0.85rem; border: 1px solid var(--jade); border-radius: var(--v3-radius-button); color: var(--v3-color-link); background: var(--surface-raised); font-size: 0.9rem; font-weight: 700; box-shadow: none; }
.source-resume:hover { color: var(--v3-color-link); background: var(--primary-soft); border-color: var(--jade); box-shadow: none; transform: none; }
.source-practice-empty { margin: var(--space-3) 0 0; color: var(--text-muted); }
.source-card-list { margin-top: var(--space-4); }
.source-card-list h2 { margin-bottom: var(--space-3); font-size: 1.15rem; }
.source-card-list ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border-soft); }
.source-card-list li { display: grid; grid-template-columns: minmax(4rem, auto) minmax(5rem, auto) 1fr; align-items: baseline; gap: var(--space-3); padding: 0.8rem 0; border-bottom: 1px solid var(--border-soft); }
.source-card-list strong { font-size: 1.5rem; }
.source-card-list span { color: var(--text-muted); }

@media (max-width: 34rem) {
  .source-card-list li { grid-template-columns: minmax(4rem, auto) 1fr; gap: 0.15rem var(--space-3); }
  .source-card-list li span:last-child { grid-column: 2; }
}

@media (max-width: 52rem) {
  .learn-source-grid { grid-template-columns: 1fr; }
  .learn-search-results__list { grid-template-columns: 1fr; }
  .learn-search__form button[type="submit"] { width: 100%; }
}

/* Mobile UX V2: canonical touch-first shell and compact surfaces. */

.mobile-nav { display: none; }

@media (max-width: 52rem) {
  html { scroll-padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); }

  body {
    min-height: 100dvh;
    padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
  }

  .site-header {
    padding-top: env(safe-area-inset-top);
  }

  .site-header__inner {
    width: min(100% - 1.25rem, var(--content-width));
    min-height: 3rem;
    flex-wrap: nowrap;
    gap: var(--space-2);
    padding-block: 0.2rem;
  }

  .brand__wordmark { font-size: 1.05rem; color: var(--v3-color-header-text); }
  .account-avatar { font-size: 0.95rem; }
  .site-nav { display: none; }
  .header-actions { gap: var(--space-2); }
  .script-toggle { width: auto; order: initial; }
  .script-toggle__option { min-height: 2.75rem; padding-inline: 0.65rem; font-size: 0.78rem; }
  .icon-button, .account-menu__trigger { width: 2.75rem; min-height: 2.75rem; }

  .mobile-nav {
    position: fixed;
    z-index: 40;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
    padding: 0.3rem 0.25rem env(safe-area-inset-bottom);
    border-top: 1px solid var(--header-border);
    background: var(--surface);
    box-shadow: var(--v3-shadow-card);
    backdrop-filter: blur(1rem);
  }

  .mobile-nav a {
    display: flex;
    min-width: 0;
    min-height: 3.4rem;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.12rem;
    border-radius: var(--radius-small);
    color: var(--text-muted);
    font-size: 0.67rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
  }

  .mobile-nav svg {
    width: 1.35rem;
    height: 1.35rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mobile-nav a[aria-current="page"] {
    color: var(--v3-color-link);
    background: var(--primary-soft);
  }

  .page-shell {
    width: min(100% - 1.25rem, var(--content-width));
    min-height: calc(100dvh - 8rem);
    margin-block: var(--space-3);
    padding-block: var(--space-5) var(--space-6);
    padding-inline: var(--space-4);
    border-radius: 1rem;
  }

  .site-footer { display: none; }
  .page-header { margin-bottom: var(--space-5); }
  .page-header h1 { margin-bottom: var(--space-2); font-size: clamp(1.85rem, 8vw, 2.4rem); }
  .page-header p { font-size: 0.95rem; line-height: 1.5; }
  .hero__eyebrow { margin-bottom: var(--space-1); font-size: 0.75rem; }

  .panel, .flashcard, .quiz-card, .result-card, .action-card {
    border-radius: var(--radius-card);
  }

  .panel { padding: var(--space-4); }
  button, .button, select, input[type="search"] { min-height: 2.75rem; }
  input[type="search"] { font-size: 1rem; }

  .home-intro { margin-bottom: var(--space-4); }
  .home-intro h1 { margin-bottom: var(--space-1); font-size: 2rem; }
  .home-intro > p { display: none; }
  .home-progress { margin: 0 0 var(--space-3); padding: var(--space-4); }
  .home-progress__heading { flex-direction: row; align-items: center; }
  .home-progress__heading h2 { font-size: 1.1rem; }
  .home-progress p { font-size: 0.8rem; }
  .home-focus-grid { display: flex; gap: var(--space-3); flex-direction: column; }
  .home-primary-action, .home-review { gap: var(--space-4); padding: var(--space-4); }
  .home-primary-action h2, .home-review h2 { font-size: 1.25rem; }
  .home-primary-action .button, .home-review .button { width: 100%; }

  .learn-active-session { margin-bottom: var(--space-4); }
  .learn-active-session .button-row, .learn-active-session .button-row > * { width: 100%; }
  .learn-source-grid { gap: var(--space-3); }
  .learn-source-card { gap: var(--space-3); padding: var(--space-4); }
  .learn-source-card p { font-size: 0.88rem; }
  .learn-topics .topic-link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .topic-link { min-height: 2.75rem; align-content: center; padding: var(--space-3); }
  .form-help { font-size: 0.8rem; }

  .review-primary { min-height: 0; padding: var(--space-5); }
  .review-primary h2 { font-size: 1.65rem; }
  .review-primary .button { width: 100%; }
  .review-primary--empty { padding: var(--space-4) 0; border: 0; background: transparent; box-shadow: none; }

  .review-session-header { margin-bottom: var(--space-3); text-align: left; }
  .review-session-header h1 { margin-top: var(--space-2); font-size: 1.25rem; }
  .review-session-header p { font-size: 0.82rem; }
  .review-layout { gap: var(--space-3); }
  .review-flip-card, .review-flip-card__inner, .review-flip-card__face { min-height: min(23rem, 51dvh); }
  .review-flip-card__face { padding: var(--space-5); }
  .review-flip-card__front, .review-flip-card__back { gap: var(--space-4); }
  .review-flip-card__hanzi { max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
  .review-flip-card__back .flashcard__translation { font-size: 1.15rem; }
  .review-rating-controls { padding-bottom: var(--space-2); }
  .rating-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-2); }
  .rating-grid button { min-height: 3.5rem; }

  .progress-overview-card { margin-bottom: var(--space-3); padding: var(--space-4); }
  .progress-overview-card__heading { flex-direction: row; align-items: center; }
  .progress-overview-card__heading h2 { font-size: 1.15rem; }
  .progress-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .progress-stat { min-height: 4.75rem; padding: var(--space-3); }
  .progress-stat dd { font-size: 1.5rem; }
  .progress-definition { font-size: 0.78rem; }
  .progress-detail { margin-bottom: var(--space-4); }
  .progress-activity { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }

  .table-scroll:has(.progress-table--curriculum) { overflow: visible; }
  .progress-table--curriculum thead { display: none; }
  .progress-table--curriculum, .progress-table--curriculum tbody { display: block; width: 100%; }
  .progress-table--curriculum tr {
    display: block;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--border-soft);
  }
  .progress-table--curriculum th[scope="row"] {
    display: block;
    padding: 0;
    border: 0;
    font-size: 0.98rem;
  }
  .progress-table--curriculum td { display: none; }
  .progress-row__summary { display: block; margin-top: 0.15rem; color: var(--text-muted); font-size: 0.85rem; font-weight: 400; }
  .progress-row__summary b { color: var(--text); font-weight: 650; }

  .my-cards-toolbar { padding: 0; border: 0; background: transparent; box-shadow: none; }
  .my-cards-toolbar .button { width: 100%; }
  .my-cards-list { gap: var(--space-2); }
  .my-card { display: grid; grid-template-columns: auto 1fr auto; column-gap: var(--space-3); min-height: 0; padding: var(--space-3); }
  .my-card .flashcard__character { grid-row: 1 / span 3; margin: 0; font-size: 2rem; }
  .my-card .flashcard__pinyin, .my-card .flashcard__translation { margin: 0; }
  .my-card .flashcard__translation { color: var(--text-muted); font-size: 0.9rem; }
  .my-card > .metadata, .my-card > .card-provenance { grid-column: 2; }
  .my-card .flashcard__actions { grid-column: 3; grid-row: 1 / span 3; align-self: center; margin: 0; }
  .my-card .button { min-width: 2.75rem; padding-inline: var(--space-2); }

  .empty-state { padding: var(--space-5) var(--space-3); }
  .empty-state .button-row, .empty-state__actions { align-items: stretch; flex-direction: column; }
  .empty-state .button { width: 100%; }
}

@media (max-width: 24rem) {
  .script-toggle__option { padding-inline: 0.45rem; font-size: 0.7rem; }
  .mobile-nav a { font-size: 0.61rem; }
  .progress-activity { grid-template-columns: 1fr; }
}

@media (orientation: landscape) and (max-height: 30rem) and (max-width: 52rem) {
  .review-flip-card, .review-flip-card__inner, .review-flip-card__face { min-height: 17rem; }
}

/* V2 product primitives shared across desktop and mobile. */
.cards-hub-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.cards-hub-header h1 { margin: 0; }
.segmented-control {
  display: inline-grid;
  grid-template-columns: repeat(2, 1fr);
  padding: 0.2rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--surface-muted);
}
.segmented-control a {
  min-height: 2.75rem;
  align-content: center;
  padding-inline: 1rem;
  border-radius: 0.55rem;
  color: var(--text-muted);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.segmented-control a[aria-current="page"] { color: var(--text); background: var(--surface); box-shadow: 0 1px 4px rgb(33 31 29 / 10%); }
.cards-subheader h2 { margin-bottom: 0.25rem; font-size: 1.35rem; }
.home-review--primary { color: var(--v3-color-action-primary-text); background: var(--v3-color-action-primary); border-color: var(--v3-color-action-primary); }
.home-review--primary .hero__eyebrow, .home-review--primary .home-status { color: var(--v3-color-action-primary-muted); }
.home-review--primary .button { color: var(--v3-color-link); background: var(--surface); border-color: var(--surface); }
.account-header p { color: var(--text-muted); }
.account-settings { display: grid; grid-template-columns: minmax(12rem, 0.7fr) minmax(18rem, 1.3fr); gap: 2rem; }
.account-settings h2 { margin-top: 0; }
.account-settings p { color: var(--text-muted); }
.account-choice-section { display: grid; max-width: 42rem; gap: 0.75rem; margin-bottom: 1rem; }
.account-choice-section h2 { margin: 0; font-size: 1.1rem; }
.choice-list { display: grid; gap: 0.5rem; }
.choice-row { justify-content: space-between; width: 100%; padding: 0.85rem 1rem; color: var(--text); background: var(--surface); border-color: var(--v3-color-control-border); text-align: left; }
.choice-row[aria-pressed="true"] { border-color: var(--jade); background: var(--primary-soft); }
.choice-row:hover { color: var(--v3-color-text); background: var(--v3-color-action-secondary-hover); border-color: var(--v3-color-focus); }
.choice-row[aria-pressed="false"] [data-theme-check] { visibility: hidden; }
.choice-row span:first-child { display: grid; }
.choice-row small { color: var(--text-muted); font-weight: 500; }
.account-signout { margin-top: 1rem; }
.account-learning { max-width: 42rem; margin-top: 1rem; }
.account-learning h2 { margin-top: 0; font-size: 1.15rem; }
.account-setting-row {
  display: flex;
  min-height: 3.25rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--border-soft);
  cursor: pointer;
  font-weight: 700;
}
.account-setting-control { position: relative; display: flex; align-items: center; gap: 0.4rem; color: var(--text-muted); }
.account-setting-control select { max-width: 12rem; min-height: 2.75rem; border: 0; color: inherit; background: transparent; text-align: right; cursor: pointer; }
.script-onboarding {
  max-width: 38rem;
  margin: clamp(2rem, 10vh, 7rem) auto;
  padding: clamp(1.5rem, 5vw, 2.5rem);
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.script-onboarding h1 { margin: 0 0 1.5rem; font-size: clamp(1.65rem, 5vw, 2.25rem); line-height: 1.15; }
.script-onboarding__choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.script-onboarding__choice { display: grid; min-height: 7.5rem; align-content: center; gap: 0.35rem; color: var(--text); background: var(--surface-raised); border-color: var(--border); }
.script-onboarding__choice:hover { color: var(--text); background: var(--primary-soft); border-color: var(--jade); }
.script-onboarding__choice span { color: var(--text-muted); font-size: 1.25rem; font-weight: 500; }

@media (max-width: 52rem) {
  .site-header { padding-top: max(env(safe-area-inset-top), 0px); }
  .header-actions { margin-left: auto; }
  .cards-hub-header { display: block; }
  .cards-hub-header h1 { margin-bottom: 1rem; }
  .segmented-control { width: 100%; }
  .account-settings { grid-template-columns: 1fr; gap: 1rem; }
  .learn-source-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .learn-source-grid .learn-topics { grid-column: 1 / -1; }
  .learn-source-card { min-width: 0; }
  .learn-source-card button { width: 100%; padding-inline: 0.5rem; }
}

@media (max-width: 24rem) {
  .learn-source-grid { grid-template-columns: 1fr; }
  .learn-source-grid .learn-topics { grid-column: auto; }
}

@media (max-width: 34rem) {
  .script-onboarding__choices { grid-template-columns: 1fr; }
  .script-onboarding__choice { min-height: 5.75rem; }
}

/* One continuous cold-start identity: the web overlay reuses the exact
   native LaunchScreen raster, so there is no native/web tile handoff. */
.native-opening {
  position: fixed;
  z-index: 1000;
  inset: 0;
  overflow: hidden;
  padding: 0;
  background: #116149;
  perspective: 60rem;
  opacity: 1;
}

.native-opening--ready { animation: native-opening-fade 500ms ease-out both; }

.native-opening__tile {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 50% 50%;
}

.native-opening--ready .native-opening__tile {
  animation: native-opening-settle 420ms cubic-bezier(0.22, 0.72, 0.2, 1) both;
}

@keyframes native-opening-fade {
  0%, 70% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes native-opening-settle {
  0% { transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg) scale(1); }
  100% { transform: rotateZ(4deg) rotateX(2.2deg) rotateY(-2.2deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .native-opening {
    animation-duration: 1ms;
  }

  .native-opening__tile {
    animation: none;
    transform: none;
  }

  .native-opening--ready .native-opening__tile {
    animation: none;
    transform: none;
  }
}

@media (max-width: 52rem) {
  body.session-mode {
    width: 100%;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: none;
  }

  html:has(body.session-mode) {
    width: 100%;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.session-mode { padding: 0; }

  body.session-mode .page-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: 100%;
    height: 100dvh;
    min-height: 0;
    margin: 0;
    padding: max(env(safe-area-inset-top), 0.5rem) 0.75rem max(env(safe-area-inset-bottom), 0.5rem);
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
  }

  body.session-mode .review-session-header {
    margin: 0;
  }

  .review-session-header__bar {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .review-session-header__bar .text-link {
    display: inline-flex;
    width: auto;
    min-height: 2.75rem;
    align-items: center;
    gap: 0.35rem;
    padding-inline: 0.4rem;
    font-size: 0.9rem;
    text-decoration: none;
  }

  .review-session-header__progress {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
  }

  .review-session-header__status { gap: var(--space-2); }

  body.session-mode .review-layout {
    width: 100%;
    height: 100%;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 0.5rem;
    overflow: hidden;
  }

  body.session-mode .review-flip-card,
  body.session-mode .review-flip-card__inner,
  body.session-mode .review-flip-card__face {
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  body.session-mode .review-flip-card__face {
    padding: clamp(0.75rem, 3vh, 1.5rem);
    overflow: auto;
    overscroll-behavior: contain;
  }

  body.session-mode .review-flip-card__front,
  body.session-mode .review-flip-card__back {
    gap: clamp(0.35rem, 1.5vh, 0.8rem);
  }

  body.session-mode .review-flip-card__hanzi {
    font-size: clamp(3rem, min(22vw, 13vh), 7rem);
    line-height: 0.95;
  }

  body.session-mode .review-hanzi--3,
  body.session-mode .review-hanzi--4-plus {
    font-size: clamp(2.25rem, min(15vw, 10vh), 5rem);
  }

  body.session-mode .review-flip-card__back .flashcard__pinyin {
    margin: 0;
    font-size: clamp(0.95rem, 2.5vh, 1.2rem);
    overflow-wrap: anywhere;
  }

  body.session-mode .review-flip-card__back .flashcard__translation {
    margin: 0;
    font-size: clamp(0.9rem, 2.35vh, 1.15rem);
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  body.session-mode .review-flip-card__save .button {
    min-height: 2.75rem;
    padding: 0.35rem 0.65rem;
  }

  body.session-mode .review-rating-controls { padding: 0; }
  body.session-mode .rating-grid { margin: 0; gap: 0.4rem; }
  body.session-mode .rating-grid button { min-height: 3rem; padding: 0.45rem 0.35rem; }
  body.session-mode .rating-grid button span { font-size: 0.7rem; }
  body.session-mode .submit-status { min-height: 0; margin: 0; }
  body.session-mode .review-layout--complete { min-height: 0; grid-template-rows: minmax(0, 1fr); }
  body.session-mode .review-complete { padding: var(--space-5) var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
  .native-opening--ready { animation-duration: 1ms; }
  .native-opening--ready .native-opening__tile { animation: none; transform: none; }
}

.translation-sheet {
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: grid;
  align-items: end;
  overscroll-behavior: contain;
}

.translation-sheet[hidden] { display: none; }

.translation-sheet__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: var(--v3-color-backdrop);
}

.translation-sheet__panel {
  position: relative;
  max-height: min(78dvh, 34rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem 1.25rem max(1rem, env(safe-area-inset-bottom));
  border-radius: 1.25rem 1.25rem 0 0;
  background: var(--surface);
  box-shadow: var(--v3-shadow-raised);
}

.translation-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.translation-sheet__header h2 {
  margin: 0;
  font-size: 1.05rem;
}

.translation-sheet__body {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* Mobile V2 polish: one clear action per surface, less card-inside-card. */
.progress-row__summary { display: none; }

/* Progress V2: compact overview with detailed data disclosed inline. */
.progress-page,
.progress-page > *,
.progress-more-data__content,
.progress-more-data__content > * {
  min-width: 0;
  max-width: 100%;
}

.progress-activity-section {
  max-width: 58rem;
  padding-block: clamp(1.5rem, 5vw, 3rem);
}

.progress-activity-section h2 {
  margin-top: 0;
  font-size: 1.25rem;
}

.progress-activity-section .progress-activity {
  margin: 0;
}

.progress-more-data {
  max-width: 58rem;
  border-bottom: 0;
}

.progress-more-data__content {
  padding-top: 0;
}

.progress-more-data .progress-section {
  border-top: 0;
  border-bottom: 1px solid var(--border-soft);
}

.progress-data-list {
  border-top: 1px solid var(--border-soft);
}

.progress-data-row {
  min-width: 0;
  border-bottom: 1px solid var(--border-soft);
}

.progress-data-row > summary {
  display: flex;
  min-width: 0;
  min-height: 3.25rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0;
  cursor: pointer;
  list-style: none;
}

.progress-data-row > summary::-webkit-details-marker { display: none; }
.progress-data-row > summary::after { flex: 0 0 auto; color: var(--primary-dark); content: "+"; font-size: 1.2rem; }
.progress-data-row[open] > summary::after { content: "−"; }
.progress-data-row > summary span { min-width: 0; overflow-wrap: anywhere; font-weight: 650; }

.progress-data-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0.25rem 0 1rem;
}

.progress-data-grid > div { min-width: 0; }
.progress-data-grid dt { color: var(--text-muted); font-size: 0.78rem; overflow-wrap: anywhere; }
.progress-data-grid dd { margin: 0.15rem 0 0; font-weight: 650; overflow-wrap: anywhere; }

@media (max-width: 34rem) {
  .progress-data-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.home-screen {
  width: 100%;
  max-width: 42rem;
  margin-inline: auto;
}

.page-shell:has(.home-screen) {
  padding-bottom: 2.5rem;
  background: transparent;
  box-shadow: none;
}

.home-welcome {
  position: relative;
  display: grid;
  min-height: 6.8rem;
  align-content: center;
  margin-bottom: 0;
  overflow: hidden;
  padding: 1.25rem 1.5rem 1.35rem;
  border: 1px solid rgb(215 195 158 / 24%);
  border-radius: 1.35rem;
  background: #2e2c28;
  box-shadow: 0 0.55rem 1.4rem rgb(43 41 37 / 10%);
  color: var(--v3-color-ivory);
}

.home-welcome h1 {
  max-width: 26rem;
  margin: 0;
  color: inherit;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.home-welcome h1 > span { display: block; color: #e5dac4; font-size: clamp(0.95rem, 3.5vw, 1.05rem); }
.home-welcome h1 > span:only-child { color: inherit; font-size: clamp(1.65rem, 6vw, 2.05rem); font-weight: 620; }
.home-welcome h1 strong { display: block; margin-top: 0.08em; font-size: clamp(1.95rem, 7vw, 2.55rem); font-weight: 640; letter-spacing: -0.05em; }

.home-review-feature { margin-top: var(--space-3); padding-inline: 0.35rem; }

.home-primary-card {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 8.5rem;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem var(--space-4);
  overflow: visible;
  padding: 1.15rem 1.2rem;
  border: 1px solid rgb(184 142 77 / 24%);
  border-radius: 1.35rem;
  color: var(--text);
  background: #fffcf5;
  box-shadow: 0 0.55rem 1.35rem rgb(73 52 22 / 8%);
  text-decoration: none;
}

.home-primary-card__art {
  display: grid;
  width: 4.25rem;
  height: 4.25rem;
  grid-row: 1 / span 2;
  place-items: center;
  padding: 0;
  border: 1px solid rgb(215 195 158 / 28%);
  border-radius: 1rem;
  color: #d7c39e;
  background: #2e2c28;
  box-shadow: none;
}

.home-primary-card__art svg { width: 3.45rem; overflow: visible; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.45; }
.home-primary-card__art rect:not(.home-primary-card__art-top) { opacity: 0.34; }
.home-primary-card__art-top { fill: rgb(255 253 247 / 6%); }
.home-primary-card__art text { fill: currentColor; stroke: none; font-family: var(--v3-font-family-hanzi); font-size: 1.65rem; font-weight: 520; }
.home-primary-card__copy { display: grid; min-width: 0; align-self: end; gap: 0.2rem; }

.home-primary-card__kicker {
  color: #8a652f;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.home-primary-card__title {
  margin-top: 0.1rem;
  color: var(--text);
  font-size: clamp(1.45rem, 5vw, 1.8rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.home-primary-card:not(.home-primary-card--goal-complete) .home-primary-card__title {
  font-size: clamp(1.9rem, 8vw, 2.3rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.home-primary-card__meta {
  color: var(--text-muted);
  font-size: var(--v3-font-size-sm);
}

.home-review-split {
  position: relative;
  display: inline-flex;
  width: fit-content;
  min-height: 2.75rem;
  grid-column: 2;
  align-items: stretch;
  justify-self: start;
  align-self: start;
  overflow: visible;
  margin-top: 0.35rem;
  border: 1px solid #2e2c28;
  border-radius: 0.75rem;
  color: #fffaf0;
  background: #2e2c28;
  box-shadow: 0 0.3rem 0.7rem rgb(46 44 40 / 14%);
}

.home-primary-card__play {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  border-radius: 0.65rem 0 0 0.65rem;
  color: inherit;
  text-decoration: none;
}

.home-review-split > .home-primary-card__play:only-child { border-radius: 0.65rem; }

.home-primary-card__play svg {
  width: 0.85rem;
  height: 0.85rem;
  fill: currentColor;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1;
}

.home-primary-card__play > span { font-size: 0.8rem; font-weight: 650; letter-spacing: 0.01em; }

.home-primary-card--goal-complete { row-gap: 0.45rem; }

.home-review-size-menu {
  position: relative;
  display: flex;
  color: inherit;
  font-size: var(--v3-font-size-xs);
}

.home-review-size-menu__toggle {
  display: grid;
  min-width: 2.75rem;
  min-height: 2.75rem;
  place-items: center;
  padding: 0;
  border: 0;
  border-left: 1px solid rgb(255 250 240 / 24%);
  border-radius: 0 0.65rem 0.65rem 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  transition: none;
}

.home-review-size-menu__options a,
.home-review-size-menu__options button {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.65rem;
  color: var(--text-muted);
  background: var(--surface-raised);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
}

.home-review-size-menu__toggle svg { width: 0.8rem; height: 0.8rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.home-review-size-menu__toggle:hover { background: transparent; }
.home-review-size-menu__toggle[aria-expanded="true"] { background: rgb(255 250 240 / 12%); }
.home-review-size-menu__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.home-review-size-menu__options {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: calc(100% + 0.4rem);
  display: flex;
  gap: 0.3rem;
  padding: 0.3rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.8rem;
  background: var(--surface-raised);
  box-shadow: 0 0.3rem 0.85rem rgb(33 31 29 / 12%);
}

.home-review-size-menu__options[hidden] { display: none; }
.home-review-size-menu__options a,
.home-review-size-menu__options button { min-width: 3.1rem; padding-inline: 0.55rem; white-space: nowrap; }

.home-review-restart {
  width: min(calc(100% - 2rem), 25rem);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--v3-radius-xl);
  color: var(--text);
  background: var(--surface-raised);
  box-shadow: var(--v3-shadow-raised);
}

.home-review-restart::backdrop { background: var(--v3-color-backdrop); }
.home-review-restart h2 { margin: 0 0 var(--space-2); font-size: 1.35rem; }
.home-review-restart p { margin: 0; color: var(--text-muted); line-height: 1.5; }
.home-review-restart__actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-4); }

.home-resume-link {
  display: flex;
  min-height: 3rem;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0.2rem 0;
  padding: var(--space-3);
  border: 0;
  border-radius: 0.85rem;
  color: var(--text);
  background: color-mix(in srgb, var(--surface-raised) 72%, transparent);
  text-decoration: none;
}

.home-resume-link > span:first-child { display: grid; min-width: 0; margin-right: auto; }
.home-resume-link small { color: var(--text-muted); }
.home-resume-link strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-resume-link > span:nth-child(2) { color: var(--text-muted); font-size: var(--v3-font-size-sm); }
.home-resume-link svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; }

.home-section { margin-top: 2rem; }

.home-section__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: 0.65rem;
  padding-bottom: 0;
  border: 0;
}

.home-section__heading h2 { margin: 0; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.025em; }
.home-section__heading a { font-size: var(--v3-font-size-sm); font-weight: var(--v3-font-weight-action); text-decoration: none; }

.home-progress-card {
  display: flex;
  min-width: 0;
  min-height: 5.5rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 1rem 1.2rem;
  border: 1px solid rgb(184 142 77 / 20%);
  border-radius: 1.15rem;
  color: var(--text);
  background: #fffcf5;
  box-shadow: 0 0.35rem 1rem rgb(73 52 22 / 6%);
  text-decoration: none;
}

.home-progress-card__copy { display: grid; min-width: 0; gap: 0.15rem; }
.home-progress-card__copy small { color: #8a652f; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.13em; line-height: 1.1; text-transform: uppercase; }
.home-progress-card__copy strong { margin-top: 0.1rem; font-size: 1.2rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.home-progress-card__copy span { color: var(--text-muted); font-size: var(--v3-font-size-sm); line-height: 1.2; }
.home-progress-card__arrow { color: var(--v3-color-accent); font-size: 1.6rem; }

.home-progress-ring { position: relative; display: grid; width: 3.5rem; height: 3.5rem; flex: 0 0 auto; place-items: center; }
.home-progress-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.home-progress-ring circle { fill: none; stroke-width: 2.4; }
.home-progress-ring__track { stroke: var(--surface-muted); }
.home-progress-ring__value { stroke: #cdb98f; stroke-linecap: round; }
.home-progress-ring strong { font-size: 0.76rem; font-weight: 600; }

.home-stats {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-3);
  overflow: hidden;
  border: 0;
  border-radius: 1.1rem;
  background: color-mix(in srgb, var(--surface-muted) 72%, transparent);
  box-shadow: none;
}

.home-stat-card {
  display: grid;
  min-width: 0;
  min-height: 5.5rem;
  align-content: center;
  justify-items: start;
  padding: 0.8rem 0.75rem;
  border: 0;
  background: transparent;
  text-align: left;
}

.home-stat-card + .home-stat-card { border-left: 0; }

.home-stat-card svg {
  width: 1.15rem;
  height: 1.15rem;
  margin-bottom: 0.45rem;
  color: #b88e4d;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.home-stat-card--streak svg,
.home-stat-card--today svg,
.home-stat-card--mastered svg { color: #b88e4d; }
.home-stat-card__progress { transform: rotate(-90deg); }
.home-stat-card__progress circle { fill: none; }
.home-stat-card__progress-track { opacity: 0.24; }
.home-stat-card__progress-value { stroke-linecap: round; }
.home-stat-card strong { overflow-wrap: anywhere; font-size: 1.55rem; font-weight: 620; letter-spacing: -0.035em; line-height: 1; }
.home-stat-card span { margin-top: 0.25rem; color: var(--text-muted); font-size: 0.69rem; line-height: 1.2; }

.home-recent { margin-top: 1.75rem; }
.home-recent__list { display: grid; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem; }
.home-word-card { container-type: inline-size; min-width: 0; padding: 1rem 0.4rem 1.05rem; border: 1px solid rgb(184 142 77 / 14%); border-radius: 1rem; background: #fffcf5; box-shadow: 0 0.25rem 0.7rem rgb(73 52 22 / 5%); text-align: center; }
/* Long words shrink to the card's width (~0.96em per glyph); short words keep the base size and every card keeps the base line height. */
.home-word-card strong { display: block; overflow: hidden; font-family: var(--v3-font-family-hanzi); --hanzi-size: clamp(2.15rem, 8vw, 2.75rem); font-size: min(var(--hanzi-size), 100cqi / (var(--hanzi-chars, 1) * 0.98)); font-weight: 450; letter-spacing: -0.04em; line-height: calc(var(--hanzi-size) * 1.1); text-overflow: ellipsis; white-space: nowrap; }
.home-word-card span { display: block; overflow: hidden; margin-top: 0.45rem; color: var(--text-muted); font-size: 0.76rem; letter-spacing: 0.02em; line-height: 1.2; overflow-wrap: break-word; text-wrap: balance; }
.home-recent__empty { margin: 0; padding: var(--space-4); border: 0; border-radius: 1rem; color: var(--text-muted); background: color-mix(in srgb, var(--surface-muted) 72%, transparent); font-size: var(--v3-font-size-sm); }

.review-start-form { display: grid; max-width: 22rem; gap: var(--space-3); }
.review-start-form .button { justify-self: start; }

.review-session-header__status {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: 0;
}

.review-session-header__status > span { color: var(--text-muted); font-size: var(--v3-font-size-xs); }
.review-layout--complete { min-height: min(32rem, 70vh); align-items: center; }
.review-complete { width: min(100%, 28rem); margin-inline: auto; text-align: center; }
.review-complete__mark { display: grid; width: 3rem; height: 3rem; margin: 0 auto var(--space-3); place-items: center; border: 1px solid #cdb98f; border-radius: 50%; color: #302d29; background: #e2cfaa; font-size: 1.35rem; font-weight: 800; }
.review-complete h2 { margin-bottom: var(--space-2); }
.review-complete p { margin-block: var(--space-2); color: var(--text-muted); }
.review-complete__due { font-size: var(--v3-font-size-sm); }
.review-complete__next { max-width: 22rem; margin-inline: auto; }
.review-complete__sizes { display: grid; gap: var(--space-2); margin: var(--space-4) auto; }
.review-complete__sizes > span { color: var(--text-muted); font-size: var(--v3-font-size-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.review-size-links { display: flex; justify-content: center; gap: var(--space-2); }
.review-size-links a { display: grid; min-width: 3.25rem; min-height: 2.5rem; place-items: center; border: 1px solid var(--border-soft); border-radius: var(--v3-radius-pill); color: var(--text); background: var(--surface-muted); font-weight: 750; text-decoration: none; }
.review-size-links a:hover { border-color: var(--jade); color: var(--v3-color-link); }

@media (hover: hover) {
  .home-progress-card:hover { color: var(--text); border-color: #b88e4d; }
  .home-primary-card__play:hover { color: #fffaf0; background: #3d3a35; }
  .home-resume-link:hover { color: var(--v3-color-link); background: var(--surface-muted); }
  .home-review-size-menu__toggle:hover { color: inherit; background: transparent; }
  .home-review-size-menu__options a:hover,
  .home-review-size-menu__options button:hover { color: var(--text); border-color: #cdb98f; }
}

/* Home atmosphere: abstract sunrise (light) / moonlight (dark), gradients only. */
html[data-theme="light"] body:has(.home-screen) {
  background:
    radial-gradient(circle at 84% 13rem, rgb(255 238 200 / 78%) 0, rgb(240 207 146 / 40%) 7rem, rgb(240 207 146 / 0) 21rem),
    radial-gradient(ellipse 150% 15rem at 50% 25rem, rgb(236 203 148 / 30%), rgb(236 203 148 / 0) 70%),
    linear-gradient(180deg, #f2e9d6 0, #f6ecda 15rem, #f6e6c9 25rem, #f7f0e2 33rem, #f7f3ea 44rem) #f7f3ea;
}
html[data-theme="light"] .home-primary-card,
html[data-theme="light"] .home-progress-card,
html[data-theme="light"] .home-word-card { background: #fffcf5; }
html[data-theme="light"] .home-stats { background: #eee6d7; }

html[data-theme="light"] body:has(.home-screen) .mobile-nav {
  background: #f7f3ea;
  box-shadow: none;
  backdrop-filter: none;
}

html[data-theme="light"] body:has(.home-screen) .site-header {
  border-color: rgb(184 142 77 / 14%);
  background: rgb(242 233 214 / 78%);
  box-shadow: none;
}

body:has(.home-screen) .mobile-nav a { border-radius: 0.8rem; }
body:has(.home-screen) .mobile-nav a[aria-current="page"] {
  color: #2e2c28;
  background: #eadfc9;
  box-shadow: none;
}

html[data-theme="light"] body.session-mode { background: #f7f3ea; }
html[data-theme="light"] body.session-mode .review-flip-card__face,
html[data-theme="light"] body.session-mode .review-complete { border-color: rgb(184 142 77 / 38%); background: #fffcf5; box-shadow: 0 1rem 2.6rem rgb(87 61 24 / 12%), inset 0 1px 0 rgb(255 255 255 / 90%); }
html[data-theme="light"] body.session-mode .review-flip-card__back { background: #fff9ed; }

/* Moonlight: one diffuse moon top right over a night-blue to deep-emerald sky. */
html[data-theme="dark"] body:has(.home-screen) {
  --moon-x: calc(50% + 19rem); /* anchored to the column's upper right corner */
  --moon-y: 7rem;
  --horizon-y: 25rem;
  background:
    radial-gradient(circle at var(--moon-x) var(--moon-y), rgb(236 242 248 / 86%) 0, rgb(214 228 242 / 66%) 1.1rem, rgb(207 204 199 / 32%) 2.6rem, rgb(167 161 153 / 15%) 5rem, rgb(137 130 119 / 7%) 11rem, rgb(137 130 119 / 0) 22rem),
    linear-gradient(180deg, #100f0e 0, #161513 calc(var(--horizon-y) - 9rem), #1c1b19 var(--horizon-y), #151413 calc(var(--horizon-y) + 10rem), #0b0a09 calc(var(--horizon-y) + 26rem)) #0b0a09;
}

html[data-theme="dark"] body:has(.home-screen) .site-header {
  border-color: rgb(213 210 206 / 10%);
  background: rgb(16 15 14 / 55%);
  backdrop-filter: blur(1.2rem);
}

/* Welcome stays opaque under its text and thins toward the moon so the light shows through. */
html[data-theme="dark"] .home-welcome {
  border-color: rgb(221 219 215 / 18%);
  background: linear-gradient(240deg, rgb(46 44 40 / 6%) 0, rgb(46 44 40 / 46%) 30%, rgb(46 44 40 / 88%) 52%, #2e2c28 74%);
}

@media (max-width: 52rem) {
  /* Mobile: the sky glow follows the welcome card below the iPhone safe-area header and haloes its moon disc. */
  html[data-theme="dark"] body:has(.home-screen) { --moon-x: calc(100% - 3rem); --moon-y: calc(env(safe-area-inset-top, 0px) + 5.5rem); --horizon-y: 22rem; }
  /* Mobile halo at ~40% of the desktop glow so the small disc stays a quiet accent. */
  html[data-theme="dark"] body:has(.home-screen) {
    background:
      radial-gradient(circle at var(--moon-x) var(--moon-y), rgb(207 204 199 / 14%) 0, rgb(207 204 199 / 11%) 1.1rem, rgb(187 183 177 / 6%) 2.6rem, rgb(167 161 153 / 3%) 5rem, rgb(137 130 119 / 2%) 11rem, rgb(137 130 119 / 0) 22rem),
      linear-gradient(180deg, #100f0e 0, #161513 calc(var(--horizon-y) - 9rem), #1c1b19 var(--horizon-y), #151413 calc(var(--horizon-y) + 10rem), #0b0a09 calc(var(--horizon-y) + 26rem)) #0b0a09;
  }
  html[data-theme="dark"] .home-welcome::before {
    content: "";
    position: absolute;
    top: 1.4rem; /* same centre as before, 25% smaller */
    right: 2.05rem;
    width: 1.9rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 36% 34%, #dfe7f0 0, #c2cedc 45%, #91a3b8 100%);
    box-shadow: 0 0 0.6rem 0 rgb(190 210 232 / 18%);
    pointer-events: none;
  }
  html[data-theme="dark"] .home-welcome h1 { position: relative; }
}

html[data-theme="dark"] body:has(.home-screen) .brand__wordmark {
  color: #f7f0e3;
  font-weight: 720;
  letter-spacing: -0.035em;
}

html[data-theme="dark"] body:has(.home-screen) .brand__wordmark::after {
  color: #d7c39e;
  content: ".";
}

html[data-theme="dark"] body:has(.home-screen) .account-avatar {
  border-color: rgb(215 195 158 / 42%);
  color: #f7f0e3;
  background: transparent;
  box-shadow: none;
}

html[data-theme="dark"] body:has(.home-screen) .page-shell {
  color: #f8f4ea;
  background: transparent;
}

html[data-theme="dark"] .home-primary-card,
html[data-theme="dark"] .home-progress-card {
  border-color: rgb(215 195 158 / 26%);
}

html[data-theme="dark"] .home-primary-card {
  color: #f8f4ea;
  background: #22201d;
  box-shadow: 0 0.55rem 1.35rem rgb(0 0 0 / 14%);
}
html[data-theme="dark"] .home-primary-card__kicker,
html[data-theme="dark"] .home-progress-card__copy small { color: #d7c39e; }
html[data-theme="dark"] .home-primary-card__meta { color: #c5c1bc; }
html[data-theme="dark"] .home-primary-card__title { color: #f8f4ea; }
html[data-theme="dark"] .home-primary-card__art { border-color: rgb(215 195 158 / 22%); color: #d7c39e; background: #2e2c28; }
html[data-theme="dark"] .home-review-split { border-color: #d7c39e; color: #171512; background: #d7c39e; }
html[data-theme="dark"] .home-review-size-menu__toggle { border-color: rgb(32 30 27 / 28%); }
html[data-theme="dark"] .home-primary-card__play:hover { color: #171512; background: #e2cfaa; }
html[data-theme="dark"] .home-progress-card { background: #22201d; box-shadow: 0 0.35rem 1rem rgb(0 0 0 / 12%); }
html[data-theme="dark"] .home-progress-ring__track { stroke: rgb(255 255 255 / 10%); }
html[data-theme="dark"] .home-stats { background: #1c1b19; box-shadow: none; }
html[data-theme="dark"] .home-stat-card + .home-stat-card { border-color: rgb(215 195 158 / 18%); }
html[data-theme="dark"] .home-stat-card svg { color: #d7c39e; }
html[data-theme="dark"] .home-word-card { border-color: rgb(215 195 158 / 18%); color: #f8f4ea; background: #1e1d1b; box-shadow: 0 0.25rem 0.7rem rgb(0 0 0 / 12%); }
html[data-theme="dark"] .home-word-card span { color: #c4cec8; }

html[data-theme="dark"] body.session-mode {
  color: #f8f4ea;
  background:
    radial-gradient(circle at 82% 8%, rgb(91 86 79 / 16%), transparent 22rem),
    #0e0e0d;
}

html[data-theme="dark"] body.session-mode .page-shell { color: #f8f4ea; background: transparent; }
html[data-theme="dark"] body.session-mode .review-flip-card__face { border-color: rgb(215 195 158 / 46%); color: #f8f4ea; background: #22201d; box-shadow: 0 1.1rem 2.8rem rgb(0 0 0 / 42%), inset 0 1px 0 rgb(255 255 255 / 5%); }
html[data-theme="dark"] body.session-mode .review-flip-card__back { background: #292724; }
html[data-theme="dark"] body.session-mode .review-complete { border-color: rgb(215 195 158 / 48%); color: #f8f4ea; background: linear-gradient(155deg, #292724, #1c1a18); box-shadow: 0 1.2rem 3rem rgb(0 0 0 / 46%), inset 0 1px 0 rgb(255 255 255 / 7%); }
html[data-theme="dark"] body.session-mode .review-flip-card__hint,
html[data-theme="dark"] body.session-mode .review-session-header__status > span,
html[data-theme="dark"] body.session-mode .review-complete p { color: #c5c1bc; }
html[data-theme="dark"] body.session-mode .rating-grid button { border-color: rgb(215 195 158 / 28%); color: #f8f4ea; background: #2a2825; }
html[data-theme="dark"] body.session-mode .review-complete__mark { color: #282622; background: #e2cfaa; }
html[data-theme="dark"] body.session-mode .review-size-links a { border-color: rgb(215 195 158 / 28%); color: #f8f4ea; background: rgb(255 255 255 / 6%); }

html[data-theme="dark"] body:has(.home-screen) .mobile-nav {
  border-color: rgb(199 189 170 / 16%);
  background: #141311;
  box-shadow: none;
  backdrop-filter: none;
}

html[data-theme="dark"] body:has(.home-screen) .mobile-nav a[aria-current="page"] {
  color: #d7c39e;
  background: rgb(215 195 158 / 12%);
  box-shadow: none;
}

/* Cards > Catalogue is a vocabulary hub: global by default, quiet filters. */
.study-header--catalogue {
  margin-inline: 0;
  margin-bottom: 1.5rem;
  text-align: left;
}

.study-header--catalogue h1 {
  font-size: clamp(1.5rem, 4.5vw, 2rem);
}

.catalogue-scope-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.catalogue-scope-filters .is-active {
  border-color: var(--primary);
  color: var(--primary-dark);
  background: var(--primary-soft);
}

/* Cards V2.1: compact catalogue without transformed-input focus races. */
.page-shell:has(.study-page) {
  animation: none;
}

.browse-vocabulary,
.catalogue-search,
.catalogue-card-grid,
.catalogue-card-grid > li,
.catalogue-card-grid .study-card {
  min-width: 0;
  max-width: 100%;
}

.catalogue-search {
  display: block;
  margin-bottom: var(--space-3);
}

.catalogue-search .form-field--search {
  width: 100%;
  min-width: 0;
}

.catalogue-scope-filters,
.catalogue-state-filters {
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}

.catalogue-scope-filters .button,
.catalogue-state-filters .button {
  min-width: 0;
  min-height: 2.5rem;
  padding: 0.5rem 0.7rem;
}

.catalogue-result-count {
  margin: 0 0 var(--space-4);
  color: var(--text-muted);
  font-size: 0.88rem;
}

.study-page .catalogue-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--space-3);
}

.catalogue-card-grid > li {
  height: 100%;
}

.catalogue-card-grid .study-card {
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  padding: var(--space-4);
}

.catalogue-card-grid .study-card .flashcard__character {
  margin: 0;
  font-size: clamp(2.5rem, 7vw, 4rem);
  overflow-wrap: anywhere;
}

.catalogue-card-grid .study-card .flashcard__pinyin {
  margin: var(--space-2) 0 0;
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.catalogue-card-grid .study-card .flashcard__translation {
  margin: var(--space-2) 0 var(--space-3);
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

@supports (-webkit-line-clamp: 3) {
  .catalogue-card-grid .study-card .flashcard__translation {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
}

.catalogue-card-grid .study-card.catalogue-card--hanzi-medium .flashcard__character {
  font-size: clamp(2rem, 5vw, 3rem);
}

.catalogue-card-grid .study-card.catalogue-card--hanzi-long .flashcard__character {
  font-size: clamp(1.65rem, 4vw, 2.5rem);
}

.catalogue-card-grid .study-card .metadata {
  overflow-wrap: anywhere;
}

.catalogue-card-grid .study-card .flashcard__actions {
  margin-top: auto;
  padding-top: var(--space-3);
}

.catalogue-card-grid .saved-card-form,
.catalogue-card-grid .saved-card-form .button {
  width: 100%;
  min-width: 0;
}

@media (max-width: 52rem) {
  .study-page .catalogue-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .catalogue-card-grid .study-card {
    padding: var(--space-3);
  }

  .catalogue-card-grid .study-card .flashcard__character {
    font-size: clamp(2.25rem, 13vw, 3.5rem);
  }
}

/* Learn prioritizes one immediate flashcard action on mobile. */
.learn-main { max-width: 38rem; }
.learn-main__header { margin-bottom: var(--space-3); }

.learn-framework-picker {
  position: relative;
  width: fit-content;
  margin-bottom: var(--space-4);
}

.learn-framework-picker label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 700;
}

.learn-framework-picker select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}

.learn-primary-action { width: 100%; max-width: 28rem; }

.learn-quick-study { margin-top: var(--space-5); }
.learn-quick-study h2 { margin: 0 0 var(--space-3); font-size: 1.1rem; }

.quick-study-list {
  display: flex;
  gap: var(--space-2);
  margin-inline: calc(-1 * var(--space-1));
  padding: 0 var(--space-1) var(--space-1);
  overflow-x: auto;
  scrollbar-width: none;
}

.quick-study-list::-webkit-scrollbar { display: none; }

.quick-study-chip {
  flex: 0 0 auto;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  color: var(--text);
  background: var(--surface-raised);
  font-size: 0.9rem;
  font-weight: 650;
  text-decoration: none;
}

.learn-topics { margin-top: var(--space-5); }

.learn-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.learn-section-heading h2 { margin: 0; font-size: 1.1rem; }
.learn-section-heading a { font-weight: 650; }
.learn-topic-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.topics-index__header { margin-bottom: var(--space-4); }
.topics-index__header h1 { margin-top: var(--space-2); }

.topic-link-grid {
  gap: 0.45rem;
}

.topic-link {
  min-height: 2.5rem;
  align-content: center;
  padding: 0.55rem 0.75rem;
  border-color: var(--border-soft);
  background: transparent;
  box-shadow: none;
  font-size: 0.92rem;
}

@media (max-width: 52rem) {
  .page-shell:has(.home-screen) {
    width: 100%;
    min-height: 0;
    margin-block: 0;
    padding: 0 var(--space-4) 0.75rem;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .home-welcome {
    min-height: 5.75rem;
    margin-inline: calc(-1 * var(--space-4));
    margin-bottom: 0;
    padding: 1.2rem var(--space-4) 1.35rem;
    border-top: 0;
    border-radius: 0 0 1.35rem 1.35rem;
  }

  .home-welcome h1 { max-width: 19rem; }

  .home-review-feature {
    margin-top: var(--space-3);
    padding-inline: 0.15rem;
  }

  .home-primary-card { min-height: 8rem; padding-block: 0.9rem; }

  /* Vertical rhythm compacted so Home fits a Pro-size iPhone without scrolling; smaller screens scroll. */
  .home-section { margin-top: 1.25rem; }
  .home-recent { margin-top: 1.25rem; }
  .home-progress-card { min-height: 5.1rem; }
  .home-stat-card { min-height: 5rem; padding-block: 0.65rem; }
  .home-stat-card svg { margin-bottom: 0.3rem; }
  .home-word-card { padding-block: 0.8rem 0.85rem; }

  .topic-link-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .learn-main__header h1 { font-size: 1.75rem; }
}

@media (max-width: 24rem) {
  .page-shell:has(.home-screen) { padding-inline: var(--space-3); }
  .home-welcome { margin-inline: calc(-1 * var(--space-3)); }
  .home-primary-card { grid-template-columns: 3.5rem minmax(0, 1fr); gap: 0.4rem var(--space-3); padding: 1rem 0.9rem; }
  .home-primary-card__art { width: 3.5rem; height: 3.5rem; padding: 0; border-radius: 0.85rem; }
  .home-primary-card__art svg { width: 2.9rem; }
  .home-primary-card__play { width: fit-content; }
  .home-primary-card__meta { font-size: var(--v3-font-size-xs); }
  .home-progress-card { padding-inline: 1rem; }
  .home-recent__list { gap: 0.45rem; }
  .home-stat-card { padding-inline: 0.55rem; }
  .home-word-card { padding-inline: 0.25rem; }
}

/* Learn V3 hub: Home V3 surfaces and sky, scoped to .learn-v3 so Home stays untouched. */
.page-shell:has(.learn-v3) { padding-bottom: 2.5rem; background: transparent; box-shadow: none; }
.learn-v3 { width: 100%; max-width: 42rem; margin-inline: auto; }
.learn-v3__header { margin-bottom: 1.25rem; }
.learn-v3__header h1 { margin: 0; font-size: clamp(2rem, 8vw, 2.5rem); font-weight: 640; letter-spacing: -0.05em; line-height: 1.05; }
.learn-v3__header p { margin: 0.35rem 0 0; color: var(--text-muted); font-size: 1rem; }
.learn-v3__header .mobile-back-link { margin-bottom: 0.35rem; }

.learn-v3__paths { display: grid; gap: 0.65rem; }
.learn-v3-entry {
  position: relative;
  display: grid;
  min-height: 6.25rem; /* equal heights whether or not the path badge shows */
  grid-template-columns: 3.5rem minmax(0, 1fr) 1.15rem;
  align-items: center;
  gap: 0.25rem 0.75rem;
  padding: 0.75rem 0.95rem;
  border: 1px solid rgb(184 142 77 / 24%);
  border-radius: 1.35rem;
  color: var(--text);
  background: #fffcf5;
  box-shadow: 0 0.55rem 1.35rem rgb(73 52 22 / 8%);
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.learn-v3-entry:hover { text-decoration: none; box-shadow: 0 0.75rem 1.6rem rgb(73 52 22 / 12%); }
.learn-v3-entry:active { transform: scale(0.985); }
.learn-v3-entry:focus-visible { outline: 2px solid var(--v3-color-focus); outline-offset: 3px; }
.learn-v3-entry__art {
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  grid-row: 1 / span 2;
  place-items: center;
  border: 1px solid rgb(215 195 158 / 28%);
  border-radius: 1rem;
  color: #d7c39e;
  background: #2e2c28;
  font-family: var(--v3-font-family-hanzi);
  font-size: 1.7rem;
  font-weight: 520;
  line-height: 1;
}
.learn-v3-entry__copy { display: grid; min-width: 0; gap: 0.15rem; }
.learn-v3-entry__copy small,
.learn-v3-collection small,
.learn-v3-levels__label { color: #8a652f; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.13em; line-height: 1.1; text-transform: uppercase; }
.learn-v3-entry__copy strong { margin-top: 0.1rem; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; }
.learn-v3-entry__copy span { color: var(--text-muted); font-size: var(--v3-font-size-sm); line-height: 1.25; }
.learn-v3-entry__chevron { grid-column: 3; grid-row: 1 / span 2; width: 1.25rem; height: 1.25rem; fill: none; stroke: #b88e4d; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.learn-v3-entry__badge {
  width: fit-content;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  color: #2e2c28;
  background: #eadfc9;
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.3;
  white-space: nowrap;
}
.learn-v3-entry > .learn-v3-entry__badge { grid-column: 2; }

/* Corpus panel replaces the hub while targeted. */
.learn-v3__panel { display: none; scroll-margin-top: 6rem; }
.learn-v3__panel:target { display: block; }
.learn-v3:has(.learn-v3__panel:target) .learn-v3__hub { display: none; }

.learn-v3-exams { display: flex; flex-direction: column; gap: 0.85rem; }
.learn-v3-exam--current { order: -1; }
.learn-v3-exam {
  padding: 1.15rem 1.2rem 1.25rem;
  border: 1px solid rgb(184 142 77 / 20%);
  border-radius: 1.35rem;
  background: #fffcf5;
  box-shadow: 0 0.35rem 1rem rgb(73 52 22 / 6%);
}
.learn-v3-exam__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.learn-v3-exam h2 { margin: 0; font-size: 1.35rem; font-weight: 640; letter-spacing: -0.03em; }
.learn-v3-exam > p { margin: 0.2rem 0 0; color: var(--text-muted); font-size: var(--v3-font-size-sm); }
.learn-v3-levels { margin-top: 1rem; }
.learn-v3-levels__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.45rem; }
.learn-v3-levels__row a {
  display: grid;
  min-height: 3rem;
  place-items: center;
  border: 1px solid rgb(46 44 40 / 16%);
  border-radius: 0.9rem;
  color: #2e2c28;
  background: #f4ede0;
  font-size: 1.1rem;
  font-weight: 640;
  text-decoration: none;
}
.learn-v3-levels__row a:hover { border-color: #2e2c28; text-decoration: none; }
.learn-v3-levels__row a:focus-visible { outline: 2px solid var(--v3-color-focus); outline-offset: 2px; }

/* Topics: the lead collection is jade like Home's welcome, the others ivory cards; each carries a hanzi tile. */
.learn-v3-section + .learn-v3-section { margin-top: 1.75rem; }
.learn-v3-section h2 { margin: 0 0 0.65rem; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.025em; }
.learn-v3-section h2 span { margin-left: 0.25rem; color: var(--text-muted); font-size: var(--v3-font-size-sm); font-weight: 500; }
.learn-v3-collections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
.learn-v3-collection {
  display: flex;
  min-width: 0;
  min-height: 9rem;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1rem 1.05rem 1.05rem;
  border: 1px solid rgb(184 142 77 / 24%);
  border-radius: 1.35rem;
  color: var(--text);
  background: #fffcf5;
  box-shadow: 0 0.55rem 1.35rem rgb(73 52 22 / 8%);
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.learn-v3-collection__art {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 1px solid rgb(215 195 158 / 28%);
  border-radius: 0.8rem;
  color: #d7c39e;
  background: #2e2c28;
  font-family: var(--v3-font-family-hanzi);
  font-size: 1.35rem;
  font-weight: 520;
  line-height: 1;
  margin-bottom: auto;
}
.learn-v3-collection--lead {
  display: grid;
  grid-column: 1 / -1;
  min-height: 8rem;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: center;
  column-gap: 1rem;
  padding: 1.15rem 1.2rem 1.2rem;
  border-color: rgb(215 195 158 / 24%);
  color: var(--v3-color-ivory);
  background: radial-gradient(circle at 88% 20%, rgb(215 195 158 / 22%) 0, rgb(215 195 158 / 0) 8rem), linear-gradient(135deg, #2e2c28 0, #383530 100%);
  box-shadow: 0 0.7rem 1.6rem rgb(43 41 37 / 16%);
}
.learn-v3-collection--lead .learn-v3-collection__art {
  width: 4.5rem;
  height: 5.5rem;
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  margin-bottom: 0;
  border-color: rgb(255 252 245 / 40%);
  border-radius: 0.95rem;
  color: #2e2c28;
  background: #d7c39e;
  box-shadow: 0 0.55rem 1.2rem rgb(0 0 0 / 18%);
  font-size: 2.2rem;
  transform: rotate(6deg);
}
.learn-v3-collection--lead small { color: #d7c39e; }
.learn-v3-collection strong { font-size: 1.15rem; font-weight: 620; letter-spacing: -0.03em; line-height: 1.15; }
.learn-v3-collection--lead strong { font-size: 1.55rem; }
.learn-v3-collection span:not(.learn-v3-collection__art) { color: var(--text-muted); font-size: var(--v3-font-size-sm); line-height: 1.25; }
.learn-v3-collection--lead span:not(.learn-v3-collection__art) { color: #d3d0cc; }
.learn-v3-collection:hover { text-decoration: none; box-shadow: 0 0.75rem 1.6rem rgb(73 52 22 / 12%); }
.learn-v3-collection:active,
.learn-v3-topic:active { transform: scale(0.985); }
.learn-v3-collection:focus-visible,
.learn-v3-topic:focus-visible { outline: 2px solid var(--v3-color-focus); outline-offset: 3px; }
.learn-v3-topic-groups { display: grid; gap: 0.6rem; }
.learn-v3-topic-group {
  overflow: hidden;
  border: 1px solid rgb(184 142 77 / 20%);
  border-radius: 1.1rem;
  background: #fffcf5;
  box-shadow: 0 0.3rem 0.9rem rgb(73 52 22 / 6%);
}
.learn-v3-topic-group > summary {
  display: grid;
  min-height: 3.75rem;
  grid-template-columns: minmax(0, 1fr) auto 1.1rem;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 0.95rem;
  cursor: pointer;
  list-style: none;
}
.learn-v3-topic-group > summary::-webkit-details-marker { display: none; }
.learn-v3-topic-group > summary strong { font-size: 0.98rem; font-weight: 620; letter-spacing: -0.02em; }
.learn-v3-topic-group > summary span { color: var(--text-muted); font-size: 0.78rem; white-space: nowrap; }
.learn-v3-topic-group > summary svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: #b88e4d;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 160ms ease;
}
.learn-v3-topic-group[open] > summary { border-bottom: 1px solid rgb(184 142 77 / 16%); }
.learn-v3-topic-group[open] > summary svg { transform: rotate(90deg); }
.learn-v3-topic-group__rows { display: grid; }
.learn-v3-topic {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.3rem 0.75rem;
  padding: 0.8rem 0.95rem 0.85rem;
  border-bottom: 1px solid rgb(184 142 77 / 12%);
  color: var(--text);
  line-height: 1.2;
  text-decoration: none;
  transition: transform 160ms ease, background 160ms ease;
}
.learn-v3-topic:last-child { border-bottom: 0; }
.learn-v3-topic > strong { min-width: 0; font-size: 0.92rem; font-weight: 600; }
.learn-v3-topic__cards,
.learn-v3-topic__progress { color: var(--text-muted); font-size: 0.76rem; }
.learn-v3-topic__cards { white-space: nowrap; }
.learn-v3-topic__progress { grid-column: 1 / -1; }
.learn-v3-topic progress {
  width: 100%;
  height: 0.22rem;
  grid-column: 1 / -1;
  margin: 0;
  border: 0;
  border-radius: 99rem;
  overflow: hidden;
  appearance: none;
  background: #eadfc9;
}
.learn-v3-topic progress::-webkit-progress-bar { background: #eadfc9; }
.learn-v3-topic progress::-webkit-progress-value { background: #2e2c28; }
.learn-v3-topic progress::-moz-progress-bar { background: #2e2c28; }
.learn-v3-topic:hover { background: rgb(234 223 201 / 38%); text-decoration: none; }

/* Sunrise / Moonlight shell, same values as Home without its sun disc and moon. */
html[data-theme="light"] body:has(.learn-v3) {
  background:
    radial-gradient(circle at 84% 9rem, rgb(255 238 200 / 55%) 0, rgb(240 207 146 / 24%) 7rem, rgb(240 207 146 / 0) 19rem),
    linear-gradient(180deg, #f2e9d6 0, #f6ecda 15rem, #f7f0e2 28rem, #f7f3ea 40rem) #f7f3ea;
}
html[data-theme="light"] body:has(.learn-v3) .site-header { border-color: rgb(184 142 77 / 14%); background: rgb(242 233 214 / 78%); box-shadow: none; }
html[data-theme="light"] body:has(.learn-v3) .mobile-nav { background: #f7f3ea; box-shadow: none; backdrop-filter: none; }
body:has(.learn-v3) .mobile-nav a { border-radius: 0.8rem; }
body:has(.learn-v3) .mobile-nav a[aria-current="page"] { color: #2e2c28; background: #eadfc9; box-shadow: none; }

html[data-theme="dark"] body:has(.learn-v3) {
  background: linear-gradient(180deg, #100f0e 0, #161513 13rem, #1c1b19 22rem, #151413 32rem, #0b0a09 48rem) #0b0a09;
}
html[data-theme="dark"] body:has(.learn-v3) .site-header { border-color: rgb(213 210 206 / 10%); background: rgb(16 15 14 / 55%); backdrop-filter: blur(1.2rem); }
html[data-theme="dark"] body:has(.learn-v3) .brand__wordmark { color: #f7f0e3; font-weight: 720; letter-spacing: -0.035em; }
html[data-theme="dark"] body:has(.learn-v3) .brand__wordmark::after { color: #d7c39e; content: "."; }
html[data-theme="dark"] body:has(.learn-v3) .account-avatar { border-color: rgb(215 195 158 / 42%); color: #f7f0e3; background: transparent; box-shadow: none; }
html[data-theme="dark"] body:has(.learn-v3) .page-shell { color: #f8f4ea; background: transparent; }
html[data-theme="dark"] body:has(.learn-v3) .mobile-nav { border-color: rgb(199 189 170 / 16%); background: #141311; box-shadow: none; backdrop-filter: none; }
html[data-theme="dark"] body:has(.learn-v3) .mobile-nav a[aria-current="page"] { color: #d7c39e; background: rgb(215 195 158 / 12%); }
html[data-theme="dark"] .learn-v3__header p,
html[data-theme="dark"] .learn-v3-exam > p,
html[data-theme="dark"] .learn-v3-section h2 span,
html[data-theme="dark"] .learn-v3-entry__copy span { color: #c5c1bc; }
html[data-theme="dark"] .learn-v3 .mobile-back-link { color: #c5c1bc; }
html[data-theme="dark"] .learn-v3-entry,
html[data-theme="dark"] .learn-v3-exam { border-color: rgb(215 195 158 / 26%); color: #f8f4ea; background: #22201d; box-shadow: 0 0.55rem 1.35rem rgb(0 0 0 / 14%); }
html[data-theme="dark"] .learn-v3-entry__copy small,
html[data-theme="dark"] .learn-v3-levels__label { color: #d7c39e; }
html[data-theme="dark"] .learn-v3-entry__art { border-color: rgb(215 195 158 / 22%); background: #2e2c28; }
html[data-theme="dark"] .learn-v3-entry__chevron { stroke: #d7c39e; }
html[data-theme="dark"] .learn-v3-entry__badge { color: #171512; background: #d7c39e; }
html[data-theme="dark"] .learn-v3-levels__row a { border-color: rgb(215 195 158 / 22%); color: #f8f4ea; background: rgb(255 255 255 / 5%); }
html[data-theme="dark"] .learn-v3-levels__row a:hover { border-color: #d7c39e; }
html[data-theme="dark"] .learn-v3-collection { border-color: rgb(215 195 158 / 24%); color: #f8f4ea; background: #22201d; box-shadow: 0 0.55rem 1.35rem rgb(0 0 0 / 14%); }
html[data-theme="dark"] .learn-v3-collection small { color: #d7c39e; }
html[data-theme="dark"] .learn-v3-collection span:not(.learn-v3-collection__art) { color: #c5c1bc; }
html[data-theme="dark"] .learn-v3-collection--lead { border-color: rgb(215 195 158 / 30%); background: radial-gradient(circle at 88% 20%, rgb(215 195 158 / 16%) 0, rgb(215 195 158 / 0) 8rem), linear-gradient(135deg, #302d29 0, #3b3833 100%); box-shadow: 0 0.55rem 1.35rem rgb(0 0 0 / 18%); }
html[data-theme="dark"] .learn-v3-collection--lead span:not(.learn-v3-collection__art) { color: #d3d0cc; }
html[data-theme="dark"] .learn-v3-topic-group { border-color: rgb(215 195 158 / 18%); background: #1e1d1b; box-shadow: none; }
html[data-theme="dark"] .learn-v3-topic-group[open] > summary { border-color: rgb(215 195 158 / 14%); }
html[data-theme="dark"] .learn-v3-topic-group > summary span,
html[data-theme="dark"] .learn-v3-topic__cards,
html[data-theme="dark"] .learn-v3-topic__progress { color: #c5c1bc; }
html[data-theme="dark"] .learn-v3-topic-group > summary svg { stroke: #d7c39e; }
html[data-theme="dark"] .learn-v3-topic { border-color: rgb(215 195 158 / 12%); color: #f8f4ea; }
html[data-theme="dark"] .learn-v3-topic:hover { background: rgb(215 195 158 / 8%); }
html[data-theme="dark"] .learn-v3-topic progress,
html[data-theme="dark"] .learn-v3-topic progress::-webkit-progress-bar { background: rgb(215 195 158 / 18%); }
html[data-theme="dark"] .learn-v3-topic progress::-webkit-progress-value,
html[data-theme="dark"] .learn-v3-topic progress::-moz-progress-bar { background: #d7c39e; }

@media (max-width: 52rem) {
  .page-shell:has(.learn-v3) {
    width: 100%;
    min-height: 0;
    margin-block: 0;
    padding: 1.25rem var(--space-4) 1rem;
    border-radius: 0;
  }
  .learn-v3__hub { display: flex; min-height: calc(100dvh - var(--mobile-nav-height) - env(safe-area-inset-bottom) - 7rem); flex-direction: column; }
  .learn-v3__hub .learn-v3__paths { display: flex; flex: 1; flex-direction: column; }
  .learn-v3__hub .learn-v3-entry { min-height: 7rem; flex: 1; grid-template-columns: 4.25rem minmax(0, 1fr) 1.15rem; }
  .learn-v3__hub .learn-v3-entry__art { width: 4.25rem; height: 4.25rem; font-size: 1.95rem; }
  .learn-v3__hub .learn-v3-entry__copy strong { font-size: 1.15rem; }
}

@media (max-width: 24rem) {
  .page-shell:has(.learn-v3) { padding-inline: var(--space-3); }
  .learn-v3-entry { grid-template-columns: 3.5rem minmax(0, 1fr) 1.1rem; gap: 0.3rem var(--space-3); padding-inline: 0.95rem 0.85rem; }
  .learn-v3-entry__art { width: 3.5rem; height: 3.5rem; border-radius: 0.85rem; font-size: 1.65rem; }
}

@media (prefers-reduced-motion: reduce) {
  .learn-v3-entry,
  .learn-v3-collection,
  .learn-v3-topic { transition: none; }
  .learn-v3-topic-group > summary svg { transition: none; }
  .learn-v3-entry:active,
  .learn-v3-collection:active,
  .learn-v3-topic:active { transform: none; }
}

/* Learn V3 pass 2: Quiz setup, Quiz session and collection pages on the same .learn-v3 shell. */
.quiz-v3 { max-width: 34rem; }
.quiz-v3 fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.quiz-v3 legend,
.source-v3 .session-size legend,
.source-v3__kicker { display: block; margin: 0 0 0.55rem; padding: 0; color: #8a652f; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.13em; line-height: 1.1; text-transform: uppercase; }
.quiz-v3 input[type="radio"],
.source-v3 .session-size input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.quiz-v3-cta {
  width: 100%;
  min-height: 3.35rem;
  border-color: #2e2c28;
  border-radius: 1.1rem;
  color: #fffcf5;
  background: #2e2c28;
  box-shadow: 0 0.6rem 1.4rem rgb(46 44 40 / 18%);
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.quiz-v3-cta:hover { border-color: #383530; background: #383530; }
.quiz-v3-cta:disabled { box-shadow: none; }

/* Setup: three quiet groups, one CTA. */
.quiz-v3-setup { display: grid; gap: 1.5rem; }
.quiz-v3-exams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
.quiz-v3-exam > span {
  display: grid;
  min-height: 5.25rem;
  align-content: end;
  gap: 0.15rem;
  padding: 0.95rem 1rem;
  border: 1px solid rgb(184 142 77 / 24%);
  border-radius: 1.2rem;
  background: #fffcf5;
  box-shadow: 0 0.35rem 1rem rgb(73 52 22 / 6%);
  cursor: pointer;
}
.quiz-v3-exam strong { font-size: 1.3rem; font-weight: 640; letter-spacing: -0.03em; line-height: 1.1; }
.quiz-v3-exam small { color: var(--text-muted); font-size: var(--v3-font-size-sm); line-height: 1.25; }
.quiz-v3-exam input:checked + span { border-color: #2e2c28; color: #fffcf5; background: linear-gradient(135deg, #2e2c28 0, #383530 100%); box-shadow: 0 0.55rem 1.4rem rgb(43 41 37 / 16%); }
.quiz-v3-exam input:checked + span small { color: #d7c39e; }
.quiz-v3-levels,
.quiz-v3-counts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; }
.quiz-v3-counts { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0.3rem; border-radius: 1.1rem; background: #eee6d7; }
.quiz-v3-levels span,
.quiz-v3-counts span {
  display: grid;
  min-height: 3rem;
  place-items: center;
  border: 1px solid rgb(46 44 40 / 16%);
  border-radius: 0.9rem;
  color: #2e2c28;
  background: #f4ede0;
  font-size: 1.1rem;
  font-weight: 640;
  cursor: pointer;
}
.quiz-v3-counts span { min-height: 2.75rem; border-color: transparent; background: transparent; }
.quiz-v3-levels input:checked + span { border-color: #2e2c28; color: #fffcf5; background: #2e2c28; }
.quiz-v3-counts input:checked + span { color: var(--text); background: #fffcf5; box-shadow: 0 0.2rem 0.6rem rgb(73 52 22 / 12%); }
.numbers-v1-levels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.numbers-v1-levels span { align-content: center; gap: 0.15rem; padding: 0.6rem 0.25rem; font-size: 0.95rem; line-height: 1.1; }
.numbers-v1-levels small { font-size: 0.68rem; font-weight: 500; }
.numbers-v1-launch { margin: 0; }
.numbers-v1-launch .learn-v3-entry { width: 100%; font: inherit; text-align: left; cursor: pointer; }
.quiz-v3 input:focus-visible + span,
.source-v3 .session-size input:focus-visible + span { outline: 2px solid var(--v3-color-focus); outline-offset: 2px; }
.quiz-v3-help { margin: 0.5rem 0 0; color: var(--text-muted); font-size: var(--v3-font-size-sm); }
.quiz-v3-setup:has(input[name="exam"][value="hsk"]:checked) [data-exam="tocfl"],
.quiz-v3-setup:has(input[name="exam"][value="tocfl"]:checked) [data-exam="hsk"] { display: none; }
.quiz-v3-setup:has(input[name="mode"][value="streak"]:checked) .quiz-v3-classic-only { display: none; }
.quiz-v3-group .learn-v3-levels__label { display: block; margin: 0.75rem 0 0.4rem; }
.quiz-v3-group legend + .learn-v3-levels__label { margin-top: 0; }
.quiz-v3-error { margin: 0; padding: 0.75rem 0.9rem; border-radius: 0.9rem; color: var(--danger); background: var(--danger-soft); font-size: var(--v3-font-size-sm); font-weight: 600; }

/* Session: one hanzi, four tiles, one action. */
.quiz-v3--session { display: flex; flex-direction: column; }
body:has(.quiz-v3--session) { overflow-x: clip; } /* the slide-in must not open a horizontal scroll */
.quiz-v3-bar { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.quiz-v3-bar__leave { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border: 1px solid rgb(184 142 77 / 24%); border-radius: 999px; color: var(--text); background: #fffcf5; }
.quiz-v3-bar__leave svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.quiz-v3-bar__track { height: 0.4rem; overflow: hidden; border-radius: 999px; background: rgb(184 142 77 / 18%); }
.quiz-v3-bar__track span { display: block; width: var(--quiz-progress, 0%); height: 100%; border-radius: inherit; background: #2e2c28; }
.quiz-v3-bar__count { margin: 0; color: var(--text-muted); font-size: var(--v3-font-size-sm); font-weight: 600; letter-spacing: 0; white-space: nowrap; }
.quiz-v3-streak__lives { display: flex; justify-content: center; gap: 0.25rem; }
.quiz-v3-streak__lives svg { width: 1.25rem; height: 1.25rem; fill: var(--danger); stroke: var(--danger); stroke-linejoin: round; stroke-width: 1.5; }
.quiz-v3-streak__lives svg.is-empty { fill: transparent; opacity: 0.35; }
.quiz-v3-streak__score { display: grid; justify-items: end; margin: 0; line-height: 1; }
.quiz-v3-streak__score strong { color: #a96f14; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.quiz-v3-streak__score span { margin-top: 0.2rem; color: var(--text-muted); font-size: 0.72rem; font-weight: 650; }
.quiz-v3-question { display: flex; flex: 1; flex-direction: column; gap: 1rem; }
.quiz-v3-prompt {
  display: grid;
  flex: 1 0 auto;
  min-height: clamp(10rem, 30svh, 15rem);
  max-height: 20rem;
  place-content: center;
  justify-items: center;
  gap: 0.35rem;
  padding: 1.25rem;
  container-type: inline-size;
  border: 1px solid rgb(184 142 77 / 24%);
  border-radius: 1.6rem;
  background: radial-gradient(circle at 50% 0, rgb(255 238 200 / 70%) 0, rgb(255 252 245 / 0) 70%) #fffcf5;
  box-shadow: 0 0.9rem 2.2rem rgb(87 61 24 / 10%), inset 0 1px 0 rgb(255 255 255 / 90%);
  text-align: center;
}
.quiz-v3-prompt p { margin: 0; color: #8a652f; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; }
.quiz-v3-prompt strong { font-family: var(--v3-font-family-hanzi); font-size: min(6.25rem, 80cqi / var(--hanzi-chars, 1)); font-weight: 450; letter-spacing: -0.02em; line-height: 1.1; }
.numbers-v1-answer {
  display: grid;
  width: 100%;
  min-height: 3.6rem;
  place-items: center;
  padding: 0.65rem 1rem;
  border: 1px solid rgb(184 142 77 / 30%);
  border-radius: 1.1rem;
  color: var(--text);
  background: #fffcf5;
  box-shadow: 0 0.25rem 0.8rem rgb(73 52 22 / 5%);
  font: inherit;
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.numbers-v1-answer:empty::before { color: var(--text-muted); content: "Your answer"; font-size: 0.9rem; }
.numbers-v1-answer-area { display: grid; gap: 0.65rem; }
.numbers-v1-date-answer {
  display: flex;
  min-height: 3.6rem;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid rgb(184 142 77 / 30%);
  border-radius: 1.1rem;
  background: #fffcf5;
  box-shadow: 0 0.25rem 0.8rem rgb(73 52 22 / 5%);
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.numbers-v1-date-answer > span { display: flex; align-items: center; gap: 0.15rem; }
.numbers-v1-date-answer output { display: inline-flex; min-width: 2ch; color: var(--text); text-align: center; }
.numbers-v1-date-answer output[data-date-part="year"] { min-width: 4ch; }
.numbers-v1-date-answer [data-date-placeholder] { color: var(--text-muted); opacity: 0.45; }
.numbers-v1-pad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.45rem; }
.numbers-v1-pad button {
  min-height: 2.9rem;
  padding: 0.35rem;
  border: 1px solid rgb(184 142 77 / 24%);
  border-radius: 0.85rem;
  color: var(--text);
  background: #f4ede0;
  font-family: var(--v3-font-family-hanzi);
  font-size: 1.25rem;
  font-weight: 560;
}
.numbers-v1-pad button:focus-visible { outline: 2px solid var(--v3-color-focus); outline-offset: 2px; }
.numbers-v1 .quiz-v3-question { display: grid; flex: none; }
.numbers-v1 .quiz-v3-prompt { flex: none; min-height: clamp(8rem, 20svh, 10rem); }
.numbers-v1 .quiz-v3-question,
.numbers-v1 .quiz-v3-prompt strong { animation: none; }
.quiz-v3-choices { display: grid; gap: 0.6rem; counter-reset: choice; }
.quiz-v3-choice > span {
  display: grid;
  min-height: 3.6rem;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 1rem 0.6rem 0.75rem;
  border: 1px solid rgb(184 142 77 / 22%);
  border-radius: 1.1rem;
  background: #fffcf5;
  box-shadow: 0 0.25rem 0.8rem rgb(73 52 22 / 5%);
  font-size: 1.02rem;
  font-weight: 560;
  line-height: 1.25;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.quiz-v3-choice > span::before {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 0.65rem;
  color: #8a652f;
  background: #f4ede0;
  content: counter(choice, upper-alpha);
  counter-increment: choice;
  font-size: 0.8rem;
  font-weight: 700;
}
.quiz-v3-choice input:checked + span { border-color: #2e2c28; background: #f2f1ef; box-shadow: inset 0 0 0 1px #2e2c28, 0 0.4rem 1rem rgb(46 44 40 / 12%); }
.quiz-v3-choice input:checked + span::before { color: #fffcf5; background: #2e2c28; content: "✓"; }
.numbers-v1-clock-setter { display: grid; justify-items: center; gap: 0.5rem; }
.numbers-v1-clock { position: relative; width: min(68vw, 15.75rem); aspect-ratio: 1; cursor: crosshair; touch-action: none; user-select: none; }
.numbers-v1-clock svg { position: absolute; inset: 0; width: 100%; overflow: visible; pointer-events: none; }
.numbers-v1-clock__face { fill: #fffcf5; stroke: rgb(184 142 77 / 45%); stroke-width: 2.5; }
.numbers-v1-clock__hour,
.numbers-v1-clock__minute { stroke: #2e2c28; stroke-linecap: round; transform: rotate(var(--hand-angle, 0deg)); transform-origin: 120px 120px; }
.numbers-v1-clock__hour { stroke-width: 8; }
.numbers-v1-clock__minute { stroke-width: 5; }
.numbers-v1-clock__pin { fill: #b88e4d; }
.numbers-v1-clock [data-clock-hour] {
  position: absolute;
  z-index: 1;
  top: var(--clock-y);
  left: var(--clock-x);
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: #8a652f;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  transform: translate(-50%, -50%);
}
.numbers-v1-clock [data-clock-hour][aria-pressed="true"] { color: #fffcf5; background: #2e2c28; }
.numbers-v1-clock-controls { display: grid; width: min(100%, 18rem); grid-template-columns: 3.25rem minmax(0, 1fr) 3.25rem; align-items: center; gap: 0.4rem; }
.numbers-v1-clock-controls button,
.numbers-v1-clock-period button {
  min-height: 2.5rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid rgb(184 142 77 / 28%);
  border-radius: 0.8rem;
  color: var(--text);
  background: #f4ede0;
  cursor: pointer;
  font: inherit;
  font-weight: 650;
}
.numbers-v1-clock-controls output { font-size: 0.85rem; font-variant-numeric: tabular-nums; text-align: center; }
.numbers-v1-clock-period { display: grid; width: min(100%, 12rem); grid-template-columns: repeat(2, 1fr); gap: 0.25rem; padding: 0.25rem; border-radius: 0.95rem; background: #eee6d7; }
.numbers-v1-clock-period button { border-color: transparent; background: transparent; }
.numbers-v1-clock-period button[aria-pressed="true"] { color: #fffcf5; background: #2e2c28; }
.numbers-v1-clock-hint { min-height: 1.2em; margin: 0; color: var(--text-muted); font-size: 0.85rem; text-align: center; }
.numbers-v1-clock button:focus-visible { outline: 2px solid var(--v3-color-focus); outline-offset: 2px; }
.numbers-v1-clock-controls button:focus-visible,
.numbers-v1-clock-period button:focus-visible { outline: 2px solid var(--v3-color-focus); outline-offset: 2px; }
.quiz-v3-question .quiz-v3-cta { margin-top: auto; }
/* Submitted: the chosen tile locks in jade while the next question loads. */
.quiz-v3-question.is-leaving .quiz-v3-choice input:checked + span { color: #fffcf5; background: #2e2c28; }
.quiz-v3-question.is-leaving .quiz-v3-choice input:not(:checked) + span { opacity: 0.45; }

/* Collection / corpus level: compact header, one session card, a short preview. */
.source-v3__kicker { margin: 0.2rem 0 0.3rem; }
.source-v3 .source-detail__header h1 { margin: 0; font-size: clamp(2rem, 8vw, 2.5rem); }
.source-v3 .source-level-picker { margin-top: 0; }
.source-v3 .source-level-picker label { min-height: 2.75rem; }
.source-v3__caret { color: #b88e4d; font-size: 0.55em; }
.source-v3__session {
  display: grid;
  gap: 1rem;
  padding: 1.1rem 1.1rem 1.2rem;
  border: 1px solid rgb(184 142 77 / 24%);
  border-radius: 1.5rem;
  background: #fffcf5;
  box-shadow: 0 0.7rem 1.8rem rgb(73 52 22 / 9%);
}
.source-v3__fan { display: flex; height: 6.25rem; align-items: center; justify-content: center; padding-top: 0.25rem; }
.source-v3__fan span {
  display: grid;
  width: 4.6rem;
  height: 5.6rem;
  margin-inline: -0.2rem;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgb(184 142 77 / 28%);
  border-radius: 0.95rem;
  color: #2e2c28;
  background: #f4ede0;
  box-shadow: 0 0.45rem 1rem rgb(73 52 22 / 10%);
  font-family: var(--v3-font-family-hanzi);
  font-size: min(1.7rem, 3.6rem / var(--hanzi-chars, 1));
  white-space: nowrap;
  transform: rotate(-7deg) translateY(0.3rem);
}
.source-v3__fan span:nth-child(2) { z-index: 1; border-color: rgb(215 195 158 / 30%); color: #d7c39e; background: #2e2c28; transform: none; }
.source-v3__fan span:nth-child(3) { transform: rotate(7deg) translateY(0.3rem); }
.source-v3__launch { max-width: none; gap: 0.9rem; }
.source-v3 .session-size { display: block; }
.source-v3 .session-size__options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.25rem; padding: 0.3rem; border-radius: 1.1rem; background: #eee6d7; }
.source-v3 .session-size span { min-height: 2.75rem; padding: 0.4rem; border: 0; border-radius: 0.85rem; color: var(--text-muted); background: transparent; }
.source-v3 .session-size input:checked + span { color: var(--text); background: #fffcf5; box-shadow: 0 0.2rem 0.6rem rgb(73 52 22 / 12%); }
.source-v3 .source-detail__study { max-width: none; }
.source-v3 .source-resume { width: 100%; min-height: 2.75rem; border-color: rgb(46 44 40 / 30%); border-radius: 1.1rem; background: transparent; }
.source-v3 .source-card-list { margin-top: 1.75rem; }
.source-v3 .source-card-list h2 { margin: 0 0 0.65rem; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.025em; }
.source-v3 .source-card-list ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; border: 0; }
.source-v3 .source-card-list li { display: grid; min-width: 0; grid-template-columns: none; align-content: start; gap: 0.1rem; padding: 0.8rem 0.9rem; border: 1px solid rgb(184 142 77 / 18%); border-radius: 1rem; background: #fffcf5; }
.source-v3 .source-card-list li strong { overflow: hidden; font-family: var(--v3-font-family-hanzi); font-size: 1.6rem; font-weight: 450; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.source-v3 .source-card-list li span { overflow: hidden; color: var(--text-muted); font-size: var(--v3-font-size-sm); line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.source-v3 .source-card-list li span:last-child { grid-column: auto; color: var(--text); }
.source-v3__more { display: flex; min-height: 2.75rem; align-items: center; justify-content: center; margin-top: 0.55rem; border: 1px solid rgb(184 142 77 / 24%); border-radius: 1rem; color: #2e2c28; font-size: var(--v3-font-size-sm); font-weight: 650; text-decoration: none; }
.source-v3__more:hover { border-color: rgb(184 142 77 / 45%); text-decoration: none; }
.source-v3__more[aria-busy="true"] { opacity: 0.6; pointer-events: none; }

/* Moonlight: same structure, emerald surfaces and champagne accents. */
html[data-theme="dark"] .quiz-v3 legend,
html[data-theme="dark"] .source-v3 .session-size legend,
html[data-theme="dark"] .source-v3__kicker,
html[data-theme="dark"] .quiz-v3-prompt p { color: #d7c39e; }
html[data-theme="dark"] .quiz-v3-help,
html[data-theme="dark"] .quiz-v3-exam small,
html[data-theme="dark"] .quiz-v3-bar__count,
html[data-theme="dark"] .source-v3 .source-card-list li span { color: #c5c1bc; }
html[data-theme="dark"] .quiz-v3-cta { border-color: #d7c39e; color: #171512; background: #d7c39e; box-shadow: 0 0.6rem 1.4rem rgb(0 0 0 / 22%); }
html[data-theme="dark"] .quiz-v3-cta:hover { border-color: #e2cfaa; background: #e2cfaa; }
html[data-theme="dark"] .quiz-v3-exam > span,
html[data-theme="dark"] .quiz-v3-choice > span,
html[data-theme="dark"] .quiz-v3-bar__leave,
html[data-theme="dark"] .source-v3__session,
html[data-theme="dark"] .source-v3 .source-card-list li { border-color: rgb(215 195 158 / 24%); color: #f8f4ea; background: #22201d; box-shadow: 0 0.55rem 1.35rem rgb(0 0 0 / 14%); }
html[data-theme="dark"] .quiz-v3-exam input:checked + span { border-color: rgb(215 195 158 / 55%); background: linear-gradient(135deg, #302d29 0, #3b3833 100%); }
html[data-theme="dark"] .quiz-v3-levels span { border-color: rgb(215 195 158 / 22%); color: #f8f4ea; background: rgb(255 255 255 / 5%); }
html[data-theme="dark"] .quiz-v3-levels input:checked + span { border-color: #d7c39e; color: #171512; background: #d7c39e; }
html[data-theme="dark"] .quiz-v3-counts,
html[data-theme="dark"] .source-v3 .session-size__options { background: rgb(255 255 255 / 6%); }
html[data-theme="dark"] .quiz-v3-counts span,
html[data-theme="dark"] .source-v3 .session-size span { color: #c5c1bc; }
html[data-theme="dark"] .quiz-v3-counts input:checked + span,
html[data-theme="dark"] .source-v3 .session-size input:checked + span { color: #171512; background: #d7c39e; box-shadow: none; }
html[data-theme="dark"] .quiz-v3-bar__track { background: rgb(255 255 255 / 10%); }
html[data-theme="dark"] .quiz-v3-bar__track span { background: #d7c39e; }
html[data-theme="dark"] .quiz-v3-streak__score strong { color: #d7c39e; }
html[data-theme="dark"] .quiz-v3-prompt { border-color: rgb(215 195 158 / 26%); color: #f8f4ea; background: radial-gradient(circle at 50% 0, rgb(215 195 158 / 14%) 0, rgb(34 32 29 / 0) 70%), linear-gradient(180deg, #272522 0, #1d1c1a 100%); box-shadow: 0 1rem 2.4rem rgb(0 0 0 / 24%), inset 0 1px 0 rgb(215 195 158 / 12%); }
html[data-theme="dark"] .numbers-v1-answer,
html[data-theme="dark"] .numbers-v1-date-answer { border-color: rgb(215 195 158 / 24%); color: #f8f4ea; background: #22201d; box-shadow: 0 0.55rem 1.35rem rgb(0 0 0 / 14%); }
html[data-theme="dark"] .numbers-v1-date-answer output { color: #f8f4ea; }
html[data-theme="dark"] .numbers-v1-pad button { border-color: rgb(215 195 158 / 24%); color: #f8f4ea; background: #22201d; box-shadow: 0 0.55rem 1.35rem rgb(0 0 0 / 14%); }
html[data-theme="dark"] .quiz-v3-choice > span::before { color: #d7c39e; background: rgb(215 195 158 / 12%); }
html[data-theme="dark"] .quiz-v3-choice input:checked + span { border-color: #d7c39e; background: #2f2c28; box-shadow: inset 0 0 0 1px #d7c39e, 0 0.4rem 1rem rgb(0 0 0 / 18%); }
html[data-theme="dark"] .quiz-v3-choice input:checked + span::before { color: #171512; background: #d7c39e; }
html[data-theme="dark"] .numbers-v1-clock__face { fill: #22201d; stroke: rgb(215 195 158 / 45%); }
html[data-theme="dark"] .numbers-v1-clock__hour,
html[data-theme="dark"] .numbers-v1-clock__minute { stroke: #f8f4ea; }
html[data-theme="dark"] .numbers-v1-clock__pin { fill: #d7c39e; }
html[data-theme="dark"] .numbers-v1-clock [data-clock-hour] { color: #d7c39e; }
html[data-theme="dark"] .numbers-v1-clock [data-clock-hour][aria-pressed="true"],
html[data-theme="dark"] .numbers-v1-clock-period button[aria-pressed="true"] { color: #171512; background: #d7c39e; }
html[data-theme="dark"] .numbers-v1-clock-controls button { border-color: rgb(215 195 158 / 24%); color: #f8f4ea; background: #22201d; }
html[data-theme="dark"] .numbers-v1-clock-period { background: rgb(255 255 255 / 6%); }
html[data-theme="dark"] .numbers-v1-clock-period button { color: #c5c1bc; }
html[data-theme="dark"] .quiz-v3-question.is-leaving .quiz-v3-choice input:checked + span { color: #171512; background: #d7c39e; }
html[data-theme="dark"] .source-v3__fan span { border-color: rgb(215 195 158 / 24%); color: #f8f4ea; background: #2f2c28; box-shadow: 0 0.45rem 1rem rgb(0 0 0 / 22%); }
html[data-theme="dark"] .source-v3__fan span:nth-child(2) { color: #171512; background: #d7c39e; }
html[data-theme="dark"] .source-v3 .source-card-list li span:last-child { color: #f8f4ea; }
html[data-theme="dark"] .source-v3 .source-resume { border-color: rgb(215 195 158 / 40%); color: #d7c39e; background: transparent; }
html[data-theme="dark"] .source-v3__more { border-color: rgb(215 195 158 / 26%); color: #d7c39e; }

/* Mobile session is immersive like Review: no header or tab bar, safe areas kept. */
@media (max-width: 52rem) {
  body:has(.quiz-v3--session) .site-header,
  body:has(.quiz-v3--session) .site-footer,
  body:has(.quiz-v3--session) .mobile-nav { display: none; }
  body:has(.quiz-v3--session) { padding-bottom: 0; }
  .page-shell:has(.quiz-v3--session) { margin-block: 0; padding-top: max(env(safe-area-inset-top), 1rem); padding-bottom: max(env(safe-area-inset-bottom), 1rem); }
  .quiz-v3--session { min-height: calc(100dvh - max(env(safe-area-inset-top), 1rem) - max(env(safe-area-inset-bottom), 1rem)); }
}

@media (max-width: 24rem) {
  .quiz-v3-choice > span { min-height: 3.3rem; }
  .quiz-v3-question { gap: 0.8rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .quiz-v3-question { animation: quiz-v3-in 320ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
  .quiz-v3-prompt strong { animation: quiz-v3-rise 420ms cubic-bezier(0.2, 0.8, 0.2, 1) 60ms backwards; }
  .quiz-v3-choice > span,
  .quiz-v3-exam > span,
  .quiz-v3-levels span,
  .quiz-v3-counts span,
  .source-v3 .session-size span { transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, opacity 160ms ease, transform 160ms ease; }
  .quiz-v3-choice:active > span,
  .quiz-v3-levels label:active span { transform: scale(0.98); }
  .quiz-v3-choice input:checked + span { animation: quiz-v3-pick 260ms ease-out; }
  .quiz-v3-bar__track span { transition: width 420ms cubic-bezier(0.2, 0.8, 0.2, 1); }
  .quiz-v3-question.is-leaving { animation: quiz-v3-out 220ms ease-in 120ms both; }
  @keyframes quiz-v3-in { from { opacity: 0; transform: translateX(1.5rem); } }
  @keyframes quiz-v3-rise { from { opacity: 0; transform: translateY(0.5rem) scale(0.94); } }
  @keyframes quiz-v3-pick { 45% { transform: scale(1.025); } }
  @keyframes quiz-v3-out { to { opacity: 0; transform: translateX(-1.5rem); } }
}

/* Learn V3 pass 3: Quiz result as one score card and a compact answer list. */
.quiz-v3-score {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1.1rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid rgb(215 195 158 / 24%);
  border-radius: 1.5rem;
  color: var(--v3-color-ivory);
  background: radial-gradient(circle at 12% 20%, rgb(215 195 158 / 20%) 0, rgb(215 195 158 / 0) 8rem), linear-gradient(135deg, #2e2c28 0, #383530 100%);
  box-shadow: 0 0.7rem 1.6rem rgb(43 41 37 / 16%);
}
.quiz-v3-score__ring { width: 5.25rem; height: 5.25rem; }
.quiz-v3-score__ring circle { stroke-width: 3.4; }
.quiz-v3-score__ring .home-progress-ring__track { stroke: rgb(255 255 255 / 14%); }
.quiz-v3-score__ring .home-progress-ring__value { stroke: #d7c39e; }
.quiz-v3-score__ring .home-progress-ring__value[stroke-dasharray^="0 "] { stroke: transparent; } /* a round cap would draw a dot at 0 % */
.quiz-v3-score__ring strong { color: #f8f4ea; font-size: 1rem; font-weight: 650; }
.quiz-v3-score .score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; margin: 0; }
.quiz-v3-score .score__value { color: #fffcf5; font-size: clamp(2.1rem, 9vw, 2.6rem); font-weight: 680; letter-spacing: -0.04em; line-height: 1; }
.quiz-v3-score .score > span:last-child { color: #d7c39e; font-size: 0.95rem; font-weight: 600; }
.quiz-v3-score__strip { display: flex; gap: 0.25rem; margin: 0.75rem 0 0; padding: 0; list-style: none; }
.quiz-v3-score__strip li { flex: 1; max-width: 1.6rem; height: 0.35rem; border-radius: 999px; background: rgb(229 139 135 / 75%); }
.quiz-v3-score__strip li.is-correct { background: #d7c39e; }
.quiz-v3-score__actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.6rem; margin: 0.85rem 0 1.5rem; }
.quiz-v3-score__actions .button--quiet { min-height: 3.35rem; border-color: rgb(184 142 77 / 30%); border-radius: 1.1rem; color: var(--text); background: #fffcf5; }
.quiz-v3-score--streak { grid-template-columns: minmax(0, 1fr); }
.quiz-v3-streak-result__stats { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin: 0.75rem 0 0; color: #d7c39e; font-size: var(--v3-font-size-sm); }
.quiz-v3-streak-result__stats strong { color: #fffcf5; }
.numbers-v1-new-run { margin: 0; }
.numbers-v1-new-run .quiz-v3-cta { height: 100%; }

.quiz-v3-results { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.quiz-v3-results--correct { margin-top: 0.5rem; }
.quiz-v3-result {
  position: relative;
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr) 1.75rem;
  align-items: center;
  column-gap: 0.85rem;
  padding: 0.7rem 0.85rem 0.7rem 0.75rem;
  border: 1px solid rgb(184 142 77 / 20%);
  border-radius: 1.1rem;
  background: #fffcf5;
  box-shadow: 0 0.25rem 0.8rem rgb(73 52 22 / 5%);
}
.quiz-v3-result > strong { grid-row: 1 / span 3; font-family: var(--v3-font-family-hanzi); font-size: clamp(1rem, 3.2rem / var(--hanzi-chars, 1), 1.55rem); font-weight: 450; line-height: 1.15; overflow-wrap: anywhere; text-align: center; white-space: normal; }
.quiz-v3-result__pinyin { color: #8a652f; font-size: 0.82rem; font-weight: 600; line-height: 1.2; }
.quiz-v3-result p { margin: 0; font-size: 0.95rem; font-weight: 560; line-height: 1.3; overflow-wrap: anywhere; }
.quiz-v3-result s { color: var(--danger); font-size: 0.85rem; font-weight: 500; text-decoration-thickness: 1px; }
.quiz-v3-result .quiz-v3-result__fix { color: var(--success); font-weight: 650; }
.quiz-v3-result__mark { display: grid; width: 1.75rem; height: 1.75rem; grid-column: 3; grid-row: 1 / span 3; place-items: center; border-radius: 999px; color: #fffcf5; background: #2e2c28; font-size: 0.8rem; font-weight: 700; }
.quiz-v3-result--incorrect { border-color: rgb(163 75 72 / 28%); }
.quiz-v3-result--incorrect .quiz-v3-result__mark { background: var(--danger); }
.numbers-v1 .quiz-v3-result { grid-template-columns: minmax(0, 1fr) 1.75rem; }
.numbers-v1 .quiz-v3-result > strong { grid-column: 1; grid-row: auto; overflow: visible; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.numbers-v1 .quiz-v3-result p { grid-column: 1; }
.numbers-v1 .quiz-v3-result__mark { grid-column: 2; }

html[data-theme="dark"] .quiz-v3-score { border-color: rgb(215 195 158 / 30%); background: radial-gradient(circle at 12% 20%, rgb(215 195 158 / 14%) 0, rgb(215 195 158 / 0) 8rem), linear-gradient(135deg, #302d29 0, #3b3833 100%); box-shadow: 0 0.6rem 1.4rem rgb(0 0 0 / 22%); }
html[data-theme="dark"] .quiz-v3-score__actions .button--quiet { border-color: rgb(215 195 158 / 40%); color: #d7c39e; background: transparent; }
html[data-theme="dark"] .quiz-v3-result { border-color: rgb(215 195 158 / 20%); color: #f8f4ea; background: #22201d; box-shadow: none; }
html[data-theme="dark"] .quiz-v3-result__pinyin { color: #d7c39e; }
html[data-theme="dark"] .quiz-v3-result--incorrect { border-color: rgb(229 139 135 / 35%); }
html[data-theme="dark"] .quiz-v3-result__mark { color: #171512; background: #87b79d; }
html[data-theme="dark"] .quiz-v3-result--incorrect .quiz-v3-result__mark { color: #2a1615; background: #e58b87; }

/* Cards V3: Catalogue and My Cards on the Learn V3 surfaces. Scoped to .cards-v3; legacy card rules stay for other pages. */
.cards-v3 .cards-hub-header { display: grid; justify-content: stretch; gap: 0.85rem; margin-bottom: 1rem; }
.cards-v3 .segmented-control { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25rem; padding: 0.3rem; border: 0; border-radius: 1.1rem; background: #eee6d7; }
.cards-v3 .segmented-control a { display: grid; min-height: 2.6rem; place-items: center; padding-inline: 0.75rem; border-radius: 0.85rem; color: var(--text-muted); font-size: 0.95rem; font-weight: 600; text-decoration: none; }
.cards-v3 .segmented-control a[aria-current="page"] { color: var(--text); background: #fffcf5; box-shadow: 0 0.2rem 0.6rem rgb(73 52 22 / 12%); }
.cards-v3 .segmented-control a:focus-visible { outline: 2px solid var(--v3-color-focus); outline-offset: 2px; }

.cards-v3 .catalogue-search { margin-bottom: 0.6rem; }
.cards-v3 .form-field--search { position: relative; margin: 0; }
.cards-v3 .form-field--search svg { position: absolute; top: 50%; left: 0.95rem; width: 1.15rem; height: 1.15rem; fill: none; stroke: #b88e4d; stroke-width: 2; stroke-linecap: round; pointer-events: none; transform: translateY(-50%); }
.cards-v3 .form-field--search input { width: 100%; min-height: 3rem; padding: 0.6rem 1rem 0.6rem 2.65rem; border: 1px solid rgb(184 142 77 / 26%); border-radius: 1.1rem; color: var(--text); background: #fffcf5; box-shadow: 0 0.3rem 0.9rem rgb(73 52 22 / 6%); font-size: 1rem; }
.cards-v3 .form-field--search input::placeholder { color: #8f877a; }
.cards-v3 .form-field--search input:focus { border-color: #2e2c28; outline: 2px solid var(--v3-color-focus); outline-offset: 1px; }

/* Filters without horizontal scroll: three equal state toggles, then the result count with a compact corpus toggle. */
.cards-v3 .browse-vocabulary { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "search search" "states states" "count scope"; align-items: center; column-gap: 0.75rem; margin-bottom: 0.85rem; }
.cards-v3 .catalogue-search { grid-area: search; }
.cards-v3__filters { display: contents; }
.cards-v3 .catalogue-state-filters { display: grid; grid-area: states; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 0.4rem; margin: 0 0 0.75rem; }
.cards-v3 .catalogue-state-filters .button { min-width: 0; min-height: 2.6rem; padding: 0 0.5rem; border: 1px solid rgb(184 142 77 / 22%); border-radius: 0.95rem; color: var(--text-muted); background: transparent; box-shadow: none; font-size: 0.9rem; font-weight: 600; white-space: nowrap; }
.cards-v3 .catalogue-state-filters .is-active { border-color: rgb(184 142 77 / 26%); color: #2e2c28; background: #fffcf5; box-shadow: 0 0.3rem 0.9rem rgb(73 52 22 / 7%); }
.cards-v3 .catalogue-scope-filters { display: flex; grid-area: scope; gap: 0.15rem; margin: 0; padding: 0.2rem; border: 0; border-radius: 0.8rem; background: #eee6d7; }
.cards-v3 .catalogue-scope-filters .button { min-width: 0; min-height: 2rem; padding: 0 0.7rem; border: 0; border-radius: 0.6rem; color: var(--text-muted); background: transparent; box-shadow: none; font-size: 0.78rem; font-weight: 650; }
.cards-v3 .catalogue-scope-filters .is-active { color: #2e2c28; background: #fffcf5; box-shadow: 0 0.15rem 0.4rem rgb(73 52 22 / 10%); }
.cards-v3 .catalogue-result-count { grid-area: count; margin: 0; color: #8a652f; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.13em; line-height: 1.1; text-transform: uppercase; }

/* Tiles: the Free Study preview card, with room for the hanzi and one quiet action. */
.cards-v3 .card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.cards-v3 .card-grid > li { height: 100%; min-width: 0; }
.cards-v3 .flashcard { display: flex; height: 100%; min-height: 0; flex-direction: column; padding: 0.9rem 0.95rem 0.85rem; border: 1px solid rgb(184 142 77 / 20%); border-radius: 1.1rem; color: var(--text); background: #fffcf5; box-shadow: 0 0.35rem 1rem rgb(73 52 22 / 6%); }
.cards-v3 .flashcard .flashcard__character { margin: 0; color: var(--text); font-family: var(--v3-font-family-hanzi); font-size: 2.4rem; font-weight: 450; letter-spacing: 0; line-height: 1.15; overflow-wrap: anywhere; }
.cards-v3 .flashcard.catalogue-card--hanzi-medium .flashcard__character { font-size: 1.9rem; }
.cards-v3 .flashcard.catalogue-card--hanzi-long .flashcard__character { font-size: 1.5rem; }
.cards-v3 .flashcard .flashcard__pinyin { margin: 0.3rem 0 0; color: var(--text-muted); font-size: 0.9rem; font-weight: 500; }
.cards-v3 .flashcard .flashcard__translation { display: -webkit-box; margin: 0.1rem 0 0; overflow: hidden; color: var(--text); font-size: 0.92rem; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.cards-v3 .flashcard .metadata { margin-top: 0.55rem; color: #8a652f; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.06em; line-height: 1.35; text-transform: uppercase; }
.cards-v3 .flashcard .flashcard__actions { display: flex; margin-top: auto; padding-top: 0.75rem; }
.cards-v3 .saved-card-form { width: 100%; }
.cards-v3 .saved-card-form .button { width: 100%; min-height: 2.35rem; border: 1px solid rgb(46 44 40 / 22%); border-radius: 0.85rem; color: #2e2c28; background: transparent; box-shadow: none; font-size: 0.85rem; font-weight: 650; }
.cards-v3 .saved-card-form .button[aria-pressed="true"] { border-color: transparent; background: #eadfc9; }

/* My Cards: the count reads like the Catalogue's; one toolbar card (select all, count, full-width jade CTA), then the same tiles. */
.cards-v3 .cards-subheader { margin: 0 0 0.7rem; }
.cards-v3 .cards-subheader p { margin: 0.15rem 0 0; color: #8a652f; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.13em; line-height: 1.1; text-transform: uppercase; }
.cards-v3 .my-cards-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.65rem 0.75rem; margin-bottom: 0.9rem; padding: 0.8rem 0.8rem 0.8rem 0.95rem; border: 1px solid rgb(184 142 77 / 22%); border-radius: 1.25rem; background: #fffcf5; box-shadow: 0 0.55rem 1.35rem rgb(73 52 22 / 8%); }
.cards-v3 .my-cards-toolbar > p { grid-column: 1 / -1; margin: 0; color: var(--v3-color-danger); font-size: var(--v3-font-size-sm); }
/* The form only groups the CTA and its live count for submission; its children join the toolbar grid. */
.cards-v3 .my-cards-toolbar form { display: contents; }
.cards-v3 .my-cards-toolbar [data-selection-count] { grid-column: 2; grid-row: 1; color: var(--text-muted); font-size: 0.82rem; white-space: nowrap; }
.cards-v3 .my-cards-toolbar .quiz-v3-cta { grid-column: 1 / -1; min-height: 3rem; box-shadow: none; font-size: 1rem; }
.cards-v3 .my-cards-toolbar .quiz-v3-cta:disabled { opacity: 0.45; }
.cards-v3 .my-card-select { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--text); font-size: 0.88rem; font-weight: 600; cursor: pointer; }
.cards-v3 .my-card-select input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: #2e2c28; }
.cards-v3 .my-card:has(input[data-card-id]:checked) { border-color: #2e2c28; background: #f6efe1; box-shadow: inset 0 0 0 1px #2e2c28; }
.cards-v3 .my-card .flashcard__actions { flex-direction: row; align-items: center; justify-content: space-between; gap: 0.4rem; }
.cards-v3 .my-card .flashcard__actions .button { min-width: 0; min-height: 2.25rem; padding: 0 0.4rem; border: 0; color: var(--v3-color-danger); background: transparent; box-shadow: none; font-size: 0.8rem; font-weight: 600; }
/* Two-column cards are too narrow for Select, Lists and Remove on one row. */
.cards-v3 .my-card .flashcard__actions { flex-wrap: wrap; row-gap: 0; }
.cards-v3 .my-card .flashcard__actions .my-card-select { flex-basis: 100%; min-height: 2.25rem; }
.cards-v3 .my-card .flashcard__actions .button { padding-inline: 0; }
.cards-v3 .my-card .flashcard__actions a.button { color: #2e2c28; }

.cards-v3 .pagination { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 1.1rem; }
.cards-v3 .pagination > span { flex: 1; color: var(--text-muted); font-size: 0.85rem; text-align: center; }
.cards-v3 .pagination .button { min-height: 2.75rem; padding: 0 1rem; border: 1px solid rgb(184 142 77 / 24%); border-radius: 1rem; color: #2e2c28; background: #fffcf5; box-shadow: none; font-size: 0.9rem; font-weight: 650; }

.cards-v3 .empty-state { display: grid; justify-items: center; gap: 0.45rem; padding: 1.75rem 1.25rem 1.4rem; border: 1px solid rgb(184 142 77 / 22%); border-radius: 1.5rem; background: #fffcf5; box-shadow: 0 0.7rem 1.8rem rgb(73 52 22 / 9%); text-align: center; }
.cards-v3__empty-art { display: grid; width: 3.5rem; height: 3.5rem; place-items: center; margin-bottom: 0.35rem; border: 1px solid rgb(215 195 158 / 28%); border-radius: 1rem; color: #d7c39e; background: #2e2c28; font-family: var(--v3-font-family-hanzi); font-size: 1.7rem; line-height: 1; transform: rotate(-4deg); }
.cards-v3 .empty-state h2 { margin: 0; font-size: 1.2rem; font-weight: 620; letter-spacing: -0.03em; }
.cards-v3 .empty-state p { max-width: 18rem; margin: 0; color: var(--text-muted); font-size: 0.92rem; }
.cards-v3 .empty-state .quiz-v3-cta { display: grid; place-items: center; margin-top: 0.75rem; text-decoration: none; }

@media (min-width: 40rem) {
  .cards-v3 .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

html[data-theme="dark"] .cards-v3 .segmented-control { background: rgb(255 255 255 / 6%); }
html[data-theme="dark"] .cards-v3 .segmented-control a { color: #c5c1bc; }
html[data-theme="dark"] .cards-v3 .segmented-control a[aria-current="page"] { color: #171512; background: #d7c39e; box-shadow: none; }
html[data-theme="dark"] .cards-v3 .form-field--search svg { stroke: #d7c39e; }
html[data-theme="dark"] .cards-v3 .form-field--search input { border-color: rgb(215 195 158 / 26%); color: #f8f4ea; background: #22201d; box-shadow: none; }
html[data-theme="dark"] .cards-v3 .form-field--search input::placeholder { color: #f8f4ea; }
html[data-theme="dark"] .cards-v3 .catalogue-state-filters .button { border-color: rgb(215 195 158 / 20%); color: #c5c1bc; background: transparent; box-shadow: none; }
html[data-theme="dark"] .cards-v3 .catalogue-state-filters .is-active { border-color: rgb(215 195 158 / 30%); color: #f8f4ea; background: #22201d; }
html[data-theme="dark"] .cards-v3 .catalogue-scope-filters { background: rgb(255 255 255 / 6%); }
html[data-theme="dark"] .cards-v3 .catalogue-scope-filters .button { color: #c5c1bc; background: transparent; }
html[data-theme="dark"] .cards-v3 .catalogue-scope-filters .is-active { color: #171512; background: #d7c39e; box-shadow: none; }
html[data-theme="dark"] .cards-v3 .catalogue-result-count,
html[data-theme="dark"] .cards-v3 .cards-subheader p,
html[data-theme="dark"] .cards-v3 .flashcard .metadata { color: #d7c39e; }
html[data-theme="dark"] .cards-v3 .flashcard,
html[data-theme="dark"] .cards-v3 .my-cards-toolbar,
html[data-theme="dark"] .cards-v3 .empty-state,
html[data-theme="dark"] .cards-v3 .pagination .button { border-color: rgb(215 195 158 / 24%); color: #f8f4ea; background: #22201d; box-shadow: 0 0.55rem 1.35rem rgb(0 0 0 / 14%); }
html[data-theme="dark"] .cards-v3 .flashcard .flashcard__character,
html[data-theme="dark"] .cards-v3 .flashcard .flashcard__translation,
html[data-theme="dark"] .cards-v3 .my-card-select { color: #f8f4ea; }
html[data-theme="dark"] .cards-v3 .flashcard .flashcard__pinyin,
html[data-theme="dark"] .cards-v3 .empty-state p,
html[data-theme="dark"] .cards-v3 .pagination > span,
html[data-theme="dark"] .cards-v3 .my-cards-toolbar [data-selection-count] { color: #c5c1bc; }
html[data-theme="dark"] .cards-v3 .saved-card-form .button,
html[data-theme="dark"] .cards-v3 .pagination .button { border-color: rgb(215 195 158 / 34%); color: #d7c39e; }
html[data-theme="dark"] .cards-v3 .saved-card-form .button { background: transparent; }
html[data-theme="dark"] .cards-v3 .saved-card-form .button[aria-pressed="true"] { border-color: transparent; background: rgb(215 195 158 / 16%); }
html[data-theme="dark"] .cards-v3 .my-card-select input { accent-color: #d7c39e; }
html[data-theme="dark"] .cards-v3 .my-card:has(input[data-card-id]:checked) { border-color: #d7c39e; background: #2f2c28; box-shadow: inset 0 0 0 1px #d7c39e; }
html[data-theme="dark"] .cards-v3 .my-cards-toolbar .quiz-v3-cta:disabled { color: #171512; }
html[data-theme="dark"] .cards-v3 .my-card .flashcard__actions .button { color: #e58b87; }
html[data-theme="dark"] .cards-v3 .my-card .flashcard__actions a.button { color: #d7c39e; }

/* My Cards lists: pills wrap instead of scrolling; lists never touch the SRS. */
.choice-row[aria-checked="true"] { border-color: var(--jade); background: var(--primary-soft); }
.my-card-lists { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem; margin-bottom: 1rem; }
.my-card-lists .is-active { border-color: var(--primary); color: var(--primary-dark); background: var(--primary-soft); }
.my-card-lists__new > summary { list-style: none; cursor: pointer; }
.my-card-lists__new > summary::-webkit-details-marker { display: none; }
.my-card-lists__new[open] { flex-basis: 100%; }
.my-card-lists__form { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.my-card-lists__form input { flex: 1; min-width: 0; }
.my-cards-toolbar--list { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.my-cards-toolbar--list form { width: auto; }
.saved-card-status.saved-card-status--added { color: var(--text-muted); }
.saved-card-status--added a { font-weight: 600; }
.card-lists-header { display: grid; gap: 0.25rem; justify-items: start; }
.card-lists-header h1 { margin: 0.5rem 0 0; }
.card-lists-header__label { color: var(--text-muted); font-size: 0.6em; font-weight: 600; }

/* Progress V3: one vocabulary card (ring, stacked bar, legend, jade CTA), Home's stat strip, then one card per curriculum. Scoped to .progress-v3. */
.progress-v3-hero,
.progress-v3-curriculum,
.progress-v3-badges { border: 1px solid rgb(184 142 77 / 20%); border-radius: 1.35rem; background: #fffcf5; box-shadow: 0 0.35rem 1rem rgb(73 52 22 / 6%); }
.progress-v3-hero { padding: 1.15rem 1.2rem 1.2rem; }
.progress-v3-hero__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.progress-v3-hero__copy { display: grid; min-width: 0; gap: 0.15rem; }
.progress-v3-hero__copy h2 { margin: 0; color: #8a652f; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.13em; line-height: 1.1; text-transform: uppercase; }
.progress-v3-hero__copy strong { margin-top: 0.15rem; font-size: 1.6rem; font-weight: 640; letter-spacing: -0.035em; line-height: 1.05; }
.progress-v3-hero__copy span { color: var(--text-muted); font-size: var(--v3-font-size-sm); line-height: 1.2; }
.progress-v3 .home-progress-ring { width: 4rem; height: 4rem; }

.progress-v3-bar { display: block; width: 100%; height: 0.5rem; margin-top: 1.1rem; overflow: hidden; border-radius: 999px; }
.progress-v3-bar__track { fill: #efe7d8; }
.progress-v3-bar__unseen { fill: #b9c4be; }
.progress-v3-bar__seen { fill: #cdb98f; }
.progress-v3-bar__mastered { fill: #0b4b38; }
.progress-v3-bar__due { fill: var(--v3-color-state-not-started); }

.progress-v3-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1rem; margin: 1rem 0 0; }
.progress-v3-legend__item { min-width: 0; }
.progress-v3-legend dt { display: flex; align-items: center; gap: 0.4rem; color: var(--text-muted); font-size: 0.78rem; }
.progress-v3-legend dt::before { width: 0.55rem; height: 0.55rem; flex: 0 0 auto; border-radius: 50%; content: ""; }
.progress-v3-legend__item--mastered dt::before { background: #0b4b38; }
.progress-v3-legend__item--learning dt::before { background: #cdb98f; }
.progress-v3-legend__item--due dt::before { background: var(--v3-color-state-not-started); }
.progress-v3-legend__item--unseen dt::before { background: #b9c4be; }
.progress-v3-legend dd { margin: 0.15rem 0 0; font-size: 1.3rem; font-weight: 620; letter-spacing: -0.03em; line-height: 1.1; }

.progress-v3-hero__cta { margin-top: 1.1rem; }
.progress-v3-note { margin: 0.9rem 0 0; color: var(--text-muted); font-size: 0.76rem; line-height: 1.4; }

.progress-v3-activity small { margin-top: 0.15rem; color: var(--text-muted); font-size: 0.64rem; }

.progress-v3-curricula { display: grid; gap: 0.65rem; }
.progress-v3-curriculum > summary { display: flex; min-height: 4.25rem; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 0.9rem 1.2rem; cursor: pointer; list-style: none; }
.progress-v3-curriculum > summary::-webkit-details-marker { display: none; }
.progress-v3-curriculum > summary > span { display: grid; min-width: 0; gap: 0.1rem; }
.progress-v3-curriculum > summary strong { font-size: 1.1rem; font-weight: 640; letter-spacing: -0.025em; }
.progress-v3-curriculum > summary small { color: var(--text-muted); font-size: 0.8rem; }
.progress-v3-curriculum > summary::after { width: 0.5rem; height: 0.5rem; flex: 0 0 auto; margin-right: 0.2rem; border-right: 2px solid #b88e4d; border-bottom: 2px solid #b88e4d; content: ""; transform: rotate(45deg) translate(-0.1rem, -0.1rem); }
.progress-v3-curriculum[open] > summary::after { transform: rotate(-135deg) translate(-0.1rem, -0.1rem); }
.progress-v3-curriculum > summary:focus-visible { border-radius: 1.35rem; outline: 2px solid var(--v3-color-focus); outline-offset: 2px; }
.progress-v3-curriculum > .progress-v3-note { margin: 0; padding: 0 1.2rem 1rem; }

.progress-v3 .progress-data-list { margin: 0 1.2rem; border-top: 1px solid rgb(184 142 77 / 16%); }
.progress-v3 .progress-data-row { border-bottom: 1px solid rgb(184 142 77 / 12%); }
.progress-v3 .progress-data-row:last-child { border-bottom: 0; }
.progress-v3 .progress-data-row > summary { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem 2.6rem 1rem; min-height: 3rem; gap: 0.6rem; padding: 0.55rem 0; }
.progress-v3 .progress-data-row > summary span { font-size: 0.95rem; font-weight: 600; }
.progress-v3 .progress-data-row > summary strong { font-size: 0.85rem; font-weight: 620; text-align: right; }
.progress-v3 .progress-data-row > summary::after { color: #b88e4d; text-align: right; }
.progress-v3 .progress-v3-bar--row { height: 0.35rem; margin: 0; }
.progress-v3 .progress-data-grid { gap: 0.75rem; padding: 0.15rem 0 0.9rem; }
.progress-v3 .progress-data-grid dt { font-size: 0.72rem; }

html[data-theme="dark"] .progress-v3-hero,
html[data-theme="dark"] .progress-v3-curriculum,
html[data-theme="dark"] .progress-v3-badges { border-color: rgb(215 195 158 / 26%); color: #f8f4ea; background: #22201d; box-shadow: 0 0.55rem 1.35rem rgb(0 0 0 / 14%); }
html[data-theme="dark"] .progress-v3-hero__copy h2 { color: #d7c39e; }
html[data-theme="dark"] .progress-v3-hero__copy span,
html[data-theme="dark"] .progress-v3-legend dt,
html[data-theme="dark"] .progress-v3-note,
html[data-theme="dark"] .progress-v3-activity small,
html[data-theme="dark"] .progress-v3-curriculum > summary small,
html[data-theme="dark"] .progress-v3 .progress-data-grid dt { color: #c5c1bc; }
html[data-theme="dark"] .progress-v3-bar__track { fill: rgb(255 255 255 / 10%); }
html[data-theme="dark"] .progress-v3-bar__seen { fill: #e6d3a8; }
html[data-theme="dark"] .progress-v3-bar__due { fill: #ef8a6f; }
html[data-theme="dark"] .progress-v3-bar__unseen { fill: #645e56; }
html[data-theme="dark"] .progress-v3-bar__mastered,
html[data-theme="dark"] .progress-v3-legend__item--mastered dt::before { fill: #7fd4a8; background: #7fd4a8; }
html[data-theme="dark"] .progress-v3-legend__item--learning dt::before { background: #e6d3a8; }
html[data-theme="dark"] .progress-v3-legend__item--due dt::before { background: #ef8a6f; }
html[data-theme="dark"] .progress-v3-legend__item--unseen dt::before { background: #645e56; }
html[data-theme="dark"] .progress-v3-curriculum > summary::after { border-color: #d7c39e; }
html[data-theme="dark"] .progress-v3 .progress-data-list,
html[data-theme="dark"] .progress-v3 .progress-data-row { border-color: rgb(215 195 158 / 16%); }
html[data-theme="dark"] .progress-v3 .progress-data-row > summary::after { color: #d7c39e; }

/* Progress More data: one quiet toggle under Learning activity opens every detailed card. */
.progress-v3-more { margin-top: 0.75rem; }
.progress-v3-more > summary { display: flex; min-height: 3rem; align-items: center; justify-content: center; gap: 0.55rem; border: 1px solid rgb(184 142 77 / 26%); border-radius: 1.1rem; color: #2e2c28; background: #fffcf5; box-shadow: 0 0.3rem 0.9rem rgb(73 52 22 / 6%); font-size: 0.95rem; font-weight: 650; cursor: pointer; list-style: none; }
.progress-v3-more > summary::-webkit-details-marker { display: none; }
.progress-v3-more > summary::after { width: 0.45rem; height: 0.45rem; border-right: 2px solid #b88e4d; border-bottom: 2px solid #b88e4d; content: ""; transform: rotate(45deg) translateY(-0.15rem); }
.progress-v3-more[open] > summary::after { transform: rotate(-135deg) translateY(-0.1rem); }
.progress-v3-more > summary:focus-visible { outline: 2px solid var(--v3-color-focus); outline-offset: 2px; }
.progress-v3-more > .progress-v3-curricula { margin-top: 0.75rem; }
.progress-v3 .progress-v3-games { margin: 0 1.2rem; padding-top: 0.85rem; border-top: 1px solid rgb(184 142 77 / 16%); }
.progress-v3-curriculum > .progress-v3-note { padding-top: 0.75rem; }

/* Badges: a medal per family, gold once earned, greyed with progress until then. */
.progress-v3-badges { display: block; padding: 1rem 1.1rem 1.05rem; color: var(--text); text-decoration: none; }
.progress-v3-badges:hover { text-decoration: none; }
.progress-v3-badges:focus-visible { outline: 2px solid var(--v3-color-focus); outline-offset: 2px; }
.progress-v3-badges__count { color: var(--text-muted); font-size: var(--v3-font-size-sm); }
.progress-v3-badges__count strong { color: var(--text); font-size: 1.2rem; font-weight: 640; letter-spacing: -0.03em; }
.badge-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.badge-grid--spotlight { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.35rem; margin-top: 0.85rem; }
.badge-tile { display: grid; min-width: 0; align-content: start; justify-items: center; gap: 0.2rem; padding: 0.85rem 0.4rem 0.8rem; border: 1px solid rgb(184 142 77 / 16%); border-radius: 1rem; background: #fffcf5; text-align: center; }
.badge-grid--spotlight .badge-tile { padding: 0.2rem 0; border: 0; background: transparent; }
.badge-tile__medal { display: grid; width: 3rem; height: 3rem; margin-bottom: 0.3rem; place-items: center; border-radius: 50%; color: #a89f8f; background: #efe7d8; }
.badge-tile__medal svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.badge-tile--earned .badge-tile__medal { color: #0b4b38; background: linear-gradient(145deg, #efdfba, #c9a86a); box-shadow: 0 0.3rem 0.75rem rgb(160 120 50 / 24%); }
.badge-tile strong { min-width: 0; color: var(--text-muted); font-size: 0.78rem; font-weight: 620; line-height: 1.15; overflow-wrap: anywhere; }
.badge-tile--earned strong { color: var(--text); }
.badge-tile__status { color: var(--text-muted); font-size: 0.68rem; font-weight: 600; }
.badge-tile--earned .badge-tile__status { color: #8a652f; }
.badge-tile small { color: var(--text-muted); font-size: 0.66rem; line-height: 1.25; }
.progress-v3-badge-family { margin-top: 1.5rem; }
.progress-v3-badge-family .home-section__heading span { color: var(--text-muted); font-size: var(--v3-font-size-sm); }

/* New badge banner: shown once, on the page after the action that earned it. */
.badge-banner { display: flex; width: 100%; max-width: 42rem; align-items: center; gap: 0.75rem; margin: 0 auto 1rem; padding: 0.75rem 1rem; border-radius: 1.1rem; color: #fffcf5; background: #0b4b38; box-shadow: 0 0.6rem 1.4rem rgb(11 75 56 / 18%); text-decoration: none; }
.badge-banner:hover { color: #fffcf5; text-decoration: none; }
.badge-banner:focus-visible { outline: 2px solid var(--v3-color-focus); outline-offset: 2px; }
.badge-banner__medal { display: grid; width: 2.4rem; height: 2.4rem; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #0b4b38; background: linear-gradient(145deg, #efdfba, #c9a86a); }
.badge-banner__medal svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.badge-banner__copy { display: grid; min-width: 0; flex: 1; gap: 0.05rem; }
.badge-banner__copy small { color: #d7c39e; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; }
.badge-banner__copy strong { overflow-wrap: anywhere; font-size: 0.95rem; font-weight: 640; }
.badge-banner__arrow { color: #d7c39e; font-size: 1.2rem; }

html[data-theme="dark"] .progress-v3-more > summary { border-color: rgb(215 195 158 / 26%); color: #d7c39e; background: #22201d; box-shadow: none; }
html[data-theme="dark"] .progress-v3-more > summary::after { border-color: #d7c39e; }
html[data-theme="dark"] .progress-v3 .progress-v3-games { border-color: rgb(215 195 158 / 16%); }
html[data-theme="dark"] .progress-v3-badges__count,
html[data-theme="dark"] .badge-tile strong,
html[data-theme="dark"] .badge-tile__status,
html[data-theme="dark"] .badge-tile small,
html[data-theme="dark"] .progress-v3-badge-family .home-section__heading span { color: #c5c1bc; }
html[data-theme="dark"] .progress-v3-badges__count strong,
html[data-theme="dark"] .badge-tile--earned strong { color: #f8f4ea; }
html[data-theme="dark"] .badge-tile { border-color: rgb(215 195 158 / 22%); background: #22201d; }
html[data-theme="dark"] .badge-grid--spotlight .badge-tile { background: transparent; }
html[data-theme="dark"] .badge-tile__medal { color: #7f9a8d; background: rgb(255 255 255 / 8%); }
html[data-theme="dark"] .badge-tile--earned .badge-tile__medal { color: #171512; background: linear-gradient(145deg, #efdfba, #c9a86a); box-shadow: 0 0.3rem 0.75rem rgb(0 0 0 / 24%); }
html[data-theme="dark"] .badge-tile--earned .badge-tile__status { color: #d7c39e; }
html[data-theme="dark"] .badge-banner { color: #171512; background: #d7c39e; box-shadow: 0 0.6rem 1.4rem rgb(0 0 0 / 22%); }
html[data-theme="dark"] .badge-banner__medal { color: #d7c39e; background: #171512; }
html[data-theme="dark"] .badge-banner__copy small,
html[data-theme="dark"] .badge-banner__arrow { color: #2e2c28; }

/* Settings V3: profile, then two short cards of segmented choices and one switch, all on one screen. Scoped to .settings-v3. */
.settings-v3 .learn-v3__header { margin-bottom: 1rem; }
.settings-v3-profile { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1rem; }
.settings-v3-profile__avatar { display: grid; width: 3rem; height: 3rem; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #fffcf5; background: #2e2c28; font-size: 1.2rem; font-weight: 640; }
.settings-v3-profile__name { display: grid; min-width: 0; gap: 0.1rem; }
.settings-v3-profile__name strong { overflow: hidden; font-size: 1.1rem; font-weight: 640; letter-spacing: -0.02em; text-overflow: ellipsis; white-space: nowrap; }
.settings-v3-profile__name small { overflow: hidden; color: var(--text-muted); font-size: 0.85rem; text-overflow: ellipsis; white-space: nowrap; }

.settings-v3-card { margin-bottom: 0.85rem; border: 1px solid rgb(184 142 77 / 20%); border-radius: 1.35rem; background: #fffcf5; box-shadow: 0 0.35rem 1rem rgb(73 52 22 / 6%); }
.settings-v3-row { display: grid; gap: 0.55rem; margin: 0; padding: 0.95rem 1.1rem; }
.settings-v3-row + .settings-v3-row { border-top: 1px solid rgb(184 142 77 / 14%); }
.settings-v3-row h2 { margin: 0; color: #8a652f; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.13em; line-height: 1.1; text-transform: uppercase; }

.settings-v3-segments { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25rem; margin: 0; padding: 0.3rem; border-radius: 1.1rem; background: #eee6d7; }
.settings-v3-segments--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.settings-v3 .settings-v3-segment { display: flex; min-width: 0; min-height: 2.6rem; align-items: center; justify-content: center; gap: 0.4rem; padding: 0 0.6rem; border: 0; border-radius: 0.85rem; color: var(--text-muted); background: transparent; box-shadow: none; font-size: 0.95rem; font-weight: 600; }
.settings-v3 .settings-v3-segment[aria-pressed="true"] { color: var(--text); background: #fffcf5; box-shadow: 0 0.2rem 0.6rem rgb(73 52 22 / 12%); }
.settings-v3 .settings-v3-segment:focus-visible { outline: 2px solid var(--v3-color-focus); outline-offset: 2px; }
.settings-v3-segment span[lang] { font-size: 1.05rem; font-weight: 500; }

.settings-v3 .settings-v3-switch { display: flex; width: 100%; min-height: 0; align-items: center; justify-content: space-between; gap: 1rem; padding: 0; border: 0; color: var(--text); background: transparent; box-shadow: none; text-align: left; }
.settings-v3-switch > span:first-child { display: grid; gap: 0.15rem; }
.settings-v3-switch strong { font-size: 1rem; font-weight: 620; }
.settings-v3-switch small { color: var(--text-muted); font-size: 0.8rem; font-weight: 400; }
.settings-v3-switch__track { position: relative; width: 3.1rem; height: 1.9rem; flex: 0 0 auto; border-radius: 999px; background: #d9cfbd; transition: background-color 160ms ease; }
.settings-v3-switch__track::after { position: absolute; top: 0.2rem; left: 0.2rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #fffcf5; box-shadow: 0 0.1rem 0.3rem rgb(0 0 0 / 18%); content: ""; transition: transform 160ms ease; }
.settings-v3-switch[aria-checked="true"] .settings-v3-switch__track { background: #2e2c28; }
.settings-v3-switch[aria-checked="true"] .settings-v3-switch__track::after { transform: translateX(1.2rem); }
.settings-v3 .settings-v3-switch:focus-visible { border-radius: 0.6rem; outline: 2px solid var(--v3-color-focus); outline-offset: 4px; }

.settings-v3-note { margin: 0; color: var(--text-muted); font-size: 0.8rem; }
.settings-v3-signout { margin-top: 0.4rem; }
.settings-v3 .settings-v3-signout button { width: 100%; min-height: 3rem; border: 1px solid rgb(184 142 77 / 20%); border-radius: 1.35rem; color: var(--v3-color-danger); background: #fffcf5; box-shadow: none; font-weight: 600; }

html[data-theme="dark"] .settings-v3-card,
html[data-theme="dark"] .settings-v3 .settings-v3-signout button { border-color: rgb(215 195 158 / 26%); background: #22201d; box-shadow: 0 0.55rem 1.35rem rgb(0 0 0 / 14%); }
html[data-theme="dark"] .settings-v3-row + .settings-v3-row { border-color: rgb(215 195 158 / 16%); }
html[data-theme="dark"] .settings-v3-row h2 { color: #d7c39e; }
html[data-theme="dark"] .settings-v3-profile__avatar { color: #171512; background: #d7c39e; }
html[data-theme="dark"] .settings-v3-profile__name small,
html[data-theme="dark"] .settings-v3-switch small { color: #c5c1bc; }
html[data-theme="dark"] .settings-v3-segments { background: rgb(255 255 255 / 6%); }
html[data-theme="dark"] .settings-v3 .settings-v3-segment { color: #c5c1bc; }
html[data-theme="dark"] .settings-v3 .settings-v3-segment[aria-pressed="true"] { color: #171512; background: #d7c39e; box-shadow: none; }
html[data-theme="dark"] .settings-v3 .settings-v3-switch { color: #f8f4ea; }
html[data-theme="dark"] .settings-v3-switch__track { background: rgb(255 255 255 / 16%); }
html[data-theme="dark"] .settings-v3-switch[aria-checked="true"] .settings-v3-switch__track { background: #7fd4a8; }
html[data-theme="dark"] .settings-v3 .settings-v3-signout button { color: #ef8a6f; }

/* Home, light mobile: the welcome band floats as its own card instead of hanging from the ivory header. */
@media (max-width: 52rem) {
  html:not([data-theme="dark"]) .home-welcome { margin: var(--space-3) 0 0; border-top: 1px solid rgb(215 195 158 / 24%); border-radius: 1.35rem; }
}

/* Home: today's goal without artwork, the count on the left and the review button beside it. */
.home-primary-card { min-height: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-3); padding: 1.1rem 1.2rem; }
.home-primary-card .home-review-split { align-self: end; margin-top: 0; }

@media (max-width: 52rem) {
  /* Light twin of the dark moon: a small sun at the same place on the welcome card. */
  html:not([data-theme="dark"]) .home-welcome::before {
    content: "";
    position: absolute;
    top: 1.4rem;
    right: 2.05rem;
    width: 1.9rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 36% 34%, #fff2c4 0, #f7cf73 45%, #e3a142 100%);
    box-shadow: 0 0 0.9rem 0.1rem rgb(247 207 115 / 32%);
    pointer-events: none;
  }
  html:not([data-theme="dark"]) .home-welcome h1 { position: relative; }
}