/* ------------------------------------------------------------------
   Generated content pages (vocabulary lists, hubs, practice quizzes),
   rendered by sitegen/build.py. Loaded after site.css only by those
   pages, so the product pages carry none of this. Theme variables
   (--tint, --w1, --w2, --glow, --hanzi) cascade from [data-app] in
   site.css. No em dashes in this file either.
   ------------------------------------------------------------------ */

/* Headwords use the platform's CJK serif instead of the Google Noto
   families the product pages load: those ship as unicode-range slices
   and a 2,500-word table would pull most of them (several megabytes).
   The lang attributes on the table keep Han variants correct. */
[data-app="chinese"] .vocab, [data-app="chinese"] .samples, [data-app="chinese"] .quiz, [data-app="chinese"] .qsample {
  --hanzi: 'Songti SC', 'Noto Serif CJK SC', 'Noto Serif SC', 'SimSun', 'Source Han Serif SC', serif;
}
[data-app="japanese"] .vocab, [data-app="japanese"] .samples, [data-app="japanese"] .quiz, [data-app="japanese"] .qsample {
  --hanzi: 'Hiragino Mincho ProN', 'Noto Serif CJK JP', 'Noto Serif JP', 'Yu Mincho', 'Source Han Serif', serif;
}
[data-app="korean"] .vocab, [data-app="korean"] .samples, [data-app="korean"] .quiz, [data-app="korean"] .qsample {
  --hanzi: 'AppleMyungjo', 'Noto Serif CJK KR', 'Noto Serif KR', 'Apple SD Gothic Neo', 'Malgun Gothic', serif;
}

/* ------------------------------------------------------------------ head */
.list-head { padding-top: 150px; padding-bottom: 64px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.crumbs a { transition: color .25s; }
.crumbs a:hover { color: var(--ink); }
.crumbs .sep { color: var(--hair); }
.crumbs > span:not(.sep) { color: var(--ink-2); }
.list-head .kicker { display: block; margin-top: 38px; }
.list-head h1 {
  font-family: var(--serif);
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 1.06; font-weight: 550; letter-spacing: -.02em;
  margin-top: 16px; max-width: 860px; text-wrap: balance;
}
.list-head h1 em { font-style: italic; font-weight: 500; color: var(--tint); }
.list-head .lede { margin-top: 18px; max-width: 680px; font-size: 15.5px; line-height: 1.7; color: var(--ink-2); }
.list-head .lede + .lede { margin-top: 12px; }
.list-head .lede a { color: var(--tint); }
.list-head .lede a:hover { text-decoration: underline; }
.list-head .list-meta { display: block; margin-top: 24px; }
.list-head .store-row { margin-top: 30px; }

/* ------------------------------------------------------------------ tools */
.tools {
  position: sticky; top: 72px; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: 44px; padding: 14px 0;
  background: color-mix(in srgb, var(--w2) 90%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hair-2);
}
.tools input {
  flex: 1 1 240px; min-width: 0;
  padding: 11px 18px; border-radius: 999px;
  border: 1px solid var(--hair); background: rgba(255,255,255,.05);
  color: var(--ink); font: inherit; font-size: 14px;
  transition: border-color .25s;
}
.tools input::placeholder { color: var(--ink-3); }
.tools input:focus { outline: none; border-color: color-mix(in srgb, var(--tint) 55%, transparent); }
.tools input::-webkit-search-cancel-button { -webkit-appearance: none; }
.tools .count { white-space: nowrap; }
.tbtn {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
  padding: 10px 16px; border-radius: 999px; border: 1px solid var(--hair);
  transition: color .25s, border-color .25s, background .25s;
}
.tbtn:hover { color: var(--ink); border-color: rgba(255,255,255,.32); }
.tbtn[aria-pressed="true"] {
  color: var(--tint);
  border-color: color-mix(in srgb, var(--tint) 50%, transparent);
  background: color-mix(in srgb, var(--tint) 10%, transparent);
}

/* ------------------------------------------------------------------ the table */
.vocab { width: 100%; border-collapse: collapse; margin-top: 6px; }
.vocab caption { text-align: left; padding: 22px 0 10px; caption-side: top; }
.vocab th {
  text-align: left; padding: 12px 16px 12px 0;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid var(--hair);
}
.vocab th.w { width: 22%; }
.vocab th.r { width: 18%; }
.vocab th.g { width: 26%; }
.vocab:not(.with-examples) th.w { width: 30%; }
.vocab:not(.with-examples) th.r { width: 26%; }
.vocab:not(.with-examples) th.g { width: auto; }
.vocab td {
  padding: 14px 16px 14px 0; vertical-align: top;
  border-bottom: 1px solid var(--hair-2);
  font-size: 14.5px; line-height: 1.55;
}
.vocab tbody tr { content-visibility: auto; contain-intrinsic-size: auto 58px; }
.vocab td.w { font-family: var(--hanzi); font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.vocab td.r { color: var(--ink-2); font-weight: 500; }
.vocab td.g { font-family: var(--serif); font-size: 16px; color: var(--ink); }
.vocab td.x { color: var(--ink-2); }
.vocab td.x .zh { display: block; font-family: var(--hanzi); font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--ink); }
.vocab td.x .py { display: block; font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.vocab td.x .tr { display: block; font-family: var(--serif); font-style: italic; font-size: 13.5px; color: var(--ink-3); margin-top: 2px; }
.vocab tbody tr[hidden] { display: none !important; }
.vocab tr.divider td { padding: 30px 0 10px; border-bottom: 1px solid var(--hair); }
.vocab tr.divider td .m { display: inline; }
.vocab.cards tr.divider, .vocab.shuffled tr.divider { display: none !important; }
.attribution { margin-top: 28px; max-width: 760px; font-size: 12.5px; line-height: 1.7; color: var(--ink-3); }
.attribution a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.25); }
.attribution a:hover { text-decoration-color: currentColor; }

@media (max-width: 700px) {
  .vocab thead { display: none; }
  .vocab tbody tr {
    display: grid; grid-template-columns: 1fr auto; gap: 2px 14px;
    padding: 14px 0; border-bottom: 1px solid var(--hair-2);
    contain-intrinsic-size: auto 84px;
  }
  .vocab td { display: block; padding: 0; border: 0; }
  .vocab td.w { grid-column: 1; }
  .vocab td.r { grid-column: 2; grid-row: 1; align-self: center; text-align: right; }
  .vocab td.g { grid-column: 1 / -1; }
  .vocab td.x { grid-column: 1 / -1; margin-top: 6px; }
}

/* flashcard mode: every row becomes a tap-to-reveal panel */
.vocab.cards { border-collapse: separate; border-spacing: 0 10px; margin-top: 0; }
.vocab.cards thead, .vocab.cards caption { display: none; }
.vocab.cards tbody tr {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 16px;
  padding: 18px 22px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.04) 50%, rgba(255,255,255,.028) 100%), var(--w2); border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.14);
  cursor: pointer; contain-intrinsic-size: auto 96px;
  transition: border-color .25s, background .25s;
}
.vocab.cards tbody tr:hover, .vocab.cards tbody tr:focus-visible { border-color: var(--hair); background: rgba(255,255,255,.06); outline: none; }
.vocab.cards tbody tr.open { border-color: color-mix(in srgb, var(--tint) 45%, transparent); }
.vocab.cards td { display: block; padding: 0; border: 0; }
.vocab.cards td.w { grid-column: 1; font-size: 26px; }
.vocab.cards td.r { grid-column: 2; grid-row: 1; align-self: center; text-align: right; }
.vocab.cards td.g, .vocab.cards td.x { grid-column: 1 / -1; }
.vocab.cards td.g { margin-top: 6px; }
.vocab.cards td.x { margin-top: 4px; }
.vocab.cards tbody tr:not(.open) td.g, .vocab.cards tbody tr:not(.open) td.x { display: none; }
.vocab.cards[data-reading="answer"] tbody tr:not(.open) td.r { display: none; }
.vocab.cards tbody tr:not(.open)::after {
  content: 'Tap to reveal'; grid-column: 1 / -1;
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
  margin-top: 8px;
}

/* ------------------------------------------------------------------ sample sentences (paid levels) */
.samples { margin-top: 48px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.sample {
  border-radius: 18px; padding: 20px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.04) 50%, rgba(255,255,255,.028) 100%), var(--w2); border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.14);
}
.sample .w { font-family: var(--hanzi); font-size: 24px; font-weight: 600; line-height: 1.25; }
.sample .r { font-size: 13.5px; font-weight: 500; color: var(--ink-2); margin-top: 3px; }
.sample .g { font-family: var(--serif); font-size: 17px; margin-top: 8px; }
.sample .example {
  margin-top: 14px; border-radius: 14px; padding: 14px 16px;
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.09);
}
.sample .example .zh { font-family: var(--hanzi); font-size: 17px; font-weight: 500; line-height: 1.5; }
.sample .example .py { font-size: 12.5px; color: var(--ink-2); margin-top: 5px; }
.sample .example .tr { font-family: var(--serif); font-style: italic; font-size: 13.5px; color: var(--ink-3); margin-top: 3px; }
@media (max-width: 700px) { .samples { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ around this level */
.links-row { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px 32px; }
.levels-nav { padding: 64px 0; }
.levels-nav .m { display: block; }
.levels-nav .links-row { margin-top: 20px; }
.links-row a {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--tint);
}
.links-row a:hover { border-bottom: 1px solid var(--tint); }
.levels-nav .packs { margin-top: 32px; }
.pack.here { color: var(--ink); border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.1); }
.packs-note a { color: var(--tint); }

/* hub level tiles */
.tiles.levels { grid-template-columns: repeat(3, 1fr); }
.tile.level { display: block; }
.tile.level h4 { font-family: var(--serif); font-size: 24px; font-weight: 600; letter-spacing: -.3px; margin-top: 12px; }
.tile.level .count { display: block; margin-top: 12px; }
.tile.level .go { display: inline-block; margin-top: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--tint); }
@media (max-width: 980px) { .tiles.levels { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tiles.levels { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ sticky store bar (phones) */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--w2) 88%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--hair-2);
  transform: translateY(110%); transition: transform .35s var(--ease);
}
.sticky-cta.on { transform: none; }
.sticky-cta .t { font-size: 13px; line-height: 1.35; color: var(--ink-2); }
.sticky-cta .btn-store { padding: 11px 18px; font-size: 13px; box-shadow: none; flex: none; }
@media (min-width: 981px) { .sticky-cta { display: none; } }

/* ------------------------------------------------------------------ quiz */
.quiz { margin-top: 48px; max-width: 720px; }
.q-card {
  position: relative; border-radius: 24px; padding: 28px 30px 30px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(var(--glow),.16), rgba(var(--glow),0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.045) 45%, rgba(255,255,255,.03) 100%), var(--w2);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.25), 0 30px 70px rgba(0,0,0,.38);
}
.q-progress { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.q-progress #qpos { flex: 1; }
.q-streak { color: var(--tint); }
.q-streak::after { content: "\00b7"; margin: 0 6px 0 14px; color: var(--ink-3); }
.q-streak.pop { animation: qpop .5s var(--ease); }
#qscore.pop { animation: qpop .5s var(--ease); color: var(--tint); }
@keyframes qpop { 0% { transform: scale(1); } 35% { transform: scale(1.22); } 100% { transform: scale(1); } }
/* the thin progress bar under the head: one fill per question */
.q-bar { height: 2px; margin-top: 14px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
.q-bar i { display: block; height: 100%; width: 0; background: var(--tint); border-radius: 2px; transition: width .5s var(--ease); }
/* rounds slide out and in; the options cascade A, B, C */
.q-round { transition: opacity .18s ease, transform .18s ease; }
.q-round.out { opacity: 0; transform: translateX(-14px); }
.q-word { font-family: var(--hanzi); font-size: clamp(34px, 5vw, 48px); font-weight: 600; line-height: 1.15; margin-top: 22px; text-shadow: 0 8px 50px rgba(var(--glow),.3); }
.q-reading { font-size: 15px; font-weight: 500; color: var(--ink-2); margin-top: 6px; min-height: 1.6em; }
.q-line { margin-top: 14px; font-size: 15px; font-weight: 600; color: var(--ink-3); min-height: 1.5em; transition: color .25s; }
.q-line.hit { color: var(--tint); }
.q-line.miss { color: var(--ink-2); }
.q-opts { display: grid; gap: 10px; margin-top: 14px; }
.q-opt {
  position: relative; display: flex; align-items: center; gap: 12px;
  text-align: left; padding: 8px 18px 8px 8px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  font-family: var(--serif); font-size: 17px; line-height: 1.35; color: var(--ink);
  transition: border-color .25s, background .25s, transform .25s var(--ease), opacity .25s;
  animation: qland .35s var(--ease) both;
  animation-delay: calc(var(--i) * 70ms);
}
@keyframes qland { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.q-opt i {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  font-family: var(--sans); font-style: normal; font-size: 13px; font-weight: 700; color: var(--ink-3);
}
.q-opt span { flex: 1; min-width: 0; }
.q-opt .qck { flex: none; opacity: 0; transform: scale(.6); transition: opacity .25s, transform .25s var(--ease); }
.q-opt:hover:not(:disabled) { border-color: color-mix(in srgb, var(--tint) 50%, transparent); transform: translateY(-1px); }
.q-opt:disabled { cursor: default; }
.q-opt.right { border-color: #5E8C6E; background: rgba(94,140,110,.18); color: #A9D9B8; transform: scale(1.02); }
.q-opt.right i { color: #A9D9B8; background: rgba(94,140,110,.25); }
.q-opt.right .qck { opacity: 1; transform: none; color: #A9D9B8; }
.q-opt.right.big { transform: scale(1.05); }
/* the jackpot's light sweep: one soft band crossing the winning capsule */
.q-opt.big::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.35), rgba(255,255,255,0));
  background-size: 45% 100%; background-repeat: no-repeat; background-position: -60% 0;
  animation: qglint .7s ease-in-out .15s forwards;
}
@keyframes qglint { to { background-position: 160% 0; } }
.q-opt.wrong { border-color: rgba(255,120,120,.6); background: rgba(255,120,120,.12); animation: qshake .35s linear; }
.q-opt.wrong i { color: rgba(255,150,150,.9); }
@keyframes qshake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
.q-opt.dim { opacity: .35; }
/* the burst: a few sparks leaving the winning capsule */
.q-opt > .q-spark, .q-spark {
  position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; border-radius: 50%; pointer-events: none;
  display: block; box-shadow: none; background: var(--tint); opacity: 0;
  animation: qspark .8s cubic-bezier(.2, .7, .3, 1) forwards; animation-delay: var(--d);
}
.q-opt > .q-spark.gold, .q-spark.gold { background: #F5D67A; }
@keyframes qspark {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(.2); }
}
.q-keys { margin-top: 18px; color: var(--ink-3); }
@media (hover: none) { .q-keys { display: none; } }
/* the end card */
.q-end { border-radius: 24px; padding: 30px 32px; background: linear-gradient(180deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.04) 50%, rgba(255,255,255,.028) 100%), var(--w2); border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.14); position: relative; overflow: hidden; }
.q-end-head { display: flex; align-items: center; gap: 24px; }
.q-ring { position: relative; width: 96px; height: 96px; flex: none; }
.q-ring svg { width: 100%; height: 100%; }
.q-ring #qringfill { transition: stroke-dashoffset 1.1s var(--ease); }
.q-ring span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 24px; font-weight: 600; letter-spacing: -.3px; }
.q-end h3 { font-family: var(--serif); font-size: clamp(26px, 3vw, 36px); font-weight: 600; letter-spacing: -.3px; margin-top: 8px; }
.q-end #qbest { margin-top: 8px; }
.q-end .lede { margin-top: 16px; font-size: 15.5px; line-height: 1.7; color: var(--ink-2); max-width: 540px; }
.q-end .store-row { margin-top: 24px; }
.q-end #qagain { margin-top: 22px; }
@media (prefers-reduced-motion: reduce) {
  .q-opt, .q-opt.wrong, .q-opt.big::after, .q-spark, .q-streak.pop, #qscore.pop { animation: none; }
  .q-round { transition: none; }
}

/* static sample questions */
.qsample ol { margin-top: 44px; list-style: none; padding: 0; display: grid; gap: 12px; }
.qsample li { border-radius: 18px; padding: 18px 22px; background: linear-gradient(180deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.04) 50%, rgba(255,255,255,.028) 100%), var(--w2); border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.14); }
.qsample li .w { font-family: var(--hanzi); font-size: 24px; font-weight: 600; line-height: 1.25; }
.qsample li .r { font-size: 13.5px; color: var(--ink-2); margin-top: 3px; }
.qsample li .opts { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.qsample li .opts span {
  font-family: var(--serif); font-size: 15px;
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--hair);
}
.qsample li .opts span.ok { color: var(--tint); border-color: color-mix(in srgb, var(--tint) 50%, transparent); background: color-mix(in srgb, var(--tint) 10%, transparent); }
.qsample .tiles { margin-top: 40px; }
.tile p a { color: var(--tint); }
.tile p a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ print: the list, nothing else */
@media print {
  .grain, .top, .tools, .sticky-cta, .cta, footer, .store-row, .levels-nav, #faq, .modal-overlay, .list-body .sec-head, .samples { display: none !important; }
  body { background: #fff; color: #000; }
  .list-head { padding-top: 0; padding-bottom: 12px; }
  .list-head h1, .list-head .lede, .vocab td, .vocab th, .vocab td.g, .vocab td.x .zh, .attribution { color: #000; }
  .list-head h1 em { color: #000; }
  .vocab td.r, .vocab td.x .py, .vocab td.x .tr { color: #333; }
  .vocab td, .vocab th { border-color: #ccc; padding: 6px 10px 6px 0; }
  .vocab tbody tr { content-visibility: visible; }
}

/* ------------------------------------------------------------------ list hero
   The product pages' hero, shortened: wall gradient, display headline, the
   CSS iPhone with a real word from this list on its Lock Screen widget and
   three floating cards from the same list. Phone/hero markup and styles
   come from site.css (.hero, .hero-grid, .phone-stage, .lockword, .float-card). */
.hero.list-hero { min-height: 0; padding: 150px 0 84px; }
.list-hero .crumbs { position: relative; }
.list-hero .kicker { display: block; margin-top: 30px; }
.list-hero h1.display { font-size: clamp(38px, 4.3vw, 62px); margin-top: 18px; }
.list-hero .hero-sub { max-width: 470px; }
/* the practice pages' three scannable facts, above the test card */
.facts { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 9px; max-width: 540px; }
.facts li { position: relative; padding-left: 24px; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.facts li::before {
  content: ""; position: absolute; left: 0; top: .5em; width: 11px; height: 11px; border-radius: 50%;
  background: color-mix(in srgb, var(--tint) 22%, transparent); box-shadow: inset 0 0 0 1.5px var(--tint);
}
.facts b { color: var(--ink); font-weight: 600; }
.facts + .lede.hint { margin-top: 18px; }
.list-hero .store-row { margin-top: 32px; }
/* the practice pages stack "Test yourself below" under the store button at
   the same width: a tinted glass pill, so it reads as a button and not as
   a note, with the store note aligned to the top button */
.store-row.stacked { align-items: flex-start; }
.store-row.stacked .store-note { margin-top: 20px; }
.store-stack { display: grid; gap: 12px; }
.store-stack .btn-store { justify-content: center; }
.btn-store.test, .btn-store.jump {
  gap: 10px;
  background: color-mix(in srgb, var(--tint) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--tint) 55%, transparent);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 12px 30px rgba(0,0,0,.3);
}
.btn-store.test:hover, .btn-store.jump:hover {
  background: color-mix(in srgb, var(--tint) 26%, transparent);
  border-color: color-mix(in srgb, var(--tint) 80%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 18px 40px rgba(0,0,0,.4);
}
.btn-store.test svg, .btn-store.jump svg { transition: transform .3s var(--ease); }
.btn-store.test:hover svg, .btn-store.jump:hover svg { transform: translateY(3px); }
#test, #lists, #list { scroll-margin-top: 24px; }
.list-hero .phone-stage { transform-origin: top center; }
.list-hero .lockword .whanzi { overflow-wrap: anywhere; }
@media (min-width: 981px) {
  .list-hero .hero-grid { align-items: start; }
  .list-hero .phone-stage { margin-top: 24px; }
}
@media (max-width: 980px) {
  .hero.list-hero { padding: 140px 0 60px; }
  .list-hero .hero-grid { gap: 56px; }
  .list-hero .phone-stage { zoom: .82; }
}
@media (max-width: 560px) {
  .hero.list-hero { padding-bottom: 40px; }
  .list-hero .hero-grid { gap: 40px; }
  .list-hero .phone-stage { zoom: .68; }
  .list-hero .f2 { display: none; }
}

/* ------------------------------------------------------------------ quiz phone
   The practice pages' hero phone shows the app's quick-quiz page instead
   of the Lock Screen: the light app surface with the flavor's own chrome
   colour (--acc, set inline from flavors.py app_accent; not the site
   tint), a round just resolved with the correct meaning lit in the app's
   "known" green. Same anatomy as ios/Core/QuizCard.swift and the store
   shots: bolt kicker and countdown ring, headword, reading, streak line,
   three lettered capsules, floating tab bar. */
.quiz-phone { color: var(--qink); text-align: left; }
.quiz-phone .screen {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--acc) 9%, transparent) 0%, rgba(255,255,255,0) 30%),
    linear-gradient(180deg, #FBF8F4 0%, #F2EAE1 100%);
}
.quiz-phone .island { box-shadow: none; }
.qbar {
  position: absolute; top: 16px; left: 30px; right: 26px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12.5px; font-weight: 600; letter-spacing: -.1px;
}
.qsig { display: inline-flex; align-items: center; gap: 4px; }
.qapp {
  position: absolute; top: 62px; bottom: 100px; left: 24px; right: 24px;
  display: flex; flex-direction: column; justify-content: center;
}
.qhead { display: flex; align-items: flex-start; justify-content: space-between; color: var(--acc); margin-bottom: 14px; }
.qkick { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 800; letter-spacing: .14em; margin-top: 4px; }
.qring { flex: none; }
.qhw { font-family: var(--hanzi); font-size: 34px; font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; }
.qrd { font-size: 13px; margin-top: 5px; color: color-mix(in srgb, var(--qink) 55%, transparent); }
.qline { font-size: 12.5px; font-weight: 600; color: var(--acc); margin-top: 14px; }
.qopts { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.qo {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 6px; border-radius: 999px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 4px 14px rgba(60,40,25,.08);
  font-size: 13px; font-weight: 600; opacity: .38;
}
.qo i {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.95); box-shadow: 0 2px 8px rgba(60,40,25,.10);
  font-style: normal; font-size: 12px; font-weight: 700;
  color: color-mix(in srgb, var(--qink) 50%, transparent);
}
.qo span { flex: 1; min-width: 0; }
.qo.hit { opacity: 1; background: rgba(231,239,233,.95); color: #5E8C6E; }
.qo.hit i { color: #5E8C6E; }
.qo .qck { flex: none; color: #5E8C6E; }
.qtabs {
  position: absolute; left: 16px; right: 16px; bottom: 24px;
  display: flex; justify-content: space-around; align-items: center;
  padding: 5px; border-radius: 999px;
  background: rgba(255,255,255,.66);
  box-shadow: 0 6px 20px rgba(60,40,25,.08), inset 0 1px 0 rgba(255,255,255,.8);
}
.qtabs span {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 8.5px; font-weight: 600; padding: 5px 13px; border-radius: 999px;
  color: color-mix(in srgb, var(--qink) 70%, transparent);
}
.qtabs span.on { color: var(--acc); background: color-mix(in srgb, var(--acc) 10%, transparent); }
.qtabs svg { width: 17px; height: 17px; }
.quiz-phone .home-bar { background: rgba(0,0,0,.5); }
/* the floating cards keep clear of the lit answer and the tab bar */
.quiz-hero .f2 { top: 66%; right: -6%; }
.quiz-hero .f3 { left: -8%; bottom: 6%; }
.sec-head .lede + .lede { margin-top: 12px; }
.sec-head .lede a { color: var(--tint); }
.sec-head .lede.hint { color: var(--ink-3); font-size: 14px; }
.list-head h1.display { font-size: clamp(38px, 4.3vw, 62px); margin-top: 18px; }

/* ------------------------------------------------------------------ preview gate (paid levels)
   Under the 50 shown words the table appears to continue: eight real rows
   laid out on the same columns, each one blurrier and fainter than the
   last, inert, with the app CTA card sitting inside that blurred stretch.
   Rows are divs (a filter on <tr> is unreliable across browsers) but they
   copy the table's widths, paddings, type and hairlines exactly. */
.gate-wrap { position: relative; }
.teaser { user-select: none; pointer-events: none; }
.teaser .trow {
  display: grid; grid-template-columns: 30% 26% 1fr;
  padding: 14px 0; border-bottom: 1px solid var(--hair-2);
  font-size: 14.5px; line-height: 1.55;
}
.teaser .trow > span { padding-right: 16px; }
.teaser .trow .w { font-family: var(--hanzi); font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.teaser .trow .r { color: var(--ink-2); font-weight: 500; }
.teaser .trow .g { font-family: var(--serif); font-size: 16px; color: var(--ink); }
.teaser .trow:nth-child(1) { filter: blur(.6px); opacity: .92; }
.teaser .trow:nth-child(2) { filter: blur(1.4px); opacity: .84; }
.teaser .trow:nth-child(3) { filter: blur(2.4px); opacity: .74; }
.teaser .trow:nth-child(4) { filter: blur(3.6px); opacity: .62; }
.teaser .trow:nth-child(5) { filter: blur(5px); opacity: .5; }
.teaser .trow:nth-child(6) { filter: blur(6.5px); opacity: .4; }
.teaser .trow:nth-child(7) { filter: blur(8px); opacity: .3; }
.teaser .trow:nth-child(8) { filter: blur(9.5px); opacity: .2; border-bottom-color: transparent; }
.gate {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding-top: 12%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 30%, color-mix(in srgb, var(--w2) 60%, transparent) 70%, var(--w2) 100%);
}
.gate-card {
  max-width: 520px; width: 100%; text-align: center;
  padding: 30px 32px 32px; border-radius: 24px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(var(--glow),.16), rgba(var(--glow),0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.045) 45%, rgba(255,255,255,.03) 100%), var(--w2);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 70px rgba(0,0,0,.45);
}
.gate-card h3 { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 28px); font-weight: 600; letter-spacing: -.3px; line-height: 1.2; margin-top: 12px; text-wrap: balance; }
.gate-card p { font-size: 14px; line-height: 1.65; color: var(--ink-2); margin-top: 10px; }
.gate-card .store-row { margin-top: 20px; justify-content: center; }
@media (max-width: 700px) {
  .teaser .trow { grid-template-columns: 1fr auto; gap: 2px 14px; }
  .teaser .trow > span { padding-right: 0; }
  .teaser .trow .w { grid-column: 1; }
  .teaser .trow .r { grid-column: 2; grid-row: 1; align-self: center; text-align: right; }
  .teaser .trow .g { grid-column: 1 / -1; }
  .gate { align-items: flex-end; padding: 0 0 6px; }
  .gate-card { padding: 22px 20px 24px; }
}
@media print { .gate-wrap { display: none !important; } }