:root {
  --ink: #17324d;
  --muted: #607384;
  --primary: #168f91;
  --blue: #326fc0;
  --green: #35a86b;
  --accent: #f05f62;
  --orange: #f28a2e;
  --yellow: #ffd966;
  --paper: #fffdf7;
  --soft: #f6fbf8;
  --line: #d8e5e7;
  --grid: #e46363;
  --a: #ff6b6b;
  --b: #ffe0b2;
  --c: #a8e6de;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #edf5f2;
  color: var(--ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Microsoft YaHei", sans-serif;
}

.pdf-page {
  --a: #ff6b6b;
  --b: #ffe0b2;
  --c: #a8e6de;
}

.worksheet > .pdf-page:nth-of-type(3n + 2) {
  --a: #4a89ff;
  --b: #ffd9e8;
  --c: #8fd9ff;
}

.worksheet > .pdf-page:nth-of-type(3n) {
  --a: #11c79a;
  --b: #dbf5cd;
  --c: #ffd7e8;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  color: #fff;
  background: linear-gradient(90deg, #126b79, #1fa7a6 48%, #3d8dd7);
  box-shadow: 0 3px 12px rgba(7, 40, 44, .16);
}

.app-header h1 {
  margin: 0;
  font-size: 21px;
  letter-spacing: 0;
}

.app-header p {
  margin: 2px 0 0;
  font-size: 12px;
  opacity: .94;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.app-header .install-app-btn {
  border-color: rgba(255, 255, 255, .72);
  color: #fff;
  background: rgba(255, 255, 255, .14);
}

.app-header .install-app-btn:hover {
  background: rgba(255, 255, 255, .24);
}

@media (max-width: 560px) {
  .app-header {
    align-items: flex-start;
  }

  .app-header > div:first-child p {
    display: none;
  }

  .header-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

main {
  width: min(1200px, 100%);
  margin: 0 auto;
  padding: 14px;
}

.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  box-shadow: 0 1px 3px rgba(16, 44, 58, .06);
}

.auth-panel {
  max-width: 560px;
  margin: 36px auto;
}

.workspace {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  min-height: calc(100vh - 96px);
}

.controls {
  position: sticky;
  top: 86px;
  display: grid;
  gap: 12px;
  height: calc(100vh - 104px);
  overflow-y: auto;
  overscroll-behavior: contain;
  align-self: start;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: #8ec5cc #eaf4f5;
}

.controls::-webkit-scrollbar {
  width: 10px;
}

.controls::-webkit-scrollbar-track {
  background: #eaf4f5;
  border-radius: 999px;
}

.controls::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #8ec5cc, #53a9b3);
  border-radius: 999px;
  border: 2px solid #eaf4f5;
}

.user-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fff2bf;
  border: 1px solid #f0cf68;
}

label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
}

.field-note {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.ai-settings {
  display: grid;
  gap: 10px;
  padding: 10px 12px;
  border: 1px dashed #9ecfcf;
  border-radius: 7px;
  background: #f8fbfb;
}

.checkbox-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.checkbox-label input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--primary);
}

.ai-status.ok { color: var(--green); }
.ai-status.warn { color: var(--orange); }
.ai-status.error { color: var(--accent); }
.ai-progress {
  display: grid;
  gap: 6px;
}

.ai-progress.hidden {
  display: none;
}

.ai-progress-track {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: #e4eff0;
  overflow: hidden;
}

.ai-progress-track b {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #20a2a4, #5b6cff);
  transition: width .25s ease;
}

.ai-progress .field-note {
  margin: 0;
}

.export-status.ok { color: var(--green); }
.export-status.warn { color: var(--orange); }
.export-status.error { color: var(--accent); }

input, select, textarea {
  width: 100%;
  border: 1.5px solid #b7d4d5;
  border-radius: 7px;
  padding: 10px 11px;
  color: var(--ink);
  background: #fff;
  font: 14px/1.35 inherit;
}

textarea { resize: vertical; }

button {
  border: 0;
  border-radius: 7px;
  padding: 10px 13px;
  color: #fff;
  background: var(--primary);
  font: 800 14px inherit;
  cursor: pointer;
}

button.secondary { background: var(--blue); }
button.buy { background: var(--orange); }
button.ghost {
  border: 1px solid rgba(255,255,255,.7);
  background: transparent;
}

button[data-blocked="1"] {
  opacity: .72;
  filter: saturate(.84);
  cursor: not-allowed;
}

.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.actions.vertical {
  display: grid;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.muted, .msg, .bank-count {
  color: var(--muted);
  font-size: 13px;
}

.bank-count {
  margin: -2px 0 7px;
}

.section-title {
  margin-bottom: 7px;
  font-weight: 900;
  font-size: 13px;
}

.char-bank {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  max-height: 242px;
  overflow: auto;
  padding: 9px;
  border: 1px dashed #9ecfcf;
  border-radius: 7px;
  background: #f8fbfb;
}

.char-chip {
  min-width: 36px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1.5px solid #9ad3d2;
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  font-weight: 900;
  white-space: nowrap;
}

.char-chip.active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

.preview-column {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.top-tabs {
  display: flex;
  gap: 8px;
  overflow: auto;
}

.top-tabs button {
  background: #e8f2f3;
  color: var(--ink);
  white-space: nowrap;
}

.top-tabs button.active {
  background: var(--primary);
  color: #fff;
}

.worksheet {
  width: min(860px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 18px;
}

.pdf-page {
  width: 794px;
  height: 1123px;
  margin: 0 auto;
  color: var(--ink);
  background: linear-gradient(180deg, #fffdf7 0%, #fffaf1 100%);
  border: 1px solid #eadfca;
  box-shadow: 0 3px 12px rgba(25, 46, 54, .12);
  page-break-after: always;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  --page-scale: 1;
}

.pdf-page::before,
.pdf-page::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.pdf-page::before {
  inset: 0;
  background:
    radial-gradient(circle at 93% 8%, color-mix(in srgb, var(--c) 28%, white) 0 5%, transparent 6%),
    radial-gradient(circle at 8% 78%, color-mix(in srgb, var(--c) 18%, white) 0 11%, transparent 12%),
    radial-gradient(circle at 86% 89%, color-mix(in srgb, var(--b) 20%, white) 0 8%, transparent 9%),
    radial-gradient(circle at 42% 100%, rgba(255, 216, 166, .2) 0 22%, transparent 23%),
    linear-gradient(180deg, #fffdf7 0%, #fffaf1 100%);
  opacity: 1;
}

.pdf-page::after {
  right: 0;
  bottom: 0;
  width: 246px;
  height: 188px;
  opacity: .48;
  background:
    radial-gradient(circle at 28% 34%, #ffe3a3 0 19%, transparent 20%),
    radial-gradient(circle at 74% 76%, var(--c) 0 20%, transparent 21%),
    radial-gradient(circle at 44% 48%, rgba(255,255,255,.42) 0 29%, transparent 30%),
    linear-gradient(180deg, rgba(111, 208, 122, .22), rgba(111, 208, 122, 0) 76%);
}

.pdf-page-inner {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  min-height: 100%;
  padding: 18px 12px 14px;
  box-sizing: border-box;
  overflow: hidden;
}

.pdf-page header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: stretch;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--a);
}

.pdf-page h1 {
  margin: 0;
  font-size: 22px;
  line-height: 1.1;
}

.header-title {
  flex: 1;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 10px;
}

.header-tools {
  display: flex;
  gap: 9px;
  align-items: center;
}

.qr-card {
  width: 102px;
  min-height: 70px;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 6px;
  align-items: center;
  padding: 5px;
  border: 2px solid var(--a);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  text-decoration: none;
}

.qr-fake {
  width: 38px;
  height: 38px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  padding: 3px;
  background: #fff;
  border: 1px solid #222;
}

.qr-fake i {
  background: #fff;
}

.qr-fake i.on {
  background: #111;
}

.qr-card b {
  display: block;
  font-size: 12px;
}

.qr-card small {
  display: block;
  margin-top: 2px;
  color: #5f6f7d;
  font-size: 9px;
  line-height: 1.2;
}

.page-badge {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--a);
  font-weight: 900;
  font-size: 13px;
}

.study-progress {
  display: grid;
  grid-template-columns: 1fr 148px;
  gap: 10px;
  align-items: center;
  margin: 8px 0 8px;
  padding: 7px 9px;
  border-radius: 8px;
  background: #fff;
  border: 1.5px solid color-mix(in srgb, var(--a) 55%, white);
}

.study-progress div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  font-size: 12px;
  font-weight: 800;
}

.study-progress strong {
  color: var(--a);
  font-size: 14px;
}

.study-progress i {
  height: 12px;
  border-radius: 999px;
  background: #e8eef1;
  overflow: hidden;
}

.study-progress i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--a), var(--c));
}

.pdf-page .info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 6px;
}

.header-title .info {
  margin-top: 10px;
  margin-bottom: 0;
  width: 100%;
  max-width: 520px;
}

.pdf-page .info span {
  height: 32px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border: 2px solid var(--c);
  border-radius: 8px;
  background: #fff;
  font-weight: 900;
  font-size: 12px;
}

.pdf-page .info b {
  flex: 0 0 72%;
  height: 17px;
  border-bottom: 1.5px solid #8eb6bd;
}

.header-title .info span {
  min-width: 0;
  justify-content: flex-start;
  white-space: nowrap;
  gap: 4px;
}

.header-title .info b {
  flex: 0 0 64px;
}

.pdf-page .guide {
  display: grid;
  grid-template-columns: 156px 1fr;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px;
  border: 2px dashed var(--a);
  border-radius: 8px;
  background: #fff;
}

.guide-scene {
  min-height: 104px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--b) 42%, white);
  border: 1.5px solid color-mix(in srgb, var(--a) 45%, white);
}

.guide-scene {
  grid-template-columns: 1fr 46px;
  gap: 8px;
  padding: 8px;
  overflow: hidden;
}

.scene-child {
  align-self: end;
  width: 40px;
  height: 54px;
  display: grid;
  place-items: end center;
  padding-bottom: 4px;
  border-radius: 20px 20px 10px 10px;
  background: linear-gradient(#ffd8a8 0 38%, #ff8fa3 39%);
  font-size: 10px;
  font-weight: 900;
}

.scene-table,
.scene-desk,
.scene-easel,
.scene-park {
  min-height: 82px;
  width: 100%;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 2px solid var(--a);
  background: #fff;
  text-align: center;
  font-weight: 900;
}

.scene-table {
  grid-template-columns: repeat(4, 28px);
  gap: 4px;
  padding: 8px;
  background: linear-gradient(#fff 0 62%, #f0c58a 63%);
}

.scene-apple,
.scene-block,
.scene-table i,
.scene-table strong {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ff6b6b;
  color: #fff;
  font-style: normal;
}

.scene-block { border-radius: 6px; background: #4bb1de; }
.scene-table i { background: #ffd166; color: #233; }
.scene-table strong { background: var(--a); }

.scene-park {
  align-content: center;
  gap: 8px;
  background: linear-gradient(#dff5ff 0 48%, #e6f8d7 49%);
}

.scene-park b {
  padding: 3px 9px;
  border-radius: 999px;
  color: #fff;
  background: var(--a);
}

.scene-easel {
  gap: 5px;
  background:
    radial-gradient(circle at 82% 16%, #ffd166 0 10px, transparent 11px),
    linear-gradient(145deg, transparent 52%, #8bd17c 53%),
    #e6f7ff;
}

.scene-easel b {
  padding: 3px 12px;
  border-radius: 999px;
  color: #fff;
  background: var(--a);
}

.scene-easel i {
  width: 52px;
  height: 18px;
  border-radius: 999px 999px 0 0;
  background: #67bd72;
}

.scene-easel span {
  width: 62px;
  height: 6px;
  border-radius: 999px;
  background: #4bb1de;
}

.scene-desk {
  align-content: center;
  gap: 8px;
  padding: 8px;
  background: linear-gradient(#fff 0 68%, #f0c58a 69%);
}

.scene-desk b {
  color: var(--a);
}

.scene-desk span {
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 6px;
  background: #fff6db;
  font-size: 12px;
}

.image-scene {
  display: block;
  padding: 5px;
}

.cartoon-img {
  display: block;
  width: 100%;
  height: 112px;
  object-fit: cover;
  border-radius: 8px;
  border: 1.5px solid color-mix(in srgb, var(--a) 45%, white);
  background: #fff;
}

.top-image-scene .cartoon-img {
  height: 94px;
  border: 0;
  border-radius: 0;
}

.semantic-scene {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px;
  min-height: 112px;
  color: var(--ink);
  text-align: center;
}

.semantic-scene b,
.semantic-scene strong {
  font-weight: 900;
}

.scene-head,
.semantic-scene .scene-kid {
  width: 42px;
  height: 58px;
  position: relative;
  display: grid;
  place-items: end center;
  padding-bottom: 4px;
  border: 2px solid #fff;
  border-radius: 999px 999px 8px 8px;
  color: var(--ink);
  background: var(--c);
  font-size: 11px;
  font-weight: 900;
}

.scene-head::before,
.semantic-scene .scene-kid::before {
  content: "";
  position: absolute;
  top: -18px;
  width: 31px;
  height: 31px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #ffd6a5;
}

.semantic-scene .scene-kid.big {
  width: 50px;
  height: 64px;
}

.name-stamp {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 3px solid var(--a);
  border-radius: 10px;
  color: var(--a);
  background: #fff8ee;
  box-shadow: 0 2px 0 color-mix(in srgb, var(--a) 28%, transparent);
  font: 900 27px/1 "KaiTi", "STKaiti", serif;
}

.queue-signs {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 7px;
  position: relative;
  padding-bottom: 14px;
}

.queue-signs > i {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 55%, white);
}

.queue-sign {
  width: 34px;
  height: 52px;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
  border: 2px solid #fff;
  border-radius: 8px 8px 16px 16px;
  color: #fff;
  background: var(--a);
  font-weight: 900;
  box-shadow: 0 2px 0 color-mix(in srgb, var(--ink) 25%, transparent);
}

.queue-sign:nth-child(2) { background: var(--c); color: var(--ink); }
.queue-sign:nth-child(3) { background: var(--b); color: var(--ink); }
.queue-sign:nth-child(4) { background: color-mix(in srgb, var(--a) 70%, #4dabf7); }

.name-card,
.book-card,
.mini-board,
.write-card,
.picture-frame,
.calc-card {
  min-width: 88px;
  min-height: 56px;
  display: grid;
  place-items: center;
  gap: 3px;
  padding: 6px 8px;
  border: 2px solid var(--a);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 0 color-mix(in srgb, var(--ink) 34%, transparent);
  font-size: 13px;
  font-weight: 900;
}

.name-card.wide {
  min-width: 118px;
}

.name-card span,
.book-card span {
  color: var(--a);
  font: 900 18px/1.1 "KaiTi", "STKaiti", serif;
}

.book-card.small {
  min-width: 74px;
  transform: rotate(5deg);
}

.scene-pencil,
.brush {
  width: 14px;
  height: 74px;
  border: 1px solid #fff;
  border-radius: 999px;
  background: linear-gradient(#ffcf56 0 72%, #333 72% 78%, #f08a5d 78%);
  transform: rotate(35deg);
}

.dir {
  position: absolute;
  width: 46px;
  height: 31px;
  display: grid;
  place-items: center;
  border: 2px solid var(--a);
  border-radius: 999px;
  background: #fff;
  font-size: 15px;
  font-weight: 900;
}

.dir.up { top: 8px; left: calc(50% - 23px); }
.dir.down { bottom: 8px; left: calc(50% - 23px); }
.dir.left { left: 8px; top: calc(50% - 15px); }
.dir.right { right: 8px; top: calc(50% - 15px); }

.scene-direction > b {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c);
}

.dot-group,
.count-line {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 98px;
  align-items: center;
  justify-content: center;
}

.dot-group span,
.count-line span,
.basket span {
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--a);
  font-size: 9px;
  font-weight: 900;
}

.dot-group.less span {
  color: var(--ink);
  background: var(--c);
}

.size-ball {
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--a);
  font-weight: 900;
}

.size-ball.big {
  width: 68px;
  height: 68px;
  font-size: 22px;
}

.size-ball.small {
  width: 40px;
  height: 40px;
  color: var(--ink);
  background: var(--c);
  font-size: 14px;
}

.connect-card,
.color-target,
.picture-arrow {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 2px solid var(--a);
  border-radius: 7px;
  background: #fff;
  font: 900 18px/1 "KaiTi", "STKaiti", serif;
}

.picture-arrow {
  width: 38px;
  height: 30px;
  border-color: #fff;
  border-radius: 999px;
  background: var(--c);
  font-size: 15px;
}

.scene-connect i {
  width: 26px;
  border-top: 2px solid var(--ink);
}

.scene-shelf {
  flex-direction: column;
  gap: 4px;
}

.shelf-row {
  width: 142px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--a);
  border-radius: 6px;
  background: #fff;
  font-size: 14px;
  font-weight: 900;
}

.palette {
  width: 74px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: #fff;
}

.palette span {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--a);
}

.palette span:nth-child(2) { background: var(--b); }
.palette span:nth-child(3) { background: var(--c); }

.fill-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 5px 8px;
  border: 1.5px solid var(--a);
  border-radius: 7px;
  background: #fff;
  font-weight: 900;
}

.fill-row i,
.scene-equation i,
.scene-total i,
.calc-card i,
.scene-plusminus i {
  width: 46px;
  height: 28px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: #fff;
}

.scene-total i {
  display: grid;
  place-items: center;
  font-style: normal;
  font-weight: 900;
}

.basket {
  width: 94px;
  min-height: 60px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-content: center;
  justify-content: center;
  padding: 8px;
  border: 2px solid var(--ink);
  border-radius: 6px 6px 14px 14px;
  background: color-mix(in srgb, var(--b) 42%, white);
}

.mini-calc {
  width: 118px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  padding: 6px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: #fff;
}

.mini-calc b {
  grid-column: 1 / -1;
  padding: 4px;
  border-radius: 5px;
  color: #fff;
  background: var(--ink);
  font-size: 12px;
}

.mini-calc span {
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  background: var(--c);
  font-size: 10px;
  font-weight: 900;
}

.pdf-page .guide h2 {
  margin: 0 0 4px;
  color: var(--a);
  font-size: 18px;
}

.pdf-page .guide p {
  margin: 0 0 5px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.36;
}

.guide-steps {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin: 5px 0;
}

.guide-steps span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c) 25%, white);
  font-weight: 900;
  font-size: 12px;
}

.guide-steps b {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--a);
}

.word-bridge, .purpose-note, .polyphone-note {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 7px;
  background: #fffaf0;
  border: 1px solid #f0d29b;
  align-items: start;
}

.word-bridge b, .purpose-note b, .polyphone-note b {
  color: #b64b1e;
  font-size: 12px;
  line-height: 1.28;
}

.word-bridge span,
.purpose-note span,
.polyphone-note span {
  font-size: 13px;
  line-height: 1.34;
}

.pdf-main {
  display: grid;
  gap: 7px;
}

.pdf-page .guide,
.pdf-page .char-block,
.pdf-page .activity {
  border-radius: 6px;
}

.pdf-page .char-block {
  padding: 6px 7px;
  border: 2px solid color-mix(in srgb, var(--a) 70%, white);
  background: #fff;
}

.char-head {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 3px;
}

.char-badge {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--a);
  font: 500 30px/1 "KaiTi", "STKaiti", serif;
}

.char-head h3 {
  margin: 0;
  font-size: 20px;
}

.char-head h3 span {
  margin-left: 8px;
  color: var(--a);
  font-size: 15px;
  font-family: system-ui, sans-serif;
}

.char-head p {
  margin: 2px 0 0;
  color: #5f6f7d;
  font-size: 12px;
  font-weight: 800;
}

.practice-line {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 3px;
  align-items: end;
  margin-top: 8px;
}

.practice-line .row-label {
  height: 40px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c) 36%, white);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.1;
  font-size: 12px;
}

.practice-cells {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 6px;
  justify-content: start;
  align-items: end;
}

.combo-cell {
  display: grid;
  gap: 7px;
  justify-items: stretch;
  align-items: end;
  width: 100%;
  max-width: 52px;
}

.pinyin-line {
  width: 100%;
  min-width: 0;
  max-width: 52px;
  height: 34px;
  position: relative;
  display: grid;
  place-items: center;
  color: #2f68af;
  font: 800 15px/1 system-ui, sans-serif;
}

.sample-line {
  background: none;
}

.sample-line::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 4px;
  border-bottom: 1.5px solid #8ab7d8;
}

.sample-line .solid-text {
  position: relative;
  z-index: 1;
  padding-bottom: 7px;
  font-size: 15px;
}

.four-line {
  background:
    linear-gradient(#8ab7d8, #8ab7d8) left 2px top 5px / calc(100% - 4px) 1px no-repeat,
    linear-gradient(#8ab7d8, #8ab7d8) left 2px top 13px / calc(100% - 4px) 1px no-repeat,
    linear-gradient(#8ab7d8, #8ab7d8) left 2px top 21px / calc(100% - 4px) 1px no-repeat,
    linear-gradient(#8ab7d8, #8ab7d8) left 2px top 29px / calc(100% - 4px) 1px no-repeat;
}

.pdf-page .tian-cell {
  width: 100%;
  max-width: 52px;
  aspect-ratio: 1;
  height: auto;
  position: relative;
  display: grid;
  place-items: center;
  border: 1.5px solid #e46363;
  background: #fff;
}

.pdf-page .tian-cell .mid-h,
.pdf-page .tian-cell .mid-v,
.pdf-page .tian-cell .diag {
  position: absolute;
  pointer-events: none;
  background: rgba(228, 99, 99, .58);
}

.pdf-page .tian-cell .mid-h { width: 100%; height: 1px; top: 50%; }
.pdf-page .tian-cell .mid-v { width: 1px; height: 100%; left: 50%; }
.pdf-page .tian-cell .diag { width: 1px; height: 140%; top: -20%; opacity: .36; }
.pdf-page .tian-cell .diag-a { transform: rotate(45deg); }
.pdf-page .tian-cell .diag-b { transform: rotate(-45deg); }

.pdf-page .tian-cell strong {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transform: translateY(-0.5px);
  color: #243447;
  font: 500 41px/1 "KaiTi", "STKaiti", serif;
  text-align: center;
}

.pdf-page .tian-cell.trace strong {
  color: rgba(36, 52, 71, .42);
}

.three-char-page {
  padding-top: 0;
  padding-bottom: 0;
}

.three-char-page .study-progress {
  margin: 9px 0 8px;
  padding: 8px 9px;
}

.three-char-page .info {
  margin-bottom: 10px;
}

.three-char-page .guide {
  grid-template-columns: 130px 1fr;
  gap: 6px;
  margin-bottom: 10px;
  padding: 8px;
}

.three-char-page .guide-scene {
  min-height: 78px;
}

.three-char-page .guide p {
  margin-bottom: 2px;
  line-height: 1.28;
}

.three-char-page .char-block {
  padding: 4px 5px;
}

.three-char-page .char-head {
  margin-bottom: 1px;
}

.three-char-page .practice-line {
  gap: 3px;
  margin-top: 7px;
}

.three-char-page .practice-cells {
  gap: 5px;
}

.three-char-page .pinyin-line {
  height: 31px;
  max-width: 47px;
}

.three-char-page .activity {
  margin-top: 6px;
  padding: 6px 7px;
}

.three-char-page .activity-title {
  margin-bottom: 6px;
  font-size: 15px;
}

.three-char-page .activity-title.plain-title {
  font-size: 14px;
}

.three-char-page .activity-grid {
  gap: 6px;
}

.three-char-page .activity-card {
  padding: 6px;
}

.three-char-page .activity-card h4 {
  margin-bottom: 5px;
  font-size: 13px;
}

.three-char-page .activity-card h4.plain-heading {
  margin-bottom: 4px;
  font-size: 13px;
}

.three-char-page .activity-flow-card {
  gap: 6px;
}

.three-char-page .activity-flow-section {
  gap: 4px;
}

.three-char-page .activity-flow-head {
  gap: 6px;
}

.three-char-page .activity-step-badge {
  width: 18px;
  height: 18px;
  font-size: 10px;
}

.three-char-page .read-sentences {
  gap: 3px;
}

.three-char-page .sentence-text {
  font-size: 15px;
  line-height: 1.36;
}

.three-char-page .read-done {
  font-size: 11px;
}

.three-char-page .read-done i {
  width: 12px;
  height: 12px;
}

.three-char-page .answer-line {
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.3;
}

.three-char-page .focus-word {
  font-size: 17px;
}

.three-char-page .mini-bank {
  margin-bottom: 4px;
}

.three-char-page .mini-bank.horizontal-word-bank {
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 4px;
}

.three-char-page .mini-bank span {
  min-width: 48px;
  min-height: 32px;
  font-size: 14px;
}

.three-char-page .mini-bank.horizontal-word-bank span {
  min-width: 72px;
  min-height: 38px;
  padding: 4px 8px 2px;
  font-size: 14px;
}

.three-char-page .mini-bank.horizontal-word-bank ruby {
  gap: 2px;
}

.three-char-page .mini-bank.horizontal-word-bank rt {
  font-size: 9px;
  line-height: 1;
}

.three-char-page .mini-bank.horizontal-word-bank rb {
  font-size: 14px;
}

.three-char-page .mini-read-copy {
  gap: 3px;
  margin-bottom: 0;
}

.three-char-page .mini-read-line {
  padding: 4px 6px;
  font-size: 14px;
  line-height: 1.45;
}

.three-char-page .word-write i,
.three-char-page .write-lines span {
  height: 20px;
  min-width: 40px;
}

.three-char-page .write-model {
  width: 32px;
  height: 32px;
}

.three-char-page .write-model b,
.three-char-page .review-cell b {
  font-size: 19px;
}

.three-char-page .combo-cell,
.three-char-page .pdf-page .tian-cell,
.three-char-page .tian-cell {
  max-width: 49px;
}

.story-page .pdf-page-inner {
  display: flex;
  flex-direction: column;
}

.story-page .study-progress {
  margin: 7px 0 6px;
  padding: 6px 8px;
}

.story-page .activity {
  margin-top: 6px;
  padding: 6px 7px;
}

.story-page .activity-title {
  margin-bottom: 4px;
  font-size: 16px;
}

.story-page .story-section {
  margin-top: 0;
  flex: 1 1 auto;
}

.story-page .story-section .activity-grid {
  grid-template-columns: 1fr;
  gap: 7px;
  align-items: start;
}

.story-page .story-questions .mini-read-copy {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.story-page .activity-card {
  padding: 8px 9px;
}

.story-page .story-card h4,
.story-page .story-questions h4 {
  margin-bottom: 6px;
}

.story-page .read-sentences {
  gap: 4px;
}

.story-page .read-sentences p {
  gap: 6px;
}

.story-page .sentence-text {
  font-size: 15px;
  line-height: 1.42;
}

.story-page .read-done {
  font-size: 10px;
}

.story-page .read-done i {
  width: 12px;
  height: 12px;
}

.story-page .mini-bank {
  margin-bottom: 4px;
}

.story-page .mini-bank.horizontal-word-bank {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.story-page .mini-bank.horizontal-word-bank span {
  min-height: 36px;
  padding: 4px 8px 2px;
}

.story-page .mini-read-copy {
  gap: 4px;
}

.story-page .mini-read-line {
  padding: 5px 7px;
  font-size: 14px;
  line-height: 1.42;
}

.story-page .answer-line {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.35;
}

.pdf-page[data-compact="2"] .guide {
  gap: 7px;
  padding: 6px;
}

.pdf-page[data-compact="2"] .guide p {
  margin-bottom: 3px;
  font-size: 12px;
  line-height: 1.24;
}

.pdf-page[data-compact="2"] .guide-steps {
  gap: 5px;
  margin: 4px 0;
}

.pdf-page[data-compact="2"] .guide-steps span {
  padding: 3px 7px;
  font-size: 11px;
}

.pdf-page[data-compact="2"] .word-bridge,
.pdf-page[data-compact="2"] .purpose-note,
.pdf-page[data-compact="2"] .polyphone-note {
  grid-template-columns: 62px 1fr;
  gap: 5px;
  padding: 3px 6px;
}

.pdf-page[data-compact="2"] .word-bridge b,
.pdf-page[data-compact="2"] .purpose-note b,
.pdf-page[data-compact="2"] .polyphone-note b,
.pdf-page[data-compact="2"] .word-bridge span,
.pdf-page[data-compact="2"] .purpose-note span,
.pdf-page[data-compact="2"] .polyphone-note span {
  font-size: 11px;
  line-height: 1.22;
}

.pdf-page[data-compact="2"] .activity {
  margin-top: 6px;
  padding: 6px 7px;
}

.pdf-page[data-compact="2"] .activity-title {
  margin-bottom: 6px;
  font-size: 15px;
}

.pdf-page[data-compact="2"] .activity-title.plain-title {
  margin-bottom: 5px;
  font-size: 14px;
}

.pdf-page[data-compact="2"] .activity-grid {
  gap: 6px;
}

.pdf-page[data-compact="2"] .activity-card {
  padding: 6px;
}

.pdf-page[data-compact="2"] .activity-card h4 {
  margin-bottom: 5px;
  font-size: 12px;
}

.pdf-page[data-compact="2"] .activity-card h4.plain-heading {
  margin-bottom: 4px;
  font-size: 12px;
}

.pdf-page[data-compact="2"] .read-sentences {
  gap: 3px;
}

.pdf-page[data-compact="2"] .sentence-text {
  font-size: 14px;
  line-height: 1.4;
}

.pdf-page[data-compact="2"] .read-done {
  font-size: 10px;
}

.pdf-page[data-compact="2"] .read-done i {
  width: 12px;
  height: 12px;
}

.pdf-page[data-compact="2"] .answer-line {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.42;
}

.pdf-page[data-compact="2"] .focus-word {
  font-size: 16px;
}

.pdf-page[data-compact="2"] .mini-bank {
  margin-bottom: 5px;
}

.pdf-page[data-compact="2"] .mini-bank.horizontal-word-bank {
  gap: 4px;
}

.pdf-page[data-compact="2"] .mini-bank span {
  min-width: 48px;
  min-height: 36px;
  font-size: 14px;
}

.pdf-page[data-compact="2"] .mini-bank.horizontal-word-bank span {
  min-width: 66px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px 2px;
  font-size: 14px;
}

.pdf-page[data-compact="2"] .mini-bank.horizontal-word-bank ruby {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1;
}

.pdf-page[data-compact="2"] .mini-bank.horizontal-word-bank rt {
  order: -1;
  font-size: 8px;
  text-align: center;
  line-height: 1;
}

.pdf-page[data-compact="2"] .mini-bank.horizontal-word-bank rb {
  font-size: 14px;
}

.pdf-page[data-compact="2"] .mini-read-copy {
  gap: 5px;
  margin-bottom: 5px;
}

.pdf-page[data-compact="2"] .mini-read-line {
  padding: 4px 6px;
  font-size: 13px;
  line-height: 1.45;
}

.pdf-page[data-compact="2"] .write-model {
  width: 36px;
  height: 36px;
}

.pdf-page[data-compact="2"] .write-model b,
.pdf-page[data-compact="2"] .review-cell b {
  font-size: 20px;
}

.pdf-page[data-compact="2"] .word-write i,
.pdf-page[data-compact="2"] .write-lines span {
  min-width: 38px;
  height: 22px;
}

.pdf-page[data-compact="2"] .pdf-main {
  gap: 4px;
}

.pdf-page[data-compact="2"] .char-block {
  padding: 6px 6px;
}

.pdf-page[data-compact="2"] .char-head {
  margin-bottom: 2px;
}

.pdf-page[data-compact="2"] .char-badge {
  width: 36px;
  height: 36px;
  font-size: 24px;
}

.pdf-page[data-compact="2"] .char-head h3 {
  font-size: 17px;
}

.pdf-page[data-compact="2"] .char-head h3 span {
  font-size: 12px;
}

.pdf-page[data-compact="2"] .practice-line {
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 3px;
  margin-top: 6px;
}

.pdf-page[data-compact="2"] .practice-line .row-label {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 11px;
}

.pdf-page[data-compact="2"] .pinyin-line {
  height: 28px;
  font-size: 12px;
  max-width: 42px;
}

.pdf-page[data-compact="2"] .sample-line .solid-text {
  padding-bottom: 6px;
  font-size: 12px;
}

.pdf-page[data-compact="2"] .four-line {
  background:
    linear-gradient(#8ab7d8, #8ab7d8) left 2px top 4px / calc(100% - 4px) 1px no-repeat,
    linear-gradient(#8ab7d8, #8ab7d8) left 2px top 10px / calc(100% - 4px) 1px no-repeat,
    linear-gradient(#8ab7d8, #8ab7d8) left 2px top 16px / calc(100% - 4px) 1px no-repeat,
    linear-gradient(#8ab7d8, #8ab7d8) left 2px top 22px / calc(100% - 4px) 1px no-repeat;
}

.pdf-page[data-compact="2"] .pdf-page .tian-cell strong,
.pdf-page[data-compact="2"] .tian-cell strong {
  font-size: 41px;
}

.pdf-page[data-compact="2"] .practice-cells {
  gap: 4px;
}

.pdf-page[data-compact="2"] .combo-cell,
.pdf-page[data-compact="2"] .pdf-page .tian-cell,
.pdf-page[data-compact="2"] .tian-cell {
  max-width: 46px;
}

.pdf-page[data-compact="2"] .guide {
  gap: 6px;
  padding: 5px;
}

.pdf-page[data-compact="2"] .guide p {
  margin-bottom: 2px;
  font-size: 11px;
  line-height: 1.2;
}

.pdf-page[data-compact="2"] .guide-steps {
  gap: 4px;
  margin: 3px 0;
}

.pdf-page[data-compact="2"] .guide-steps span {
  padding: 2px 6px;
  font-size: 10px;
}

.pdf-page[data-compact="2"] .word-bridge,
.pdf-page[data-compact="2"] .purpose-note,
.pdf-page[data-compact="2"] .polyphone-note {
  grid-template-columns: 58px 1fr;
  gap: 4px;
  padding: 2px 5px;
}

.pdf-page[data-compact="2"] .word-bridge b,
.pdf-page[data-compact="2"] .purpose-note b,
.pdf-page[data-compact="2"] .polyphone-note b,
.pdf-page[data-compact="2"] .word-bridge span,
.pdf-page[data-compact="2"] .purpose-note span,
.pdf-page[data-compact="2"] .polyphone-note span {
  font-size: 10px;
  line-height: 1.18;
}

.pdf-page[data-compact="2"] .activity {
  margin-top: 4px;
  padding: 5px 6px;
}

.pdf-page[data-compact="2"] .activity-title {
  margin-bottom: 5px;
  font-size: 14px;
}

.pdf-page[data-compact="2"] .activity-title.plain-title {
  margin-bottom: 4px;
  font-size: 13px;
}

.pdf-page[data-compact="2"] .activity-grid {
  gap: 5px;
}

.pdf-page[data-compact="2"] .activity-card {
  padding: 5px;
}

.pdf-page[data-compact="2"] .activity-card h4,
.pdf-page[data-compact="2"] .activity-card h4.plain-heading {
  margin-bottom: 3px;
  font-size: 11px;
}

.pdf-page[data-compact="2"] .read-sentences {
  gap: 2px;
}

.pdf-page[data-compact="2"] .sentence-text {
  font-size: 13px;
  line-height: 1.34;
}

.pdf-page[data-compact="2"] .read-done {
  font-size: 9px;
}

.pdf-page[data-compact="2"] .read-done i {
  width: 11px;
  height: 11px;
}

.pdf-page[data-compact="2"] .answer-line {
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.34;
}

.pdf-page[data-compact="2"] .focus-word {
  font-size: 15px;
}

.pdf-page[data-compact="2"] .mini-bank {
  margin-bottom: 4px;
}

.pdf-page[data-compact="2"] .mini-bank.horizontal-word-bank {
  gap: 3px;
}

.pdf-page[data-compact="2"] .mini-bank span {
  min-width: 44px;
  min-height: 34px;
  font-size: 13px;
}

.pdf-page[data-compact="2"] .mini-bank.horizontal-word-bank span {
  min-width: 62px;
  min-height: 34px;
  padding: 3px 7px 2px;
  font-size: 13px;
}

.pdf-page[data-compact="2"] .mini-bank.horizontal-word-bank ruby {
  gap: 1px;
}

.pdf-page[data-compact="2"] .mini-bank.horizontal-word-bank rt {
  font-size: 7px;
}

.pdf-page[data-compact="2"] .mini-bank.horizontal-word-bank rb {
  font-size: 13px;
}

.pdf-page[data-compact="2"] .mini-read-copy {
  gap: 4px;
  margin-bottom: 4px;
}

.pdf-page[data-compact="2"] .mini-read-line {
  padding: 3px 5px;
  font-size: 12px;
  line-height: 1.38;
}

.pdf-page[data-compact="2"] .write-model {
  width: 34px;
  height: 34px;
}

.pdf-page[data-compact="2"] .write-model b,
.pdf-page[data-compact="2"] .review-cell b {
  font-size: 18px;
}

.pdf-page[data-compact="2"] .word-write i,
.pdf-page[data-compact="2"] .write-lines span {
  min-width: 36px;
  height: 20px;
}

.pdf-page[data-compact="2"] .pdf-main {
  gap: 3px;
}

.pdf-page[data-compact="2"] .char-block {
  padding: 5px;
}

.pdf-page[data-compact="2"] .char-head {
  margin-bottom: 1px;
}

.pdf-page[data-compact="2"] .char-badge {
  width: 34px;
  height: 34px;
  font-size: 22px;
}

.pdf-page[data-compact="2"] .char-head h3 {
  font-size: 16px;
}

.pdf-page[data-compact="2"] .char-head h3 span {
  font-size: 11px;
}

.pdf-page[data-compact="2"] .practice-line {
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 2px;
  margin-top: 4px;
}

.pdf-page[data-compact="2"] .practice-line .row-label {
  height: 30px;
  font-size: 10px;
}

.pdf-page[data-compact="2"] .pinyin-line {
  height: 26px;
  font-size: 11px;
  max-width: 40px;
}

.pdf-page[data-compact="2"] .sample-line .solid-text {
  padding-bottom: 5px;
  font-size: 11px;
}

.pdf-page[data-compact="2"] .four-line {
  background:
    linear-gradient(#8ab7d8, #8ab7d8) left 2px top 3px / calc(100% - 4px) 1px no-repeat,
    linear-gradient(#8ab7d8, #8ab7d8) left 2px top 9px / calc(100% - 4px) 1px no-repeat,
    linear-gradient(#8ab7d8, #8ab7d8) left 2px top 15px / calc(100% - 4px) 1px no-repeat,
    linear-gradient(#8ab7d8, #8ab7d8) left 2px top 21px / calc(100% - 4px) 1px no-repeat;
}

.pdf-page[data-compact="2"] .pdf-page .tian-cell strong,
.pdf-page[data-compact="2"] .tian-cell strong {
  font-size: 38px;
}

.pdf-page[data-compact="2"] .practice-cells {
  gap: 3px;
}

.pdf-page[data-compact="2"] .combo-cell,
.pdf-page[data-compact="2"] .pdf-page .tian-cell,
.pdf-page[data-compact="2"] .tian-cell {
  max-width: 42px;
}

.story-page[data-compact="2"] .study-progress {
  margin: 6px 0 5px;
  padding: 5px 7px;
}

.story-page[data-compact="2"] .activity {
  margin-top: 4px;
  padding: 5px 6px;
}

.story-page[data-compact="2"] .activity-title {
  margin-bottom: 5px;
  font-size: 14px;
}

.story-page[data-compact="2"] .activity-generic .activity-grid {
  grid-template-columns: 1.04fr 0.96fr;
  gap: 5px;
}

.story-page[data-compact="2"] .activity-card {
  padding: 5px;
}

.story-page[data-compact="2"] .sentence-text {
  font-size: 13px;
  line-height: 1.33;
}

.story-page[data-compact="2"] .mini-bank.horizontal-word-bank {
  gap: 4px;
}

.story-page[data-compact="2"] .mini-bank.horizontal-word-bank span {
  min-height: 34px;
  padding: 3px 7px 2px;
}

.story-page[data-compact="2"] .mini-read-line {
  padding: 4px 6px;
  font-size: 13px;
  line-height: 1.34;
}

.story-page[data-compact="2"] .answer-line {
  font-size: 11px;
  line-height: 1.3;
}

.four-char-page .guide {
  grid-template-columns: 124px 1fr;
  gap: 9px;
  padding: 8px;
}

.four-char-page .guide-scene {
  min-height: 90px;
}

.four-char-page .char-block {
  padding: 6px 7px;
}

.four-char-page .char-head {
  grid-template-columns: 40px 1fr;
  gap: 7px;
  margin-bottom: 3px;
}

.four-char-page .char-badge {
  width: 40px;
  height: 40px;
  font-size: 25px;
}

.four-char-page .char-head h3 {
  font-size: 18px;
}

.four-char-page .char-head p {
  font-size: 11px;
}

.four-char-page .practice-line {
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 3px;
  margin-top: 4px;
}

.four-char-page .practice-line .row-label {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 11px;
}

.four-char-page .combo-cell {
  gap: 1px;
}

.four-char-page .pinyin-line {
  height: 22px;
  font-size: 12px;
}

.four-char-page .pdf-page .tian-cell,
.four-char-page .tian-cell {
  aspect-ratio: 1;
  height: auto;
}

.four-char-page .practice-cells {
  gap: 2px;
}

.four-char-page .combo-cell,
.four-char-page .pdf-page .tian-cell,
.four-char-page .tian-cell {
  max-width: 44px;
}

.four-char-page .pdf-page .tian-cell strong,
.four-char-page .tian-cell strong {
  font-size: 44px;
}

.four-char-page .activity {
  margin-top: 6px;
  padding: 6px;
}

.activity {
  margin-top: 6px;
  padding: 7px;
  border: 2px solid color-mix(in srgb, var(--c) 65%, white);
  border-radius: 8px;
  background: #f9feff;
}

.activity-title {
  margin-bottom: 8px;
  color: var(--a);
  font-size: 18px;
  font-weight: 900;
}

.activity-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 7px;
}

.activity-card {
  padding: 7px;
  border-radius: 8px;
  border: 1px solid #c7dfe5;
  background: #fff;
}

.activity-card h4 {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: 13px;
}

.activity-generic .activity-grid {
  grid-template-columns: 1fr;
  gap: 0;
}

.activity-generic .activity-card {
  padding: 8px 9px;
}

.activity-generic .activity-card h4 {
  margin: 0;
}

.activity-flow-card {
  display: grid;
  gap: 8px;
}

.activity-flow-section {
  display: grid;
  gap: 6px;
  align-content: start;
}

.activity-flow-head {
  display: flex;
  align-items: center;
  gap: 7px;
}

.activity-step-badge {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--a);
  font-size: 11px;
  font-weight: 900;
  flex: 0 0 auto;
}

.activity-flow-divider {
  height: 1px;
  border-top: 1px dashed color-mix(in srgb, var(--a) 26%, white);
}

.read-sentences {
  display: grid;
  gap: 5px;
}

.read-sentences p {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  font-weight: 900;
  align-items: flex-start;
}

.sentence-text {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  font-size: 17px;
  line-height: 1;
}

.sentence-text ruby,
.mini-read-line ruby,
.challenge-copy-word ruby,
.large-bank ruby {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 1.9em;
  min-height: 2.12em;
  margin: 0 0.08em;
  line-height: 1;
  vertical-align: top;
}

.sentence-text rt,
.mini-read-line rt,
.challenge-copy-word rt,
.large-bank rt {
  order: -1;
  min-width: 1.9em;
  min-height: 1em;
  height: 1em;
  text-align: center;
  line-height: 1;
}

.sentence-text rb,
.mini-read-line rb,
.challenge-copy-word rb,
.large-bank rb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1em;
  height: 1em;
  line-height: 1;
}

.sentence-text .annotated-punct,
.mini-read-line .annotated-punct {
  display: inline-flex;
  align-items: flex-end;
  min-height: 2.12em;
  padding-bottom: 0.06em;
  line-height: 1;
}

.read-done {
  display: flex;
  gap: 4px;
  align-items: flex-end;
  white-space: nowrap;
  font-size: 11px;
}

.read-done b {
  display: inline-flex;
  align-items: flex-end;
}

.read-done i {
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--a);
  border-radius: 50%;
}

.answer-line {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.activity-task-line {
  min-height: 34px;
}

.focus-word {
  color: var(--a);
  font-size: 19px;
}

.review-cells, .word-write {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
}

.review-cell, .write-model {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  border: 1.5px solid var(--a);
  background: #fff;
}

.review-cell i {
  font-size: 8px;
  font-style: normal;
}

.review-cell b, .write-model b {
  font: 500 25px/1 "KaiTi", "STKaiti", serif;
}

.write-model {
  width: 44px;
  height: 44px;
  padding-top: 2px;
}

.write-model ruby {
  margin: 0;
}

.write-model rt {
  font-size: 8px;
}

.full-word-review small {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 900;
}

.word-write i, .write-lines span {
  height: 28px;
  min-width: 46px;
  flex: 1;
  border-bottom: 1.5px solid #8eb6bd;
}

.activity-special {
  margin-top: 8px;
  padding: 7px;
}

.activity-special .activity-title {
  margin-bottom: 5px;
}

.activity-special .activity-card,
.activity-special .wide-card {
  min-height: 0;
  padding: 7px;
}

.activity-special h4 {
  margin-bottom: 4px;
  font-size: 13px;
}

.activity-special p {
  margin: 4px 0;
  font-size: 12.5px;
  line-height: 1.3;
}

.task-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  padding-bottom: 7px;
  border-bottom: 1px dashed color-mix(in srgb, var(--a) 38%, white);
}

.dot-line {
  min-height: 28px;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.dot-line span,
.dot-line i,
.count-dots span {
  width: 23px;
  height: 23px;
  display: inline-block;
  border: 1px solid #fff;
  border-radius: 50%;
  background: var(--a);
}

.dot-line i {
  background: var(--c);
}

.dot-line b {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0 2px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.1;
}

.dot-line b::after {
  content: "";
  width: 42px;
  border-bottom: 2px solid var(--ink);
  transform: translateY(5px);
}

.dot-line.take i {
  position: relative;
  background: var(--a);
}

.dot-line.take i::after {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  top: 10px;
  border-top: 3px solid #d62828;
  transform: rotate(-35deg);
}

.equation {
  display: grid;
  grid-template-columns: 38px auto 38px auto 42px;
  align-items: center;
  gap: 5px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 900;
}

.equation.long-eq {
  grid-template-columns: auto auto auto auto 58px;
  justify-content: start;
}

.equation em,
.answer-line em {
  display: inline-block;
  width: 38px;
  height: 28px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: #fff;
  vertical-align: middle;
}

.answer-line em {
  width: 54px;
  margin: 0 5px;
}

.line-fill {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.queue-mini {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.queue-mini span {
  min-width: 38px;
  min-height: 48px;
  width: auto;
  height: auto;
  display: grid;
  place-items: center;
  padding: 8px 6px 5px;
  border-radius: 18px 18px 10px 10px;
  color: #fff;
  background: var(--a);
  font-weight: 900;
}

.count-dots {
  min-height: 52px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.big-words {
  color: var(--ink);
  font-size: 14px !important;
  font-weight: 900;
  word-spacing: 8px;
}

.choice {
  min-width: 38px;
  min-height: 34px;
  width: auto;
  height: auto;
  display: inline-grid;
  place-items: center;
  margin: 0 3px;
  padding: 6px 5px 3px;
  border: 1.5px solid var(--a);
  border-radius: 7px;
  background: #fff;
  color: var(--a);
  font-weight: 900;
  vertical-align: middle;
}

.challenge-route {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 12px 0;
}

.challenge-route span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  border-radius: 999px;
  background: #eef4f7;
  font-weight: 900;
}

.challenge-route span.active {
  color: #fff;
  background: var(--a);
}

.challenge-route b {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
}

.challenge-guide {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 12px;
  margin-bottom: 10px;
  padding: 10px;
  border: 2px dashed var(--a);
  border-radius: 8px;
  background: #fff;
}

.challenge-panel {
  margin-top: 8px;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 2px solid color-mix(in srgb, var(--a) 45%, white);
  border-radius: 8px;
  background: #fff;
}

.challenge-page .pdf-page-inner {
  display: flex;
  flex-direction: column;
}

.challenge-panel h3 {
  margin: 0;
  color: var(--a);
  font-size: 17px;
}

.pdf-page .char-bank,
.pdf-page .word-bank {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.pdf-page .char-bank span,
.pdf-page .word-bank span {
  min-width: 48px;
  min-height: 40px;
  display: grid;
  place-items: center;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1.5px solid color-mix(in srgb, var(--a) 55%, white);
  background: #fffaf0;
  font-weight: 900;
}

.mini-bank {
  margin-bottom: 8px;
}

.mini-bank.horizontal-word-bank {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 8px;
}

.mini-bank span {
  min-width: 58px;
  min-height: 46px;
  font-size: 17px;
}

.mini-bank.horizontal-word-bank span {
  min-width: 0;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px 4px;
  font-size: 16px;
}

.mini-bank.horizontal-word-bank ruby {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  gap: 2px;
  line-height: 1;
}

.mini-bank.horizontal-word-bank rt {
  order: -1;
  font-size: 10px;
  min-width: 0;
  text-align: center;
  line-height: 1;
}

.mini-bank.horizontal-word-bank rb {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  font-size: 16px;
}

.mini-read-copy {
  display: grid;
  gap: 4px;
  margin-bottom: 0;
}

.mini-read-line {
  margin: 0;
  padding: 7px 9px 6px;
  border-radius: 7px;
  background: #f9fcff;
  border: 1px dashed color-mix(in srgb, var(--a) 38%, white);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 700;
}

.activity-word-line {
  margin-top: 2px;
}

.large-bank span {
  min-width: 68px;
  min-height: 58px;
  padding: 8px 10px;
  font-size: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.large-bank ruby {
  margin: 0;
  width: 1.45em;
}

.large-bank rt {
  font-size: 11px;
  min-width: 1.45em;
}

.fun-bank span {
  background: #f7fbff;
}

.challenge-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.65;
}

.challenge-mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

.challenge-mini-card {
  padding: 8px;
  border-radius: 8px;
  border: 1px dashed color-mix(in srgb, var(--a) 55%, white);
  background: #f9fcff;
}

.challenge-mini-card b {
  display: block;
  margin-bottom: 6px;
  color: var(--a);
}

.challenge-mini-card p {
  margin: 0;
  font-weight: 900;
  line-height: 1.7;
  font-size: 17px;
}

.challenge-copy-list {
  display: grid;
  gap: 16px;
}

.challenge-copy-list p {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  min-height: 50px;
  font-size: 19px;
  font-weight: 900;
}

.challenge-copy-word {
  min-width: 128px;
  display: inline-flex;
  align-items: flex-end;
}

.challenge-copy-line {
  flex: 1;
  min-height: 38px;
  border-bottom: 1.5px solid color-mix(in srgb, var(--a) 60%, white);
}

.star-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(38px, 1fr));
  gap: 12px;
  align-items: center;
}

.star-row i {
  width: 36px;
  height: 36px;
  justify-self: center;
  clip-path: polygon(50% 0, 62% 35%, 100% 35%, 69% 57%, 80% 95%, 50% 72%, 20% 95%, 31% 57%, 0 35%, 38% 35%);
  background: #ffd166;
}

.write-lines {
  display: grid;
  gap: 14px;
}

.compact-panel .challenge-mini-grid {
  margin-bottom: 12px;
}

.mission-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.mission-card {
  padding: 9px;
  border-radius: 8px;
  background: #f8fbfb;
  border: 1px solid #d7e6e8;
}

.mission-card p {
  margin: 5px 0 0;
  padding-bottom: 0;
  line-height: 1.8;
  font-size: 14px;
}

.fill-line {
  display: inline-flex;
  min-width: 72px;
  min-height: 24px;
  align-items: flex-end;
  border-bottom: 1.5px solid #375a68;
  justify-content: center;
  position: relative;
  vertical-align: baseline;
}

.fill-line.long {
  min-width: 160px;
}

.mission-hint {
  display: inline-block;
  margin-left: 4px;
  color: #6c7f8c;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.story-card p {
  margin: 7px 0;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.85;
}

.story-questions p {
  margin: 8px 0;
  font-weight: 900;
  font-size: 14px;
}

.story-questions em {
  display: inline-block;
  width: 280px;
  height: 18px;
  border-bottom: 1.5px solid #375a68;
}

.story-page .story-section .activity-grid {
  grid-template-columns: 1fr;
  gap: 8px;
}

.story-page[data-compact="2"] .story-section.activity-generic .activity-grid {
  grid-template-columns: 1fr;
  gap: 6px;
}

.story-page .story-card .read-sentences {
  gap: 8px;
}

.story-page .story-questions .mini-read-copy {
  gap: 6px;
  margin-bottom: 8px;
}

.story-page .story-questions .mini-read-line {
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 16px;
  line-height: 1.65;
  font-weight: 800;
}

.story-page .story-questions .answer-line {
  margin-top: 8px;
}

.mini-calc, .math-art, .line-art, .story-photo {
  min-height: 110px;
  display: grid;
  place-items: center;
}

.story-guide {
  align-items: center;
}

.challenge-panel .large-bank span ruby,
.challenge-panel .large-bank span rb,
.challenge-panel .large-bank span rt {
  text-align: center;
}

.challenge-char-card-panel,
.challenge-word-card-panel {
  min-height: 164px;
  align-content: start;
}

.challenge-char-task-panel,
.challenge-word-task-panel {
  min-height: 168px;
  flex: 1 1 auto;
  align-content: start;
}

.challenge-panel .large-bank {
  display: grid;
  align-items: stretch;
  gap: 10px;
}

.challenge-panel .char-bank.large-bank {
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
}

.challenge-panel .word-bank.large-bank {
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
}

.challenge-panel .large-bank span {
  width: 100%;
  min-height: 72px;
  padding: 10px 8px;
  font-size: 30px;
}

.challenge-panel .large-bank ruby {
  width: 1.6em;
}

.challenge-panel .large-bank rt {
  min-width: 1.6em;
  font-size: 12px;
}

.challenge-char-card-panel .large-bank ruby {
  width: 1.8em;
}

.challenge-char-card-panel .large-bank rt {
  min-width: 1.8em;
  font-size: 14px;
  line-height: 1.05;
}

.challenge-panel .large-bank rb {
  font-size: 30px;
}

.challenge-char-task-panel .word-write {
  display: grid;
  gap: 12px;
  align-content: start;
}

.word-write-row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  align-items: end;
}

.challenge-char-task-panel .write-model {
  width: 64px;
  height: 64px;
  padding-top: 6px;
}

.challenge-char-task-panel .write-model ruby {
  width: 1.7em;
}

.challenge-char-task-panel .write-model rb {
  font-size: 30px;
  line-height: 1;
}

.challenge-char-task-panel .write-model b {
  font-size: 30px;
  line-height: 1;
}

.challenge-char-task-panel .write-model rt {
  min-width: 1.7em;
  font-size: 14px;
  line-height: 1.05;
}

.challenge-char-task-panel .word-write i {
  min-width: 0;
  height: 40px;
}

.challenge-word-task-panel .challenge-copy-list {
  min-height: 132px;
  height: 100%;
  align-content: space-between;
  gap: 18px;
}

.challenge-word-task-panel .challenge-copy-list.sentence-task-list {
  min-height: 0;
  height: auto;
  align-content: start;
  gap: 8px;
}

.challenge-word-task-panel .challenge-copy-word {
  min-width: 164px;
  align-items: center;
}

.challenge-word-task-panel .challenge-copy-word ruby {
  width: 2em;
  margin: 0 0.08em;
}

.challenge-word-task-panel .challenge-copy-word rt {
  min-width: 2em;
  font-size: 12px;
}

.challenge-word-task-panel .challenge-copy-word rb {
  font-size: 30px;
}

.challenge-word-task-panel .challenge-copy-list p {
  min-height: 60px;
  align-items: flex-end;
  padding-bottom: 6px;
  line-height: 1.32;
}

.challenge-word-task-panel .challenge-copy-list.sentence-task-list p {
  min-height: 46px;
  padding-bottom: 2px;
  line-height: 1.24;
  font-size: 16px;
}

.challenge-word-task-panel .challenge-copy-list.sentence-task-list p b {
  flex: 0 0 auto;
  font-size: 16px;
  line-height: 1.1;
}

.challenge-word-task-panel .challenge-copy-list.sentence-task-list .challenge-copy-word rt {
  min-width: 1.8em;
  font-size: 11px;
}

.challenge-word-task-panel .challenge-copy-list.sentence-task-list .challenge-copy-word rb {
  font-size: 24px;
}

.challenge-word-task-panel .challenge-copy-line {
  min-height: 44px;
}

.challenge-char-task-panel {
  grid-template-rows: auto auto 1fr auto;
}

.challenge-word-task-panel {
  grid-template-rows: auto auto 1fr;
}

.challenge-char-task-panel .star-row {
  margin-top: auto;
}

.challenge-page[data-compact="2"] .challenge-panel {
  gap: 8px;
  padding: 8px;
}

.challenge-page[data-compact="2"] .challenge-panel .activity-grid {
  gap: 6px;
}

.challenge-page[data-compact="2"] .challenge-panel .activity-card {
  padding: 6px;
}

.challenge-page[data-compact="2"] .large-bank {
  gap: 8px;
}

.challenge-page[data-compact="2"] .challenge-panel .large-bank span {
  min-height: 62px;
  padding: 8px 7px;
}

.challenge-page[data-compact="2"] .challenge-panel .large-bank rb {
  font-size: 26px;
}

.challenge-page[data-compact="2"] .challenge-char-card-panel .large-bank rt {
  font-size: 12px;
}

.challenge-page[data-compact="2"] .challenge-word-task-panel .challenge-copy-list {
  gap: 10px;
}

.challenge-page[data-compact="2"] .challenge-word-task-panel .challenge-copy-list p {
  min-height: 52px;
  padding-bottom: 4px;
  gap: 8px;
}

.challenge-page[data-compact="2"] .challenge-word-task-panel .challenge-copy-word {
  min-width: 148px;
}

.challenge-page[data-compact="2"] .challenge-word-task-panel .challenge-copy-word rb {
  font-size: 26px;
}

.challenge-page[data-compact="2"] .challenge-char-task-panel .write-model {
  width: 56px;
  height: 56px;
  padding-top: 4px;
}

.challenge-page[data-compact="2"] .challenge-char-task-panel .write-model rb {
  font-size: 26px;
}

.challenge-page[data-compact="2"] .challenge-char-task-panel .write-model rt {
  font-size: 12px;
}

.challenge-page[data-compact="2"] .challenge-char-task-panel .word-write {
  gap: 10px;
}

.challenge-page[data-compact="2"] .word-write-row {
  grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.challenge-page[data-compact="2"] .challenge-char-task-panel .word-write i {
  height: 34px;
}

.challenge-page[data-compact="2"] .challenge-panel {
  gap: 6px;
  padding: 7px;
}

.challenge-page[data-compact="2"] .challenge-panel .activity-grid {
  gap: 5px;
}

.challenge-page[data-compact="2"] .challenge-panel .activity-card {
  padding: 5px;
}

.challenge-page[data-compact="2"] .challenge-panel .large-bank span {
  min-height: 56px;
  padding: 7px 6px;
}

.challenge-page[data-compact="2"] .challenge-panel .large-bank rb {
  font-size: 24px;
}

.challenge-page[data-compact="2"] .challenge-char-card-panel .large-bank rt,
.challenge-page[data-compact="2"] .challenge-word-task-panel .challenge-copy-word rt {
  font-size: 11px;
}

.challenge-page[data-compact="2"] .challenge-word-task-panel .challenge-copy-list {
  gap: 8px;
}

.challenge-page[data-compact="2"] .challenge-word-task-panel .challenge-copy-list p {
  min-height: 46px;
  font-size: 15px;
  line-height: 1.2;
}

.challenge-page[data-compact="2"] .challenge-word-task-panel .challenge-copy-word {
  min-width: 134px;
}

.challenge-page[data-compact="2"] .challenge-word-task-panel .challenge-copy-word rb {
  font-size: 23px;
}

.challenge-page[data-compact="2"] .challenge-char-task-panel .write-model {
  width: 50px;
  height: 50px;
}

.challenge-page[data-compact="2"] .challenge-char-task-panel .write-model rb {
  font-size: 24px;
}

.challenge-page[data-compact="2"] .challenge-char-task-panel .word-write {
  gap: 8px;
}

.challenge-page[data-compact="2"] .word-write-row {
  grid-template-columns: 58px minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.challenge-page[data-compact="2"] .challenge-char-task-panel .word-write i {
  height: 30px;
}

.story-photo {
  position: relative;
  grid-template-columns: 1fr 52px;
  gap: 8px;
  width: 100%;
  min-height: 124px;
  padding: 8px;
  overflow: hidden;
  border-radius: 8px;
  border: 1.5px solid color-mix(in srgb, var(--a) 48%, white);
  background: linear-gradient(180deg, color-mix(in srgb, var(--b) 35%, white), #fff);
}

.story-photo .cartoon-img {
  grid-column: 1 / -1;
  height: 124px;
  border: 0;
}

.story-photo .scene-kid.big {
  align-self: end;
  justify-self: center;
  box-shadow: inset 0 16px 0 #ffd166;
}

.story-desk,
.story-paper,
.story-book,
.story-frame,
.story-nature {
  position: relative;
  z-index: 1;
  min-height: 82px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #fff;
  border: 2px solid var(--a);
  text-align: center;
  font-weight: 900;
}

.story-desk {
  grid-template-columns: repeat(4, 30px);
  gap: 4px;
  padding: 8px;
}

.story-gate {
  align-self: stretch;
  display: grid;
  place-items: center;
  min-width: 58px;
  border-radius: 8px 8px 20px 20px;
  color: #fff;
  background: var(--a);
  font-weight: 900;
}

.story-queue .queue-mini {
  align-self: end;
}

.story-frame {
  background:
    radial-gradient(circle at 78% 18%, #ffd166 0 12px, transparent 13px),
    linear-gradient(160deg, transparent 50%, #96d67d 51%),
    #dff4ff;
}

.story-frame b {
  padding: 4px 12px;
  border-radius: 999px;
  color: #fff;
  background: var(--a);
}

.story-frame i {
  width: 56px;
  height: 20px;
  border-radius: 60% 60% 0 0;
  background: #65b96e;
}

.story-frame span {
  width: 68px;
  height: 7px;
  border-radius: 999px;
  background: #4bb1de;
}

.story-nature {
  background: linear-gradient(#dff5ff 0 48%, #e5f8d6 49%);
}

.story-nature .hill {
  position: absolute;
  bottom: 20px;
  left: 14px;
  width: 62px;
  height: 36px;
  border-radius: 60px 60px 0 0;
  background: #6fbd63;
}

.story-nature .river {
  position: absolute;
  bottom: 9px;
  left: 20px;
  width: 82px;
  height: 10px;
  border-radius: 999px;
  background: #4bb1de;
}

.story-nature .tree {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 20px;
  height: 36px;
  border-radius: 999px 999px 4px 4px;
  background: linear-gradient(#4fb16b 0 62%, #9b6b3d 63%);
}

.story-nature .sun {
  position: absolute;
  right: 18px;
  top: 12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffd166;
}

.story-paper,
.story-book {
  align-content: center;
  gap: 8px;
  padding: 10px;
}

.story-paper b,
.story-book b {
  color: var(--a);
  font-size: 20px;
}

.story-paper span,
.story-book span {
  padding: 4px 10px;
  border-radius: 6px;
  background: #fff6db;
}

.mini-calc {
  grid-template-columns: repeat(3, 32px);
  gap: 5px;
}

.mini-calc b {
  grid-column: 1 / -1;
  padding: 5px 12px;
  border-radius: 6px;
  color: #fff;
  background: var(--a);
}

.mini-calc span, .ball, .sign {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  font-weight: 900;
}

.queue-mini {
  display: flex;
  gap: 7px;
}

.queue-mini span {
  width: 38px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 18px 18px 10px 10px;
  color: #fff;
  background: var(--a);
  font-weight: 900;
}

.picture-frame, .name-card {
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 10px;
  border-radius: 8px;
  background: #fff;
  border: 2px solid var(--a);
  text-align: center;
}

.scene-kid.big {
  width: 58px;
  height: 70px;
  border-radius: 28px 28px 14px 14px;
  background: #ffbf7a;
}

ruby {
  margin: 0 2px;
  line-height: 1.1;
  ruby-position: over;
}

rt {
  font-size: 10px;
  color: #3973b7;
  line-height: 1;
}

rb {
  display: inline;
}

.empty-state {
  min-height: 150px;
  display: grid;
  align-content: center;
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #fff;
}

.order-list {
  display: grid;
  gap: 14px;
}

.order-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.order-summary-card,
.order-card,
.order-empty {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfefe;
}

.order-summary-card {
  display: grid;
  gap: 6px;
  background: linear-gradient(180deg, #ffffff 0%, #f4fbfb 100%);
}

.order-summary-card span {
  font-size: 13px;
  color: var(--muted);
}

.order-summary-card strong {
  font-size: 22px;
  color: var(--ink);
}

.order-card {
  display: grid;
  gap: 12px;
}

.order-download {
  width: max-content;
  color: var(--blue);
  font-weight: 800;
  text-decoration: none;
}

.order-download:hover {
  text-decoration: underline;
}

.order-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.order-card-head > div {
  display: grid;
  gap: 4px;
}

.order-card-head small {
  color: var(--muted);
}

.order-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: #8aa0a6;
}

.order-badge.stage-pending-payment { background: #f59f00; }
.order-badge.stage-paid { background: #2f9e44; }
.order-badge.stage-typesetting { background: #1c7ed6; }
.order-badge.stage-printing { background: #7b2cbf; }
.order-badge.stage-done { background: #0b7285; }

.order-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 16px;
}

.order-meta-grid div {
  display: grid;
  gap: 5px;
}

.order-meta-grid span {
  color: var(--muted);
  font-size: 13px;
}

.order-meta-grid b {
  font-size: 15px;
  color: var(--ink);
}

.order-progress {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.order-step {
  display: grid;
  gap: 6px;
  justify-items: center;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

.order-step i {
  display: block;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: #d9e6e8;
}

.order-step.done,
.order-step.current {
  color: var(--ink);
  font-weight: 700;
}

.order-step.done i,
.order-step.current i {
  background: var(--primary);
}

.order-note,
.order-action-hint,
.order-empty p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.order-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.pay-action {
  min-width: 112px;
}

.pay-action.wechat {
  background: #20c05c;
}

.pay-action.alipay {
  background: #1677ff;
}

.order-empty {
  display: grid;
  gap: 8px;
}

.story-photo img {
  display: block;
  width: 100%;
  height: 124px;
  object-fit: cover;
  object-position: center;
  border-radius: 6px;
}

.story-card ruby {
  margin: 0 2px;
}

.story-card rt {
  color: var(--a);
  font-size: 9px;
}

.story-card rb,
.story-card .plain-char {
  font-size: 18px;
}

.new-word-panel {
  margin-top: 8px;
}

.new-word-panel div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.new-word-panel span {
  min-width: 42px;
  min-height: 40px;
  display: inline-grid;
  place-items: center;
  padding: 4px 6px;
  border: 1px solid color-mix(in srgb, var(--a) 40%, white);
  border-radius: 8px;
  background: #fffaf0;
}

.new-word-panel rb {
  font-size: 22px;
  font-weight: 900;
}

.new-word-panel rt {
  color: var(--a);
  font-size: 8px;
}

.activity-special .queue-mini {
  gap: 7px;
  align-items: flex-end;
}

.activity-special .queue-mini span {
  min-width: 38px;
  min-height: 48px;
  width: auto;
  height: auto;
}

.activity-special .count-dots {
  min-height: 52px;
  gap: 8px;
}

.activity-special .count-dots span {
  width: 23px;
  height: 23px;
}

.activity-special .choice {
  min-width: 38px;
  min-height: 34px;
  width: auto;
  height: auto;
  margin: 0 3px;
}

.activity-title ruby,
.activity-card h4 ruby,
.answer-line ruby,
.big-words ruby,
.full-word-review small ruby,
.read-done ruby,
.queue-mini ruby,
.choice ruby {
  margin: 0 1px;
}

.queue-mini rt,
.read-done rt {
  font-size: 8px;
}

.queue-mini rt {
  color: rgba(255,255,255,.96);
}

.choice rt,
.activity-title rt,
.activity-card h4 rt,
.answer-line rt,
.big-words rt,
.full-word-review small rt {
  font-size: 8px;
}

.plain-title rt,
.plain-heading rt {
  display: none;
}

.hidden { display: none !important; }

@media screen and (max-width: 900px) {
  main { padding: 10px; }
  .workspace { grid-template-columns: 1fr; }
  .controls { position: static; }
  .form-grid,
  .order-summary,
  .order-meta-grid,
  .order-progress {
    grid-template-columns: 1fr;
  }
  .worksheet {
    width: 100%;
    justify-items: center;
  }
  body:not([data-export-mode="pdf"]) .pdf-page {
    width: 794px;
    height: 1123px;
    min-height: 1123px;
    padding: 0;
    zoom: min(1, calc((100vw - 20px) / 794px));
  }
}

@page {
  size: A4 portrait;
  margin: 0;
}

html,
body,
.pdf-page,
.pdf-page::before,
.pdf-page::after {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

@media print {
  body { background: #fff; }
  .app-header, .controls, .top-tabs, .tab-view:not(#creatorTab) { display: none !important; }
  main { width: 100%; padding: 0; }
  .workspace { display: block; }
  .preview-column { display: block; }
  .worksheet {
    width: 210mm;
    display: block;
    gap: 0;
    margin: 0 auto;
  }
  .pdf-page {
    width: 210mm;
    height: 297mm;
    margin: 0;
    border: 0;
    box-shadow: none;
    page-break-after: always;
    break-after: page;
  }
  .pdf-page:last-child {
    page-break-after: auto;
    break-after: auto;
  }
}

body[data-export-mode="pdf"] {
  background: #fff;
}

body[data-export-mode="pdf"] .app-header,
body[data-export-mode="pdf"] .controls,
body[data-export-mode="pdf"] .top-tabs,
body[data-export-mode="pdf"] .tab-view:not(#creatorTab) {
  display: none !important;
}

body[data-export-mode="pdf"] main {
  width: 100%;
  padding: 0;
}

body[data-export-mode="pdf"] .workspace,
body[data-export-mode="pdf"] .preview-column,
body[data-export-mode="pdf"] .worksheet {
  display: block;
  width: 210mm;
  margin: 0 auto;
  padding: 0;
}

body[data-export-mode="pdf"] .worksheet {
  gap: 0;
}

body[data-export-mode="pdf"] .pdf-page {
  width: 210mm;
  height: 297mm;
  margin: 0;
  border: 0;
  box-shadow: none;
  background:
    radial-gradient(circle at 94% 8%, color-mix(in srgb, var(--c) 32%, white) 0 5%, transparent 6%),
    radial-gradient(circle at 7% 76%, color-mix(in srgb, var(--c) 22%, white) 0 13%, transparent 14%),
    radial-gradient(circle at 86% 91%, color-mix(in srgb, var(--b) 22%, white) 0 10%, transparent 11%),
    radial-gradient(circle at 16% 106%, rgba(255, 227, 176, .54) 0 28%, transparent 29%),
    radial-gradient(circle at 94% 104%, rgba(110, 208, 122, .28) 0 24%, transparent 25%),
    linear-gradient(180deg, #fffdf8 0%, #fffaf0 100%);
}

body[data-export-mode="pdf"] .pdf-page::before {
  inset: 0;
  opacity: 1;
  background:
    radial-gradient(circle at 4% 89%, rgba(132, 214, 199, .2) 0 18%, transparent 19%),
    radial-gradient(circle at 50% 108%, rgba(255, 216, 166, .32) 0 30%, transparent 31%),
    radial-gradient(circle at 95% 84%, rgba(255, 227, 163, .24) 0 15%, transparent 16%),
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0));
}

body[data-export-mode="pdf"] .pdf-page::after {
  right: -36px;
  bottom: -36px;
  width: 390px;
  height: 306px;
  opacity: .66;
  background:
    radial-gradient(circle at 24% 34%, #ffe3a3 0 19%, transparent 20%),
    radial-gradient(circle at 76% 74%, rgba(124, 213, 171, .94) 0 19%, transparent 20%),
    radial-gradient(circle at 46% 48%, rgba(255,255,255,.54) 0 31%, transparent 32%),
    radial-gradient(circle at 14% 88%, rgba(255, 216, 166, .4) 0 28%, transparent 29%),
    linear-gradient(180deg, rgba(111, 208, 122, .26), rgba(111, 208, 122, 0) 80%);
}

body[data-export-mode="pdf"] .pdf-page:not(.challenge-page) .pdf-page-inner {
  display: block;
  padding: 18px 12px 14px;
}

body[data-export-mode="pdf"] .pdf-page:not(.challenge-page) header {
  padding-top: 0;
  padding-bottom: 10px;
}

body[data-export-mode="pdf"] .pdf-page:not(.challenge-page) .pdf-main {
  display: grid;
  gap: 6px;
}

body[data-export-mode="pdf"] .pdf-page:not(.challenge-page) .activity {
  margin-top: 8px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-width: 2px;
  background: linear-gradient(180deg, rgba(255, 251, 243, .96), rgba(249, 254, 255, .96));
  border-color: color-mix(in srgb, var(--c) 58%, white);
}

body[data-export-mode="pdf"] .pdf-page:not(.challenge-page) .guide {
  margin-bottom: 10px;
  padding: 9px;
  border-width: 2px;
  background: linear-gradient(180deg, rgba(255, 249, 239, .98), rgba(255,255,255,.94));
  border-color: color-mix(in srgb, var(--a) 68%, white);
}

body[data-export-mode="pdf"] .pdf-page:not(.challenge-page) .study-progress {
  margin: 8px 0 8px;
}

body[data-export-mode="pdf"] .pdf-page:not(.challenge-page) .info {
  margin-bottom: 6px;
}

body[data-export-mode="pdf"] .activity-grid {
  grid-template-columns: 1.15fr .85fr;
  gap: 6px;
}

body[data-export-mode="pdf"] .activity-generic .activity-grid {
  grid-template-columns: 1fr;
  gap: 0;
}

body[data-export-mode="pdf"] .activity-generic .activity-card {
  padding: 6px;
  background: rgba(255,255,255,.94);
}

body[data-export-mode="pdf"] .activity-generic .activity-flow-card {
  gap: 6px;
}

body[data-export-mode="pdf"] .activity-generic .activity-flow-section {
  gap: 5px;
}

body[data-export-mode="pdf"] .activity-generic .activity-title {
  margin-bottom: 6px;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--a) 42%, white);
  background: color-mix(in srgb, var(--c) 22%, white);
  font-size: 17px;
}

body[data-export-mode="pdf"] .activity-generic .mini-bank {
  margin-bottom: 5px;
}

body[data-export-mode="pdf"] .activity-generic .mini-bank.horizontal-word-bank {
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 6px;
}

body[data-export-mode="pdf"] .activity-generic .mini-bank.horizontal-word-bank span {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 9px 2px;
  font-size: 15px;
}

body[data-export-mode="pdf"] .mini-bank.horizontal-word-bank ruby {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1;
}

body[data-export-mode="pdf"] .mini-bank.horizontal-word-bank rt {
  order: -1;
  font-size: 9px;
  line-height: 1;
}

body[data-export-mode="pdf"] .mini-bank.horizontal-word-bank rb {
  font-size: 15px;
}

body[data-export-mode="pdf"] .activity-generic .mini-read-copy {
  margin-bottom: 0;
}

body[data-export-mode="pdf"] .activity-generic .mini-read-line {
  padding: 4px 6px;
  font-size: 14px;
  line-height: 1.5;
  background: rgba(249, 252, 255, .9);
}

body[data-export-mode="pdf"] .pdf-page:not(.challenge-page) .char-block {
  padding: 5px 6px;
  border-width: 2px;
  border-color: color-mix(in srgb, #ff9aa2 58%, white);
  background: rgba(255,255,255,.96);
}

body[data-export-mode="pdf"] .pdf-page:not(.challenge-page) .activity-card {
  background: rgba(255,255,255,.94);
}

body[data-export-mode="pdf"] .story-page .pdf-page-inner {
  padding: 18px 12px 14px;
}

body[data-export-mode="pdf"] .story-page .story-section .activity-grid {
  grid-template-columns: 1.12fr 0.88fr;
  gap: 7px;
}

body[data-export-mode="pdf"] .story-page .mini-bank.horizontal-word-bank {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

body[data-export-mode="pdf"] .story-page .mini-bank.horizontal-word-bank span {
  min-height: 36px;
  padding: 4px 8px 2px;
}

body[data-export-mode="pdf"] .story-page .sentence-text {
  font-size: 15px;
  line-height: 1.52;
}

body[data-export-mode="pdf"] .story-page .mini-read-line {
  padding: 4px 6px;
  font-size: 14px;
  line-height: 1.5;
}

body[data-export-mode="pdf"] .story-page .answer-line {
  font-size: 11px;
  line-height: 1.32;
}

body[data-export-mode="pdf"] .challenge-page .pdf-page-inner {
  padding: 18px 12px 14px;
  display: flex;
  flex-direction: column;
}

body[data-export-mode="pdf"] .challenge-page .challenge-panel {
  margin-top: 8px;
  gap: 8px;
  padding: 8px;
}

body[data-export-mode="pdf"] .challenge-page .challenge-panel .activity-grid {
  gap: 6px;
}

body[data-export-mode="pdf"] .challenge-page .challenge-panel .activity-card {
  padding: 6px;
}

body[data-export-mode="pdf"] .challenge-page .challenge-panel .large-bank span {
  min-height: 60px;
  padding: 8px 7px;
}

body[data-export-mode="pdf"] .challenge-page .challenge-panel .large-bank rb {
  font-size: 25px;
}

body[data-export-mode="pdf"] .challenge-page .challenge-char-card-panel .large-bank rt,
body[data-export-mode="pdf"] .challenge-page .challenge-word-task-panel .challenge-copy-word rt {
  font-size: 11px;
}

body[data-export-mode="pdf"] .challenge-page .challenge-word-task-panel .challenge-copy-list {
  gap: 9px;
}

body[data-export-mode="pdf"] .challenge-page .challenge-word-task-panel .challenge-copy-list p {
  min-height: 38px;
  padding-bottom: 3px;
  line-height: 1.2;
}

body[data-export-mode="pdf"] .challenge-page .challenge-word-task-panel .challenge-copy-word {
  min-width: 140px;
}

body[data-export-mode="pdf"] .challenge-page .challenge-word-task-panel .challenge-copy-word rb {
  font-size: 24px;
}

body[data-export-mode="pdf"] .challenge-page .challenge-char-task-panel .write-model {
  width: 52px;
  height: 52px;
  padding-top: 4px;
}

body[data-export-mode="pdf"] .challenge-page .challenge-char-task-panel .write-model rb {
  font-size: 24px;
}

body[data-export-mode="pdf"] .challenge-page .challenge-char-task-panel .write-model rt {
  font-size: 11px;
}

body[data-export-mode="pdf"] .challenge-page .word-write-row {
  grid-template-columns: 60px minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

body[data-export-mode="pdf"] .challenge-page .challenge-char-task-panel .word-write i {
  height: 30px;
}

body[data-export-mode="pdf"] .challenge-guide {
  grid-template-columns: 150px 1fr;
}

body[data-export-mode="pdf"] .mission-list {
  grid-template-columns: 1fr 1fr;
}

body[data-export-mode="pdf"] .practice-line {
  grid-template-columns: 68px minmax(0, 1fr);
  overflow-x: visible;
  padding-bottom: 0;
  gap: 2px;
  margin-top: 6px;
}

body[data-export-mode="pdf"] .practice-cells {
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 5px;
}

body[data-export-mode="pdf"] .combo-cell {
  gap: 5px;
  max-width: 49px;
}

body[data-export-mode="pdf"] .pinyin-line {
  max-width: 49px;
  height: 32px;
  font-size: 14px;
}

body[data-export-mode="pdf"] .sample-line .solid-text {
  padding-bottom: 6px;
}

body[data-export-mode="pdf"] .pdf-page .tian-cell {
  max-width: 49px;
}

body[data-export-mode="pdf"] .pdf-page .tian-cell strong {
  font-size: 39px;
}

body[data-export-mode="pdf"] .activity-special .activity-grid {
  grid-template-columns: 1.15fr .85fr;
}

body[data-export-mode="pdf"] .story-page .story-section .activity-grid {
  grid-template-columns: 1fr;
  gap: 6px;
  align-items: start;
}

body[data-export-mode="pdf"] .story-page .story-card p {
  font-size: 18px;
  line-height: 1.78;
}

body[data-export-mode="pdf"] .story-page .story-questions .mini-read-line {
  font-size: 15px;
  line-height: 1.58;
}

.story-page .story-card .sentence-text {
  font-size: 18px;
  line-height: 1.58;
}

.story-page .story-card .sentence-text rt {
  font-size: 10px;
}

.story-page .story-section .activity-grid {
  margin-top: 0;
}

body[data-export-mode="pdf"] .story-page .story-card .sentence-text {
  font-size: 18px;
  line-height: 1.58;
}

/* Layout-only sync for word/sentence station, story page, and review page */
.activity-flow-section .mini-bank.horizontal-word-bank span {
  min-height: 46px;
  padding: 6px 10px 4px;
}

.activity-flow-section .mini-bank.horizontal-word-bank rb,
.activity-flow-section .sentence-text rb {
  font-size: 18px;
  font-weight: 400;
}

.activity-flow-section .mini-bank.horizontal-word-bank rt,
.activity-flow-section .sentence-text rt {
  font-size: 11px;
  font-weight: 400;
}

.activity-flow-section .read-sentences p {
  font-weight: 400;
}

.activity-flow-section .sentence-text {
  font-size: 18px;
  line-height: 1;
  font-weight: 400;
}

.story-page .story-card .sentence-text {
  font-size: 20px;
  line-height: 1.62;
}

.story-page .story-card .sentence-text rt {
  font-size: 11px;
}

.story-page .story-section .activity-grid {
  grid-template-columns: 1fr;
  gap: 8px;
}

.story-page .story-questions .mini-read-copy {
  grid-template-columns: 1fr;
  gap: 6px;
}

.story-page .story-questions .mini-read-line {
  font-size: 16px;
  line-height: 1.56;
}

.review-page .pdf-page-inner {
  display: flex;
  flex-direction: column;
}

.review-page-content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.review-char-list {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(var(--review-count, 18), minmax(0, 1fr));
  gap: 4px;
}

.review-char-row {
  min-height: 0;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 4px 8px;
  border: 1.5px solid color-mix(in srgb, var(--c) 52%, white);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
}

.review-char-row > :first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  font-size: 26px;
  line-height: 1;
  font-weight: 700;
}

.review-char-row ruby {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.review-char-row rt {
  font-size: 11px;
  line-height: 1;
}

.review-char-row rb {
  font-size: 24px;
  line-height: 1;
}

.review-write-line {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 34px;
}

.review-write-line i {
  display: block;
  width: 100%;
  height: 28px;
  border-bottom: 1.5px solid #8eb6bd;
}

body[data-export-mode="pdf"] .activity-flow-section .mini-bank.horizontal-word-bank span {
  min-height: 44px;
  padding: 5px 9px 3px;
}

body[data-export-mode="pdf"] .activity-flow-section .mini-bank.horizontal-word-bank rb,
body[data-export-mode="pdf"] .activity-flow-section .sentence-text rb {
  font-size: 17px;
  font-weight: 400;
}

body[data-export-mode="pdf"] .activity-flow-section .mini-bank.horizontal-word-bank rt,
body[data-export-mode="pdf"] .activity-flow-section .sentence-text rt {
  font-size: 10px;
  font-weight: 400;
}

body[data-export-mode="pdf"] .activity-flow-section .read-sentences p {
  font-weight: 400;
}

body[data-export-mode="pdf"] .activity-flow-section .sentence-text {
  font-size: 17px;
  line-height: 1;
  font-weight: 400;
}

body[data-export-mode="pdf"] .story-page .story-card .sentence-text {
  font-size: 19px;
  line-height: 1.6;
}

body[data-export-mode="pdf"] .story-page .story-card .sentence-text rt {
  font-size: 10px;
}

body[data-export-mode="pdf"] .story-page .story-section .activity-grid {
  grid-template-columns: 1fr;
  gap: 7px;
}

body[data-export-mode="pdf"] .story-page[data-compact="2"] .story-section.activity-generic .activity-grid {
  grid-template-columns: 1fr;
  gap: 6px;
}

body[data-export-mode="pdf"] .story-page .story-questions .mini-read-copy {
  grid-template-columns: 1fr;
  gap: 5px;
}

body[data-export-mode="pdf"] .story-page .story-questions .mini-read-line {
  font-size: 15px;
  line-height: 1.5;
}

body[data-export-mode="pdf"] .review-page .pdf-page-inner {
  display: flex;
  flex-direction: column;
}

body[data-export-mode="pdf"] .review-page-content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

body[data-export-mode="pdf"] .review-char-list {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(var(--review-count, 18), minmax(0, 1fr));
  gap: 3px;
}

body[data-export-mode="pdf"] .review-char-row {
  min-height: 0;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 7px;
  padding: 3px 7px;
}

body[data-export-mode="pdf"] .review-char-row > :first-child {
  font-size: 24px;
}

body[data-export-mode="pdf"] .review-char-row rt {
  font-size: 10px;
}

body[data-export-mode="pdf"] .review-char-row rb {
  font-size: 22px;
}

body[data-export-mode="pdf"] .review-write-line {
  height: 31px;
}

body[data-export-mode="pdf"] .review-write-line i {
  height: 25px;
}

/* challenge word cards: horizontal cards with centered pinyin above words */
.challenge-word-card-panel .word-bank.large-bank {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.challenge-word-card-panel .word-bank.large-bank span {
  min-height: 56px;
  padding: 6px 10px 5px;
}

.challenge-word-card-panel .word-bank.large-bank ruby {
  width: auto;
  min-width: 1.8em;
  margin: 0 0.04em;
}

.challenge-word-card-panel .word-bank.large-bank rt {
  min-width: 1.8em;
  font-size: 11px;
  line-height: 1;
}

.challenge-word-card-panel .word-bank.large-bank rb {
  font-size: 25px;
  line-height: 1;
}

.challenge-page[data-compact="2"] .challenge-word-card-panel .word-bank.large-bank {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.challenge-page[data-compact="2"] .challenge-word-card-panel .word-bank.large-bank span {
  min-height: 50px;
  padding: 5px 8px 4px;
}

.challenge-page[data-compact="2"] .challenge-word-card-panel .word-bank.large-bank rt {
  font-size: 10px;
}

.challenge-page[data-compact="2"] .challenge-word-card-panel .word-bank.large-bank rb {
  font-size: 22px;
}

/* story page: paragraph indent, punctuation control, tighter leading */
.story-page .story-card .read-sentences p {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
}

.story-page .story-card .sentence-text {
  display: block;
  text-indent: 2em;
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: normal;
  line-break: strict;
  hanging-punctuation: allow-end;
}

.story-page .story-card .sentence-text ruby {
  vertical-align: top;
}

.story-page .story-card .sentence-text .annotated-punct {
  min-height: 0;
  padding-bottom: 0;
  vertical-align: baseline;
}

/* think questions: one column and aligned baseline */
.story-page .story-questions .mini-read-line {
  display: block;
  line-height: 1.48;
}

.story-page .story-questions .mini-read-line ruby {
  vertical-align: baseline;
}

.story-page .story-questions .mini-read-line .annotated-punct {
  min-height: 0;
  padding-bottom: 0;
  vertical-align: baseline;
}

/* review page new DOM: no pinyin or underline, continuous tian-grid row */
.review-page {
  --review-cell-size: 50px;
  --review-grid-stroke: 1.5px;
}

.review-model {
  width: var(--review-cell-size);
  height: var(--review-cell-size);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1.5px solid #e46363;
  background:
    linear-gradient(rgba(228, 99, 99, .58), rgba(228, 99, 99, .58)) center / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(228, 99, 99, .58), rgba(228, 99, 99, .58)) center / 1px 100% no-repeat,
    #fff;
}

.review-model rt {
  display: none;
}

.review-model rb,
.review-model {
  font: 500 41px/1 "KaiTi", "STKaiti", serif;
}

.review-char-row {
  grid-template-columns: var(--review-cell-size) minmax(0, 1fr);
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.review-char-row > :first-child {
  font-size: 41px;
  font-weight: 500;
}

.review-char-row ruby {
  gap: 0;
}

.review-char-row rt {
  display: none;
}

.review-char-row rb {
  font-size: 41px;
  line-height: 1;
}

.review-write-line {
  height: var(--review-cell-size);
  display: block;
}

.review-write-line i {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background:
    linear-gradient(rgba(228, 99, 99, .58), rgba(228, 99, 99, .58)) center / 100% 1px no-repeat,
    repeating-linear-gradient(
      to right,
      #e46363 0,
      #e46363 var(--review-grid-stroke),
      transparent var(--review-grid-stroke),
      transparent calc(var(--review-cell-size) - var(--review-grid-stroke)),
      #e46363 calc(var(--review-cell-size) - var(--review-grid-stroke)),
      #e46363 var(--review-cell-size)
    ),
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent calc((var(--review-cell-size) / 2) - 0.5px),
      rgba(228, 99, 99, .58) calc((var(--review-cell-size) / 2) - 0.5px),
      rgba(228, 99, 99, .58) calc((var(--review-cell-size) / 2) + 0.5px),
      transparent calc((var(--review-cell-size) / 2) + 0.5px),
      transparent var(--review-cell-size)
    ),
    linear-gradient(#e46363, #e46363) top / 100% var(--review-grid-stroke) no-repeat,
    linear-gradient(#e46363, #e46363) bottom / 100% var(--review-grid-stroke) no-repeat,
    #fff;
}

body[data-export-mode="pdf"] .challenge-word-card-panel .word-bank.large-bank {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

body[data-export-mode="pdf"] .challenge-word-card-panel .word-bank.large-bank span {
  min-height: 52px;
  padding: 5px 9px 4px;
}

body[data-export-mode="pdf"] .challenge-word-card-panel .word-bank.large-bank rt {
  font-size: 10px;
}

body[data-export-mode="pdf"] .challenge-word-card-panel .word-bank.large-bank rb {
  font-size: 23px;
}

body[data-export-mode="pdf"] .story-page .story-card .read-sentences p {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 7px;
}

body[data-export-mode="pdf"] .story-page .story-card .sentence-text {
  display: block;
  text-indent: 2em;
  line-height: 1.45;
  word-break: keep-all;
  overflow-wrap: normal;
  line-break: strict;
  hanging-punctuation: allow-end;
}

body[data-export-mode="pdf"] .story-page .story-card .sentence-text .annotated-punct,
body[data-export-mode="pdf"] .story-page .story-questions .mini-read-line .annotated-punct {
  min-height: 0;
  padding-bottom: 0;
  vertical-align: baseline;
}

body[data-export-mode="pdf"] .story-page .story-questions .mini-read-line {
  display: block;
  line-height: 1.42;
}

body[data-export-mode="pdf"] .story-page .story-questions .mini-read-line ruby {
  vertical-align: baseline;
}

body[data-export-mode="pdf"] .review-page {
  --review-cell-size: 46px;
  --review-grid-stroke: 1.5px;
}

body[data-export-mode="pdf"] .review-model {
  width: var(--review-cell-size);
  height: var(--review-cell-size);
}

body[data-export-mode="pdf"] .review-model rt,
body[data-export-mode="pdf"] .review-char-row rt {
  display: none;
}

body[data-export-mode="pdf"] .review-model rb,
body[data-export-mode="pdf"] .review-model,
body[data-export-mode="pdf"] .review-char-row rb,
body[data-export-mode="pdf"] .review-char-row > :first-child {
  font: 500 39px/1 "KaiTi", "STKaiti", serif;
}

body[data-export-mode="pdf"] .review-char-row {
  grid-template-columns: var(--review-cell-size) minmax(0, 1fr);
  gap: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

body[data-export-mode="pdf"] .review-write-line {
  height: var(--review-cell-size);
}

body[data-export-mode="pdf"] .review-write-line i {
  width: 100%;
  height: 100%;
  border: 0;
}

/* story page inline paragraph flow */
.story-page .story-card .sentence-text {
  display: block;
  text-indent: 2em;
  line-height: 1.42;
}

.story-page .story-card .sentence-text ruby {
  display: inline-flex;
  width: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  vertical-align: baseline;
}

.story-page .story-card .sentence-text rt {
  min-width: 0;
  height: auto;
  min-height: 0;
  line-height: 1;
}

.story-page .story-card .sentence-text rb {
  min-height: 0;
  height: auto;
  line-height: 1;
}

.story-page .story-card .story-annotated-unit {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 1.78em;
  margin-right: 0.03em;
  white-space: nowrap;
  vertical-align: baseline;
}

.story-page .story-card .story-annotated-unit .annotated-punct {
  display: inline;
  min-height: 0;
  padding-bottom: 0;
  line-height: 1;
  vertical-align: baseline;
}

/* question row compatibility for split index/text DOM */
.story-page .story-questions .mini-read-line {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  column-gap: 6px;
  align-items: baseline;
}

.story-page .story-questions .story-question-index {
  grid-column: 1;
  line-height: 1;
  white-space: nowrap;
  transform: translateY(1em);
}

.story-page .story-questions .story-question-text {
  grid-column: 2;
  min-width: 0;
  line-height: 1.48;
}

/* review page future tian-cell row */
.review-tian-row {
  display: grid;
  grid-template-columns: repeat(10, var(--review-cell-size));
  gap: 0;
  align-items: stretch;
}

.review-tian-row .tian-cell {
  width: var(--review-cell-size);
  max-width: none;
  aspect-ratio: 1;
  margin-left: calc(-1 * var(--review-grid-stroke));
}

.review-tian-row .tian-cell:first-child {
  margin-left: 0;
}

.review-tian-row .tian-cell strong {
  font-size: 41px;
}

body[data-export-mode="pdf"] .story-page .story-card .sentence-text {
  display: block;
  text-indent: 2em;
  line-height: 1.38;
}

body[data-export-mode="pdf"] .story-page .story-card .sentence-text ruby {
  display: inline-flex;
  width: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  vertical-align: baseline;
}

body[data-export-mode="pdf"] .story-page .story-card .sentence-text rt {
  min-width: 0;
  height: auto;
  min-height: 0;
  line-height: 1;
}

body[data-export-mode="pdf"] .story-page .story-card .sentence-text rb {
  min-height: 0;
  height: auto;
  line-height: 1;
}

body[data-export-mode="pdf"] .story-page .story-card .story-annotated-unit {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 1.72em;
  margin-right: 0.02em;
  white-space: nowrap;
  vertical-align: baseline;
}

body[data-export-mode="pdf"] .story-page .story-card .story-annotated-unit .annotated-punct {
  display: inline;
  min-height: 0;
  padding-bottom: 0;
  line-height: 1;
  vertical-align: baseline;
}

body[data-export-mode="pdf"] .story-page .story-questions .mini-read-line {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  column-gap: 6px;
  align-items: baseline;
}

body[data-export-mode="pdf"] .story-page .story-questions .story-question-index {
  grid-column: 1;
  line-height: 1;
  white-space: nowrap;
  transform: translateY(1em);
}

body[data-export-mode="pdf"] .story-page .story-questions .story-question-text {
  grid-column: 2;
  min-width: 0;
  line-height: 1.42;
}

body[data-export-mode="pdf"] .review-tian-row {
  display: grid;
  grid-template-columns: repeat(10, var(--review-cell-size));
  gap: 0;
  align-items: stretch;
}

body[data-export-mode="pdf"] .review-tian-row .tian-cell {
  width: var(--review-cell-size);
  max-width: none;
  aspect-ratio: 1;
  margin-left: calc(-1 * var(--review-grid-stroke));
}

body[data-export-mode="pdf"] .review-tian-row .tian-cell:first-child {
  margin-left: 0;
}

body[data-export-mode="pdf"] .review-tian-row .tian-cell strong {
  font-size: 39px;
}

/* final review-page sizing and challenge word-card horizontal layout */
.review-page {
  --review-cell-size: 44px;
  --review-grid-stroke: 1px;
}

.challenge-word-card-panel .word-bank.large-bank {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.challenge-word-card-panel .word-bank.large-bank span {
  min-height: 46px;
  padding: 5px 6px 4px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}

.challenge-word-card-panel .word-bank.large-bank ruby {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  min-width: 1.6em;
  gap: 0.08em;
  white-space: nowrap;
}

.challenge-word-card-panel .word-bank.large-bank rt {
  min-width: 1.6em;
  font-size: 10px;
  line-height: 1;
}

.challenge-word-card-panel .word-bank.large-bank rb {
  font-size: 21px;
  line-height: 1;
}

.challenge-page[data-compact="2"] .challenge-word-card-panel .word-bank.large-bank {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.challenge-page[data-compact="2"] .challenge-word-card-panel .word-bank.large-bank span {
  min-height: 42px;
  padding: 4px 5px 3px;
}

.challenge-page[data-compact="2"] .challenge-word-card-panel .word-bank.large-bank rt {
  min-width: 1.45em;
  font-size: 9px;
}

.challenge-page[data-compact="2"] .challenge-word-card-panel .word-bank.large-bank rb {
  font-size: 19px;
}

.review-char-row > .review-tian-row {
  grid-column: 1 / -1;
  width: fit-content;
  max-width: 100%;
}

body[data-export-mode="pdf"] .review-page {
  --review-cell-size: 42px;
  --review-grid-stroke: 1px;
}

body[data-export-mode="pdf"] .challenge-word-card-panel .word-bank.large-bank {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

body[data-export-mode="pdf"] .challenge-word-card-panel .word-bank.large-bank span {
  min-height: 42px;
  padding: 4px 5px 3px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}

body[data-export-mode="pdf"] .challenge-word-card-panel .word-bank.large-bank ruby {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  min-width: 1.45em;
  gap: 0.08em;
  white-space: nowrap;
}

body[data-export-mode="pdf"] .challenge-word-card-panel .word-bank.large-bank rt {
  min-width: 1.45em;
  font-size: 9px;
  line-height: 1;
}

body[data-export-mode="pdf"] .challenge-word-card-panel .word-bank.large-bank rb {
  font-size: 19px;
  line-height: 1;
}

body[data-export-mode="pdf"] .review-char-row > .review-tian-row {
  grid-column: 1 / -1;
  width: fit-content;
  max-width: 100%;
}

/* final typography/layout tightening for challenge-2, story, review */
.challenge-word-card-panel .word-bank.large-bank span {
  min-height: 54px;
  padding: 6px 7px 5px;
  align-items: center;
  justify-content: center;
}

.challenge-word-card-panel .word-bank.large-bank ruby {
  min-width: 1.72em;
  gap: 0.02em;
}

.challenge-word-card-panel .word-bank.large-bank rt {
  min-width: 1.72em;
  font-size: 11px;
}

.challenge-word-card-panel .word-bank.large-bank rb {
  font-size: 25px;
}

.challenge-word-task-panel .challenge-copy-list {
  min-height: 0;
  height: auto;
  align-content: start;
  gap: 12px;
}

.challenge-word-task-panel .challenge-copy-list p {
  display: grid;
  grid-template-columns: auto auto minmax(120px, 1fr);
  align-items: end;
  gap: 8px;
  min-height: 0;
  padding-bottom: 0;
}

.challenge-word-task-panel .challenge-copy-list p b {
  line-height: 1;
}

.challenge-word-task-panel .challenge-copy-word {
  min-width: auto;
}

.challenge-word-task-panel .challenge-copy-line {
  min-height: 0;
  height: 30px;
  align-self: end;
}

.story-page .story-card .sentence-text {
  line-height: 1.36;
}

.story-page .story-card .story-annotated-unit {
  display: inline-flex;
  align-items: flex-end;
  min-width: 0;
  margin-right: 0;
  gap: 0;
  white-space: nowrap;
  vertical-align: bottom;
}

.story-page .story-card .story-annotated-unit ruby {
  width: 1.75em;
  min-width: 1.75em;
  margin: 0;
}

.story-page .story-card .story-annotated-unit .annotated-punct,
.story-page .story-card .sentence-text .annotated-punct {
  display: inline-flex;
  align-items: flex-end;
  min-height: 0;
  height: 1em;
  margin-left: -0.35em;
  margin-right: -0.1em;
  padding-bottom: 0;
  line-height: 1;
  vertical-align: bottom;
}

.story-page .story-questions .story-question-index {
  transform: none;
  align-self: baseline;
}

.story-page .story-questions .story-question-text {
  align-self: baseline;
}

.story-page .story-questions .story-question-text .story-annotated-unit {
  display: inline-flex;
  align-items: flex-end;
  white-space: nowrap;
  vertical-align: bottom;
}

.story-page .story-questions .story-question-text .annotated-punct,
.story-page .story-questions .mini-read-line .annotated-punct {
  display: inline-flex;
  align-items: flex-end;
  min-height: 0;
  height: 1em;
  margin-left: -0.35em;
  margin-right: -0.1em;
  padding-bottom: 0;
  line-height: 1;
  vertical-align: bottom;
}

.review-tian-row {
  margin-inline: auto;
}

.review-page {
  --review-cell-size: 52px;
  --review-grid-stroke: 1px;
  --review-row-gap: 4px;
}

.review-page .pdf-page-inner {
  padding-left: 18px;
  padding-right: 18px;
}

.review-page-content {
  padding-left: 6px;
  padding-right: 6px;
}

.review-char-list {
  gap: var(--review-row-gap);
}

.review-char-row {
  grid-template-columns: 52px minmax(0, 1fr);
}

.review-model,
.review-model rb,
.review-char-row > :first-child,
.review-char-row rb {
  font-size: 41px;
}

.review-tian-row {
  grid-template-columns: repeat(14, var(--review-cell-size));
  gap: 0;
}

.review-tian-row .tian-cell {
  width: var(--review-cell-size);
  max-width: var(--review-cell-size);
}

.review-tian-row .tian-cell strong {
  font-size: 41px;
}

body[data-export-mode="pdf"] .challenge-word-card-panel .word-bank.large-bank span {
  min-height: 50px;
  padding: 5px 6px 4px;
  align-items: center;
  justify-content: center;
}

body[data-export-mode="pdf"] .challenge-word-card-panel .word-bank.large-bank ruby {
  min-width: 1.62em;
  gap: 0.02em;
}

body[data-export-mode="pdf"] .challenge-word-card-panel .word-bank.large-bank rt {
  min-width: 1.62em;
  font-size: 10px;
}

body[data-export-mode="pdf"] .challenge-word-card-panel .word-bank.large-bank rb {
  font-size: 23px;
}

body[data-export-mode="pdf"] .challenge-page .challenge-word-task-panel .challenge-copy-list {
  min-height: 0;
  height: auto;
  align-content: start;
  gap: 10px;
}

body[data-export-mode="pdf"] .challenge-page .challenge-word-task-panel .challenge-copy-list p {
  display: grid;
  grid-template-columns: auto auto minmax(110px, 1fr);
  align-items: end;
  gap: 7px;
  min-height: 0;
  padding-bottom: 0;
}

body[data-export-mode="pdf"] .challenge-page .challenge-word-task-panel .challenge-copy-line {
  min-height: 0;
  height: 28px;
  align-self: end;
}

body[data-export-mode="pdf"] .story-page .story-card .sentence-text {
  line-height: 1.34;
}

body[data-export-mode="pdf"] .story-page .story-card .story-annotated-unit {
  display: inline-flex;
  align-items: flex-end;
  min-width: 0;
  margin-right: 0;
  gap: 0;
  white-space: nowrap;
  vertical-align: bottom;
}

body[data-export-mode="pdf"] .story-page .story-card .story-annotated-unit ruby {
  width: 1.72em;
  min-width: 1.72em;
  margin: 0;
}

body[data-export-mode="pdf"] .story-page .story-card .story-annotated-unit .annotated-punct,
body[data-export-mode="pdf"] .story-page .story-card .sentence-text .annotated-punct {
  display: inline-flex;
  align-items: flex-end;
  min-height: 0;
  height: 1em;
  margin-left: -0.35em;
  margin-right: -0.1em;
  padding-bottom: 0;
  line-height: 1;
  vertical-align: bottom;
}

body[data-export-mode="pdf"] .story-page .story-questions .story-question-index {
  transform: none;
  align-self: baseline;
}

body[data-export-mode="pdf"] .story-page .story-questions .story-question-text {
  align-self: baseline;
}

body[data-export-mode="pdf"] .story-page .story-questions .story-question-text .story-annotated-unit {
  display: inline-flex;
  align-items: flex-end;
  white-space: nowrap;
  vertical-align: bottom;
}

body[data-export-mode="pdf"] .story-page .story-questions .story-question-text .annotated-punct,
body[data-export-mode="pdf"] .story-page .story-questions .mini-read-line .annotated-punct {
  display: inline-flex;
  align-items: flex-end;
  min-height: 0;
  height: 1em;
  margin-left: -0.35em;
  margin-right: -0.1em;
  padding-bottom: 0;
  line-height: 1;
  vertical-align: bottom;
}

body[data-export-mode="pdf"] .review-tian-row {
  margin-inline: auto;
}

body[data-export-mode="pdf"] .review-page {
  --review-cell-size: 52px;
  --review-grid-stroke: 1px;
  --review-row-gap: 4px;
}

body[data-export-mode="pdf"] .review-page .pdf-page-inner {
  padding-left: 18px;
  padding-right: 18px;
}

body[data-export-mode="pdf"] .review-page-content {
  padding-left: 6px;
  padding-right: 6px;
}

body[data-export-mode="pdf"] .review-char-list {
  gap: var(--review-row-gap);
}

body[data-export-mode="pdf"] .review-char-row {
  grid-template-columns: 52px minmax(0, 1fr);
}

body[data-export-mode="pdf"] .review-model,
body[data-export-mode="pdf"] .review-model rb,
body[data-export-mode="pdf"] .review-char-row > :first-child,
body[data-export-mode="pdf"] .review-char-row rb {
  font-size: 41px;
}

body[data-export-mode="pdf"] .review-tian-row {
  grid-template-columns: repeat(14, var(--review-cell-size));
  gap: 0;
}

body[data-export-mode="pdf"] .review-tian-row .tian-cell {
  width: var(--review-cell-size);
  max-width: var(--review-cell-size);
}

body[data-export-mode="pdf"] .review-tian-row .tian-cell strong {
  font-size: 41px;
}

/* final story punctuation layout: fixed ruby width, punct out of width flow */
.story-page .story-card .sentence-text {
  display: block;
  text-indent: 2em;
  line-height: 1.32;
}

.story-page .story-card .sentence-text ruby,
.story-page .story-questions .story-question-text ruby,
.story-page .story-questions .mini-read-line ruby {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 1.75em;
  min-width: 1.75em;
  min-height: 0;
  margin: 0;
  line-height: 1;
  vertical-align: baseline;
}

.story-page .story-card .sentence-text rt,
.story-page .story-questions .story-question-text rt,
.story-page .story-questions .mini-read-line rt {
  min-width: 1.75em;
  height: auto;
  min-height: 0;
  line-height: 1;
}

.story-page .story-card .sentence-text rb,
.story-page .story-questions .story-question-text rb,
.story-page .story-questions .mini-read-line rb {
  min-width: 1.75em;
  min-height: 0;
  height: auto;
  line-height: 1;
}

.story-page .story-card .story-annotated-unit,
.story-page .story-questions .story-question-text .story-annotated-unit,
.story-page .story-questions .mini-read-line .story-annotated-unit {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  width: 1.75em;
  min-width: 1.75em;
  margin: 0;
  white-space: nowrap;
  vertical-align: baseline;
}

.story-page .story-card .story-annotated-unit.has-punct,
.story-page .story-questions .story-question-text .story-annotated-unit.has-punct,
.story-page .story-questions .mini-read-line .story-annotated-unit.has-punct {
  overflow: visible;
}

.story-page .story-card .story-annotated-unit.has-punct .annotated-punct,
.story-page .story-questions .story-question-text .story-annotated-unit.has-punct .annotated-punct,
.story-page .story-questions .mini-read-line .story-annotated-unit.has-punct .annotated-punct {
  position: absolute;
  left: calc(100% - 0.16em);
  bottom: 0;
  display: inline;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 0;
  line-height: 1;
  vertical-align: baseline;
}

.story-page .story-card .sentence-text .annotated-punct,
.story-page .story-questions .story-question-text .annotated-punct,
.story-page .story-questions .mini-read-line .annotated-punct {
  line-height: 1;
  vertical-align: baseline;
}

.story-page .story-questions .story-question-index,
.story-page .story-questions .story-question-text {
  align-self: baseline;
}

body[data-export-mode="pdf"] .story-page .story-card .sentence-text {
  display: block;
  text-indent: 2em;
  line-height: 1.3;
}

body[data-export-mode="pdf"] .story-page .story-card .sentence-text ruby,
body[data-export-mode="pdf"] .story-page .story-questions .story-question-text ruby,
body[data-export-mode="pdf"] .story-page .story-questions .mini-read-line ruby {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 1.72em;
  min-width: 1.72em;
  min-height: 0;
  margin: 0;
  line-height: 1;
  vertical-align: baseline;
}

body[data-export-mode="pdf"] .story-page .story-card .sentence-text rt,
body[data-export-mode="pdf"] .story-page .story-questions .story-question-text rt,
body[data-export-mode="pdf"] .story-page .story-questions .mini-read-line rt {
  min-width: 1.72em;
  height: auto;
  min-height: 0;
  line-height: 1;
}

body[data-export-mode="pdf"] .story-page .story-card .sentence-text rb,
body[data-export-mode="pdf"] .story-page .story-questions .story-question-text rb,
body[data-export-mode="pdf"] .story-page .story-questions .mini-read-line rb {
  min-width: 1.72em;
  min-height: 0;
  height: auto;
  line-height: 1;
}

body[data-export-mode="pdf"] .story-page .story-card .story-annotated-unit,
body[data-export-mode="pdf"] .story-page .story-questions .story-question-text .story-annotated-unit,
body[data-export-mode="pdf"] .story-page .story-questions .mini-read-line .story-annotated-unit {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  width: 1.72em;
  min-width: 1.72em;
  margin: 0;
  white-space: nowrap;
  vertical-align: baseline;
}

body[data-export-mode="pdf"] .story-page .story-card .story-annotated-unit.has-punct,
body[data-export-mode="pdf"] .story-page .story-questions .story-question-text .story-annotated-unit.has-punct,
body[data-export-mode="pdf"] .story-page .story-questions .mini-read-line .story-annotated-unit.has-punct {
  overflow: visible;
}

body[data-export-mode="pdf"] .story-page .story-card .story-annotated-unit.has-punct .annotated-punct,
body[data-export-mode="pdf"] .story-page .story-questions .story-question-text .story-annotated-unit.has-punct .annotated-punct,
body[data-export-mode="pdf"] .story-page .story-questions .mini-read-line .story-annotated-unit.has-punct .annotated-punct {
  position: absolute;
  left: calc(100% - 0.16em);
  bottom: 0;
  display: inline;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 0;
  line-height: 1;
  vertical-align: baseline;
}

body[data-export-mode="pdf"] .story-page .story-card .sentence-text .annotated-punct,
body[data-export-mode="pdf"] .story-page .story-questions .story-question-text .annotated-punct,
body[data-export-mode="pdf"] .story-page .story-questions .mini-read-line .annotated-punct {
  line-height: 1;
  vertical-align: baseline;
}

/* 2026-07-16: real QR, proportional guide art, handwriting line spacing, continuous review grid. */
.qr-card {
  width: 132px;
  min-height: 76px;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 7px;
}

.qr-image,
.qr-unavailable {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid #222;
  image-rendering: pixelated;
}

.qr-unavailable {
  font-size: 10px;
}

.pdf-page .guide {
  align-items: stretch;
}

.pdf-page .guide .guide-scene.image-scene {
  position: relative;
  min-height: 0;
  height: auto;
  align-self: stretch;
  padding: 0;
  overflow: hidden;
}

.pdf-page .guide .guide-scene.image-scene .cartoon-img {
  position: absolute;
  inset: 5px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  min-height: 0;
  max-height: none;
  object-fit: cover;
}

.pdf-page .pinyin-line {
  height: 42px;
}

.pdf-page .four-line {
  background:
    linear-gradient(#8ab7d8, #8ab7d8) left 2px top 4px / calc(100% - 4px) 1px no-repeat,
    linear-gradient(#8ab7d8, #8ab7d8) left 2px top 15px / calc(100% - 4px) 1px no-repeat,
    linear-gradient(#8ab7d8, #8ab7d8) left 2px top 26px / calc(100% - 4px) 1px no-repeat,
    linear-gradient(#8ab7d8, #8ab7d8) left 2px top 37px / calc(100% - 4px) 1px no-repeat;
}

.three-char-page .pinyin-line,
body[data-export-mode="pdf"] .pinyin-line {
  height: 40px;
}

.three-char-page .four-line,
body[data-export-mode="pdf"] .four-line {
  background:
    linear-gradient(#8ab7d8, #8ab7d8) left 2px top 3px / calc(100% - 4px) 1px no-repeat,
    linear-gradient(#8ab7d8, #8ab7d8) left 2px top 14px / calc(100% - 4px) 1px no-repeat,
    linear-gradient(#8ab7d8, #8ab7d8) left 2px top 25px / calc(100% - 4px) 1px no-repeat,
    linear-gradient(#8ab7d8, #8ab7d8) left 2px top 36px / calc(100% - 4px) 1px no-repeat;
}

.pdf-page[data-compact="2"] .pinyin-line,
body[data-export-mode="pdf"] .pdf-page[data-compact="2"] .pinyin-line {
  height: 36px;
}

.pdf-page[data-compact="2"] .four-line,
body[data-export-mode="pdf"] .pdf-page[data-compact="2"] .four-line {
  background:
    linear-gradient(#8ab7d8, #8ab7d8) left 2px top 2px / calc(100% - 4px) 1px no-repeat,
    linear-gradient(#8ab7d8, #8ab7d8) left 2px top 12px / calc(100% - 4px) 1px no-repeat,
    linear-gradient(#8ab7d8, #8ab7d8) left 2px top 22px / calc(100% - 4px) 1px no-repeat,
    linear-gradient(#8ab7d8, #8ab7d8) left 2px top 32px / calc(100% - 4px) 1px no-repeat;
}

.review-tian-row,
body[data-export-mode="pdf"] .review-tian-row {
  display: flex;
  width: max-content;
  max-width: 100%;
  gap: 0;
  justify-content: center;
  margin-inline: auto;
}

.review-tian-row .tian-cell,
body[data-export-mode="pdf"] .review-tian-row .tian-cell {
  flex: 0 0 var(--review-cell-size);
  width: var(--review-cell-size);
  max-width: var(--review-cell-size);
  margin: 0;
  border-width: 1px;
  box-sizing: border-box;
}

.review-tian-row .tian-cell + .tian-cell,
body[data-export-mode="pdf"] .review-tian-row .tian-cell + .tian-cell {
  border-left: 0;
}

/* final audit corrections */
.review-page {
  --review-cell-size: 49px;
}

.review-page .pdf-page-inner {
  padding-left: 20px;
  padding-right: 20px;
}

.review-tian-row {
  grid-template-columns: repeat(14, var(--review-cell-size));
  justify-content: center;
}

.review-tian-row .tian-cell {
  width: var(--review-cell-size);
  max-width: var(--review-cell-size);
}

.review-tian-row .tian-cell strong {
  font-size: 41px;
}

.story-page .story-card .story-annotated-unit.has-punct .annotated-punct,
.story-page .story-questions .story-question-text .story-annotated-unit.has-punct .annotated-punct,
.story-page .story-questions .mini-read-line .story-annotated-unit.has-punct .annotated-punct,
.story-page .story-card .sentence-text .annotated-punct,
.story-page .story-questions .story-question-text .annotated-punct,
.story-page .story-questions .mini-read-line .annotated-punct {
  width: auto;
  min-width: 0;
  max-width: none;
  white-space: nowrap;
  text-indent: 0;
}

.challenge-word-card-panel .word-bank.large-bank > span:has(ruby:nth-of-type(4)) {
  padding-left: 4px;
  padding-right: 4px;
}

.challenge-word-card-panel .word-bank.large-bank > span:has(ruby:nth-of-type(4)) ruby {
  min-width: 1.38em;
  width: 1.38em;
}

.challenge-word-card-panel .word-bank.large-bank > span:has(ruby:nth-of-type(4)) rt {
  min-width: 1.38em;
  font-size: 10px;
}

.challenge-word-card-panel .word-bank.large-bank > span:has(ruby:nth-of-type(4)) rb {
  font-size: 22px;
}

body[data-export-mode="pdf"] .review-page {
  --review-cell-size: 49px;
}

body[data-export-mode="pdf"] .review-page .pdf-page-inner {
  padding-left: 20px;
  padding-right: 20px;
}

body[data-export-mode="pdf"] .review-tian-row {
  grid-template-columns: repeat(14, var(--review-cell-size));
  justify-content: center;
}

body[data-export-mode="pdf"] .review-tian-row .tian-cell {
  width: var(--review-cell-size);
  max-width: var(--review-cell-size);
}

body[data-export-mode="pdf"] .review-tian-row .tian-cell strong {
  font-size: 41px;
}

body[data-export-mode="pdf"] .story-page .story-card .story-annotated-unit.has-punct .annotated-punct,
body[data-export-mode="pdf"] .story-page .story-questions .story-question-text .story-annotated-unit.has-punct .annotated-punct,
body[data-export-mode="pdf"] .story-page .story-questions .mini-read-line .story-annotated-unit.has-punct .annotated-punct,
body[data-export-mode="pdf"] .story-page .story-card .sentence-text .annotated-punct,
body[data-export-mode="pdf"] .story-page .story-questions .story-question-text .annotated-punct,
body[data-export-mode="pdf"] .story-page .story-questions .mini-read-line .annotated-punct {
  width: auto;
  min-width: 0;
  max-width: none;
  white-space: nowrap;
  text-indent: 0;
}

body[data-export-mode="pdf"] .challenge-word-card-panel .word-bank.large-bank > span:has(ruby:nth-of-type(4)) {
  padding-left: 4px;
  padding-right: 4px;
}

body[data-export-mode="pdf"] .challenge-word-card-panel .word-bank.large-bank > span:has(ruby:nth-of-type(4)) ruby {
  min-width: 1.34em;
  width: 1.34em;
}

body[data-export-mode="pdf"] .challenge-word-card-panel .word-bank.large-bank > span:has(ruby:nth-of-type(4)) rt {
  min-width: 1.34em;
  font-size: 10px;
}

body[data-export-mode="pdf"] .challenge-word-card-panel .word-bank.large-bank > span:has(ruby:nth-of-type(4)) rb {
  font-size: 22px;
}

/* Match each pinyin four-line cell to the writing Tian cell below it. */
.pdf-page .combo-cell,
.pdf-page .pinyin-line,
.pdf-page .tian-cell {
  max-width: 52px;
}

.three-char-page .combo-cell,
.three-char-page .pinyin-line,
.three-char-page .pdf-page .tian-cell,
.three-char-page .tian-cell {
  max-width: 56px;
}

.four-char-page .combo-cell,
.four-char-page .pinyin-line,
.four-char-page .pdf-page .tian-cell,
.four-char-page .tian-cell {
  max-width: 44px;
}

.pdf-page[data-compact="2"] .combo-cell,
.pdf-page[data-compact="2"] .pinyin-line,
.pdf-page[data-compact="2"] .pdf-page .tian-cell,
.pdf-page[data-compact="2"] .tian-cell {
  max-width: 56px;
}

.pdf-page .four-line {
  background:
    linear-gradient(#8ab7d8, #8ab7d8) left 0 top 5px / 100% 1px no-repeat,
    linear-gradient(#8ab7d8, #8ab7d8) left 0 top 13px / 100% 1px no-repeat,
    linear-gradient(#8ab7d8, #8ab7d8) left 0 top 21px / 100% 1px no-repeat,
    linear-gradient(#8ab7d8, #8ab7d8) left 0 top 29px / 100% 1px no-repeat;
}

.three-char-page .four-line,
body[data-export-mode="pdf"] .four-line {
  background:
    linear-gradient(#8ab7d8, #8ab7d8) left 0 top 3px / 100% 1px no-repeat,
    linear-gradient(#8ab7d8, #8ab7d8) left 0 top 14px / 100% 1px no-repeat,
    linear-gradient(#8ab7d8, #8ab7d8) left 0 top 25px / 100% 1px no-repeat,
    linear-gradient(#8ab7d8, #8ab7d8) left 0 top 36px / 100% 1px no-repeat;
}

.pdf-page[data-compact="2"] .four-line,
body[data-export-mode="pdf"] .pdf-page[data-compact="2"] .four-line {
  background:
    linear-gradient(#8ab7d8, #8ab7d8) left 0 top 2px / 100% 1px no-repeat,
    linear-gradient(#8ab7d8, #8ab7d8) left 0 top 12px / 100% 1px no-repeat,
    linear-gradient(#8ab7d8, #8ab7d8) left 0 top 22px / 100% 1px no-repeat,
    linear-gradient(#8ab7d8, #8ab7d8) left 0 top 32px / 100% 1px no-repeat;
}

/* Keep the stroke hint visually separate from the first handwriting row. */
.char-head + .practice-line {
  margin-top: 13px;
}

.three-char-page .char-head + .practice-line {
  margin-top: 11px;
}

.pdf-page[data-compact="2"] .char-head + .practice-line {
  margin-top: 10px;
}

body[data-export-mode="pdf"] .char-head + .practice-line {
  margin-top: 10px;
}

.practice-line + .practice-line,
.three-char-page .practice-line + .practice-line,
.pdf-page[data-compact="2"] .practice-line + .practice-line,
body[data-export-mode="pdf"] .practice-line + .practice-line {
  margin-top: 10px;
}

/* Keep the review-page vertical rhythm identical in preview and PDF output. */
body[data-export-mode="pdf"] .pdf-page.review-page .pdf-page-inner {
  display: flex;
  flex-direction: column;
}

body[data-export-mode="pdf"] .pdf-page.review-page .review-page-content,
body[data-export-mode="pdf"] .pdf-page.review-page .review-char-list {
  flex: 1 1 auto;
  min-height: 0;
}

/* Strengthen instructional labels and pinyin without changing content flow. */
.activity-generic .activity-flow-head h4.plain-heading,
.pdf-page[data-compact="2"] .activity-generic .activity-flow-head h4.plain-heading,
body[data-export-mode="pdf"] .activity-generic .activity-flow-head h4.plain-heading {
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
}

.activity-flow-card .activity-flow-section:last-child,
.pdf-page[data-compact="2"] .activity-flow-card .activity-flow-section:last-child,
body[data-export-mode="pdf"] .activity-flow-card .activity-flow-section:last-child {
  gap: 12px;
}

.pdf-page .char-head h3 span,
.pdf-page[data-compact="2"] .char-head h3 span,
body[data-export-mode="pdf"] .char-head h3 span {
  font-size: 18px;
  font-weight: 800;
}

.pdf-page .sample-line .solid-text,
.pdf-page[data-compact="2"] .sample-line .solid-text,
body[data-export-mode="pdf"] .sample-line .solid-text {
  font-size: 20px;
  font-weight: 800;
}

/* Give the story title, story body, and questions distinct vertical zones. */
.story-page .story-guide h2,
body[data-export-mode="pdf"] .story-page .story-guide h2 {
  margin-bottom: 16px;
  font-size: 21px;
  line-height: 1.2;
}

.story-page .story-guide > div:last-child,
body[data-export-mode="pdf"] .story-page .story-guide > div:last-child {
  display: grid;
  align-content: center;
  min-height: 100%;
}

.story-page .story-section,
body[data-export-mode="pdf"] .story-page .story-section {
  margin-top: 20px;
}

.story-page .story-section .activity-grid,
body[data-export-mode="pdf"] .story-page .story-section .activity-grid {
  gap: 50px;
}

.story-page .story-questions h4.plain-heading,
body[data-export-mode="pdf"] .story-page .story-questions h4.plain-heading {
  margin-bottom: 10px;
  font-size: 17px;
  font-weight: 900;
}

.review-page,
body[data-export-mode="pdf"] .review-page {
  --review-cell-size: 12mm;
}

.review-page:has(.review-char-row:nth-child(15)),
body[data-export-mode="pdf"] .review-page:has(.review-char-row:nth-child(15)) {
  --review-cell-size: 12mm;
}

.review-page .review-tian-row .tian-cell,
body[data-export-mode="pdf"] .review-page .review-tian-row .tian-cell {
  flex: 0 0 var(--review-cell-size);
  width: var(--review-cell-size);
  max-width: var(--review-cell-size);
}

.pdf-page .tian-cell strong,
.pdf-page[data-compact="2"] .tian-cell strong,
.review-tian-row .tian-cell strong,
body[data-export-mode="pdf"] .pdf-page .tian-cell strong,
body[data-export-mode="pdf"] .review-tian-row .tian-cell strong {
  font-size: 36px;
}

/* Use the common 12mm handwriting-book specification in preview and print. */
.pdf-page .combo-cell,
.pdf-page .pinyin-line,
.pdf-page .tian-cell,
.three-char-page .combo-cell,
.three-char-page .pinyin-line,
.three-char-page .tian-cell,
.four-char-page .combo-cell,
.four-char-page .pinyin-line,
.four-char-page .tian-cell,
.pdf-page[data-compact="2"] .combo-cell,
.pdf-page[data-compact="2"] .pinyin-line,
.pdf-page[data-compact="2"] .tian-cell,
body[data-export-mode="pdf"] .combo-cell,
body[data-export-mode="pdf"] .pinyin-line,
body[data-export-mode="pdf"] .pdf-page .tian-cell {
  max-width: 12mm;
}

/* final card vertical-centering + story header spacing */
.challenge-word-card-panel .word-bank.large-bank span {
  display: grid;
  place-items: center;
}

.challenge-word-card-panel .word-bank.large-bank ruby {
  align-self: center;
  justify-self: center;
  line-height: 1;
  transform: translateY(1px);
}

.challenge-word-card-panel .word-bank.large-bank rt,
.challenge-word-card-panel .word-bank.large-bank rb {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.challenge-word-card-panel .word-bank.large-bank rt {
  height: 11px;
}

.challenge-word-card-panel .word-bank.large-bank rb {
  height: 25px;
}

.story-page header {
  padding-bottom: 14px;
}

.story-page .study-progress {
  margin-top: 10px;
}

.story-page .story-guide,
.story-page .guide {
  margin-top: 10px;
}

body[data-export-mode="pdf"] .challenge-word-card-panel .word-bank.large-bank span {
  display: grid;
  place-items: center;
}

body[data-export-mode="pdf"] .challenge-word-card-panel .word-bank.large-bank ruby {
  align-self: center;
  justify-self: center;
  line-height: 1;
  transform: translateY(1px);
}

body[data-export-mode="pdf"] .challenge-word-card-panel .word-bank.large-bank rt,
body[data-export-mode="pdf"] .challenge-word-card-panel .word-bank.large-bank rb {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

body[data-export-mode="pdf"] .challenge-word-card-panel .word-bank.large-bank rt {
  height: 10px;
}

body[data-export-mode="pdf"] .challenge-word-card-panel .word-bank.large-bank rb {
  height: 23px;
}

body[data-export-mode="pdf"] .story-page header {
  padding-bottom: 14px;
}

body[data-export-mode="pdf"] .story-page .study-progress {
  margin-top: 10px;
}

body[data-export-mode="pdf"] .story-page .story-guide,
body[data-export-mode="pdf"] .story-page .guide {
  margin-top: 10px;
}

/* final fix: challenge word cards must stay horizontal flex, not grid */
.challenge-word-card-panel .word-bank.large-bank > span {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}

.challenge-word-card-panel .word-bank.large-bank > span ruby {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: center;
  line-height: 1;
  transform: none;
}

.challenge-word-card-panel .word-bank.large-bank > span rt,
.challenge-word-card-panel .word-bank.large-bank > span rb {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.challenge-word-card-panel .word-bank.large-bank > span:not(:has(ruby:nth-of-type(4))) ruby {
  min-width: 1.72em;
  width: 1.72em;
}

.challenge-word-card-panel .word-bank.large-bank > span:not(:has(ruby:nth-of-type(4))) rt {
  min-width: 1.72em;
  height: 11px;
  font-size: 11px;
}

.challenge-word-card-panel .word-bank.large-bank > span:not(:has(ruby:nth-of-type(4))) rb {
  min-width: 1.72em;
  height: 25px;
  font-size: 25px;
}

.challenge-word-card-panel .word-bank.large-bank > span:has(ruby:nth-of-type(4)) ruby {
  min-width: 1.38em;
  width: 1.38em;
}

.challenge-word-card-panel .word-bank.large-bank > span:has(ruby:nth-of-type(4)) rt {
  min-width: 1.38em;
  height: 10px;
  font-size: 10px;
}

.challenge-word-card-panel .word-bank.large-bank > span:has(ruby:nth-of-type(4)) rb {
  min-width: 1.38em;
  height: 22px;
  font-size: 22px;
}

body[data-export-mode="pdf"] .challenge-word-card-panel .word-bank.large-bank > span {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}

body[data-export-mode="pdf"] .challenge-word-card-panel .word-bank.large-bank > span ruby {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: center;
  line-height: 1;
  transform: none;
}

body[data-export-mode="pdf"] .challenge-word-card-panel .word-bank.large-bank > span rt,
body[data-export-mode="pdf"] .challenge-word-card-panel .word-bank.large-bank > span rb {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

body[data-export-mode="pdf"] .challenge-word-card-panel .word-bank.large-bank > span:not(:has(ruby:nth-of-type(4))) ruby {
  min-width: 1.62em;
  width: 1.62em;
}

body[data-export-mode="pdf"] .challenge-word-card-panel .word-bank.large-bank > span:not(:has(ruby:nth-of-type(4))) rt {
  min-width: 1.62em;
  height: 10px;
  font-size: 10px;
}

body[data-export-mode="pdf"] .challenge-word-card-panel .word-bank.large-bank > span:not(:has(ruby:nth-of-type(4))) rb {
  min-width: 1.62em;
  height: 23px;
  font-size: 23px;
}

body[data-export-mode="pdf"] .challenge-word-card-panel .word-bank.large-bank > span:has(ruby:nth-of-type(4)) ruby {
  min-width: 1.34em;
  width: 1.34em;
}

body[data-export-mode="pdf"] .challenge-word-card-panel .word-bank.large-bank > span:has(ruby:nth-of-type(4)) rt {
  min-width: 1.34em;
  height: 10px;
  font-size: 10px;
}

body[data-export-mode="pdf"] .challenge-word-card-panel .word-bank.large-bank > span:has(ruby:nth-of-type(4)) rb {
  min-width: 1.34em;
  height: 22px;
  font-size: 22px;
}