/* 页面层：图版首页、单元图录、场景、词卡与二级页 */
@layer pages {

  /* ══ 页头 ══════════════════════════════════════════════ */
  .curriculum-intro,
  .hub-heading,
  .home-intro {
    display: block;
    margin-bottom: var(--s4);
  }

  .curriculum-intro h1,
  .hub-heading h1,
  .home-intro h1 { margin: 0 0 var(--s2); }

  .curriculum-intro p,
  .hub-heading p,
  .home-intro > p {
    max-width: 46ch;
    color: var(--muted);
    font-size: var(--t-body);
    line-height: 1.75;
  }

  .curriculum-edition,
  .edition { display: none; }

  /* ══ 今日复习：安静的一行，不再和主行动抢首屏 ══════════ */
  .due-review-banner {
    display: flex;
    align-items: center;
    gap: var(--s4);
    padding: var(--s4) 0;
    margin-bottom: var(--s5);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: none;
    overflow: visible;
  }

  .due-review-banner .review-banner-symbol {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--r-pill);
    background: var(--rust-wash);
    color: var(--rust);
    font-size: var(--t-lead);
    flex-shrink: 0;
  }

  .due-review-banner > div:nth-child(2) { flex: 1; min-width: 0; }

  .due-review-banner h2 {
    font-size: var(--t-body);
    font-weight: 600;
    color: var(--ink);
    margin: 0;
  }

  .due-review-banner p {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: var(--t-meta);
    line-height: 1.6;
  }

  .due-review-banner .eyebrow { color: var(--rust); }

  .due-review-banner .btn { flex-shrink: 0; }

  /* ══ 继续学习：首屏图版（右图左文，像教材跨页）══════════ */
  .journey-continue {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 356px);
    align-items: stretch;
    gap: var(--s6);
    padding: 0 0 var(--s6);
    margin: 0 0 var(--s6);
    border-bottom: 1px solid var(--line);
  }

  .journey-continue .continue-art {
    order: 2;
    width: 100%;
    height: auto;
    aspect-ratio: var(--plate-ratio);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--smoke);
  }

  .journey-continue  /* 图版撑满整列高度，文案在列内上下分居：
     标题贴顶、按钮贴底，中间的空是"版心留白"而不是"忘了排" */
  .continue-copy {
    order: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
  }

  .continue-copy h2 { max-width: 20ch; }
  .continue-copy > p { max-width: 34ch; }
  .continue-copy .btn { margin-top: var(--s3); }
  .continue-copy .continue-unit-link { margin-left: var(--s4); }

  .journey-continue .continue-art img,
  .journey-continue .continue-art .scene-image-frame,
  .journey-continue .continue-art a {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--plate-focus);
  }

  /* 「UNIT 1」已经承担了栏目信息，去掉重复的眉标 */
  .continue-copy .eyebrow { display: none; }

  .continue-copy h2 {
    font-size: calc(var(--t-h1) + 4px);
    line-height: 1.3;
    margin: var(--s2) 0 var(--s1);
  }

  .continue-copy h2 small {
    display: block;
    margin-bottom: 6px;
    color: var(--rust);
    font-size: var(--t-cap);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-family: var(--font-ui);
  }

  .continue-copy h2 small::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 1px;
    margin-right: 8px;
    vertical-align: 3px;
    background: currentColor;
  }

  .continue-copy > p {
    margin: 0 0 var(--s1);
    color: var(--muted);
    font-size: var(--t-body);
  }

  .continue-copy .scene-type {
    display: block;
    margin-bottom: var(--s5);
    color: var(--muted);
    font-size: var(--t-meta);
  }

  .continue-copy .primary { min-width: 200px; }

  .continue-unit-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-left: var(--s4);
    color: var(--muted);
    font-size: var(--t-meta);
    font-weight: 600;
  }

  .continue-unit-link:hover { color: var(--leaf); }

  /* ══ 教材区标题 + 教材切换 ═════════════════════════════ */
  .curriculum-section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s4);
    margin: 0 0 var(--s3);
    padding-bottom: var(--s2);
    border-bottom: 1px solid var(--line);
  }

  .curriculum-section-title h2 { font-size: var(--t-h2); }

  .curriculum-section-title > span,
  .curriculum-section-title > div > span:not(.eyebrow) {
    color: var(--muted);
    font-size: var(--t-meta);
  }

  .book-switch {
    position: relative;
    margin-bottom: var(--s4);
  }

  .book-switch > summary {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    min-height: 44px;
    padding: 0 var(--s4);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    color: var(--ink);
    font-size: var(--t-meta);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
  }

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

  .book-switch > summary::after {
    content: "";
    width: 6px;
    height: 6px;
    margin-left: 2px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .16s var(--ease);
  }

  .book-switch[open] > summary { border-color: var(--leaf); color: var(--leaf); }
  .book-switch[open] > summary::after { transform: translateY(1px) rotate(-135deg); }

  .book-switch .curriculum-selector {
    display: grid;
    gap: var(--s2);
    margin-top: var(--s3);
    padding: var(--s4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--white);
  }

  .selector-row {
    display: flex;
    align-items: center;
    gap: var(--s4);
    min-height: 44px;
    padding: 0;
    border: 0;
  }

  .selector-label {
    min-width: 32px;
    color: var(--muted);
    font-size: var(--t-cap);
    font-weight: 600;
  }

  .grade-options,
  .term-options { display: flex; gap: var(--s2); flex-wrap: wrap; }

  .grade-options a,
  .term-options a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    min-width: 0;
    padding: 0 var(--s4);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    color: var(--muted);
    font-size: var(--t-meta);
    font-weight: 600;
  }

  .grade-options a:hover,
  .term-options a:hover { border-color: var(--leaf); color: var(--leaf); }

  .grade-options a[aria-current],
  .term-options a[aria-current] {
    background: var(--leaf);
    border-color: var(--leaf);
    color: var(--white);
  }

  /* ══ 单元 = 图版行 ═════════════════════════════════════ */
  .textbook-unit-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--s6);
  }

  .ready-unit {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    align-items: start;
    gap: var(--s4);
    padding: var(--s4) 0;
    border-bottom: 1px solid var(--line);
  }

  .ready-unit:last-child { border-bottom: 0; }

  .ready-unit-art {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: var(--plate-ratio);
    border-radius: var(--r-hair);
    overflow: hidden;
    background: var(--paper-2);
    /* 装裱：一圈衬纸 + 一根发丝线，像贴在书页上的图版 */
    padding: 4px;
    border: 1px solid var(--line);
  }

  .ready-unit-art img { border-radius: 0; }

  .ready-unit-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--plate-focus);
    max-height: none;
  }

  .ready-unit-copy { min-width: 0; padding-top: 2px; }

  .available-label {
    display: flex;
    align-items: center;
    gap: var(--s2);
    color: var(--muted);
    font-size: var(--t-cap);
    font-weight: 600;
  }

  .available-label .pill { font-weight: 600; }

  /* 采集印与计数：印是纹理，计数在下一行，不再拉成一条虚线 */
  .stamp-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    margin: var(--s3) 0 var(--s2);
    max-width: 100%;
  }

  .stamp-row > b {
    display: block;
    margin-top: 0;
    color: var(--muted);
    font-size: var(--t-cap);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  .ready-unit h3 {
    margin: var(--s1) 0 0;
    font-size: var(--t-h3);
    line-height: 1.45;
    font-weight: 700;
  }

  .ready-unit h3 > strong { font-size: inherit; }

  .ready-unit h3 > span {
    display: block;
    margin-top: 2px;
    font-family: var(--font-word);
    font-size: var(--t-body);
    font-weight: 600;
    color: var(--muted);
  }

  .ready-unit p.unit-english {
    margin: 0;
    font-family: var(--font-word);
    font-size: var(--t-body);
    color: var(--muted);
  }

  .unit-learning-progress {
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin: var(--s3) 0;
    flex-wrap: wrap;
  }

  .unit-learning-progress .progress-line { flex: 1 1 120px; min-width: 80px; }

  .unit-learning-progress > span {
    color: var(--muted);
    font-size: var(--t-cap);
    font-variant-numeric: tabular-nums;
  }

  .ready-unit .text-action { margin: 0; }

  /* 采集印网格：一个词一个印，一眼看出还欠几个 */
  .stamp-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    max-width: 100%;
    margin: 0;
  }

  /* 采集印收成「记笔画」：一道道细竖线，像练习本上的计数，不是一排复选框 */
  .stamp-grid {
    gap: 4px;
    align-items: flex-end;
    min-height: 12px;
  }

  .stamp-grid .stamp {
    --stamp-size: 11px;
    width: 3px;
    height: var(--stamp-size);
    border: 0;
    border-radius: 0;
    background: color-mix(in srgb, var(--muted) 28%, transparent);
    opacity: 1;
  }

  /* 每五笔一个间隔：读起来是「正」字计数，而不是一条虚线 */
  .stamp-grid .stamp:nth-child(5n) { margin-right: 7px; }

  .stamp-grid .stamp[data-state="learned"] {
    background: var(--leaf);
    font-size: 0;
  }

  .stamp-grid .stamp[data-state="retry"] {
    background: var(--rust);
    height: calc(var(--stamp-size) * .6);
  }

  /* 待整理单元 */
  .pending-unit {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s4) 0;
    border-bottom: 1px solid var(--line);
    opacity: .66;
  }

  .unit-index {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    color: var(--muted);
    font-size: var(--t-cap);
    font-variant-numeric: tabular-nums;
  }

  .pending-unit h3 { font-size: var(--t-body); font-weight: 600; }

  .pending-unit > div > span {
    color: var(--muted);
    font-size: var(--t-cap);
  }

  .pending-label {
    margin-left: auto;
    padding: 2px var(--s2);
    border-radius: var(--r-xs);
    background: var(--smoke);
    color: var(--muted);
    font-size: var(--t-cap);
  }

  /* ══ 单元页 ════════════════════════════════════════════ */
  .curriculum-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin-bottom: var(--s2);
    color: var(--muted);
    font-size: var(--t-cap);
    letter-spacing: .04em;
  }

  .curriculum-breadcrumb a { min-height: 36px; display: inline-flex; align-items: center; }
  .curriculum-breadcrumb a:last-child { color: var(--leaf); }

  .unit-compact-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s4);
    margin: 0 0 var(--s2);
  }

  .unit-compact-heading h1 { font-size: var(--t-h1); margin: 0 0 var(--s1); }

  .unit-compact-heading p {
    color: var(--muted);
    font-size: var(--t-body);
    font-family: var(--font-word);
  }

  .unit-summary {
    display: flex;
    align-items: center;
    gap: var(--s4);
    padding: 0 0 var(--s3);
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: var(--t-meta);
    font-variant-numeric: tabular-nums;
  }

  .unit-summary b { color: var(--ink); font-weight: 600; }

  .unit-summary a {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    min-height: 44px;
    margin-left: auto;
    color: var(--leaf);
    font-weight: 600;
  }

  .unit-next {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    margin: var(--s4) 0 0;
    padding: var(--s2) 0;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: none;
  }

  .unit-next strong {
    display: inline;
    margin: 0 0 0 var(--s2);
    font-family: var(--font-display);
    font-size: var(--t-h3);
    font-weight: 600;
  }

  .unit-next .btn { min-height: 40px; }

  .unit-next .eyebrow { display: none; }

  .unit-scenes-section,
  .unit-methods-section { margin-top: var(--s5); }

  /* 图录：单元页是「目录」不是「画展」，索引裁到 4:5，一屏能看到更多 */
  .textbook-scene-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s4);
  }

  .textbook-scene-card {
    display: grid;
    gap: var(--s2);
    align-content: start;
    overflow: visible;
    border-radius: 0;
  }

  .textbook-scene-art {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    border-radius: var(--r-hair);
    overflow: hidden;
    background: var(--paper-2);
    padding: 4px;
    border: 1px solid var(--line);
  }

  .textbook-scene-art img { border-radius: 0; }

  .textbook-scene-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--plate-focus);
  }

  /* 编号走图注：不在画面上压字，对比度与"图 01"的印刷习惯都对 */
  .textbook-scene-art > span { display: none; }

  .textbook-scene-copy h3 b {
    margin-right: 7px;
    color: var(--rust);
    font-size: .82em;
    font-weight: 600;
    font-variant-numeric: lining-nums;
    letter-spacing: .02em;
  }

  .textbook-scene-copy {
    display: block;
    padding: 0;
    min-height: 0;
  }

  .textbook-scene-copy h3 {
    font-family: var(--font-display);
    font-size: calc(var(--t-body) + 2px);
    line-height: 1.45;
    font-weight: 600;
    color: var(--ink);
  }

  .textbook-scene-copy p {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: var(--t-cap);
    font-variant-numeric: tabular-nums;
  }

  .textbook-scene-copy > span {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    margin-top: var(--s2);
    min-height: 0;
    color: var(--leaf);
    font-size: var(--t-cap);
    font-weight: 600;
  }

  /* 宽屏图录里整卡可点，不再重复「开始看图记词」 */
  @media (min-width: 961px) {
    .textbook-scene-copy > span { display: none; }
  }

  .textbook-scene-card:hover .textbook-scene-art img { transform: scale(1.012); }

  .textbook-scene-art img { transition: transform .3s var(--ease); }

  .unit-method-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s3);
  }

  .unit-method {
    display: grid;
    gap: var(--s1);
    align-content: start;
    min-height: 0;
    padding: var(--s4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--white);
  }

  .unit-method h3 { font-size: var(--t-body); font-weight: 600; }
  .unit-method p { color: var(--muted); font-size: var(--t-cap); }

  .method-icon {
    color: var(--leaf);
    margin-bottom: var(--s1);
  }

  .unit-method > svg { display: none; }

  /* 课后练习：单元页只留一个入口，题目在独立页面里 */
  .unit-practice-entry {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--white);
    transition: border-color .2s var(--ease);
  }

  .unit-practice-entry:hover { border-color: var(--leaf); }

  .unit-practice-entry > div { flex: 1; min-width: 0; }

  .unit-practice-entry h3 { font-size: var(--t-body); font-weight: 600; }

  .unit-practice-entry p {
    margin-top: var(--s1);
    color: var(--muted);
    font-size: var(--t-cap);
  }

  .unit-practice-entry .method-icon { margin: 0; }

  .unit-practice-go {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    color: var(--leaf);
    font-size: var(--t-cap);
    font-weight: 600;
    white-space: nowrap;
  }

  .practice-hub-done { margin-left: auto; }

  .practice-parts-section { margin-top: var(--s5); }

  .practice-parts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s4);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* 卡片与单元页的练习卡同一套骨架：图标砖 + 标题 + 右下引路 */
  .practice-part {
    display: grid;
    gap: var(--s3);
    height: 100%;
    padding: var(--s4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--white);
    transition: border-color .2s var(--ease);
  }

  .practice-part:hover { border-color: var(--leaf); }

  .practice-part-head {
    display: flex;
    gap: var(--s3);
    align-items: flex-start;
  }

  .practice-part-head .method-icon { margin: 0; }

  .practice-part-copy {
    display: grid;
    gap: var(--s1);
    min-width: 0;
  }

  .practice-part-index {
    color: var(--muted);
    font-size: var(--t-cap);
    letter-spacing: .06em;
  }

  .practice-part-copy h2 {
    font-family: var(--font-display);
    font-size: var(--t-h3);
    font-weight: 600;
  }

  .practice-part-desc {
    color: var(--muted);
    font-size: var(--t-cap);
    line-height: 1.8;
  }

  .practice-part-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2);
    margin-top: auto;
    padding-top: var(--s3);
    border-top: 1px solid var(--line);
    font-size: var(--t-cap);
    font-variant-numeric: tabular-nums;
  }

  .practice-part-state { color: var(--muted); }
  .practice-part.is-done .practice-part-state { color: var(--leaf); font-weight: 600; }

  .practice-part-go {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    min-height: 40px;
    color: var(--leaf);
    font-weight: 600;
    white-space: nowrap;
  }

  .practice-hub-note {
    margin-top: var(--s5);
    padding-top: var(--s3);
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: var(--t-cap);
    line-height: 1.8;
  }

  /* ══ 场景页 ════════════════════════════════════════════ */
  .flow-top {
    display: flex;
    align-items: center;
    gap: var(--s4);
    min-height: 44px;
    margin-bottom: var(--s3);
    position: static;
  }

  .flow-top > .back {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    margin: 0;
    color: var(--muted);
    font-size: var(--t-meta);
  }

  .learning-steps {
    display: flex;
    align-items: center;
    gap: var(--s2);
    position: static;
    transform: none;
    margin-left: auto;
    font-size: var(--t-cap);
    white-space: nowrap;
  }

  .learning-steps span { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }

  .learning-steps b {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 1px solid var(--line);
    border-radius: 50%;
    font-size: var(--t-micro);
    font-weight: 600;
  }

  .learning-steps .current { color: var(--leaf); font-weight: 700; }

  .learning-steps .current b,
  .learning-steps .done b {
    background: var(--leaf);
    border-color: var(--leaf);
    color: var(--white);
  }

  .learning-steps i { width: 14px; height: 1px; background: var(--line); }

  .flow-scene-picker { display: none; }

  .immersive-heading {
    max-width: none;
    margin: 0 0 var(--s4);
  }

  .immersive-heading h1 {
    font-size: var(--t-h3);
    line-height: 1.4;
    margin: 0 0 2px;
    letter-spacing: 0;
  }

  .immersive-heading p {
    margin: 0;
    color: var(--muted);
    font-size: var(--t-meta);
    line-height: 1.6;
  }

  .immersive-heading p[lang="en"] { font-family: var(--font-word); font-size: var(--t-body); }

  .immersive-tools {
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin-top: var(--s3);
  }

  .immersive-tools .btn { min-height: 40px; font-size: var(--t-meta); }

  .immersive-tools select {
    min-height: 40px;
    max-width: 200px;
    padding: 0 var(--s2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background-color: var(--white);
    color: var(--ink);
    font-size: var(--t-meta);
  }

  /* 桌面与移动共用「锚定透镜」：图版居中放大，答案浮在物件旁。
     几何由 compact-scene.css 的 --picture-width / --popover-x/y 决定。 */
  .scene-workspace,
  .scene-workspace.has-answer {
    --picture-width: clamp(340px, calc((100dvh - 220px) * .7467), 640px);
    display: block;
    width: min(100%, var(--picture-width));
    max-width: none;
    margin: 0 auto;
  }

  /* 宽屏把答题卡停靠到图版右侧的空栏：卡面不再压住插画。
     窄屏（<1100px）仍走 compact-scene.css 的锚定透镜。 */
  @media (min-width: 1100px) {
    .scene-workspace.has-answer {
      display: grid;
      grid-template-columns: minmax(0, var(--picture-width)) 360px;
      column-gap: 24px;
      width: min(100%, calc(var(--picture-width) + 384px));
      justify-content: center;
      align-items: start;
    }
  }

  .immersive-stage {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--smoke);
    box-shadow: none;
  }

  .scene-status {
    position: absolute;
    left: var(--s3);
    top: var(--s3);
    z-index: 2;
    padding: 4px var(--s2);
    border-radius: var(--r-xs);
    background: color-mix(in srgb, var(--white) 86%, transparent);
    color: var(--leaf);
    font-size: var(--t-cap);
    backdrop-filter: blur(8px);
    pointer-events: none;
  }

  .object-hit:focus-visible { outline: none; }

  .object-outline {
    fill: none;
    stroke: var(--scene-outline);
    stroke-width: .7;
    filter: drop-shadow(0 0 1.2px var(--scene-glow));
    pointer-events: none;
  }

  .dim-layer { fill: var(--scene-dim); opacity: .52; pointer-events: none; }

  .learned-dot {
    fill: var(--leaf);
    stroke: var(--white);
    stroke-width: .35;
  }

  /* @svg-units：viewBox 0 0 100 100 内的 user unit，不是 CSS px */
  .learned-tick {
    fill: none;
    stroke: var(--white);
    stroke-width: .42;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* 桌面不再另设侧栏：锚定透镜在宽屏同样成立。
     仅给图版加圆角，避免大图硬切边。 */
  @media (min-width: 721px) {
    .scene-experience .immersive-stage {
      border-radius: var(--r-md);
      overflow: hidden;
    }
  }

  .scene-workspace .object-popover::before,
  .scene-workspace .object-popover::after { display: none; }

  .picture-choice-sentence {
    font-size: var(--t-lead);
    line-height: 1.6;
    margin: var(--s2) 0 var(--s3);
  }

  .phrase-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: var(--s2);
  }

  /* ── 场景词卡：一道印刷的选词填空题 ─────────────────────────────
     句子是主角——衬线体、按教材排版，空格是一条真能写字的横线。
     选项不是三块按钮，是排好的清单：字母退到页边，行与行之间只有发丝线。
     停靠态铺纸面、锚定态铺玻璃（见 glass.css），结构始终是这一个。 */
  /* 指示句（“选出合适的短语”）是标签，问句（“…用英文怎么说？”）是题目本身 */
  .object-popover .popover-head h2 {
    font-size: 13px;
    line-height: 1.6;
    font-weight: 600;
    letter-spacing: .2px;
    color: var(--muted);
  }

  .object-popover .popover-head h2.is-question {
    font-family: var(--font-word);
    font-size: 16px;
    line-height: 1.65;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--ink);
  }

  .object-popover .picture-choice-sentence {
    font-family: var(--font-word);
    font-size: 16px;
    line-height: 1.75;
    letter-spacing: .1px;
    color: var(--ink);
    margin: 2px 0 10px;
    overflow-wrap: anywhere;
  }

  .object-popover .phrase-blank {
    display: inline-block;
    min-width: 46px;
    padding: 0 6px;
    border-bottom: 1.5px solid var(--leaf);
    font-family: var(--font-word);
    font-size: 14px;
    line-height: 1.4;
    color: var(--muted);
  }

  /* 答案写进空格里，而不是另起一行放大加粗——下划线自己划过去 */
  .object-popover .phrase-filled {
    font-style: normal;
    color: var(--leaf);
    padding: 0 2px;
    background-image: linear-gradient(var(--leaf), var(--leaf));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 1.5px;
  }

  @media (prefers-reduced-motion: no-preference) {
    .object-popover .phrase-filled { animation: phrase-write-in .36s var(--ease) both; }
    @keyframes phrase-write-in {
      from { background-size: 0% 1.5px; color: color-mix(in srgb, var(--leaf) 20%, transparent); }
      to { background-size: 100% 1.5px; color: var(--leaf); }
    }
  }

  .object-popover .phrase-options {
    display: block;
    gap: 0;
    margin: 0;
    border-top: 1px solid var(--line);
  }

  .object-popover .phrase-option {
    display: grid;
    grid-template-columns: 15px minmax(0, 1fr);
    align-items: baseline;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    padding: 11px 6px 11px 2px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: none;
    text-align: left;
  }

  .object-popover .phrase-option > span {
    width: auto;
    height: auto;
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-family: var(--font-word);
    font-size: 12px;
    line-height: 1.6;
    color: var(--muted);
  }

  .object-popover .phrase-option > strong {
    font-family: var(--font-word);
    font-size: 15.5px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--ink);
    overflow-wrap: anywhere;
  }

  @media (hover: hover) {
    .object-popover .phrase-option:hover { background: color-mix(in srgb, var(--leaf) 7%, transparent); }
    .object-popover .phrase-option:hover > span,
    .object-popover .phrase-option:hover > strong { color: var(--leaf); }
  }

  .object-popover .phrase-option:focus-visible { outline: 2px solid var(--leaf); outline-offset: -2px; }

  .object-popover .popover-answer-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 10px;
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--line);
  }

  .object-popover .popover-answer-line > strong { font-family: var(--font-word); font-size: 16px; font-weight: 600; color: var(--ink); }
  .object-popover .popover-answer-line > span { font-size: 12.5px; color: var(--muted); }

  /* 反馈是一条带小圆点的注记，不是一块彩色药丸 */
  .object-popover .feedback {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin: 10px 0 0;
    padding: 0;
    border-radius: 0;
    background: none;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--leaf);
  }

  .object-popover .feedback::before {
    content: '';
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    transform: translateY(-2px);
  }

  .object-popover .feedback.wrong { color: var(--rust); }

  /* 解释是一段更小的附注：不画框、不竖线，靠字号和留白退到后面 */
  .object-popover .picture-choice-explanation {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.8;
    color: var(--muted);
  }

  .object-popover .phrase-translation { margin: 8px 0 0; font-size: 12px; line-height: 1.8; color: var(--muted); }

  /* 主操作也排成一行：和选项同一个节奏，不再浮起一颗绿色药丸 */
  .object-popover > .btn.full {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    margin: 12px 0 0;
    padding: 12px 2px;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: none;
    box-shadow: none;
    text-align: left;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .2px;
  }

  .object-popover > .btn.primary.full { color: var(--leaf); }
  .object-popover > .btn.secondary.full { color: var(--ink); }

  .object-popover > .btn.full > svg { margin-left: auto; flex: 0 0 auto; }

  @media (hover: hover) {
    .object-popover > .btn.full:hover { background: color-mix(in srgb, var(--leaf) 8%, transparent); }
  }

  .object-popover > .btn.full:focus-visible { outline: 2px solid var(--leaf); outline-offset: -2px; }

  /* 底部工具不再单独拉一条线：主操作那一行已经把卡片分开了 */
  .object-popover .popover-help { margin-top: 4px; padding-top: 0; border-top: 0; }

  /* 收藏/收藏夹始终靠右，无论左边还剩几个文字按钮 */
  .object-popover .compact-word-actions { margin-left: auto; }

  .popover-help {
    display: flex;
    justify-content: space-between;
    gap: var(--s2);
    margin-top: var(--s2);
    flex-wrap: wrap;
  }

  .popover-help button {
    min-height: 44px;
    padding: 0 var(--s2);
    color: var(--muted);
    font-size: var(--t-meta);
  }

  .popover-help button:hover { color: var(--leaf); }

  /* ══ 先记单词：图版 + 词条（左图右文，图出血到卡片边）══ */
  .memory-section {
    max-width: 760px;
    margin: var(--s5) auto 0;
  }

  .memory-heading {
    text-align: left;
    margin-bottom: var(--s4);
  }

  .memory-heading h1 {
    font-size: var(--t-h2);
    line-height: 1.4;
    letter-spacing: 0;
    margin: var(--s1) 0 0;
  }

  .memory-progress {
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin: 0 0 var(--s4);
    color: var(--muted);
    font-size: var(--t-cap);
  }

  .memory-progress > div { display: flex; flex: 1; gap: 4px; }

  .memory-progress i {
    height: 3px;
    flex: 1;
    border-radius: var(--r-pill);
    background: var(--line);
  }

  .memory-progress i.filled { background: var(--leaf); }

  .memory-card {
    /* 定高：图版宽度 ÷ 插画比例（896/1200）。卡片高度跟着插画走，
       插画永远按原比例完整呈现，卡片也不会因为文字长短变高变矮。 */
    --pic-w: clamp(240px, 26vw, 300px);
    display: grid;
    grid-template-columns: var(--pic-w) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    align-items: stretch;
    height: calc(var(--pic-w) * 4 / 3);
    gap: 0;
    padding: 0;
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
  }

  .memory-picture {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 100%;
    /* 图版定 3:4，卡片高度就跟着它定死；插画按原比例居中放进去，
       宽扁的裁切（一行字、一排课桌）读作"一张小样贴在纸上"，不会拉成一条缝。 */
    aspect-ratio: 3 / 4;
    height: auto;
    align-self: start;
    min-height: 0;
    border-radius: 0;
    background: var(--paper-2);
    box-shadow: inset 0 0 0 1px var(--line);
  }

  .memory-picture {
    display: grid;
    place-items: center;
  }

  /* 图版 3:4，SVG 铺满；裁切框仍是对象的紧包围盒，
     preserveAspectRatio="slice" 让它按"填满"缩放并裁掉多余，而不是留白条 */
  .memory-picture svg { width: 100%; height: 100%; }

  .memory-word {
    grid-column: 2;
    grid-row: 1;
    padding: var(--s5) var(--s5) var(--s2);
    align-self: start;
  }

  .memory-meaning {
    grid-column: 2;
    grid-row: 2;
    padding: 0 var(--s5) var(--s5);
    border-top: 0;
  }

  .memory-label {
    font-size: var(--t-cap);
    letter-spacing: 0;
    color: var(--muted);
  }

  .memory-word h2 {
    font-size: clamp(30px, 4vw, 42px);
    line-height: 1.25;
    letter-spacing: 0;
    margin: var(--s1) 0 var(--s2);
  }

  .memory-word .phonetic {
    margin: 0 0 var(--s4);
    color: var(--muted);
    font-size: var(--t-meta);
  }

  /* 旧版把「听发音」绝对定位在词上（right:0 / top:50% / translateY(-50%)），
     会压住音标那一行。注意只写 position: static 不够：
     遗留的 transform 仍然生效，按钮会被"提起" 22px 盖住 /pɒt/。
     所以 top / right / transform 必须一起清掉。 */
  .memory-word .btn {
    position: static;
    top: auto;
    right: auto;
    transform: none;
    min-height: 40px;
    margin-top: var(--s1);
    font-size: var(--t-meta);
  }

  .memory-meaning > p:first-child {
    font-size: var(--t-lead);
    font-weight: 600;
    margin: 0 0 var(--s2);
  }

  .memory-meaning .phrase-story,
  .memory-meaning details p {
    color: var(--muted);
    font-size: var(--t-meta);
    line-height: 1.75;
    margin: var(--s2) 0;
  }

  .memory-meaning details > summary {
    display: flex;
    align-items: center;
    min-height: 40px;
    color: var(--leaf);
    font-size: var(--t-meta);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
  }

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

  .memory-meaning > span {
    display: block;
    margin-top: var(--s2);
    color: var(--muted);
    font-size: var(--t-cap);
    line-height: 1.65;
  }

  .memory-footnote {
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin-top: var(--s3);
    color: var(--muted);
    font-size: var(--t-cap);
  }

  .memory-actions {
    display: flex;
    gap: var(--s3);
    margin-top: var(--s4);
  }

  .memory-actions .btn { flex: 1; min-height: 48px; }

  .memory-actions .secondary { flex: 0 0 auto; min-width: 104px; }

  /* ══ 词卡形态恒定 ══════════════════════════════════════
     旧规则用 :has([data-long-word]) 换 grid-template-columns：
     字一长，卡片就在 180ms 的翻面补间中途跳成另一种布局 →
     "先按旧尺寸画一帧、再跳到新尺寸"，看起来就是闪。
     现在长词只缩字号，网格不变，外框高度恒定。 */
  .memory-card,
  .flashcard,
  .textbook-word-card {
    backface-visibility: hidden;
  }

  @media (min-width: 721px) {
    .memory-card:has(.memory-word h2[data-long-word]) {
      grid-template-columns: var(--pic-w) minmax(0, 1fr);
    }

    .memory-card:has(.memory-word h2[data-long-word]) .memory-picture {
      width: 100%;
      height: 100%;
    }

    .memory-card:has(.memory-word h2[data-long-word]) .memory-word h2 {
      font-size: clamp(24px, 3.2vw, 36px);
      overflow-wrap: anywhere;
    }
  }

  /* ══ 词卡 ══════════════════════════════════════════════ */
  .cards-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s4);
    margin: var(--s3) 0 var(--s5);
  }

  .cards-header h1 { margin: var(--s1) 0 0; font-size: var(--t-h2); }

  /* ══ 卡片定尺寸 ════════════════════════════════════════
     翻面时内容会多出（例句、画面链接、生词动作）——实测正面 398、
     背面 747，一次翻面卡片长高 349px。外框一变，下面的动作条、
     页面高度都跟着重排，再叠上翻面补间就是那阵"闪"。
     这里把卡片高度钉死，正面居中、背面在卡片内部滚动，页面不动。 */
    /* 手机：底部悬浮导航吃掉约 90px，卡高只敢给 100dvh-300px；
     桌面顶栏 66px、无底部条，可以到 100dvh-250px。 */
  .textbook-lesson-page { --card-h: clamp(392px, calc(100dvh - 300px), 560px); }

  @media (min-width: 721px) {
    .textbook-lesson-page { --card-h: clamp(440px, calc(100dvh - 250px), 660px); }
  }

  .textbook-word-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: var(--card-h);
    overflow: hidden;
  }

  /* 词本身 + 发音键是"卡面"，永远钉在顶部不滚 */
  .textbook-word-card .textbook-flashcard {
    flex: 0 0 auto;
    margin-block: auto 0;
  }

  /* 例句、画面链接这些"可滚内容"，超出部分在卡内滚动。
     渐隐放在不滚的 wrap 上——mask 直接挂在滚动容器上，
     部分引擎会让遮罩跟着内容一起滚，边缘就失效了。 */
  .word-card-scroll-wrap {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .word-card-scroll-wrap[data-more='true'] {
    mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
  }

  .word-card-scroll {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: var(--s3);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .word-card-scroll::-webkit-scrollbar { display: none; }

  /* 底部动作（生词本/收藏）钉在卡片下沿，不跟着滚 */
  .textbook-word-card .word-save-actions,
  .textbook-word-card .supplement-note {
    flex: 0 0 auto;
  }

  .cards-page .flashcard {
    height: var(--card-h, 420px);
  }

  .cards-page { --card-h: clamp(400px, calc(100dvh - 260px), 640px); }

  /* 学词的页面里，单词必须比页标题更大 */
  .textbook-lesson-page .lesson-heading h1,
  .lesson-heading h1 { font-size: var(--t-h2); }

  .textbook-flashcard > strong {
    font-family: var(--font-word);
    font-size: clamp(40px, 5.4vw, 60px);
    line-height: 1.15;
    letter-spacing: 0;
    margin: var(--s3) 0 var(--s2);
  }

  .textbook-flashcard > span:first-child {
    font-size: var(--t-micro);
    letter-spacing: .12em;
    color: var(--muted);
  }

  .cards-filter {
    width: auto;
    min-width: 180px;
    max-width: 220px;
    min-height: 44px;
    font-size: var(--t-meta);
  }

  .card-meta {
    display: flex;
    justify-content: space-between;
    gap: var(--s3);
    margin-bottom: var(--s3);
    color: var(--muted);
    font-size: var(--t-cap);
    font-variant-numeric: tabular-nums;
  }

  .flashcard {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    width: 100%;
    min-height: 320px;
    padding: var(--s6) var(--s5);
    text-align: center;
    border-radius: var(--r-hair);
    box-shadow: none;
    transition: border-color .2s var(--ease);
  }

  .flashcard:hover { border-color: var(--rust); }

  .flashcard:hover { box-shadow: var(--shadow-lift); }

  .flashcard .eyebrow { color: var(--muted); }

  .flashcard .word-title {
    font-family: var(--font-word);
    font-size: var(--t-word);
    line-height: 1.2;
    letter-spacing: 0;
    margin: var(--s2) 0;
    overflow-wrap: anywhere;
  }

  .flashcard .meaning {
    font-size: var(--t-h2);
    line-height: 1.5;
    font-weight: 600;
    margin: var(--s2) 0;
  }

  .flashcard .phonetic {
    color: var(--muted);
    font-size: var(--t-meta);
    font-variant-numeric: tabular-nums;
  }

  .flip-hint {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    margin-top: var(--s4);
    color: var(--muted);
    font-size: var(--t-cap);
  }

  .word-save-actions {
    display: flex;
    gap: var(--s2);
    flex-wrap: wrap;
    margin: var(--s3) 0;
  }

  .word-save-actions .btn {
    min-height: 40px;
    padding: var(--s2) var(--s3);
    font-size: var(--t-cap);
    border-radius: var(--r-sm);
  }

  .word-save-actions [aria-pressed="true"] {
    border-color: var(--leaf);
    color: var(--leaf);
    background: var(--leaf-wash);
  }

  .card-controls { display: flex; gap: var(--s3); margin: var(--s4) 0; }

  /* 课上/词卡的底部动作条：桌面上不再 sticky（会盖住抽认卡），改用发丝线与纸色 */
  .lesson-action-dock {
    position: static;
    display: grid;
    gap: var(--s2);
    margin-top: var(--s4);
    padding-top: var(--s4);
    border-top: 1px solid var(--line);
    background: none;
    box-shadow: none;
  }

  .lesson-card-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
  }

  .lesson-card-nav > span {
    color: var(--muted);
    font-size: var(--t-cap);
    text-align: center;
  }

  .card-controls .btn { flex: 1; min-height: 52px; font-size: var(--t-lead); }

  .card-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2);
  }

  .card-nav .btn { min-height: 44px; font-size: var(--t-meta); padding: 0 var(--s3); }

  .card-nav span {
    color: var(--muted);
    font-size: var(--t-meta);
    font-variant-numeric: tabular-nums;
  }

  /* ══ 二级页：统一语气，不改排布 ════════════════════════ */
  .hub-panel { padding: var(--s5); margin-bottom: var(--s5); }
  .hub-panel h2 { margin-bottom: var(--s2); }

  .review-prompt {
    font-family: var(--font-display);
    font-size: calc(var(--t-h2) + 6px);
    line-height: 1.45;
    letter-spacing: 0;
    margin: var(--s3) 0 var(--s4);
    overflow-wrap: anywhere;
  }

  .review-option {
    display: flex;
    align-items: center;
    gap: var(--s3);
    min-height: 52px;
    padding: var(--s3) var(--s4);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--white);
    color: var(--ink);
    font-size: var(--t-body);
    text-align: left;
  }

  .review-option:hover { border-color: var(--leaf); }

  .review-option.correct {
    border-color: var(--leaf);
    background: var(--leaf-wash);
    color: var(--leaf);
  }

  .review-feedback { color: var(--leaf); font-size: var(--t-meta); line-height: 1.7; }
  .review-feedback.wrong { color: var(--rust); }

  .review-aside {
    padding: var(--s5);
    border-radius: var(--r-lg);
    background: var(--smoke);
  }

  .review-aside p { color: var(--muted); font-size: var(--t-meta); }

  .interval-steps span {
    padding: 2px var(--s2);
    border-radius: var(--r-xs);
    background: var(--white);
    color: var(--leaf);
    font-size: var(--t-cap);
    font-variant-numeric: tabular-nums;
  }

  .wallet-grid,
  .management-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }

  .wallet-grid > div,
  .management-stats > div {
    padding: var(--s4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--white);
  }

  .wallet-grid > div:first-child { background: var(--smoke); border-color: transparent; }

  .wallet-grid strong,
  .management-stats strong {
    display: block;
    font-size: var(--t-h1);
    color: var(--leaf);
    font-variant-numeric: tabular-nums;
  }

  .wallet-grid span,
  .wallet-grid small,
  .management-stats span { color: var(--muted); font-size: var(--t-cap); }

  .reward-wallet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s5);
    padding: var(--s5) var(--s6);
    border-radius: var(--r-lg);
    background: var(--leaf-deep);
    color: var(--paper);
  }

  .reward-wallet strong {
    display: block;
    font-size: clamp(38px, 5vw, 54px);
    line-height: 1.1;
    margin: var(--s1) 0;
    font-variant-numeric: tabular-nums;
  }

  .reward-wallet > div > span,
  .reward-wallet small { color: color-mix(in srgb, var(--paper) 78%, transparent); font-size: var(--t-meta); }

  .reward-wallet .btn {
    background: transparent;
    border-color: color-mix(in srgb, var(--paper) 42%, transparent);
    color: var(--paper);
  }

  .wallet-decoration { display: none; }

  .prize-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
  .prize-art { aspect-ratio: 10 / 7; background: var(--smoke); }
  .prize-body { padding: var(--s4); }
  .prize-body h2 { font-size: var(--t-h3); margin: var(--s1) 0; }
  .prize-body > p { color: var(--muted); font-size: var(--t-cap); }
  .prize-price strong { color: var(--leaf); font-size: var(--t-h2); font-variant-numeric: tabular-nums; }


  .class-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
  .order-card { display: flex; gap: var(--s4); padding: var(--s4); }
  .order-copy h3 { font-size: var(--t-body); }
  .order-copy code { color: var(--leaf); font-size: var(--t-body); }

  .badge-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }

  .achievement-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s2);
    padding: var(--s4) var(--s2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: transparent;
    color: var(--muted);
    text-align: center;
  }

  .achievement-badge > span {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--r-sm);
    background: var(--smoke);
    color: var(--muted);
    font-size: var(--t-h3);
  }

  .achievement-badge.unlocked {
    border-color: var(--leaf);
    background: var(--leaf-wash);
    color: var(--leaf);
  }

  .achievement-badge.unlocked > span { background: var(--white); color: var(--leaf); }

  .achievement-badge strong { font-size: var(--t-cap); }
  .achievement-badge small { font-size: var(--t-micro); line-height: 1.6; }

  .ledger-list li,
  .roster-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    padding: var(--s3) 0;
    border-top: 1px solid var(--line);
    font-size: var(--t-meta);
  }

  .ledger-list small,
  .roster-list small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: var(--t-cap);
    font-variant-numeric: tabular-nums;
  }

  .prototype-note {
    margin: var(--s4) 0;
    padding: var(--s2) 0 var(--s2) var(--s3);
    border-left: 2px solid var(--rust);
    color: var(--muted);
    font-size: var(--t-cap);
    line-height: 1.7;
  }

  /* ══ 断点 ══════════════════════════════════════════════ */
  @media (max-width: 960px) {
    /* 平板：图版固定在右列（别让它吃掉整个版面），文案吃剩下的宽度 */
    .journey-continue { grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); gap: var(--s5); }
    .textbook-scene-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .unit-method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .badge-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .prize-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 720px) {
    .curriculum-intro h1 { font-size: var(--t-h1); }

    .due-review-banner { flex-wrap: wrap; gap: var(--s3); }
    .due-review-banner > .btn { width: 100%; }

    /* 首屏图版：图在上，说明在下 */
    .journey-continue {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--s3);
      padding-bottom: var(--s5);
    }

    /* 窄屏先图后文：画面才是"从这里开始"的理由 */
    .journey-continue .continue-art {
      order: -1;
      max-height: 46dvh;
      border-radius: var(--r-md);
    }

    .continue-copy .btn { order: 0; }
    .continue-unit-link { display: none; }

    .continue-copy h2 { font-size: var(--t-h2); }
    .continue-copy .scene-type { margin-bottom: var(--s4); }
    .continue-copy .primary { width: 100%; min-width: 0; }
    .continue-unit-link { margin-left: 0; }

    /* 窄屏单元列表：单列 + 小图版，图片只占 92px，文字有整行可用 */
    .textbook-unit-list { grid-template-columns: minmax(0, 1fr); gap: 0; }

    .ready-unit {
      grid-template-columns: 92px minmax(0, 1fr);
      gap: var(--s3);
      padding: var(--s3) 0;
    }

    .ready-unit-art { padding: 3px; }
    .ready-unit h3 { font-size: var(--t-body); margin-top: 2px; }
    .ready-unit p.unit-english { font-size: var(--t-meta); margin-top: 1px; }

    .available-label { flex-wrap: wrap; gap: 6px; font-size: var(--t-micro); }
    .available-label .pill { white-space: nowrap; }

    /* 窄屏不给 47 道刻度留位置：只留一行"已收 5 / 47"，刻度留在宽屏 */
    .stamp-row { margin: var(--s2) 0 0; }
    .stamp-grid { display: none; }
    .stamp-row > b { font-size: var(--t-micro); margin: 0; }

    .ready-unit .text-action { min-height: 32px; font-size: var(--t-meta); }

    .journey-continue .continue-art { max-height: 38dvh; }

    /* 窄屏的图录：一行一个场景，左小图右标题——不再挤成两列导致标题竖排 */
    .textbook-scene-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }

    .textbook-scene-card {
      grid-template-columns: 96px minmax(0, 1fr);
      align-items: center;
      gap: var(--s3);
      padding: var(--s3) 0;
      border-bottom: 1px solid var(--line);
    }

    .textbook-scene-art {
      aspect-ratio: 3 / 4;
      padding: 3px;
    }

    .textbook-scene-copy h3 { font-size: var(--t-body); }
    .textbook-scene-copy p { font-size: var(--t-micro); }
    .textbook-scene-copy > span { font-size: var(--t-micro); min-height: 30px; }
    .unit-method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }

    .unit-compact-heading { display: block; }
    .unit-compact-heading .text-action { margin-top: var(--s2); }
    .unit-summary { gap: var(--s4); flex-wrap: wrap; }
    .unit-summary a { width: 100%; margin-left: 0; }

    /* 课后练习：窄屏单列，入口说明换到第二行，右下角进入 */
    .unit-practice-entry { flex-wrap: wrap; gap: var(--s2); }
    .unit-practice-entry > div { flex: 1 1 100%; }
    .unit-practice-entry .method-icon { display: none; }
    .unit-practice-go { margin-left: auto; }
    .practice-parts { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
    .practice-part { padding: var(--s3) var(--s4); gap: var(--s2); }
    .practice-hub-done { margin-left: 0; }
    .unit-next { display: block; padding: var(--s4); }
    .unit-next .btn { width: 100%; margin-top: var(--s3); }

    /* 场景：图在上，答题卡从底部升起 */
    .scene-experience { padding: 0 0 var(--s5); }
    .flow-top { margin: 0 var(--s4) var(--s3); }
    .learning-steps { font-size: var(--t-micro); }
    .immersive-heading { margin: 0 var(--s4) var(--s3); }
    .immersive-heading h1 { font-size: var(--t-body); }
    .immersive-tools { margin: 0 var(--s4) var(--s3); }

    /* 先记单词：窄屏用「小图版 + 词条」两栏，词不被挤成竖排 */
    .memory-section {
      max-width: none;
      margin: var(--s4) var(--s4) 0;
    }

    .memory-heading h1 { font-size: var(--t-h3); }
    .memory-progress { margin-bottom: var(--s3); }

    /* 图版从 104 加到 128：104px 宽时插画的构图几乎读不出来 */
    .memory-card { --pic-w: 128px; grid-template-columns: 128px minmax(0, 1fr); height: 284px; }

    .memory-card:has(.memory-word h2[data-long-word]) {
      --pic-w: 128px;
      grid-template-columns: 128px minmax(0, 1fr);
      height: 284px;
    }

    .memory-card:has(.memory-word h2[data-long-word]) .memory-picture {
      width: 100%;
      height: 100%;
      min-height: 0;
    }

    .memory-card:has(.memory-word h2[data-long-word]) .memory-word h2 {
      font-size: calc(var(--t-h2) + 2px);
      overflow-wrap: anywhere;
    }
    .memory-picture { min-height: 0; }

    .memory-word { padding: var(--s4) var(--s4) var(--s2); }

    .memory-word h2 {
      font-size: calc(var(--t-h2) + 2px);
      line-height: 1.3;
      overflow-wrap: anywhere;
    }

    .memory-word .phonetic { margin-bottom: var(--s3); }
    .memory-meaning { padding: 0 var(--s4) var(--s4); }
    .memory-meaning > p:first-child { font-size: var(--t-body); }

    .memory-actions {
      position: sticky;
      bottom: 0;
      z-index: var(--z-sticky);
      margin-top: var(--s4);
      padding: var(--s3) 0 calc(var(--s3) + env(safe-area-inset-bottom));
      background: var(--paper);
    }

    .memory-actions .secondary { min-width: 88px; }

    .scene-workspace,
    .scene-workspace.has-answer { display: block; width: 100%; }

    .immersive-stage { border-radius: 0; }

    /* 答题透镜保持锚定在物件旁（几何由 compact-scene 的 --popover-x/y 决定），
       玻璃材质见 glass.css。这里只收紧内边距与圆角。 */
    .scene-workspace .object-popover {
      padding: var(--s3);
      border-radius: var(--r-md);
    }

    /* 学词页底部要给固定 tab 栏留位置，别让"上一个/下一个"压在栏后 */
    .textbook-lesson-page { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }

    .cards-header { display: block; }
    .cards-filter { width: 100%; max-width: none; margin-top: var(--s3); }
    .flashcard { min-height: 280px; padding: var(--s5) var(--s4); }
    .card-controls .btn { font-size: var(--t-body); min-height: 50px; }

    .wallet-grid,
    .management-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
    .wallet-grid > div,
    .management-stats > div { padding: var(--s3); }
    .wallet-grid strong,
    .management-stats strong { font-size: var(--t-h2); }

    .reward-wallet { display: block; padding: var(--s5); }
    .reward-wallet .btn { margin-top: var(--s4); width: 100%; }

    .prize-grid { gap: var(--s3); }
    .prize-body { padding: var(--s3); }
    .prize-body h2 { font-size: var(--t-body); }

    .class-grid { grid-template-columns: minmax(0, 1fr); }
    .badge-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }

    .review-layout { display: block; }
    .review-aside { margin-top: var(--s4); }
  }

  /* ══ 先记单词：全图 + 词卡 + 引线 ══════════════════════
     桌面预习为左侧整图、右侧卡堆；手机卡堆位于插画下方。
     线由 components/motion.js 的 drawWordWire 画，这里只负责几何与层级。 */
  .word-atlas {
    position: relative;   /* 引线 SVG 按这一层定位；缺了它绝对定位会跑到更外层，线整体偏移 */
    display: grid;
    gap: var(--s4);
    align-items: start;
    margin-top: var(--s3);
  }

  @media (min-width: 721px) {
    .word-atlas { grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: var(--s5); }
  }

  .word-atlas--plain { grid-template-columns: minmax(0, 1fr); }

  .word-atlas__stage {
    position: relative;
    margin: 0;
    aspect-ratio: var(--atlas-ar, 896 / 1200);   /* 图幅比例跟着插画真实宽高，坐标才对得上 */
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    overflow: hidden;
  }

  .word-atlas__stage img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 引线画在整个 section 的坐标系里：手机档的起点在图片下方那张卡上 */
  .word-atlas__wires {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    overflow: visible;
    pointer-events: none;
  }

  /* 记忆提示（memoryAidSVG）画在图内，与引线分开两层 */
  .word-atlas__aids {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: visible;
    pointer-events: none;
  }

  /* 复习/先记这一屏的中文释义是常显的（学习态，不是测验态） */
  .word-atlas--review .atlas-word__cn { opacity: 1; }

  .word-atlas__wires g { transform-box: view-box; }
  .word-atlas__wires path {
    fill: none;
    stroke: var(--rust);
    stroke-width: 1.7;
    stroke-linecap: round;
  }
  .word-atlas__halo { fill: none; stroke: var(--rust); stroke-width: 1.3; opacity: .92; }
  .word-atlas__dot { fill: var(--rust); }
  .word-atlas__region { fill: none; stroke: var(--rust); stroke-width: 1.5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
  .word-atlas__stage .word-atlas__halo { r: 14; }

  .word-atlas__side {
    position: relative;
    z-index: 3;
    display: grid;
    gap: var(--s2);
    align-content: start;
  }

  .word-atlas__meta {
    display: flex;
    justify-content: space-between;
    gap: var(--s3);
    margin: 0;
    color: var(--muted);
    font-size: var(--t-cap);
  }

  .word-atlas__title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s2);
    margin: var(--s2) 0 0;
    color: var(--muted);
    font-size: var(--t-cap);
    letter-spacing: .12em;
  }

  .word-atlas__count {
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
  }

  .word-atlas__rail {
    display: grid;
    gap: var(--s2);
  }

  .atlas-word {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: var(--s2);
    width: 100%;
    padding: var(--s3);
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease, opacity .2s ease, transform .16s ease;
  }

  .atlas-word:active { transform: scale(.988); }

  .atlas-word.is-active {
    border-color: var(--rust);
    background: var(--paper);
  }

  .atlas-word { min-width: 0; }

  /* 两行：英文在上、音标在下。音标跟着词走，眼睛不用从卡跳到面板 */
  .atlas-word__main {
    flex: 1 1 auto;
    display: grid;
    gap: 1px;
    min-width: 0;
  }

  .atlas-word__en {
    font-family: var(--font-word);
    font-size: var(--t-h3);
    line-height: 1.2;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .atlas-word__ph {
    color: var(--muted);
    font-size: var(--t-meta);
    line-height: 1.25;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .atlas-word__cn {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--muted);
    font-size: var(--t-meta);
    /* opacity:0 挡不住屏幕阅读器；visibility 会把它从无障碍树里摘掉 */
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: opacity .18s ease;
  }

  .atlas-word.is-flipped .atlas-word__cn { opacity: 1; visibility: visible; }

  .atlas-word__under {
    position: absolute;
    left: var(--s3);
    right: var(--s3);
    bottom: 7px;
    height: 1.5px;
    background: var(--rust);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .22s ease;
  }

  .atlas-word.is-active .atlas-word__under { transform: scaleX(1); }

  /* 发音键：只在当前这张卡上出现。卡片是 div[role=button]，
     里面这枚才是原生按钮（button 不能嵌套 button）。 */
  .atlas-word__speak {
    flex: 0 0 auto;
    margin-left: auto;
    display: grid;
    place-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--paper);
    color: var(--muted);
    cursor: pointer;
    transition: color .16s ease, border-color .16s ease, transform .16s ease;
  }

  .atlas-word__speak:hover { color: var(--rust); border-color: var(--rust); }
  .atlas-word__speak:active { transform: scale(.94); }
  .atlas-word:not(.is-active) .atlas-word__speak { display: none; }

  @media (min-width: 721px) {
    /* 不要整卡降透明：12px 音标叠上 .74 只剩约 3.25:1。
       用文字颜色表达"不是当前卡"，音标保持满不透明 */
    .atlas-word:not(.is-active):not(.is-flipped) .atlas-word__en { color: var(--muted); }
    .atlas-word:not(.is-active):not(.is-flipped) .atlas-word__under { opacity: .5; }
  }

  .word-atlas__panel {
    display: grid;
    gap: var(--s2);
    margin-top: var(--s2);
    padding-top: var(--s3);
    border-top: 1px solid var(--line);
  }

  .word-atlas__wordline {
    display: flex;
    align-items: center;
    gap: var(--s3);
  }

  .word-atlas__wordline .phonetic { color: var(--muted); font-size: var(--t-meta); }

  .word-atlas__prompt {
    margin: 0;
    color: var(--ink);
    font-size: var(--t-body);
  }

  /* 当前这个词还是这一屏的主角：词列是列表，这里是「大词」 */
  .word-atlas__head-word {
    margin: var(--s2) 0 0;
    font-family: var(--font-word);
    font-size: var(--t-word);
    line-height: 1.1;
    letter-spacing: 0;
    overflow-wrap: anywhere;
  }

  /* 词图版式下动作条回到正常流：底部常驻条会压住整幅画和右侧面板 */
  .memory-section:has(.word-atlas) .memory-actions {
    position: static;
    margin-top: var(--s4);
  }

  /* 成对的翻词动作：等宽、等高，沿用纸卡圆角与正文尺度。 */
  .memory-section:has(.word-atlas--review) .memory-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s3);
    box-shadow: none;
  }

  .memory-section:has(.word-atlas--review) .memory-actions .btn {
    width: 100%;
    min-width: 0;
    height: 48px;
    min-height: 48px;
    padding: var(--s2);
    gap: var(--s2);
    border-radius: var(--r-sm);
    font-size: var(--t-body);
    line-height: 1;
    white-space: nowrap;
    justify-content: center;
  }

  /* 桌面预习沿用手机的纸卡堆叠，卡片和释义组成右侧学习区。 */
  @media (min-width: 721px) {
    .memory-section:has(.word-atlas--review) {
      max-width: min(860px, calc(clamp(360px, calc(100svh - 350px), 640px) * var(--atlas-ratio, .7467) + 284px));
    }
    .word-atlas--review {
      width: 100%;
      grid-template-columns: minmax(0, 1fr) 260px;
      gap: var(--s5);
    }
    .word-atlas--review > .word-atlas__stage { grid-column: 1; grid-row: 1; }
    .word-atlas--review > .word-atlas__side {
      grid-column: 2;
      grid-row: 1;
      align-self: center;
      display: flex;
      flex-direction: column;
      gap: var(--s3);
    }
    .word-atlas--review .word-atlas__title { order: 1; font-size: var(--t-body); }
    :is(.word-atlas--review, .word-atlas--stack) .word-atlas__rail {
      order: 2;
      display: grid;
      isolation: isolate;
      padding-bottom: 40px;
      margin-block: var(--s2) var(--s3);
    }
    :is(.word-atlas--review, .word-atlas--stack) .atlas-word {
      grid-area: 1 / 1;
      align-items: center;
      min-height: 80px;
      padding: var(--s3);
      transform: translateY(calc(min(var(--slot, 0), 4) * 10px));
      z-index: max(1, calc(20 - var(--slot, 0)));
      opacity: calc(1 - var(--slot, 0) * .1);
      box-shadow: 0 8px 18px -14px rgba(0, 0, 0, .5);
    }
    :is(.word-atlas--review, .word-atlas--stack) .atlas-word.is-active { opacity: 1; }
    :is(.word-atlas--review, .word-atlas--stack) .atlas-word:active { transform: translateY(calc(min(var(--slot, 0), 4) * 10px)) scale(.99); }
    :is(.word-atlas--review, .word-atlas--stack) .atlas-word:not(.is-active) > :not(.atlas-word__under) { visibility: hidden; }
    :is(.word-atlas--review, .word-atlas--stack) .atlas-word__cn { display: none; }
    :is(.word-atlas--review, .word-atlas--stack) .atlas-word__en { font-size: 20px; white-space: normal; overflow-wrap: anywhere; overflow: visible; text-overflow: clip; }
    :is(.word-atlas--review, .word-atlas--stack) .atlas-word__ph { font-size: var(--t-body); white-space: normal; overflow-wrap: anywhere; overflow: visible; text-overflow: clip; }
    :is(.word-atlas--review, .word-atlas--stack) .atlas-word__speak { width: 44px; height: 44px; }
    .word-atlas--review .word-atlas__meta { order: 3; flex-wrap: wrap; line-height: 1.7; }
    .word-atlas--review .word-atlas__panel { order: 4; }
    .word-atlas--review .word-atlas__head-word { display: none; }
    .word-atlas--review .word-atlas__prompt { font-size: var(--t-h3); line-height: 1.6; }
  }

  .word-atlas--stack > .word-atlas__side { align-self: start; display: flex; flex-direction: column; gap: var(--s3); }
  .word-atlas--stack .word-atlas__title { order: 1; }
  .word-atlas--stack .word-atlas__rail { order: 2; }
  .word-atlas--stack .word-atlas__meta { order: 3; flex-wrap: wrap; line-height: 1.7; }
  .word-atlas--stack .word-atlas__panel { order: 4; }
  .word-atlas--stack [data-study-actions] { order: 5; }
  .word-atlas--stack .word-atlas__head-word { display: none; }
  @media (max-width: 720px) {
    .word-atlas--stack .word-atlas__rail { display: grid; isolation: isolate; height: auto; min-height: 104px; padding-bottom: 40px; }
    .word-atlas--stack .atlas-word { position: relative; grid-area: 1 / 1; height: auto; min-height: 64px; padding-block: var(--s2); z-index: max(1, calc(20 - var(--slot, 0))); }
    .word-atlas--stack .atlas-word__en, .word-atlas--stack .atlas-word__ph { white-space: normal; overflow-wrap: anywhere; overflow: visible; text-overflow: clip; }
  }

  .word-atlas__stack-hint { margin-left: auto; font-size: var(--t-meta); letter-spacing: 0; }

  /* ── 手机档：卡堆保持在插画下方 ───────────────────────── */
  @media (max-width: 720px) {
    /* 单列：这一屏所有内容都收进「图的宽度」里，左右边只留一条线。
       宽度 = 图高 × 真实宽高比（--atlas-ratio 由 JS 按 scene 写入，默认 896/1200） */
    /* 图版拉满内容宽：标题、进度、图、词列、动作条共用 16px 那一条左轴。
       高度不再按 svh 封顶，改成跟着宽度和真实比例走（图更大，第二屏才需要滚动） */
    .textbook-lesson-page .word-atlas {
      --atlas-h: auto;
      --atlas-w: 100%;
    }

    .memory-section:has(.word-atlas) {
      --atlas-h: auto;
      --atlas-w: 100%;
    }

    .memory-section:has(.word-atlas) > .memory-heading,
    .memory-section:has(.word-atlas) > .memory-progress,
    .memory-section:has(.word-atlas) > .memory-footnote {
      padding-inline: calc((100% - var(--atlas-w)) / 2);
    }

    .word-atlas {
      gap: var(--s3);
      width: var(--atlas-w);
      margin-inline: auto;
    }

    .memory-section:has(.word-atlas--review) > .memory-actions {
      width: min(100%, var(--atlas-w));
      margin-inline: auto;
      padding-inline: 0;
    }

    /* 图给高度封顶、宽度跟着比例走：整幅画不被裁，堆叠卡也能落在首屏 */
    .word-atlas__stage {
      height: auto;
      aspect-ratio: var(--atlas-ar, var(--atlas-ratio, .7467));
      width: 100%;
      max-width: 100%;
      margin-inline: 0;
    }

    /* 竖向堆叠：卡吃满整宽（长词不用截），后面几张只露出下方 10px 纸边，
       读作「下面还压着几张」，也跟「下一个」往下走的动作方向一致 */
    .word-atlas__rail {
      display: grid;
      position: relative;
      height: auto;
      min-height: 104px;
      padding-bottom: 40px;
      margin-top: var(--s4);
    }

    .atlas-word {
      position: relative;
      grid-area: 1 / 1;
      left: 0;
      top: 0;
      width: 100%;
      height: auto;
      min-height: 64px;
      align-items: center;
      padding: var(--s2) var(--s3) 14px;
      /* 只做纵向错位、不做缩放：缩放会让每层左右边内缩，叠起来是毛边 */
      transform: translateY(calc(min(var(--slot, 0), 4) * 10px));
      transform-origin: 50% 0%;
      z-index: calc(20 - var(--slot, 0));
      opacity: calc(1 - var(--slot, 0) * .1);
      box-shadow: 0 8px 18px -14px rgba(0, 0, 0, .5);
    }

    .atlas-word:active {
      transform: translateY(calc(min(var(--slot, 0), 4) * 10px)) scale(.99);
    }

    .atlas-word__en, .atlas-word__ph { white-space: normal; overflow-wrap: anywhere; overflow: visible; text-overflow: clip; }
    .atlas-word__cn { display: none; }

    /* 叠层露出的 10px 里不要透出下面几张的词和音标——只留纸边和下划线 */
    .atlas-word:not(.is-active) > :not(.atlas-word__under) { display: none; }

    .atlas-word.is-active { opacity: 1; }

    /* 引线从卡的上边中点往上走；把元信息挪到卡下面，别让线穿过两行小字 */
    .word-atlas__side { display: flex; flex-direction: column; }
    .word-atlas__title { order: 1; }
    .word-atlas__rail { order: 2; }
    .word-atlas__meta { order: 3; margin-top: var(--s3); }
    .word-atlas__panel { order: 4; }
    [data-study-actions] { order: 5; }

    /* 手机场景预习保留原叠卡，移除下面重复的英文与释义。 */
    .word-atlas--review .word-atlas__head-word,
    .word-atlas--review .word-atlas__prompt { display: none; }

  }

}

/* 找物练习：题目任选，完成状态与当前选择分别呈现。 */
@layer pages {

.scene-tasks { max-width:1000px; margin:0 auto 18px; }
.scene-tasks[hidden] { display:none; }
.scene-task-help { margin:0 0 10px; color:var(--muted); font-size:14px; line-height:1.7; }
.scene-task-options { display:flex; flex-wrap:wrap; gap:8px; }
.scene-task-option { display:inline-flex; align-items:center; gap:6px; max-width:100%; min-height:44px; padding:9px 14px; border:1px solid var(--line); border-radius:10px; background:var(--paper); color:var(--ink); font-size:16px; line-height:1.5; text-align:start; }
.scene-task-option span { overflow-wrap:anywhere; }
.scene-task-option svg { flex-shrink:0; }
.scene-task-option[data-completed=true] { color:var(--green); }
.scene-task-option[aria-pressed=true] { background:var(--green); border-color:var(--green); color:var(--paper); }
.scene-task-option:focus-visible { outline:2px solid var(--green); outline-offset:3px; }
@media(hover:hover) { .scene-task-option:hover { border-color:var(--green); } }
@media(max-width:720px) { .scene-tasks { margin:0 18px 18px; } }
}