:root {
  color-scheme:light;
  --paper:#fffcf3;
  --background:#f3eddf;
  --ink:#303e34;
  --muted:#697165;
  --jade:#365e50;
  --vermilion:#a43f2d;
  --gold:#a58646;
  --line:#ded7c6;
  --chinese:"Songti SC","Songti TC","STSong","Noto Serif CJK SC","PMingLiU",serif;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","PingFang TC",sans-serif;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  background:var(--background);
  color:var(--ink);
  font-family:var(--body);
  line-height:1.6;
  background-image:repeating-linear-gradient(0deg,transparent 0 4px,#b9a98008 4px 5px);
}

[hidden] {
  display:none!important;
}

p,h1,h2,figure {
  margin:0;
}

button,input {
  font:inherit;
}

button,summary,label {
  -webkit-tap-highlight-color:transparent;
}

button,summary {
  cursor:pointer;
}

button {
  border:0;
}

button:disabled {
  cursor:default;
}

button {
  min-height:48px;
  padding:10px 20px;
  background:var(--jade);
  color:var(--paper);
  border-radius:8px;
}

button:disabled {
  background:#ede9dc;
  color:#858678;
}

a {
  color:var(--jade);
}

:focus-visible {
  outline:3px solid var(--vermilion);
  outline-offset:4px;
}

summary {
  min-height:48px;
}

summary::marker {
  color:var(--jade);
}

.page-shell {
  max-width:1160px;
  margin:auto;
  padding:0 32px;
}

.masthead {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:24px 0 18px;
  border-bottom:1px solid var(--line);
  gap:20px;
}

.brand {
  display:flex;
  gap:13px;
  align-items:center;
}

.seal {
  display:grid;
  place-content:center;
  background:var(--vermilion);
  color:#fff5e4;
  border-radius:3px 6px 3px 5px;
  width:43px;
  height:48px;
  font:18px/1.1 var(--chinese);
  letter-spacing:3px;
  padding-left:3px;
  box-shadow:inset 0 0 0 3px var(--vermilion),inset 0 0 0 4px #efc6aa80;
  transform:rotate(-3deg);
}

.brand-name {
  font:25px var(--chinese);
  letter-spacing:.15em;
}

.brand-subtitle {
  font-size:9px;
  letter-spacing:.18em;
  margin-top:5px;
}

.masthead-note {
  font:italic 14px Georgia,serif;
  color:var(--muted);
}

.reader-toolbar {
  display:flex;
  position:relative;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px 0;
}

.mode-label {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  font-size:13px;
  color:var(--jade);
}

.mode-flower {
  color:var(--gold);
  font-size:22px;
}

#mode-age {
  font-size:9px;
  letter-spacing:.1em;
  color:var(--muted);
}

.settings>summary {
  display:flex;
  align-items:center;
  gap:8px;
  list-style:none;
  font-size:13px;
  padding:8px 14px;
  border:1px solid #d6d2c1;
  border-radius:24px;
  background:#f8f5eb;
}

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

.settings[open]>summary {
  background:var(--jade);
  color:white;
}

.settings-english {
  font-size:11px;
}

.settings-panel {
  position:absolute;
  z-index:5;
  right:0;
  top:calc(100% - 4px);
  width:370px;
  max-width:100%;
  background:var(--paper);
  padding:24px;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 12px 35px #363c302b;
}

.settings-heading h2 {
  font:22px Georgia,serif;
}

.settings-heading p {
  font-size:12px;
  color:var(--muted);
  margin:4px 0 18px;
}

fieldset {
  border:0;
  padding:0;
  margin:0 0 18px;
  min-width:0;
}

legend {
  font-size:12px;
  font-weight:600;
  padding:0;
  margin-bottom:8px;
}

.mode-options {
  display:grid;
  gap:7px;
}

.mode-options label,.script-options label {
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--line);
  border-radius:7px;
  padding:10px 12px;
  cursor:pointer;
  min-height:48px;
}

.mode-options label:has(:checked),.script-options label:has(:checked) {
  background:#eaf0e6;
  border-color:#97ac92;
}

.mode-options span {
  font-size:14px;
}

.mode-options small,.check-option small {
  display:block;
  color:var(--muted);
  font-size:11px;
}

.script-options {
  display:flex;
  gap:8px;
}

.script-options label {
  flex:1;
  padding:10px 8px;
  font-size:14px;
}

.script-options small {
  display:block;
  font-size:10px;
}

.settings-panel input {
  accent-color:var(--jade);
  width:20px;
  height:20px;
  margin:0;
  flex:none;
}

.check-option {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:52px;
  cursor:pointer;
  font-size:14px;
}

#close-settings {
  width:100%;
  margin-top:16px;
  font-size:14px;
}

.book {
  background:var(--paper);
  border:1px solid #ddd5c3;
  border-radius:4px 12px 12px 4px;
  box-shadow:0 10px 35px #493e2010,4px 4px 0 -1px #eee8d8,4px 4px 0 #d8d0bd;
  position:relative;
  padding:24px 34px 0;
}

.book::before {
  content:"";
  position:absolute;
  inset:0 auto 0 8px;
  width:1px;
  background:#e8dfca;
  pointer-events:none;
}

.book-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.eyebrow {
  display:flex;
  gap:12px;
  align-items:center;
  font-size:9px;
  letter-spacing:.13em;
  color:var(--jade);
}

.eyebrow [lang] {
  font-family:var(--chinese);
  font-size:14px;
  letter-spacing:.15em;
}

.draft-badge {
  font-size:10px;
  color:#796341;
  border:1px solid #dacfba;
  border-radius:3px;
  padding:2px 8px;
  white-space:nowrap;
}

.story-heading {
  text-align:center;
  padding:14px 0 20px;
}

.chapter-label {
  font-size:9px;
  letter-spacing:.19em;
  color:var(--vermilion);
  margin-bottom:7px;
}

h1 {
  font:500 32px/1.5 var(--chinese);
  letter-spacing:.09em;
  scroll-margin-top:16px;
}

h1>span {
  display:block;
}

h1 .english {
  font:17px/1.5 Georgia,serif;
  letter-spacing:0;
  margin-top:3px;
}

.story-spread {
  display:grid;
  gap:24px;
}

.illustration {
  min-width:0;
}

.illustration-window {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:280px;
  background:#e9eddf;
  border:1px solid #d8ddc9;
  border-radius:4px;
  display:grid;
  place-items:center;
}

.illustration-window::after {
  content:"";
  position:absolute;
  inset:13px;
  border:1px dashed #9fab8b66;
  pointer-events:none;
  border-radius:2px;
}

.art-sun {
  position:absolute;
  z-index:-1;
  right:15%;
  top:28px;
  width:100px;
  height:100px;
  border-radius:50%;
  background:#d8c79b47;
}

.art-hill {
  position:absolute;
  z-index:-1;
  bottom:-160px;
  width:70%;
  height:240px;
  border:1px solid #9cac8e50;
  border-radius:50% 50% 0 0;
  background:#cbd7bf33;
}

.hill-one {
  left:-15%;
  transform:rotate(10deg);
}

.hill-two {
  right:-20%;
  bottom:-150px;
  transform:rotate(-12deg);
  background:#bfcfb733;
}

.placeholder-copy {
  text-align:center;
  padding:35px 24px;
  max-width:100%;
}

.art-seal {
  display:inline-grid;
  place-items:center;
  width:42px;
  height:44px;
  border:1px solid #8e9d7d;
  color:#637c5b;
  font:24px var(--chinese);
  border-radius:3px;
  margin-bottom:17px;
}

#art-caption-zh {
  font:25px/1.7 var(--chinese);
  letter-spacing:.13em;
  color:#5a7055;
}

#art-caption-en {
  font:italic 14px Georgia,serif;
  color:#5f7059;
  margin-top:7px;
}

.placeholder-label {
  display:block;
  font-size:8px;
  letter-spacing:.18em;
  color:#63725a;
  margin-top:22px;
}

.art-notes {
  font-size:11px;
  color:var(--muted);
}

.art-notes summary {
  min-height:28px;
  padding:5px 0;
  text-align:center;
  font-size:10px;
}

.art-notes p {
  padding:8px 12px;
  border:1px solid var(--line);
  background:#f3f1e8;
  line-height:1.7;
}

.illustration[data-scene="not-yet"] .illustration-window {
  background:#e7edf0;
  border-color:#d3dedf;
}

.illustration[data-scene="not-yet"] .art-sun {
  background:#d9d7b64a;
}

.illustration[data-scene="feelings-matter"] .illustration-window {
  background:#efe9da;
  border-color:#e0d6bf;
}

.reading-page {
  min-width:0;
}

.story-lines {
  max-width:800px;
  margin:auto;
}

.story-line+.story-line {
  margin-top:14px;
}

.chinese-text {
  font-size:27px;
  line-height:1.85;
  letter-spacing:.025em;
  line-break:strict;
  overflow-wrap:break-word;
}

.early .story-lines {
  text-align:center;
}

.english-text {
  font:16px/1.8 Georgia,serif;
  color:#606b60;
  margin-top:8px;
}

.reader.has-pinyin .chinese-text {
  line-height:2.4;
}

.chinese-text ruby,.proverb ruby {
  ruby-align:center;
}

.chinese-text rt,.proverb rt {
  font:400 11px/1.5 var(--body);
  letter-spacing:0;
  color:#687562;
}

.chinese-text ruby {
  padding:0 .04em;
}

.reflection {
  margin-top:24px;
  padding:16px 20px;
  background:#edf0e6;
  border-left:2px solid #a3b295;
}

.reflection-label {
  font-size:10px;
  color:var(--jade);
  margin-bottom:8px;
}

.reflection-label [lang] {
  font-family:var(--chinese);
  font-size:16px;
  margin-right:9px;
}

#reflection-zh {
  font-size:17px;
  line-height:1.8;
}

#reflection-en {
  font:14px/1.7 Georgia,serif;
  color:#5f6b5b;
  margin-top:7px;
}

.wisdom {
  margin:20px auto 0;
  border-top:1px solid var(--line);
  max-width:800px;
}

.wisdom>summary {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:8px;
  padding:12px 4px;
  color:var(--jade);
  font-size:12px;
}

.wisdom>summary::before {
  content:"+";
  font-size:20px;
}

.wisdom[open]>summary::before {
  content:"−";
}

.wisdom>summary [lang] {
  font-family:var(--chinese);
  font-size:18px;
  letter-spacing:.05em;
}

.wisdom-content {
  padding:12px 20px 20px;
  text-align:center;
  background:#f5f2e8;
}

.label {
  font-size:9px;
  color:var(--muted);
  letter-spacing:.1em;
}

.proverb {
  font:27px/2 var(--chinese);
  letter-spacing:.03em;
  margin:15px 0;
}

.proverb-clause {
  display:inline-block;
  white-space:nowrap;
}

.proverb rt {
  font-size:10px;
}

#literal {
  font:16px/1.8 Georgia,serif;
  margin-top:7px;
}

.interpretation-note {
  font-size:11px;
  color:var(--muted);
  margin-top:12px;
}

.source-note {
  font-size:10px;
  color:var(--muted);
  margin-top:12px;
}

.no-english .english {
  display:none!important;
}

.page-navigation {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:16px;
  align-items:center;
  padding:22px 0 20px;
  margin-top:24px;
  border-top:1px solid var(--line);
}

.turn-page {
  display:flex;
  align-items:center;
  gap:20px;
  min-width:135px;
  padding:10px 18px;
  font-size:18px;
  justify-content:center;
}

.turn-page [lang] {
  display:block;
  font-size:17px;
  line-height:1.4;
}

.turn-page small {
  display:block;
  font-size:10px;
}

.previous {
  justify-self:start;
  background:transparent;
  border:1px solid #b8c1ac;
  color:var(--jade);
}

.previous:disabled {
  border-color:#dedace;
}

.next {
  justify-self:end;
}

.page-position {
  text-align:center;
}

.page-buttons {
  display:flex;
  gap:8px;
}

.page-buttons button {
  width:44px;
  height:44px;
  min-height:44px;
  border-radius:50%;
  padding:0;
  background:transparent;
  border:1px solid transparent;
  color:#67745e;
  font:16px Georgia,serif;
}

.page-buttons button[aria-current="page"] {
  border-color:#ad9e79;
  color:var(--vermilion);
  background:#f3efdf;
}

#page-count {
  font-size:10px;
  color:var(--muted);
  margin-top:4px;
}

.reader-footer {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  padding:20px 4px 0;
  font-size:10px;
  color:var(--muted);
}

.reader-footer [lang] {
  font-family:var(--chinese);
  font-size:14px;
  letter-spacing:.12em;
}

.site-footer {
  text-align:center;
  font-size:9px;
  letter-spacing:.13em;
  color:var(--muted);
  padding:26px 0;
}

.site-footer span {
  margin:0 10px;
}

.notice {
  padding:36px 24px;
  margin:30px 0;
  background:var(--paper);
  border:1px solid var(--line);
}

.notice h1 {
  font:28px Georgia,serif;
}

.notice p {
  margin:18px 0;
}

.sr-only,.skip-link:not(:focus) {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

.skip-link:focus {
  display:block;
  padding:12px;
  background:var(--paper);
}

.independent .story-heading {
  text-align:left;
  padding-bottom:22px;
}

.independent h1 {
  font-size:30px;
}

.independent .story-spread {
  grid-template-columns:.95fr 1.05fr;
  gap:34px;
  align-items:start;
}

.independent .illustration-window {
  min-height:390px;
}

.independent .chinese-text {
  font-size:21px;
  line-height:1.95;
}

.independent.has-pinyin .chinese-text {
  line-height:2.5;
}

.independent .english-text {
  font-size:15px;
}

.independent .story-line+.story-line {
  margin-top:22px;
}

.independent .proverb {
  font-size:23px;
}

.independent .wisdom-content {
  padding:12px;
}

@media(min-width:1000px) {
  .early .book {
    max-width:960px;
    margin:auto;
  }
  .early .reader-toolbar,.early .reader-footer {
    max-width:960px;
    margin:auto;
  }
  .early .illustration-window {
    min-height:285px;
  }
}

@media(max-width:800px) {
  .page-shell {
    padding:0 24px;
  }
  .book {
    padding:22px 24px 0;
  }
  .independent .story-spread {
    gap:24px;
    grid-template-columns:.85fr 1.15fr;
  }
  .independent .illustration-window {
    min-height:350px;
  }
  .independent #art-caption-zh {
    font-size:22px;
  }
  .independent .placeholder-copy {
    padding:28px 18px;
  }
  .chinese-text {
    font-size:25px;
  }
  .settings-english {
    display:none;
  }
  .turn-page {
    min-width:120px;
    gap:15px;
  }
}

@media(max-width:600px) {
  .page-shell {
    padding:0 14px;
  }
  .masthead {
    padding:18px 0 14px;
  }
  .brand-name {
    font-size:22px;
  }
  .brand-subtitle {
    font-size:8px;
  }
  .seal {
    width:38px;
    height:43px;
    font-size:16px;
  }
  .masthead-note {
    display:none;
  }
  .reader-toolbar {
    padding:10px 0;
    gap:8px;
  }
  .mode-label {
    font-size:12px;
    gap:6px;
  }
  #mode-age {
    display:none;
  }
  .settings>summary {
    padding:6px 12px;
    font-size:12px;
    min-height:44px;
  }
  .settings-panel {
    padding:20px;
    width:100%;
  }
  .book {
    padding:18px 17px 0;
  }
  .book::before {
    left:5px;
  }
  .book-heading {
    gap:6px;
  }
  .eyebrow {
    gap:6px;
    font-size:7px;
    letter-spacing:.08em;
  }
  .eyebrow [lang] {
    font-size:12px;
  }
  .draft-badge {
    font-size:8px;
    padding:2px 6px;
  }
  .story-heading {
    padding:16px 0;
  }
  .chapter-label {
    font-size:8px;
  }
  h1,.independent h1 {
    font-size:25px;
    letter-spacing:.06em;
  }
  h1 .english {
    font-size:15px;
  }
  .illustration-window,.early .illustration-window {
    min-height:230px;
  }
  .placeholder-copy {
    padding:25px 16px;
  }
  .art-sun {
    width:70px;
    height:70px;
    right:10%;
    top:25px;
  }
  .art-seal {
    width:34px;
    height:37px;
    font-size:20px;
    margin-bottom:12px;
  }
  #art-caption-zh {
    font-size:23px;
    letter-spacing:.07em;
  }
  #art-caption-en {
    font-size:12px;
  }
  .placeholder-label {
    font-size:7px;
    margin-top:18px;
  }
  .story-spread {
    gap:18px;
  }
  .chinese-text {
    font-size:24px;
    line-height:1.9;
    letter-spacing:0;
  }
  .early .story-lines {
    text-align:left;
  }
  .english-text {
    font-size:15px;
  }
  .chinese-text rt {
    font-size:10px;
  }
  .story-line+.story-line {
    margin-top:12px;
  }
  .page-navigation {
    gap:5px;
    padding:14px 0;
    margin-top:20px;
  }
  .turn-page {
    min-width:0;
    width:76px;
    padding:10px 6px;
    gap:7px;
    font-size:15px;
    min-height:58px;
  }
  .turn-page [lang] {
    font-size:14px;
  }
  .turn-page small {
    font-size:9px;
  }
  .page-buttons {
    gap:0;
  }
  .page-buttons button {
    width:36px;
    height:44px;
    border-radius:7px;
  }
  .page-position {
    min-width:108px;
  }
  .reader-footer {
    font-size:9px;
    padding:16px 3px 0;
  }
  .reader-footer [lang] {
    font-size:12px;
  }
  .site-footer {
    font-size:8px;
    letter-spacing:.07em;
    padding:22px 0;
  }
  .independent .story-spread {
    grid-template-columns:1fr;
    gap:18px;
  }
  .independent .illustration-window {
    min-height:230px;
  }
  .independent .story-heading {
    text-align:center;
  }
  .independent .chinese-text {
    font-size:21px;
  }
  .independent .story-line+.story-line {
    margin-top:20px;
  }
  .reflection {
    padding:14px 16px;
  }
  #reflection-zh {
    font-size:16px;
  }
  .proverb {
    font-size:25px;
  }
  .wisdom-content {
    padding:14px 10px;
  }
  .wisdom>summary .english {
    font-size:11px;
  }
  .wisdom>summary {
    gap:5px;
  }
  .wisdom .label {
    font-size:8px;
  }
}

@media(prefers-reduced-motion:no-preference) {
  button,summary {
    transition:background-color .12s,color .12s;
  }
}

@media(forced-colors:active) {
  .page-buttons button[aria-current] {
    outline:2px solid Highlight;
  }
  .settings-panel {
    border:2px solid CanvasText;
  }
  button:disabled {
    color:GrayText;
  }
}

@media(max-width:360px) {
  .turn-page {
    width:66px;
    gap:5px;
  }
  .page-buttons button {
    width:32px;
  }
  .page-position {
    min-width:96px;
  }
  .book {
    padding-left:15px;
    padding-right:15px;
  }
  .mode-label {
    gap:5px;
  }
  .mode-flower {
    font-size:18px;
  }
}

.seal {
  white-space:nowrap;
}

@media(max-width:600px) {
  .turn-page {
    width:82px;
    gap:4px;
    padding:10px 4px;
    font-size:14px;
  }
  .turn-page [lang] {
    white-space:nowrap;
  }
  .turn-page small,.turn-page small[lang] {
    font-size:9px;
    line-height:1.4;
  }
}

@media(max-width:360px) {
  .turn-page {
    width:70px;
  }
}

/* Phase 2A: bookshelf and post-story learning, using the existing paper palette. */
.library-intro {max-width:720px;margin:36px auto 48px;text-align:center}
.library-intro h1 {font-size:clamp(34px,5vw,54px);line-height:1.5;margin:20px 0}
.library-intro>p:not(.eyebrow):not(.draft-badge) {color:#687466;margin:18px 0}
.library-intro .draft-badge {display:inline-block}
.lesson-cards {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0 auto;max-width:1080px}
.lesson-card {display:flex;flex-direction:column;align-items:flex-start;position:relative;min-width:0;padding:32px 24px;color:#294c40;text-decoration:none;border:1px solid #d2cbb6;border-radius:5px 16px 16px 5px;background:linear-gradient(90deg,#ded9c944,transparent 9%),#faf6ec;box-shadow:4px 6px 0 #ded6c54d;min-height:350px}
.lesson-card:nth-child(2) {background-color:#f1f2e6}
.lesson-card:nth-child(3) {background-color:#f7eddf}
.card-number {font:30px/1.4 serif;color:#a13f31;border:1px solid #a13f3155;padding:2px 10px;margin-bottom:30px}
.lesson-card h2 {font-family:var(--font-display,serif);font-size:28px;line-height:1.5;margin:12px 0}
.card-english {font-size:15px;color:#667367;min-height:44px}
.card-quotation {font-size:18px;line-height:1.8;margin:24px 0;overflow-wrap:anywhere}
.card-action {font-size:15px;margin-top:auto;padding-top:16px;border-top:1px solid #d2cbb6;width:100%}
.lesson-card:hover {border-color:#5c7967;box-shadow:4px 6px 0 #c9d2bf66}
.library-note {text-align:center;color:#687466;font-size:14px;line-height:1.8;margin:40px 0}
.library-link {display:inline-flex;align-items:center;min-height:44px;padding:8px;color:#315d4c;text-underline-offset:5px;white-space:nowrap}
.reader-toolbar {gap:12px}
.mode-label {flex-wrap:wrap}
.lesson-name {font-size:16px;color:#637367;margin-bottom:14px}
.reader .illustration-window {min-height:0;aspect-ratio:4/3;width:100%}
.reader.early .illustration {width:100%;max-width:680px;margin-inline:auto}
.reader .placeholder-copy {padding:20px}
.reader .illustration-window #art-caption-zh {font-size:clamp(18px,2.5vw,26px)}
.reader .placeholder-label {font-size:9px;letter-spacing:.08em}
.board-label {padding:16px;text-align:center;margin-top:12px;border:1px solid #c5cbb5;background:#f8f5e9;border-radius:4px}
.board-label .chinese-text {font-size:28px!important}
.board-label .english-text {margin-top:5px}
.caregiver {margin-top:24px;border-top:1px solid #ded8c8;padding:16px 0;color:#5e6b60;font-size:14px;line-height:1.8}
.caregiver summary {cursor:pointer;min-height:44px;display:list-item;padding:8px 0}
.caregiver .chinese-text {font-size:18px!important}
.caregiver .english-text {font-size:14px}
.learning {border-top:1px solid #d9d0b9;margin:36px auto 0;padding:32px 0;max-width:720px}
.learning h2 {font:30px/1.5 serif;color:#345745;margin:12px 0 24px}
.learning h3 {font-size:20px;margin:28px 0 16px;color:#345745}
.learning h3 .english {font:14px/1.5 system-ui;margin-left:6px}
.learning .chinese-text {font-size:22px;line-height:2}
.learning .has-pinyin {line-height:2.6}
.learning .english-text {font-size:16px;line-height:1.8}
.learning .wisdom {margin-bottom:28px}
.learning .proverb {font-size:26px;line-height:2.2;overflow-wrap:anywhere}
.source-note {overflow-wrap:anywhere;line-height:1.9}
#source-details {font-size:14px;line-height:1.8;margin-top:16px}
#source-details summary {cursor:pointer;padding:12px 0}
#source-details p {margin:12px 0}
.habit,.takeaway {margin-top:28px;padding:20px;background:#e7eddf66;border:1px solid #d0dac5;border-radius:4px}
.habit .label {font-size:12px;letter-spacing:.05em;margin-bottom:14px}
.takeaway h3 {margin-top:0}
.learning .reflection {margin-top:24px}
.learning .reflection h3 {margin-top:0}
.interpretation-note {line-height:1.8}
.no-english .english {display:none}
@media (max-width:800px) {
  .lesson-cards {gap:14px}
  .lesson-card {padding:24px 16px}
  .lesson-card h2 {font-size:24px}
  .reader.independent .story-spread {grid-template-columns:1fr}
  .reader.independent .illustration {max-width:560px;width:100%;margin-inline:auto}
}
@media (max-width:600px) {
  .lesson-cards {grid-template-columns:1fr;max-width:440px}
  .lesson-card {min-height:0;padding:24px}
  .card-number {margin-bottom:18px}
  .card-english {min-height:0}
  .library-intro {margin:24px auto 32px}
  .reader-toolbar {flex-wrap:wrap}
  .reader-toolbar .mode-label {font-size:11px;gap:5px;margin-left:auto}
  .reader-toolbar .settings {margin-left:auto}
  .reader .placeholder-copy {padding:16px 10px}
  .reader .art-seal {font-size:22px;margin-bottom:10px}
  .reader #art-caption-en {font-size:12px}
  .learning {padding-top:24px}
  .learning .chinese-text {font-size:21px}
  .learning .proverb {font-size:23px}
  .learning .english-text {font-size:15px}
}
/* Focus on headings announces navigation; interactive controls retain outlines. */
#library-title:focus {outline:none}