/* ─────────────────────────────────────────────────────────────
   ZIMU v2 — workflow-positioned site
   New components specific to v2; falls back to styles.css base.
   ───────────────────────────────────────────────────────────── */

/* Version switcher (also visible on v1 if we add it there) */
.version-switch {
  position: fixed;
  top: 14px;
  right: 280px;
  z-index: 60;
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: color-mix(in oklab, var(--bg) 75%, transparent);
  backdrop-filter: blur(14px);
  border: 1px solid var(--hair);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.v-pill {
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: background .2s, color .2s;
}
.v-pill:hover { color: var(--ink); }
.v-pill-on {
  background: var(--ink);
  color: var(--bg);
}
@media (max-width: 980px) {
  .version-switch { display: none; }
}

/* ── Hero v2 ─────────────────────────────────────────────── */

.hero-v2 .display { font-size: clamp(44px, 6.4vw, 92px); }
.display-tight { letter-spacing: -0.028em; }
.hero-stage-v2 { height: 660px; }
.phone-paragraph { transform: rotate(2deg); }

/* Paragraph screen */
/* Hero — the reader: detected text as re-flowed word tiles, each pinyin above
   its character with a tone-colored accent bar, plus a tapped-word card. */
.scr-paragraph { display: flex; flex-direction: column; }
.rd-chrome { display: flex; align-items: center; gap: 6px; padding: 48px 14px 6px; }
.rd-cbtn {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--app-surface); color: var(--app-ink2);
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
}
.rd-cam {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 500; color: var(--app-ink);
  background: var(--app-surface); padding: 6px 11px; border-radius: 999px;
}
.rd-tiles {
  flex: 1; overflow: hidden;
  padding: 8px 14px 2px;
  display: flex; flex-wrap: wrap; align-items: flex-end; align-content: flex-start;
  gap: 5px 4px;
}
.rd-w { display: flex; flex-wrap: wrap; align-items: flex-end; padding: 1px 2px 0; border-radius: 6px; }
.rd-cc { display: flex; flex-direction: column; align-items: center; }
.rd-p { font-size: 10px; font-weight: 500; line-height: 1.1; margin-bottom: 2px; }
.rd-h { font-size: 24px; line-height: 1; color: var(--app-ink); }
/* segmentation accent under each word — a soft hint on content words, not a
   second layer of color competing with the tone-colored pinyin. Function words
   (particles/pronouns/conjunctions) carry a transparent bar: it reserves the
   same height for clean baseline alignment but shows no color. */
.rd-bar { flex-basis: 100%; width: 100%; height: 2px; border-radius: 2px; margin-top: 4px; background: currentColor; opacity: .42; }
.rd-bar-off { background: transparent; }
.rd-punct { font-size: 24px; color: var(--app-ink); align-self: flex-end; }
/* keep punctuation bound to its word so it never wraps to the start of a line.
   The full-width ，/。 glyph carries built-in trailing space; pull the next
   word back so the gap after punctuation matches the inter-word rhythm. */
.rd-wend { display: flex; align-items: flex-end; }
.rd-end { font-size: 24px; line-height: 1; color: var(--app-ink); margin-right: -0.24em; }
.rd-w.is-sel { background: var(--app-accent-sf); box-shadow: 0 0 0 1.2px color-mix(in oklab, var(--app-accent) 55%, transparent); }
.rd-w.is-sel .rd-h { color: var(--app-accent); }

/* Tapped-word card (the bottom sheet detail) */
.rd-card {
  margin: 0 8px 8px; padding: 14px 14px 13px; border-radius: 20px;
  background: var(--app-surface); position: relative;
  box-shadow: 0 -8px 24px -12px rgba(20,20,26,.22);
}
.rd-grab {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 34px; height: 4px; border-radius: 2px; background: var(--app-hair);
}
.rd-chead { position: relative; text-align: center; padding-top: 8px; }
.rd-pill {
  position: absolute; left: 0; top: 12px;
  font-size: 9.5px; font-weight: 500; color: var(--app-ink2);
  padding: 3px 9px; border: 1px solid var(--app-hair); border-radius: 999px;
}
.rd-word { display: inline-flex; justify-content: center; gap: 3px; }
.rd-syl { display: flex; flex-direction: column; align-items: center; }
.rd-cpy { font-size: 13px; font-weight: 500; line-height: 1; margin-bottom: 3px; }
.rd-chz { font-size: 34px; line-height: 1; color: var(--app-ink); }
.rd-cdef { display: flex; align-items: center; gap: 9px; margin-top: 11px; font-size: 13px; color: var(--app-ink); }
.rd-cactions { display: flex; justify-content: center; gap: 18px; margin-top: 13px; }

/* ── Core promise ─────────────────────────────────────────── */

.promise {
  padding: 120px 0;
  text-align: center;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.promise-text {
  font-family: var(--serif);
  font-weight: 320;
  font-size: clamp(28px, 4.4vw, 56px);
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--ink);
  max-width: 18ch;
  margin: 0 auto;
  text-wrap: balance;
}
.promise-text em {
  font-style: italic;
  font-weight: 360;
  color: var(--accent);
}

/* ── Tool strip (horizontal scroller) ──────────────────────── */

.tools {
  padding: 64px 0 80px;
}
.tools-head {
  margin-bottom: 28px;
}
.tools-scroll-wrap {
  position: relative;
  overflow: hidden;
}
.tools-scroll {
  display: flex;
  gap: 16px;
  padding: 8px 32px 32px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.tools-scroll::-webkit-scrollbar { display: none; }

.tool-card {
  flex: 0 0 320px;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 18px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  min-height: 220px;
  scroll-snap-align: start;
  transition: border-color .2s, transform .2s;
}
.tool-card:hover {
  border-color: var(--hair-strong);
  transform: translateY(-2px);
}
.tool-glyph {
  font-family: var(--cn);
  font-weight: 300;
  font-size: 52px;
  line-height: 1;
  color: var(--accent);
  margin-bottom: auto;
  align-self: flex-start;
}
.tool-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 28px 0 6px;
  color: var(--ink);
}
.tool-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Fade edges so cards bleed into the page */
.tools-edge {
  position: absolute;
  top: 0; bottom: 32px;
  width: 64px;
  pointer-events: none;
  z-index: 1;
}
.tools-edge-l {
  left: 0;
  background: linear-gradient(to right, var(--bg), transparent);
}
.tools-edge-r {
  right: 0;
  background: linear-gradient(to left, var(--bg), transparent);
}

@media (max-width: 880px) {
  .tool-card { flex: 0 0 260px; min-height: 200px; }
  .tools-scroll { padding: 8px 20px 24px; }
}

/* ── How it works v2 — numbered list ──────────────────────── */

.how-v2 { padding: 120px 0; border-top: 1px solid var(--hair); }
.how-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: how;
}
.how-list li {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 32px;
  align-items: baseline;
  padding: 32px 0;
  border-top: 1px solid var(--hair);
}
.how-list li:last-child { border-bottom: 1px solid var(--hair); }
.how-num {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 52px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: lining-nums;
}
.how-list h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.012em;
  margin: 0 0 8px;
  color: var(--ink);
  text-wrap: balance;
}
.how-list p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 60ch;
}

@media (max-width: 680px) {
  .how-list li { grid-template-columns: 56px 1fr; gap: 16px; padding: 24px 0; }
  .how-num { font-size: 32px; }
}

/* ── Reading flow ─────────────────────────────────────────── */

.reading-flow {
  padding: 140px 0;
  border-top: 1px solid var(--hair);
  background: linear-gradient(180deg,
    var(--bg) 0%,
    color-mix(in oklab, var(--bg) 90%, var(--accent-soft)) 100%);
}
.rf-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
}
.rf-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 40px;
  max-width: 460px;
}
.rf-stat {
  border-top: 1px solid var(--hair-strong);
  padding-top: 14px;
}
.rf-stat strong {
  display: block;
  font-family: var(--serif);
  font-weight: 380;
  font-size: 38px;
  line-height: 1;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin-bottom: 6px;
}
.rf-stat span {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.35;
}

.rf-stage {
  position: relative;
  height: 460px;
}
.rf-card-stack {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  height: 380px;
}
.rf-mini-card {
  position: absolute;
  width: 280px;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}
.rf-mini-1 {
  top: 0; left: 0;
  transform: rotate(-6deg);
  opacity: .55;
}
.rf-mini-2 {
  top: 40px; left: 30px;
  transform: rotate(-2deg);
  opacity: .8;
}
.rf-mini-3 {
  top: 80px; left: 50px;
  transform: rotate(2deg);
  z-index: 3;
}
.rf-mini-current {
  border-color: var(--accent);
  box-shadow: var(--shadow-card), 0 0 0 4px color-mix(in oklab, var(--accent) 16%, transparent);
}
.rfmc-h { font-family: var(--cn); font-weight: 500; font-size: 28px; line-height: 1; color: var(--ink); }
.rfmc-p { font-family: var(--serif); font-style: italic; font-size: 14px; margin: 6px 0 4px; }
.rfmc-p .t1 { color: var(--tone1); }
.rfmc-p .t2 { color: var(--tone2); }
.rfmc-p .t3 { color: var(--tone3); }
.rfmc-p .t4 { color: var(--tone4); }
.rfmc-d { font-size: 13px; color: var(--ink-soft); }
.rfmc-actions {
  display: flex; gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--hair);
}
.rfmc-chip {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  color: var(--ink-soft);
}
.rfmc-chip-on { background: var(--accent); color: var(--on-accent); }

/* ── Real-world ──────────────────────────────────────────── */

.real-world { padding: 140px 0; border-top: 1px solid var(--hair); }
.rw-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 200px 200px;
  gap: 16px;
}
.rw-tile {
  position: relative;
  background: var(--surface-alt);
  border-radius: 14px;
  overflow: hidden;
}
.rw-tile-tall {
  grid-row: span 2;
}
.rw-tile-tall > :first-child {
  display: block;
  width: 100%;
  height: 100%;
}
.rw-tag {
  position: absolute;
  bottom: 12px; left: 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bg);
  background: rgba(20,24,14,.7);
  padding: 4px 8px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  pointer-events: none;
  z-index: 2;
}
@media (max-width: 880px) {
  .rw-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 180px 180px 180px; }
  .rw-tile-tall { grid-row: span 1; }
}

/* ── Dictionary ──────────────────────────────────────────── */

.dictionary {
  padding: 140px 0;
  border-top: 1px solid var(--hair);
}
.dict-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 72px;
  align-items: center;
}
.dict-stage {
  display: flex; justify-content: center;
}
.phone-dict { transform: rotate(-2deg); }
/* ── Shared "app screen" tokens ───────────────────────────────
   The feature phones (dictionary, study, hero reader, languages) render the
   real app in its standard LIGHT theme. They do NOT recolor with the picker
   (only the Themes phone does), so tone colors are pinned to the light set
   here — otherwise the page's dark-theme tone rotation would leak onto a
   light card. Values match the app's light theme. */
.scr-app {
  --app-bg:        #F1F0F4;   /* systemGroupedBackground */
  --app-surface:   #FFFFFF;   /* secondary/elevated card */
  --app-ink:       #1A1A1C;   /* textPrimary  (~black 88%) */
  --app-ink2:      rgba(20,20,26,.62);  /* textSecondary */
  --app-ink3:      rgba(20,20,26,.42);  /* textTertiary  */
  --app-ink4:      rgba(20,20,26,.30);  /* textQuaternary */
  --app-hair:      rgba(20,20,26,.12);  /* borderSubtle  */
  --app-divider:   rgba(20,20,26,.07);
  --app-accent:    #8763E6;   /* accentPurple, deepened for light-bg contrast */
  --app-accent-sf: rgba(135,99,230,.13);
  /* iOS 26 "Liquid Glass" material tokens for the in-phone chrome */
  --glass-fill:   color-mix(in oklab, var(--app-surface) 58%, transparent);
  --glass-blur:   saturate(180%) blur(16px);
  --glass-hi:     inset 0 0.5px 0 color-mix(in oklab, #ffffff 80%, transparent);
  --glass-edge:   inset 0 0 0 0.5px color-mix(in oklab, #ffffff 55%, transparent);
  --glass-shadow: 0 6px 16px -8px rgba(20,20,26,.22);
  /* pin tone colors to the app's light set (page dark-theme rotation must not leak) */
  --tone1: #D1545C; --tone2: #C2871F; --tone3: #2E8F80; --tone4: #5270B8; --tone5: rgba(20,20,26,.42);
  background: var(--app-bg);
  color: var(--app-ink);
  font-family: var(--sans);
}
.scr-app :lang(zh) { font-family: var(--cn-sans); font-weight: 400; }
.scr-app .status-bar { color: var(--app-ink); }

/* ── Dictionary — word detail ────────────────────────────────── */
.scr-dict {
  padding: 46px 18px 22px;
  overflow: hidden;
}
.ad-head { position: relative; text-align: center; padding-top: 6px; margin-bottom: 12px; }
.ad-back {
  position: absolute; top: -2px; left: 0;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--app-surface); border: 0.5px solid var(--app-hair);
  display: flex; align-items: center; justify-content: center;
  color: var(--app-ink);
}
.ad-pills {
  position: absolute; left: 0; top: 33px; z-index: 2;
  display: flex; flex-direction: column; gap: 5px; align-items: flex-start;
}
.ad-pill {
  font-size: 9.5px; font-weight: 500; color: var(--app-ink2);
  padding: 3px 9px; border: 1px solid var(--app-hair); border-radius: 999px;
}
.ad-word { display: inline-flex; justify-content: center; gap: 3px; padding: 4px 0 0; }
.ad-syl { display: flex; flex-direction: column; align-items: center; }
.ad-py { font-size: 15px; font-weight: 500; line-height: 1; margin-bottom: 4px; }
.ad-hz { font-size: 47px; line-height: 1; color: var(--app-ink); }

.ad-actions { display: flex; justify-content: center; gap: 16px; margin: 14px 0 2px; }
.ad-act { display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--app-ink2); }
.ad-act-ic {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--app-surface);
  display: flex; align-items: center; justify-content: center;
}
.ad-act-lbl { font-size: 9px; }
.ad-act-on { color: var(--app-accent); }
.ad-act-on .ad-act-ic { background: var(--app-accent-sf); }

.ad-reading { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.ad-reading-py { font-size: 17px; font-weight: 500; }
.ad-listen { color: var(--app-ink4); display: inline-flex; }
.ad-def { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.ad-def-text { font-size: 14px; color: var(--app-ink); }

.ad-pos {
  font-size: 9px; font-weight: 700; letter-spacing: .02em;
  min-width: 23px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 5px;
}
.ad-pos-n { color: #4C8FD6; background: rgba(115,184,255,.16); }
.ad-pos-v { color: #C68A1E; background: rgba(245,184,64,.18); }

.ad-sec-h {
  font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--app-ink4); margin: 18px 0 8px;
}
.ad-chars { display: flex; gap: 8px; }
.ad-char { flex: 1; background: var(--app-surface); border-radius: 12px; padding: 10px; }
.ad-char-top { display: flex; align-items: center; justify-content: space-between; }
.ad-char-py { font-size: 12px; font-weight: 500; }
.ad-char .ad-pos { font-size: 8px; min-width: 0; height: 14px; padding: 0 5px; border-radius: 4px; }
.ad-char-hz { font-size: 30px; line-height: 1.1; margin-top: 4px; color: var(--app-ink); }
.ad-char-mean { font-size: 10.5px; color: var(--app-ink2); margin-top: 7px; line-height: 1.25; }

.ad-ex { background: var(--app-surface); border-radius: 12px; padding: 11px 12px; }
.ad-ex-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ad-ex-zh { font-size: 16px; color: var(--app-ink); line-height: 1.3; }
.ad-ex-zh em { color: var(--app-accent); font-style: normal; font-weight: 500; }
.ad-ex-lvl { font-size: 9.5px; font-weight: 500; color: var(--app-ink3); white-space: nowrap; margin-top: 3px; }
.ad-ex-py { font-size: 11.5px; color: var(--app-ink); margin-top: 5px; }
.ad-ex-py em { color: var(--app-accent); font-style: normal; }
.ad-ex-en { font-size: 11.5px; color: var(--app-ink2); margin-top: 3px; }

.dict-bullets {
  list-style: none; padding: 0; margin: 28px 0 0;
  display: flex; flex-direction: column; gap: 10px;
}
.dict-bullets li, .study-bullets li {
  font-size: 15px;
  color: var(--ink-soft);
}
.dict-bullets .b-mark, .study-bullets .b-mark {
  color: var(--accent); margin-right: 8px; font-weight: 700;
}

/* ── Study / Flashcards ──────────────────────────────────── */

.study {
  padding: 140px 0;
  border-top: 1px solid var(--hair);
  background: var(--surface-alt);
}
.study-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.study-bullets {
  list-style: none; padding: 0; margin: 28px 0 0;
  display: flex; flex-direction: column; gap: 10px;
}
.study-stage {
  display: flex; justify-content: center;
}
.phone-flash { transform: rotate(2deg); }
/* ── Study — flashcard session ───────────────────────────────────
   Full-bleed: the active card sits directly on the background, no chrome. */
.scr-flash {
  padding: 44px 16px 16px;
  display: flex; flex-direction: column;
}
.fl-nav { display: flex; align-items: center; justify-content: space-between; padding: 2px 0 0; }
.fl-end {
  font-size: 13px; color: var(--app-ink2);
  background: var(--app-surface); padding: 5px 13px; border-radius: 999px;
}
.fl-count { font-size: 13px; font-weight: 500; color: var(--app-ink); }
.fl-tools {
  display: inline-flex; align-items: center; gap: 11px; color: var(--app-ink2);
  background: var(--app-surface); padding: 5px 11px; border-radius: 999px;
}
.fl-progress { height: 2.5px; background: var(--app-divider); margin: 12px -16px 0; }
.fl-progress-fill { display: block; height: 100%; width: 25%; background: var(--app-accent); }

.fl-body {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; text-align: center;
}
.fl-mastery {
  font-size: 11px; font-weight: 500;
  color: var(--app-accent); background: var(--app-accent-sf);
  padding: 4px 11px; border-radius: 999px;
}
.fl-pinyin { font-size: 22px; font-weight: 500; }
.fl-hanzi { font-size: 60px; line-height: 1; color: var(--app-ink); }
.fl-defs { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; margin-top: 2px; }
.fl-def { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--app-ink); }

.fl-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fl-btn {
  border: 0; border-radius: 16px; padding: 11px 8px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.fl-again { background: #E0625A; }
.fl-good  { background: var(--app-accent); }
.fl-btn-t { font-size: 15px; font-weight: 600; color: #fff; }
.fl-btn-s { font-size: 10.5px; color: rgba(255,255,255,.82); }

/* shared part-of-speech badge colors (fixed data colors) */
.ad-pos-adj  { color: #2FA98C; background: rgba(102,209,184,.20); }
.ad-pos-phr  { color: #C58A1E; background: rgba(255,199,92,.22); }
.ad-pos-pron { color: #C25A8E; background: rgba(242,140,191,.18); }
.ad-pos-conj { color: #A6822E; background: rgba(230,191,102,.22); }
.ad-pos-part { color: #8B5FD6; background: rgba(199,148,255,.20); }
.ad-pos-adv  { color: #3A8FB8; background: rgba(102,191,230,.18); }

/* ── Interactive phone demos — progressive enhancement.
   phone-demo.js adds .is-interactive once the handlers are wired, so without
   JS the phones stay plain (no misleading affordances). */
.is-interactive .rd-w { cursor: pointer; transition: background .14s ease; }
.is-interactive .rd-w:hover { background: var(--app-divider); }
.is-interactive .rd-w.is-sel:hover { background: var(--app-accent-sf); }

.is-interactive .fl-body { cursor: pointer; }
.fl-hint {
  display: none; position: absolute; left: 0; right: 0; bottom: 22px;
  text-align: center; font-size: 12px; font-weight: 500; color: var(--app-ink3);
}
.scr-flash.is-front .fl-mastery,
.scr-flash.is-front .fl-pinyin,
.scr-flash.is-front .fl-defs,
.scr-flash.is-front .fl-actions { visibility: hidden; }
.scr-flash.is-front .fl-hint { display: block; }

/* ── Compare table ────────────────────────────────────────── */

.compare { padding: 140px 0; border-top: 1px solid var(--hair); }
.cmp-table {
  margin-top: 40px;
  border-top: 1px solid var(--hair);
}
.cmp-row {
  display: grid;
  grid-template-columns: 1.2fr 1.4fr 1.4fr;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--hair);
  align-items: baseline;
}
.cmp-row-head {
  padding: 14px 0 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cmp-row-head .cmp-col {
  font-size: 14px;
  letter-spacing: 0.04em;
  display: inline-flex; align-items: center; gap: 8px;
}
.cmp-row-head .cmp-mark {
  display: inline-flex;
  width: 26px; height: 26px;
  align-items: center; justify-content: center;
  background: var(--accent-soft);
  color: var(--accent-deep);
  border-radius: 6px;
}
html[data-theme="moon"] .cmp-row-head .cmp-mark,
html[data-theme="space"] .cmp-row-head .cmp-mark,
html[data-theme="ktv"] .cmp-row-head .cmp-mark,
html[data-theme="sunset"] .cmp-row-head .cmp-mark,
html[data-theme="dusk"] .cmp-row-head .cmp-mark { color: var(--ink); }
.cmp-row-head .cmp-col-other { color: var(--ink-faint); text-transform: uppercase; }

.cmp-lbl {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.cmp-col {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: -0.005em;
}
.cmp-yes { color: var(--ink); }
.cmp-yes::before {
  content: "";
  display: inline-block;
  width: 14px; height: 14px;
  margin-right: 10px;
  vertical-align: -1px;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 35%, var(--accent) 36% 60%, transparent 61%);
}
.cmp-no { color: var(--ink-faint); }
.cmp-no::before {
  content: "";
  display: inline-block;
  width: 14px; height: 1.5px;
  margin-right: 10px;
  vertical-align: 4px;
  background: var(--hair-strong);
}

@media (max-width: 880px) {
  .cmp-row { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
  .cmp-row-head { display: none; }
  .cmp-lbl { color: var(--ink); font-size: 12px; }
  .cmp-col { font-size: 15px; }
}

/* ─────────────────────────────────────────────────────────────
   Hero v2 additions
   ───────────────────────────────────────────────────────────── */

.hero-personal {
  margin: 14px 0 32px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink-faint);
  max-width: 48ch;
  position: relative;
  padding-left: 18px;
}
.hero-personal::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 10px; height: 1px;
  background: var(--accent);
}

/* ─────────────────────────────────────────────────────────────
   The Loop section
   ───────────────────────────────────────────────────────────── */

.loop {
  padding: 140px 0;
  border-top: 1px solid var(--hair);
}
.loop-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 16px;
  counter-reset: loop;
}
.loop-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 16px;
  padding: 28px 22px 24px;
  display: flex;
  flex-direction: column;
  min-height: 280px;
  overflow: hidden;
  transition: border-color .2s, transform .2s;
}
.loop-card:hover {
  border-color: var(--hair-strong);
  transform: translateY(-2px);
}
.loop-card::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  width: 20px; height: 1px;
  background: var(--hair);
  transform: translateY(-50%);
}
.loop-card:last-child::after { display: none; }

.loop-num {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 32px;
}
.loop-glyph {
  font-family: var(--cn);
  font-weight: 300;
  font-size: 64px;
  line-height: 1;
  color: var(--ink);
  margin-bottom: auto;
  align-self: flex-start;
  opacity: .92;
}
.loop-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -0.012em;
  margin: 20px 0 6px;
  color: var(--ink);
}
.loop-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.loop-cycle {
  margin-top: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.loop-cycle-arc {
  position: relative;
  width: 64px;
  height: 22px;
}
.loop-cycle-arc::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--accent);
  border-bottom: 0;
  border-radius: 64px 64px 0 0;
  opacity: .6;
}
.loop-cycle-arc::after {
  content: "";
  position: absolute;
  left: 0; top: 6px;
  width: 0; height: 0;
  border: 4px solid transparent;
  border-right-color: var(--accent);
  transform: rotate(-30deg);
}
.loop-cycle-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

@media (max-width: 980px) {
  .loop-grid { grid-template-columns: repeat(2, 1fr); }
  .loop-card::after { display: none; }
}
@media (max-width: 540px) {
  .loop-grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────
   Origin section
   ───────────────────────────────────────────────────────────── */

.origin {
  padding: 140px 0;
  border-top: 1px solid var(--hair);
  background: var(--surface-alt);
}
.origin-inner {
  max-width: 720px;
  text-align: left;
}
.origin-title {
  font-family: var(--serif);
  font-weight: 380;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.022em;
  margin: 14px 0 36px;
  text-wrap: balance;
}
.origin-title em {
  font-style: italic;
  font-weight: 320;
  color: var(--accent);
}
.origin-body p {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 18px;
  max-width: 56ch;
  text-wrap: pretty;
}
.origin-body p:last-of-type { margin-bottom: 0; }

.origin-sign {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.origin-rule {
  width: 44px; height: 1px;
  background: var(--ink-faint);
  flex-shrink: 0;
}
.origin-name {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

/* ─────────────────────────────────────────────────────────────
   Sync section
   ───────────────────────────────────────────────────────────── */

.sync {
  padding: 140px 0;
  border-top: 1px solid var(--hair);
  background: linear-gradient(180deg,
    var(--bg) 0%,
    color-mix(in oklab, var(--bg) 92%, var(--accent-soft)) 100%);
  overflow: hidden;
}
.sync-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 72px;
  align-items: center;
}
.sync-bullets {
  list-style: none; padding: 0; margin: 28px 0 0;
  display: flex; flex-direction: column; gap: 10px;
}
.sync-bullets li {
  font-size: 15px;
  color: var(--ink-soft);
}
.sync-bullets .b-mark {
  color: var(--accent);
  margin-right: 8px;
  font-weight: 700;
}

.sync-stage {
  position: relative;
  height: 540px;
}

/* iPad — landscape */
.device-ipad {
  position: absolute;
  top: 30px; right: 0; left: 30px;
  aspect-ratio: 1.43;
  background: #0A0A0B;
  border-radius: 26px;
  padding: 14px;
  box-shadow:
    0 30px 80px -30px rgba(20,24,14,.45),
    0 8px 24px -12px rgba(20,24,14,.25);
  transform: rotate(-2deg);
}
.ipad-screen {
  background: var(--app-bg);
  border-radius: 14px;
  height: 100%;
  padding: 20px 18px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.ipad-bezel-bar {
  position: absolute;
  left: 50%; bottom: 5px;
  transform: translateX(-50%);
  width: 80px; height: 3px;
  background: rgba(255,255,255,.18);
  border-radius: 2px;
}

.snb-head { display: flex; flex-direction: column; margin-bottom: 10px; }
.snb-nav {
  align-self: center; display: inline-flex; gap: 2px; margin-bottom: 10px;
  background: color-mix(in oklab, var(--app-ink) 7%, transparent);
  padding: 3px; border-radius: 999px;
}
.snb-tab {
  font-size: 12.5px; font-weight: 600; color: var(--app-ink2);
  padding: 5px 13px; border-radius: 999px; white-space: nowrap;
}
.snb-tab-on { background: var(--app-surface); color: var(--app-accent); box-shadow: 0 1px 3px rgba(20,20,26,.10); }
.snb-badge {
  font-size: 8px; font-weight: 700; color: #fff; background: #E5484D;
  border-radius: 999px; padding: 1px 4px; margin-left: 3px; vertical-align: super;
}
.snb-synced {
  align-self: center; display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 500; color: var(--app-ink2);
  background: var(--app-surface); border: 0.5px solid var(--app-hair);
  padding: 5px 12px; border-radius: 999px; margin-bottom: 12px;
}
.snb-synced svg { color: var(--app-accent); }
.snb-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.snb-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 500; color: var(--app-ink2);
  padding: 4px 10px; border-radius: 999px;
  background: var(--app-surface); border: 0.5px solid var(--app-hair);
}
.snb-chip-on { background: var(--app-accent-sf); color: var(--app-accent); border-color: transparent; }
.snb-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.snb-count { font-size: 10.5px; font-weight: 500; color: var(--app-ink3); margin: 10px 0 0; }

/* Notebook — list of saved-word rows */
.snb-grid {
  flex: 1; display: flex; flex-direction: column; gap: 7px;
  margin-top: 4px; align-content: start;
}
.snb-card {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; background: var(--app-surface); border-radius: 14px;
}
.snb-card::after { content: "\203A"; flex: none; color: var(--app-ink3); font-size: 16px; line-height: 1; }
.snb-main { flex: 1; min-width: 0; }
.snb-py { font-family: var(--sans); font-style: normal; font-size: 13px; font-weight: 500; line-height: 1.2; }
.snb-line { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; min-width: 0; }
.snb-hz { font-size: 21px; font-weight: 600; color: var(--app-ink); line-height: 1.1; flex: none; }
.snb-def {
  font-size: 12.5px; color: var(--app-ink); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.snb-meta { display: flex; align-items: center; gap: 8px; flex: none; }
.snb-freq { font-size: 9.5px; font-weight: 500; color: var(--app-ink3); white-space: nowrap; }
.snb-card-new { position: relative; box-shadow: 0 0 0 1.5px var(--app-accent-sf); }
.snb-card-new::before {
  content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: var(--app-accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--app-accent) 22%, transparent);
  animation: pulse 2s ease-in-out infinite;
}

/* Reusable colored HSK badge — text is the level color, darkened on light backgrounds */
.hsk-badge {
  font-size: 9.5px; font-weight: 500; white-space: nowrap;
  padding: 2px 6px; border-radius: 999px; border: 0.5px solid;
}
.hsk1 { color: #3A8160; background: rgba(89,199,148,.16);  border-color: rgba(89,199,148,.40); }
.hsk2 { color: #357399; background: rgba(82,176,230,.16);  border-color: rgba(82,176,230,.40); }
.hsk3 { color: #856E33; background: rgba(201,168,79,.18);  border-color: rgba(201,168,79,.40); }
.hsk4 { color: #925D32; background: rgba(224,143,77,.18);  border-color: rgba(224,143,77,.40); }
.hsk5 { color: #8E4747; background: rgba(219,110,110,.18); border-color: rgba(219,110,110,.40); }
.hsk6 { color: #783B4B; background: rgba(184,89,115,.18);  border-color: rgba(184,89,115,.40); }

/* iPhone — overlapping front */
.device-iphone {
  position: absolute;
  bottom: 0; right: -10px;
  z-index: 2;
}
.phone-sync {
  width: 200px; height: 410px;
  border-radius: 32px;
  padding: 4px;
  transform: rotate(4deg);
}
.phone-sync .phone-notch { width: 60px; height: 16px; top: 9px; }
.phone-sync .phone-screen { border-radius: 28px; }
.scr-sync {
  background: #FBFAF3;
  color: var(--ink);
  padding: 30px 14px 14px;
  overflow: hidden;
}

/* Flashcard variant inside small sync phone — scale down */
/* Compact flashcard inside the small sync phone */
.scr-sync-flash { padding: 30px 12px 12px; }
.scr-sync-flash .fl-end { font-size: 10px; padding: 4px 9px; }
.scr-sync-flash .fl-count { font-size: 11px; }
.scr-sync-flash .fl-tools { padding: 4px 8px; }
.scr-sync-flash .fl-progress { margin: 9px -12px 0; }
.scr-sync-flash .fl-body { gap: 10px; }
.scr-sync-flash .fl-mastery { font-size: 9px; padding: 3px 9px; }
.scr-sync-flash .fl-pinyin { font-size: 15px; }
.scr-sync-flash .fl-hanzi { font-size: 40px; }
.scr-sync-flash .fl-def { font-size: 12px; gap: 8px; }
.scr-sync-flash .fl-def .ad-pos { font-size: 8px; min-width: 20px; height: 15px; }
.scr-sync-flash .fl-btn { border-radius: 12px; padding: 9px 6px; }
.scr-sync-flash .fl-btn-t { font-size: 12px; }
.scr-sync-flash .fl-actions { gap: 7px; }

/* Sync arc */
.sync-arc {
  position: absolute;
  top: 20px; left: 0; right: 0;
  height: 100px;
  pointer-events: none;
  color: var(--accent);
  opacity: 0.5;
}
.sync-arc svg {
  width: 100%; height: 100%;
}
.sync-pulse {
  position: absolute;
  top: 14px; left: 50%; transform: translateX(-50%);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent) 18%, transparent);
  animation: pulse 2.6s ease-in-out infinite;
}

@media (max-width: 980px) {
  .sync-grid { grid-template-columns: 1fr; gap: 48px; }
  .sync-stage { height: 460px; }
  .device-iphone { right: 0; }
}
@media (max-width: 680px) {
  .sync-stage { height: 318px; }
  .device-ipad { left: 0; right: 0; top: 16px; }
  .phone-sync { width: 128px; height: 270px; }
  .device-iphone { right: -6px; bottom: -10px; }
}

/* ─────────────────────────────────────────────────────────────
   Languages section (animated, phone-based)
   ───────────────────────────────────────────────────────────── */

.languages {
  padding: 140px 0;
  border-top: 1px solid var(--hair);
  overflow: hidden;
}
.lang-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  margin-top: 40px;
}

.lang-phone-wrap {
  position: relative;
  display: flex; justify-content: center;
  min-height: 660px;
}

.phone-lang {
  width: 320px;
  height: 660px;
  transform: rotate(-2deg);
  position: relative;
  z-index: 3;
}
.phone-lang .phone-notch { width: 96px; height: 26px; top: 14px; }
.phone-lang .phone-screen { border-radius: 40px; }

.scr-lang {
  display: flex; flex-direction: column;
  padding: 0;
  position: relative;
  overflow: hidden;
}
.scr-lang.is-changing [data-lang-key] {
  animation: langFade .55s ease-out;
}
@keyframes langFade {
  0%   { opacity: 0; transform: translateY(4px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Nav bar */
.lang-appbar {
  margin-top: 50px;
  padding: 4px 16px 12px;
  display: grid;
  grid-template-columns: 64px 1fr 64px;
  align-items: center;
  border-bottom: 1px solid var(--app-divider);
}
.la-back { font-size: 13px; color: var(--app-accent); }
.la-title {
  text-align: center;
  font-weight: 600;
  font-size: 16px;
  color: var(--app-ink);
  letter-spacing: -0.01em;
}
.la-save { text-align: right; font-size: 13px; color: var(--app-accent); font-weight: 500; }

/* Body */
.lang-body {
  flex: 1;
  padding: 20px 20px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.lang-head { text-align: center; margin-bottom: 16px; }
.lang-py { font-size: 18px; font-weight: 500; line-height: 1; margin-bottom: 6px; }
.lang-hanzi {
  font-family: var(--cn-sans);
  font-size: 56px;
  line-height: 1;
  color: var(--app-ink);
}
.lang-def-row { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.lang-pos {
  font-size: 10.5px; font-weight: 600;
  color: var(--app-accent); background: var(--app-accent-sf);
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.lang-def { font-size: 16px; color: var(--app-ink); }
.lang-sec {
  font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--app-ink4); margin-bottom: 8px;
}
.lang-ex { background: var(--app-surface); border-radius: 12px; padding: 12px 14px; }
.lang-ex-zh {
  font-family: var(--cn-sans);
  font-size: 17px; color: var(--app-ink); line-height: 1.3;
}
.lang-ex-zh em { font-style: normal; font-weight: 500; color: var(--app-accent); }
.lang-ex-py { font-size: 12px; color: var(--app-ink); margin-top: 5px; }
.lang-ex-py em { font-style: normal; color: var(--app-accent); }
.lang-ex-tr { font-size: 12.5px; color: var(--app-ink2); margin-top: 4px; line-height: 1.4; }

/* Cycle dot in bottom-right */
.lang-cycle-dot {
  position: absolute;
  bottom: 18px; right: 18px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--app-accent-sf);
  color: var(--app-accent);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.cycle-tick {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--app-accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--app-accent) 22%, transparent);
  animation: pulse 1.6s ease-in-out infinite;
}
.lang-cycle-dot.is-paused .cycle-tick {
  animation: none;
  background: var(--app-ink4);
  box-shadow: none;
}

/* Drifting language cards floating around the phone */
.lang-drift {
  position: absolute;
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--hair);
  color: var(--ink-soft);
  box-shadow: var(--shadow-card);
  z-index: 1;
  pointer-events: none;
}
.lang-drift-a { top: 40px;  left: 8px;   animation: driftA 11s ease-in-out infinite; }
.lang-drift-b { top: 200px; right: 8px;  animation: driftB 13s ease-in-out infinite; }
.lang-drift-c { bottom: 130px; left: 12px; animation: driftC 12s ease-in-out infinite; }
.lang-drift-d { bottom: 30px; right: 20px;  animation: driftD 14s ease-in-out infinite; }
@keyframes driftA {
  0%,100% { transform: translateY(0) rotate(-4deg); }
  50%     { transform: translateY(-14px) rotate(-2deg); }
}
@keyframes driftB {
  0%,100% { transform: translateY(0) rotate(3deg); }
  50%     { transform: translateY(12px) rotate(5deg); }
}
@keyframes driftC {
  0%,100% { transform: translateY(0) rotate(-2deg); }
  50%     { transform: translateY(-10px) rotate(0deg); }
}
@keyframes driftD {
  0%,100% { transform: translateY(0) rotate(4deg); }
  50%     { transform: translateY(8px) rotate(2deg); }
}

/* Language chip rail */
.lang-rail {
  display: flex; flex-wrap: wrap;
  gap: 8px;
  align-content: center;
  align-self: center;
}
.lang-chip {
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: -0.005em;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .15s;
}
.lang-chip:hover { color: var(--ink); border-color: var(--hair-strong); }
.lang-chip.is-active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.lang-foot {
  margin-top: 40px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-faint);
  text-align: center;
}

@media (max-width: 980px) {
  .lang-showcase { grid-template-columns: 1fr; gap: 40px; }
  .lang-rail { justify-content: center; }
  .lang-phone-wrap { min-height: 600px; }
  .lang-drift { font-size: 14px; padding: 6px 10px; }
}

/* ─────────────────────────────────────────────────────────────
   Why Zimu — two-card side-by-side (v3)
   ───────────────────────────────────────────────────────────── */

.compare-v3 {
  padding: 140px 0;
  border-top: 1px solid var(--hair);
}
.cmp3-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 40px;
  align-items: stretch;
}

.cmp3-card {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 22px;
  padding: 32px 32px 28px;
  display: flex;
  flex-direction: column;
}
.cmp3-card-old {
  background: transparent;
  border-style: dashed;
  border-color: var(--hair-strong);
  opacity: 0.92;
}
.cmp3-card-zimu {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
  box-shadow:
    0 0 0 4px color-mix(in oklab, var(--accent) 16%, transparent),
    0 28px 56px -32px rgba(20,24,14,.45);
}

.cmp3-card-head {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid;
}
.cmp3-card-old .cmp3-card-head  { border-color: var(--hair); }
.cmp3-card-zimu .cmp3-card-head { border-color: color-mix(in oklab, var(--bg) 22%, transparent); }

.cmp3-card-eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: var(--ink-faint);
}
.cmp3-card-zimu .cmp3-card-eyebrow { color: var(--accent-soft); }

.cmp3-card-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px);
  margin: 0;
  letter-spacing: -0.012em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.cmp3-card-old .cmp3-card-title  { color: var(--ink-soft); }
.cmp3-card-zimu .cmp3-card-title { color: var(--bg); }

.cmp3-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  border-radius: 7px;
}
html[data-theme="space"]  .cmp3-mark,
html[data-theme="moon"]   .cmp3-mark,
html[data-theme="ktv"]    .cmp3-mark,
html[data-theme="sunset"] .cmp3-mark,
html[data-theme="dusk"]   .cmp3-mark { color: var(--ink); }

.cmp3-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.cmp3-list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 0;
  border-top: 1px solid;
}
.cmp3-list li:first-child { border-top: 0; padding-top: 4px; }
.cmp3-card-old  .cmp3-list li { border-color: var(--hair); }
.cmp3-card-zimu .cmp3-list li { border-color: color-mix(in oklab, var(--bg) 15%, transparent); }

.cmp3-li-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.cmp3-card-zimu .cmp3-li-label { color: var(--accent-soft); }

.cmp3-li-value {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.4;
  letter-spacing: -0.005em;
}
.cmp3-card-old  .cmp3-li-value { color: var(--ink-soft); font-style: italic; }
.cmp3-card-zimu .cmp3-li-value { color: var(--bg); font-weight: 450; }

@media (max-width: 800px) {
  .cmp3-pair { grid-template-columns: 1fr; gap: 16px; }
  .cmp3-card { padding: 24px 22px 20px; border-radius: 18px; }
  .cmp3-list li { padding: 12px 0; }
  .cmp3-li-value { font-size: 16px; }
}

.compare-v2 {
  padding: 140px 0;
  border-top: 1px solid var(--hair);
}

/* Legend */
.cmp2-legend {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 40px 0 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--hair);
  flex-wrap: wrap;
}
.cmp2-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
}
.cmp2-tag-zimu {
  background: var(--ink);
  color: var(--bg);
}
.cmp2-tag-zimu .cmp2-mark {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
html[data-theme="moon"]   .cmp2-tag-zimu .cmp2-mark,
html[data-theme="space"]  .cmp2-tag-zimu .cmp2-mark,
html[data-theme="ktv"]    .cmp2-tag-zimu .cmp2-mark,
html[data-theme="sunset"] .cmp2-tag-zimu .cmp2-mark,
html[data-theme="dusk"]   .cmp2-tag-zimu .cmp2-mark { color: var(--ink); }

.cmp2-tag-trad {
  border: 1px dashed var(--hair-strong);
  color: var(--ink-faint);
  padding-left: 14px;
}
.cmp2-vs {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
}
.cmp2-tag-name {
  letter-spacing: -0.005em;
}

/* Rows */
.cmp2-rows {
  display: flex;
  flex-direction: column;
}
.cmp2-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  align-items: baseline;
  padding: 24px 0;
  border-bottom: 1px solid var(--hair);
}
.cmp2-row:last-child { border-bottom: 0; }
.cmp2-label {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.cmp2-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  position: relative;
}
.cmp2-pair::before {
  content: "";
  position: absolute;
  left: 50%; top: -6px; bottom: -6px;
  width: 1px;
  background: var(--hair);
  transform: translateX(-50%);
}

.cmp2-cell {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 6px 24px;
}
.cmp2-cell-zimu { }
.cmp2-cell-trad { }

.cmp2-bullet {
  flex-shrink: 0;
  width: 10px; height: 10px;
  position: relative;
  transform: translateY(3px);
}
.cmp2-bullet-yes {
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 18%, transparent);
}
.cmp2-bullet-no {
  height: 1.5px;
  width: 12px;
  background: var(--ink-ghost);
  border-radius: 1px;
  transform: translateY(7px);
}

.cmp2-val {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: -0.005em;
}
.cmp2-cell-zimu .cmp2-val {
  color: var(--ink);
  font-weight: 450;
}
.cmp2-cell-trad .cmp2-val {
  color: var(--ink-faint);
  font-style: italic;
}

@media (max-width: 880px) {
  .cmp2-row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 18px 0;
  }
  .cmp2-pair {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .cmp2-pair::before { display: none; }
  .cmp2-cell { padding: 4px 0; }
  .cmp2-cell-trad {
    padding-left: 0;
    padding-top: 2px;
    opacity: .9;
  }
  .cmp2-val { font-size: 17px; }
}

/* ─────────────────────────────────────────────────────────────
   Themes section (v2)
   ───────────────────────────────────────────────────────────── */
.themes-v2 {
  padding: 140px 0;
  border-top: 1px solid var(--hair);
  background: linear-gradient(180deg,
    var(--bg) 0%,
    color-mix(in oklab, var(--bg) 92%, var(--accent-soft)) 100%);
}
.themes-stage {
  margin-top: 40px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 64px;
  align-items: center;
}

.theme-preview {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 16px;
}
.phone-themes {
  width: 320px;
  height: 660px;
  transform: rotate(-2deg);
  background: #0A0A0B;
  border-radius: 46px;
  padding: 6px;
  box-shadow: var(--shadow-phone);
}
.phone-themes .phone-notch { width: 96px; height: 26px; top: 14px; }
.phone-themes .phone-screen {
  border-radius: 40px;
  background: var(--bg);
}
.scr-theme {
  position: relative;
  width: 100%; height: 100%;
}

/* "Now showing" caption pill */
.theme-current {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--hair);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.tc-label { color: var(--ink-faint); text-transform: uppercase; }
.tc-name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-transform: none;
}

/* Picker grid */
.theme-picker {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-width: 560px;
}
.t-card {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  transition: transform .25s cubic-bezier(.2,.7,.2,1.2),
              border-color .2s,
              box-shadow .25s;
}
.t-card:hover {
  transform: translateY(-2px);
  border-color: var(--hair-strong);
}
.t-card.is-active {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow:
    0 0 0 2px color-mix(in oklab, var(--accent) 55%, transparent),
    0 12px 28px -14px color-mix(in oklab, var(--accent) 45%, transparent);
  transform: translateY(-2px) scale(1.02);
}

/* Mini-app preview — uses the theme's actual palette via inline vars */
.t-preview {
  display: flex;
  flex-direction: column;
  aspect-ratio: 1 / 1;
  background: var(--p-bg);
  border-radius: 8px;
  padding: 7px 6px 6px;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--p-ink) 12%, transparent);
}
.t-prev-card {
  background: var(--p-surf);
  border-radius: 5px;
  padding: 6px 6px 7px;
  display: flex;
  flex-direction: column;
  gap: 2.5px;
  border: 1px solid color-mix(in oklab, var(--p-ink) 7%, transparent);
}
.t-prev-line {
  height: 2.5px;
  border-radius: 1px;
  background: var(--p-ink);
}
.t-prev-l1 { width: 88%; opacity: .45; }
.t-prev-l2 { width: 58%; opacity: .25; }
.t-prev-l3 { width: 72%; opacity: .15; }
/* Prominent per-theme signal — mirrors the app picker's accent bar */
.t-prev-accent {
  height: 3.5px;
  border-radius: 2px;
  background: var(--p-accent);
  margin: 7px 4px 0;
}

.t-meta {
  display: flex; flex-direction: column;
  gap: 4px;
}
.t-name {
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.t-tag {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.t-card.is-active .t-tag { color: var(--accent); }

/* Check badge — only visible when active */
.t-check {
  position: absolute;
  top: 12px; right: 12px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(.4);
  transition: opacity .2s, transform .3s cubic-bezier(.2,.7,.2,1.6);
}
html[data-theme="moon"]   .t-check,
html[data-theme="space"]  .t-check,
html[data-theme="ktv"]    .t-check,
html[data-theme="sunset"] .t-check,
html[data-theme="dusk"]   .t-check { color: var(--ink); }

.t-card.is-active .t-check {
  opacity: 1;
  transform: scale(1);
}

/* "Now showing" — bigger reveal */
.theme-current {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 14px 22px;
  border-radius: 14px;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: 0;
  color: inherit;
}
.tc-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.tc-name {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -0.018em;
  color: var(--accent);
  text-transform: none;
  line-height: 1;
}
.tc-name.is-swapping {
  animation: tcSwap .55s cubic-bezier(.2,.7,.2,1);
}
@keyframes tcSwap {
  0%   { opacity: 0; transform: translateY(8px) scale(.96); filter: blur(2px); }
  100% { opacity: 1; transform: translateY(0)   scale(1);   filter: blur(0); }
}

/* Page wash on theme change — a brief accent-coloured tint sweep */
.theme-wash {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0;
  background: radial-gradient(ellipse at center,
    color-mix(in oklab, var(--accent) 55%, transparent) 0%,
    transparent 70%);
  mix-blend-mode: overlay;
}
.theme-wash.is-firing {
  animation: themeWashKf .9s ease-out;
}
@keyframes themeWashKf {
  0%   { opacity: 0; transform: scale(.7); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.6); }
}

.themes-foot {
  margin-top: 40px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-faint);
  text-align: center;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}

/* iPad / tablet: 1-column cards on the LEFT, phone on the RIGHT */
@media (max-width: 1000px) {
  .themes-stage {
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: 40px;
    align-items: center;
  }
  .theme-preview { grid-column: 2; grid-row: 1; }
  .theme-picker {
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: 1fr;
    max-width: 340px;
    margin: 0;
  }
  .phone-themes {
    transform: none;
    width: 280px;
    height: 560px;
  }
  .phone-themes .phone-notch { width: 84px; height: 22px; top: 12px; }
  .phone-themes .phone-screen { border-radius: 34px; }
  .t-card.is-active {
    transform: translateY(-1px) scale(1.01);
    box-shadow:
      0 0 0 2px color-mix(in oklab, var(--accent) 55%, transparent),
      0 8px 20px -10px color-mix(in oklab, var(--accent) 40%, transparent);
  }
  .t-check { top: 10px; right: 10px; width: 20px; height: 20px; }
  .tc-name { font-size: 26px; }
}

@media (max-width: 640px) {
  .themes-v2 { padding: 80px 0; }
  .themes-stage {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .theme-preview { grid-column: auto; grid-row: auto; gap: 10px; }
  .theme-picker {
    grid-column: auto;
    grid-row: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    max-width: 100%;
    margin: 0 auto;
    overflow: visible;
    padding: 0;
  }

  .t-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 6px;
    border-radius: 10px;
    text-align: left;
  }
  .t-card.is-active {
    transform: translateY(-1px) scale(1.03);
  }
  .t-preview {
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 5px;
    border-radius: 7px;
  }
  .t-prev-card { padding: 5px; border-radius: 4px; gap: 2px; }
  .t-prev-line { height: 2px; }
  .t-prev-accent { height: 3px; margin-top: 5px; }
  .t-meta { gap: 0; }
  .t-name { font-size: 11px; }
  .t-check {
    top: 4px; right: 4px;
    width: 13px; height: 13px;
  }
  .t-check svg { width: 7px; height: 7px; }

  /* Phone — the section's hero; scale it with the viewport so it fills the
     column instead of collapsing to a thumbnail (was a fixed 200px). */
  .phone-themes {
    width: min(280px, 74vw); height: auto;
    aspect-ratio: 1 / 2;
    padding: 5px;
    border-radius: 40px;
  }
  .phone-themes .phone-notch { width: 84px; height: 22px; top: 12px; }
  .phone-themes .phone-screen { border-radius: 34px; }

  /* "Now showing" more subtle */
  .theme-current { padding: 4px 12px; gap: 2px; }
  .tc-label { font-size: 9px; letter-spacing: 0.14em; }
  .tc-name { font-size: 22px; }

  .themes-foot { margin-top: 24px; font-size: 13px; }
}

.ocr-section {
  padding: 140px 0;
  border-top: 1px solid var(--hair);
}
/* ─────────────────────────────────────────────────────────────
   OCR compare section (portrait phone)
   ───────────────────────────────────────────────────────────── */
.ocr-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;   /* copy | phone demo — mirrors .dict-grid */
  gap: 72px;
  align-items: center;
}
.ocr-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* Phone bezel wrapping the compare stack */
.ocr-phone-wrap {
  position: relative;
  /* match the feature phones (.phone) so every mockup is the same size */
  width: 300px;
  height: 600px;
  padding: 6px;
  background: #0A0A0B;
  border-radius: 42px;
  box-shadow: var(--shadow-phone);
}
.ocr-phone-notch {
  position: absolute;
  top: 14px; left: 50%; transform: translateX(-50%);
  width: 90px; height: 24px;
  background: #000;
  border-radius: 14px;
  z-index: 20;
}
.ocr-phone-statusbar {
  position: absolute;
  top: 18px; left: 0; right: 0;
  z-index: 15;
  padding: 6px 32px 0;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: #FAF5E5;
  pointer-events: none;
}
.ocr-status-right { display: inline-flex; align-items: center; gap: 6px; }

/* The frame */
.ocr-compare {
  --split: 50%;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 36px;
  overflow: hidden;
  background: #1A1A18;
  user-select: none;
  cursor: ew-resize;
  display: none;
  /* vertical swipes scroll the page; the slider only needs the horizontal axis */
  touch-action: pan-y;
}
.ocr-compare.is-shown { display: block; }
.ocr-compare.is-dragging { cursor: ew-resize; }

/* ── Scene base ──────────────────────────────────────────── */

.scene {
  position: absolute;
  inset: 0;
  background: #1A1A18;
}

/* Photo scene (real before/after): full-bleed images; after is clipped by --split */
.ocr-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ocr-shot-after { clip-path: inset(0 0 0 var(--split)); }

/* Menu scene */
.scene-menu {
  background:
    radial-gradient(ellipse at 30% 0%, rgba(255,236,210,.08), transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(0,0,0,.35), transparent 50%),
    linear-gradient(180deg, #D9C9A0 0%, #C5B286 100%);
  /* subtle paper grain via inline svg noise */
}
.scene-menu::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.02) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.02) 0 1px, transparent 1px 4px);
  mix-blend-mode: multiply;
}
.scene-menu::after {
  /* vignette */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.32) 100%);
}
.menu-board {
  position: absolute;
  inset: 14% 8% 8% 8%;
  display: flex; flex-direction: column;
  color: #2A1F12;
  font-family: var(--cn);
}
.menu-title {
  font-size: clamp(28px, 7vw, 44px);
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.04em;
  line-height: 1.1;
}
.menu-sub {
  font-family: var(--cn-sans);
  font-size: clamp(11px, 1.2vw, 15px);
  text-align: center;
  color: rgba(42,31,18,.7);
  letter-spacing: 0.06em;
  margin: 6px 0 18px;
  font-weight: 400;
}
.menu-rows {
  display: flex; flex-direction: column;
  gap: clamp(4px, 0.6vw, 10px);
  flex: 1;
  justify-content: center;
}
.menu-row {
  display: flex; align-items: baseline;
  font-size: clamp(15px, 4.2vw, 22px);
  font-weight: 500;
}
.menu-row .dots {
  flex: 1;
  margin: 0 8px;
  border-bottom: 1.5px dotted rgba(42,31,18,.4);
  align-self: end;
  transform: translateY(-6px);
}
.menu-row .price {
  font-family: var(--cn-sans);
  font-weight: 500;
}
.menu-foot {
  font-family: var(--cn-sans);
  font-size: clamp(10px, 1vw, 13px);
  text-align: center;
  color: rgba(42,31,18,.5);
  margin-top: 16px;
  letter-spacing: 0.1em;
}

/* Sign scene */
.scene-sign {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,150,80,.18), transparent 60%),
    linear-gradient(180deg, #4A1612 0%, #2A0807 60%, #190504 100%);
  display: flex; align-items: center; justify-content: center;
}
.scene-sign::after {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}
.sign-board {
  display: flex; gap: 0; flex-direction: column;
  align-items: center;
  position: relative; z-index: 1;
}
.sign-vert {
  font-family: var(--cn);
  font-weight: 700;
  font-size: clamp(70px, 12vw, 160px);
  line-height: 1;
  color: #F6E2A5;
  text-shadow: 0 2px 0 rgba(0,0,0,.4);
  letter-spacing: 0.04em;
}
.sign-sub {
  position: absolute;
  bottom: 22%;
  font-family: var(--cn);
  font-size: clamp(14px, 1.8vw, 22px);
  color: #E0B673;
  letter-spacing: 0.4em;
  z-index: 1;
}
.sign-est {
  position: absolute;
  bottom: 12%;
  font-family: var(--mono);
  font-size: clamp(10px, 1vw, 13px);
  letter-spacing: 0.3em;
  color: rgba(224, 182, 115, 0.6);
  z-index: 1;
}

/* Book scene */
.scene-book {
  background: linear-gradient(180deg, #EFE3CA 0%, #DDCFB2 100%);
}
.scene-book::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(0,0,0,.08), transparent 30%),
    radial-gradient(ellipse at 100% 100%, rgba(0,0,0,.1), transparent 30%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.015) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
.book-page {
  position: absolute;
  inset: 8% 12% 8% 12%;
  color: #261D14;
  font-family: var(--cn);
}
.book-head {
  font-size: clamp(16px, 2.2vw, 28px);
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: clamp(8px, 1.5vw, 18px);
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(38,29,20,.25);
}
.book-page p {
  font-size: clamp(11px, 1.4vw, 18px);
  line-height: 1.85;
  letter-spacing: 0.04em;
  margin: 0 0 clamp(6px, 0.8vw, 12px);
  text-indent: 2em;
  font-weight: 400;
}

/* ── OCR overlay layer ───────────────────────────────────── */

.ocr-overlay {
  position: absolute; inset: 0;
  clip-path: inset(0 0 0 var(--split));
  pointer-events: none;
}
.ocr-tint {
  position: absolute; inset: 0;
  background: rgba(20, 28, 18, 0.18);
  mix-blend-mode: multiply;
}
.scene-sign ~ .ocr-overlay .ocr-tint { background: rgba(0,0,0,.32); }

.ocr-box {
  position: absolute;
  top: var(--t); left: var(--l);
  width: var(--w); height: var(--h);
  border: 1.5px solid #B5C9B1;
  background: rgba(90, 138, 107, 0.16);
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(20,28,18,.25);
}
.ocr-box-light {
  border-color: #F1D896;
  background: rgba(241, 216, 150, 0.12);
}
.ocr-box-price {
  border-color: #F1D896;
  background: rgba(241, 216, 150, 0.18);
  border-style: dashed;
}
.ocr-box-focus {
  border-color: #FFFFFF;
  background: rgba(90, 138, 107, 0.34);
  box-shadow:
    0 0 0 1px rgba(20,28,18,.4),
    0 0 0 3px rgba(181, 201, 177, 0.4);
  animation: ocrFocusPulse 2s ease-in-out infinite;
}
@keyframes ocrFocusPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(20,28,18,.4), 0 0 0 3px rgba(181, 201, 177, 0.4); }
  50%      { box-shadow: 0 0 0 1px rgba(20,28,18,.4), 0 0 0 6px rgba(181, 201, 177, 0.18); }
}

/* small pinyin overlays on prices (¥) — actually for menu only, label is "¥" but visually shows price-detection */
.ocr-px {
  position: absolute;
  top: var(--t); left: var(--l);
  transform: translate(-100%, -2px);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  padding: 1px 4px;
  background: rgba(20,28,18,.7);
  color: #B5C9B1;
  border-radius: 3px;
}

/* Detection chip (top-right of overlay) */
.ocr-detect {
  position: absolute;
  top: 16px; right: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #FAF5E5;
  background: rgba(20, 28, 18, 0.65);
  border: 1px solid rgba(181, 201, 177, 0.3);
  border-radius: 999px;
  backdrop-filter: blur(8px);
}
.ocr-detect-light { color: #FAF5E5; }
.ocr-detect-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #B5C9B1;
  box-shadow: 0 0 0 3px rgba(181, 201, 177, 0.25);
  animation: pulse 2s ease-in-out infinite;
}

/* Floating definition chip */
.ocr-chip {
  position: absolute;
  top: var(--t); left: var(--l);
  min-width: 200px;
  max-width: 240px;
  padding: 12px 14px;
  background: #FBFAF3;
  color: #14180E;
  border-radius: 10px;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.18);
  font-family: var(--sans);
  font-size: 12px;
  transform: translate(8px, -50%);
}
.ocr-chip-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-bottom: 2px;
}
.ocr-chip-h {
  font-family: var(--cn);
  font-weight: 500;
  font-size: 22px;
  line-height: 1;
  color: #14180E;
}
.ocr-chip-pill {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(90,138,107,.18);
  color: #2F4A37;
  white-space: nowrap;
  flex-shrink: 0;
}
.ocr-chip-p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  margin: 4px 0 4px;
}
.ocr-chip-p .t1 { color: var(--tone1); }
.ocr-chip-p .t2 { color: var(--tone2); }
.ocr-chip-p .t3 { color: var(--tone3); }
.ocr-chip-p .t4 { color: var(--tone4); }
.ocr-chip-p .t5 { color: rgba(20,24,14,.5); }
.ocr-chip-tr {
  font-size: 11.5px;
  color: rgba(20,24,14,.66);
  line-height: 1.35;
}
.ocr-chip-pointer {
  position: absolute;
  top: 50%; left: -6px;
  width: 12px; height: 12px;
  background: #FBFAF3;
  transform: translateY(-50%) rotate(45deg);
  box-shadow: -2px 2px 4px rgba(0,0,0,.06);
}
.ocr-chip-pointer-left {
  left: auto; right: -6px;
  box-shadow: 2px -2px 4px rgba(0,0,0,.06);
}

/* ── Seam, handle, labels ──────────────────────────────── */

.ocr-seam {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--split);
  width: 2px;
  background: #FAF5E5;
  transform: translateX(-50%);
  pointer-events: none;
  box-shadow: 0 0 12px rgba(0,0,0,.4);
  z-index: 4;
}

.ocr-handle {
  position: absolute;
  top: 50%; left: var(--split);
  transform: translate(-50%, -50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #FAF5E5;
  color: #14180E;
  border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: ew-resize;
  box-shadow:
    0 4px 12px rgba(0,0,0,.4),
    inset 0 -2px 0 rgba(0,0,0,.08);
  z-index: 5;
  transition: transform .15s ease;
}
.ocr-compare.is-dragging .ocr-handle { transform: translate(-50%, -50%) scale(1.08); }
.ocr-handle:hover { transform: translate(-50%, -50%) scale(1.05); }

.ocr-label {
  position: absolute;
  bottom: 18px;
  padding: 6px 12px;
  background: rgba(20,28,18,.6);
  color: #FAF5E5;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  z-index: 3;
  border: 1px solid rgba(255,255,255,.08);
}
.ocr-label-before { left: 18px; }
.ocr-label-after  { right: 18px; background: rgba(90, 138, 107, 0.8); }

/* ── Scene switcher ─────────────────────────────────────── */

.ocr-scenes {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.ocr-scene {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--hair);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 13px;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.ocr-scene:hover { border-color: var(--hair-strong); color: var(--ink); }
.ocr-scene.is-active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.os-glyph {
  font-family: var(--cn);
  font-size: 17px;
  line-height: 1;
  color: var(--accent);
}
.ocr-scene.is-active .os-glyph { color: var(--accent-soft); }
.os-name { font-weight: 500; }

.ocr-caption {
  margin-top: 18px;
  font-size: 13px;
  font-style: italic;
  font-family: var(--serif);
  color: var(--ink-faint);
  max-width: 60ch;
}

/* responsive */
@media (max-width: 880px) {
  .ocr-handle { width: 40px; height: 40px; }
  .ocr-chip { min-width: 160px; max-width: 180px; padding: 10px 12px; }
  .ocr-chip-h { font-size: 18px; }
}

/* ── Responsive overrides ─────────────────────────────────── */
@media (max-width: 980px) {
  .hero-stage-v2 { height: 580px; }
  .rf-grid, .dict-grid, .study-grid, .ocr-grid { grid-template-columns: 1fr; gap: 48px; }
  /* stacked on mobile: lead with the copy, let the phone follow it */
  .dict-stage { order: 2; }
  .rf-stage { height: 360px; }
  .rf-card-stack { width: 280px; height: 320px; }
  .rf-mini-card { width: 240px; }
}

/* ─────────────────────────────────────────────────────────────
   Themes phone — app preview
   Bound to the palette vars so it recolors with the selected theme.
   ───────────────────────────────────────────────────────────── */
.theme-app {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
  font-family: var(--sans);
  /* Liquid Glass tokens — built from the page palette so the material recolors
     with the theme (works on light + dark Moon/KTV). */
  --glass-fill:   color-mix(in oklab, var(--surface) 56%, transparent);
  --glass-blur:   saturate(180%) blur(16px);
  --glass-hi:     inset 0 0.5px 0 color-mix(in oklab, #ffffff 45%, transparent);
  --glass-edge:   inset 0 0 0 0.5px color-mix(in oklab, #ffffff 32%, transparent);
  --glass-shadow: 0 6px 16px -8px rgba(0,0,0,.30);
}
.ta-statusbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 26px 0;
  height: 44px;
  font-size: 12.5px; font-weight: 600;
  color: var(--ink);
}
.ta-status-right { display: inline-flex; align-items: center; gap: 6px; }

.theme-app :lang(zh) { font-family: var(--cn-sans); font-weight: 400; }

.ta-body { flex: 1; position: relative; padding: 14px 18px 0; display: flex; flex-direction: column; overflow: hidden; }
.ta-back {
  position: absolute; top: 6px; left: 14px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface); border: 0.5px solid var(--hair);
  display: flex; align-items: center; justify-content: center; color: var(--ink);
}
.ta-head { position: relative; text-align: center; padding-top: 2px; }
.ta-pills { position: absolute; left: 0; top: 28px; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.ta-pill {
  font-size: 9.5px; font-weight: 500; color: var(--ink-soft);
  padding: 3px 9px; border: 1px solid var(--hair); border-radius: 999px;
}
.ta-word { display: inline-flex; justify-content: center; gap: 3px; }
.ta-syl { display: flex; flex-direction: column; align-items: center; }
.ta-py { font-size: 16px; font-weight: 500; line-height: 1; margin-bottom: 4px; }
.ta-hz { font-size: 50px; line-height: 1; color: var(--ink); }
.ta-trad { font-size: 17px; color: var(--ink-faint); margin-top: 6px; }

.ta-actions { display: flex; justify-content: center; gap: 16px; margin: 14px 0 2px; }
.ta-act { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 9px; color: var(--ink-soft); }
.ta-act-ic { width: 38px; height: 38px; border-radius: 50%; background: var(--surface); display: flex; align-items: center; justify-content: center; }
.ta-act-on { color: var(--accent); }
.ta-act-on .ta-act-ic { background: color-mix(in oklab, var(--accent) 16%, transparent); }

.ta-reading { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.ta-reading-py { font-size: 17px; font-weight: 500; }
.ta-listen { color: var(--ink-faint); display: inline-flex; }
.ta-def { display: flex; align-items: center; gap: 10px; margin-top: 9px; font-size: 15px; color: var(--ink); }
.ta-pos {
  font-size: 9px; font-weight: 700; min-width: 23px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 5px;
  color: #C58A1E; background: rgba(217,165,58,.20);
}

.ta-example {
  margin-top: 16px; padding: 11px 13px;
  background: var(--surface); border-radius: 12px;
}
.ta-ex-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ta-ex-zh { font-size: 16px; color: var(--ink); line-height: 1.3; }
.ta-ex-zh em { font-style: normal; font-weight: 500; color: var(--accent); }
.ta-ex-lvl { font-size: 9.5px; font-weight: 500; color: var(--ink-faint); white-space: nowrap; margin-top: 3px; }
.ta-ex-py { font-size: 11.5px; color: var(--ink); margin-top: 5px; }
.ta-ex-py em { font-style: normal; color: var(--accent); }
.ta-ex-en { font-size: 11.5px; color: var(--ink-soft); margin-top: 3px; }

.ta-tabbar {
  margin: auto 12px 12px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 10px 4px 11px;
  border-radius: 26px;
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-hi), var(--glass-edge), var(--glass-shadow);
}
.ta-tab {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 9px; color: var(--ink-faint);
}
.ta-tab-on { color: var(--accent); }

/* ── iOS 26 "Liquid Glass" material ──────────────────────────────────────
   Translucent, backdrop-blurred chrome with a specular top edge and soft
   depth. Each phone supplies --glass-* from its own palette, so it works on
   the fixed-light app screens and the recoloring Themes phone alike. */
.scr-app .rd-cbtn,
.scr-app .rd-cam,
.scr-app .ad-back,
.scr-app .ad-act-ic,
.scr-app .ad-pill,
.scr-app .rd-pill,
.scr-app .fl-end,
.scr-app .fl-tools,
.theme-app .ta-act-ic {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-hi), var(--glass-edge), var(--glass-shadow);
  border: 0;
}
/* SRS buttons — prominent tinted Liquid Glass (translucent color + sheen) */
.scr-app .fl-btn {
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-hi), 0 4px 12px -6px rgba(20,20,26,.30);
}
.scr-app .fl-again { background: color-mix(in oklab, #E0625A 90%, transparent); }
.scr-app .fl-good  { background: color-mix(in oklab, var(--app-accent) 90%, transparent); }
/* word-detail bottom sheet — glass, but keep its upward lift onto the page */
.scr-app .rd-card {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-hi), var(--glass-edge), 0 -10px 30px -14px rgba(20,20,26,.26);
}
/* saved/active actions stay tinted — now a tinted Liquid Glass */
.scr-app .ad-act-on .ad-act-ic { background: color-mix(in oklab, var(--app-accent) 24%, var(--glass-fill)); }
.theme-app .ta-act-on .ta-act-ic { background: color-mix(in oklab, var(--accent) 22%, var(--glass-fill)); }

/* ── KTV "party mode" backdrop — only for the Themes phone, only when the KTV
   theme is picked. Mirrors the app's disco ball + neon haze behind translucent
   cards. Scoped to [data-theme="ktv"] so it can't touch any other theme. */
.ta-ktv { display: none; position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
html[data-theme="ktv"] .ta-ktv { display: block; }
html[data-theme="ktv"] .theme-app > *:not(.ta-ktv) { position: relative; z-index: 1; }

/* angular spotlight beams radiating from the disco ball (top-right), like the app */
.ta-ktv-haze {
  position: absolute; inset: 0;
  background:
    radial-gradient(130% 95% at 86% 4%, rgba(140,50,180,.42), transparent 60%),
    conic-gradient(from 150deg at 86% 13%,
      transparent 0deg,
      rgba(255,51,140,.30) 5deg, transparent 12deg,
      transparent 18deg,
      rgba(158,91,255,.36) 26deg, transparent 36deg,
      transparent 44deg,
      rgba(0,210,255,.24) 52deg, transparent 62deg,
      transparent 72deg,
      rgba(255,51,140,.22) 80deg, transparent 90deg,
      transparent 360deg),
    radial-gradient(42% 38% at 50% 102%, rgba(158,91,255,.30), transparent 72%);
  filter: blur(2px);
  animation: ktvPulse 6s ease-in-out infinite alternate;
}
@keyframes ktvPulse { from { opacity: .82; } to { opacity: 1; } }

/* the real mirror ball, rendered from the app's KTV view at high resolution */
.ta-ktv-ball {
  position: absolute; top: 44px; right: 14px; width: 62px; height: 62px;
  background: url("disco-ball.png") center / contain no-repeat;
  filter: drop-shadow(0 0 10px rgba(255,51,140,.55)) drop-shadow(0 0 20px rgba(0,210,255,.34));
}
.ta-ktv-ball::after {
  content: ""; position: absolute; inset: -15px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(255,51,140,.26), rgba(0,210,255,.1) 48%, transparent 68%);
}

.ta-ktv-spark {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 7px 2px rgba(255,255,255,.85);
  animation: ktvTwinkle 2.6s ease-in-out infinite;
}
.ta-ktv-spark.s1 { top: 42px;  left: 60%; animation-delay: 0s; }
.ta-ktv-spark.s2 { top: 104px; left: 84%; background: #5be0ff; box-shadow: 0 0 7px 2px rgba(91,224,255,.9); animation-delay: .8s; }
.ta-ktv-spark.s3 { top: 330px; left: 26%; background: #ff5ba8; box-shadow: 0 0 7px 2px rgba(255,91,168,.9); animation-delay: 1.5s; }
.ta-ktv-spark.s4 { top: 430px; left: 68%; animation-delay: 2.1s; }
@keyframes ktvTwinkle { 0%, 100% { opacity: .12; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.1); } }

/* translucent cards/chips so the haze shows through, like the app */
html[data-theme="ktv"] .theme-app .ta-example { background: color-mix(in oklab, var(--surface) 70%, transparent); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
html[data-theme="ktv"] .theme-app .ta-act-ic  { background: color-mix(in oklab, var(--surface) 72%, transparent); }
html[data-theme="ktv"] .theme-app .ta-tabbar  { background: color-mix(in oklab, var(--surface) 78%, transparent); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

/* ─────────────────────────────────────────────────────────────
   Reduced motion — stop continuous decorative animation
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   Internationalization + accessibility
   (skip link, sr-only utility, footer language switcher)
   ───────────────────────────────────────────────────────────── */

/* Skip link: off-screen until focused, then pinned top-left. */
.skip-link {
  position: fixed;
  top: 10px; left: 10px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--ink); color: var(--bg);
  border-radius: 10px;
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transform: translateY(-160%);
  opacity: 0;
  pointer-events: none;
}
.skip-link:focus {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Screen-reader-only — used by the language <label>. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* Footer language switcher — native <select> styled to match the footer. */
.foot-fine { align-items: center; flex-wrap: wrap; gap: 14px; }
/* Preserve styles.css's tighter footer gap on phones — our unconditional rule
   above would otherwise win on source order at <=680px. */
@media (max-width: 680px) { .foot-fine { gap: 8px; } }
.lang-switch {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--ink-soft);
}
.lang-switch-globe { flex: none; opacity: .85; }
.lang-select {
  appearance: none; -webkit-appearance: none;
  margin: 0;
  font-family: var(--sans); font-size: 13px; line-height: 1.2; letter-spacing: 0;
  color: var(--ink);
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' fill='none' stroke='%23999' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 11px;
  border: 1px solid var(--hair-strong);
  border-radius: 9px;
  padding: 7px 28px 7px 11px;
  cursor: pointer;
  transition: border-color .15s ease;
}
.lang-select:hover { border-color: var(--ink-faint); }
/* Themed popup where the browser honors it (Firefox / Windows); macOS uses the
   system menu and ignores these, which is also fine. */
.lang-select option { background: var(--surface); color: var(--ink); }

/* Navbar language switcher — on desktop it sits just left of the CTA (a 4th nav
   column); below 880px it's hidden and the in-menu copy shows inside the burger
   dropdown instead, so the tight top bar stays uncrowded. */
.nav { grid-template-columns: auto 1fr auto auto; }
/* The desktop nav picker is a compact globe-only control with a CONSTANT width,
   so longer localized labels (e.g. "Bahasa Indonesia", "Sincronización") can
   never widen the bar enough to overflow it. An invisible native <select>
   overlays the globe — keeping it clickable and keyboard/AT-operable — while the
   dropdown itself still lists the full language names. (The footer + mobile-menu
   pickers keep their text labels; they have the room.) */
.lang-switch--nav {
  position: relative;
  gap: 0;
  padding: 7px 9px;
  border: 1px solid var(--hair-strong);
  border-radius: 9px;
  transition: border-color .15s ease;
  animation: navItemIn .5s cubic-bezier(.2,.7,.2,1) backwards;
  animation-delay: .40s;
}
.lang-switch--nav:hover { border-color: var(--ink-faint); }
.lang-switch--nav:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.lang-switch--nav .lang-switch-globe { display: block; }
.lang-switch--nav .lang-select {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  border: 0; background: none;
  opacity: 0; cursor: pointer;
}
.lang-switch--menu { display: none; }
@media (max-width: 880px) {
  .lang-switch--nav { display: none; }
  .lang-switch--menu {
    display: flex; width: 100%;
    padding: 12px 6px 2px;
    margin-top: 4px;
    border-top: 1px solid var(--hair);
  }
  .lang-switch--menu .lang-select { flex: 1; }
}