/* GoodStudy 视觉主体 —— 由 input/UI优化/src/{index,learning}.css 自动转换而来。
 * 生成脚本：scripts/build-figma-css.mjs ；请勿手改本文件，改源稿后重跑脚本。
 * 这是 Figma 稿的样式正本，site/style.css 降级为「功能组件兼容层」。
 * 字体分片 /fonts.css + 3 条 Latin @font-face /tokens.css 已单独加载。
 */

/* ===== src/index.css ===== */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 28px;
  }
  body {
    font-family: "Noto Sans SC", sans-serif;
    color: #303b31;
    background: #fafbf7;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
  }
  button,
  a,
  input {
    -webkit-tap-highlight-color: transparent;
  }
  button,
  a {
    touch-action: manipulation;
  }
  button {
    cursor: pointer;
  }
  a {
    text-decoration: none;
    color: inherit;
  }
  button:focus-visible,
  a:focus-visible,
  input:focus-visible {
    outline: 3px solid #9baa79;
    outline-offset: 4px;
  }
  ::selection {
    background: #dce5c9;
  }


.app-shell {
  min-height: 100vh;
}
.sidebar {
  width: 224px;
  position: fixed;
  inset: 0 auto 0 0;
  background: #f1f3ea;
  border-right: 1px solid #e6e9dd;
  display: flex;
  flex-direction: column;
  padding: 34px 21px 22px;
  z-index: 20;
}
.brand {
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 0 4px;
  font-size: 22px;
  letter-spacing: -0.8px;
  font-weight: 750;
  color: #354f3a;
  min-width: 0;
  flex-shrink: 0;
}
.brand-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 174px;
  max-width: 100%;
  height: 65px;
  color: #476342;
}
.brand-logo-symbol {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.brand:hover .brand-logo-symbol {
  transform: rotate(-5deg);
}
.brand-logo-type {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
}
.brand-logo-wordmark {
  font-size: 20px;
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.9px;
  white-space: nowrap;
}
.brand-logo-wordmark > span {
  color: #a3b67d;
}
.brand-logo-tagline {
  color: #899778;
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 1.35px;
  line-height: 1.5;
  white-space: nowrap;
}
.brand-mark {
  position: relative;
  font-family: Georgia, serif;
  font-size: 48px;
  line-height: 48px;
  font-weight: bold;
  width: 41px;
  transform: translateY(-4px);
}
.brand-mark > span {
  color: #a1af70;
  position: absolute;
  font-size: 36px;
  top: 4px;
  right: -1px;
}
.brand small {
  display: block;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 1.5px;
  color: #86917e;
  margin-top: 5px;
}
.nav-label {
  margin: 52px 13px 17px;
  font-size: 10px;
  color: #949b8c;
  letter-spacing: 1px;
}
.nav-label span {
  font-size: 7px;
  display: block;
  margin-top: 4px;
  letter-spacing: 1.4px;
}
.side-nav {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.side-nav button {
  display: flex;
  align-items: center;
  gap: 13px;
  height: 47px;
  padding: 0 17px;
  text-align: left;
  color: #7b8476;
  border-radius: 7px;
  font-size: 13px;
  transition: 0.2s;
}
.side-nav button:hover {
  background: #e8eddf;
  color: #3d5943;
}
.side-nav button.active {
  color: #3d5943;
  background: #e0e7d5;
  font-weight: 600;
}
.nav-dot {
  margin-left: auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #65825c;
}
.sidebar-note {
  margin: auto 12px;
  padding-top: 65px;
  padding-bottom: 55px;
  position: relative;
  color: #7a8870;
}
.plant {
  color: #8c9d77;
  transform: rotate(-18deg);
  width: 50px;
  margin-bottom: 13px;
}
.plant span {
  display: block;
  border-top: 1px solid #a7b193;
  width: 36px;
  transform: rotate(18deg);
  margin-top: 2px;
}
.sidebar-note p {
  font-family: "Noto Serif SC", serif;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 1.5px;
}
.sidebar-note > span {
  font-family: Georgia, serif;
  font-size: 10px;
  display: block;
  margin-top: 13px;
  color: #9aa38e;
  font-style: italic;
}
.note-dash {
  width: 27px;
  border-top: 1px solid #c8cebc;
  margin-top: 25px;
}
.sidebar-bottom {
  border-top: 1px solid #dfe4d5;
  padding: 20px 10px 0;
}
.sidebar-bottom a {
  display: flex;
  gap: 9px;
  align-items: center;
  font-size: 12px;
  color: #73816b;
}
.sidebar-bottom a > span {
  margin-left: auto;
}
.sidebar-bottom p {
  font-size: 9px;
  color: #929b88;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 19px;
  white-space: nowrap;
}
.status-dot {
  width: 5px;
  height: 5px;
  background: #8a9f75;
  border-radius: 50%;
}
.workspace {
  margin-left: 224px;
}
.topbar {
  height: 73px;
  padding: 0 42px;
  border-bottom: 1px solid #eaede3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fcfcf9;
  gap: 15px;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: #9a9f91;
  white-space: nowrap;
}
.breadcrumb > span {
  color: #5f6a58;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 20px;
}
.search-trigger {
  width: 227px;
  background: #f4f5ee;
  border: 1px solid #e9ebdf;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  color: #9ba18f;
  font-size: 10px;
}
.search-trigger kbd {
  margin-left: auto;
  background: #fafbf7;
  font-size: 9px;
  padding: 1px 4px;
  border: 1px solid #e5e8dc;
  border-radius: 3px;
}
.top-divider {
  height: 19px;
  border-left: 1px solid #e3e6da;
}
.hello {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: #919986;
}
.hello svg {
  color: #a5a16c;
}
main {
  max-width: 1370px;
  margin: 0 auto;
  padding: 32px 42px 0;
}
.welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 27px;
}
.eyebrow {
  font-size: 8px;
  letter-spacing: 2px;
  color: #899476;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 9px;
  font-weight: 600;
}
.eyebrow > span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #95a57b;
}
.welcome h1 {
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 650;
  letter-spacing: 1px;
}
.heading-spark {
  color: #a6b381;
  display: inline-block;
  margin-left: 13px;
  font-size: 30px;
  font-weight: 400;
  vertical-align: -2px;
}
.welcome p {
  color: #92998a;
  font-size: 11px;
  margin-top: 8px;
  letter-spacing: 0.7px;
}
.welcome-stamp {
  border: 1px solid #e2e7d7;
  border-radius: 20px;
  padding: 7px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #8c967b;
  font-size: 10px;
  transform: rotate(-4deg);
  background: #f7f8ef;
}
.hero {
  border: 1px solid #dfe5d2;
  background: #edf1e2;
  border-radius: 12px;
  overflow: hidden;
  scroll-margin-top: 24px;
}
.hero-main {
  min-height: 339px;
  position: relative;
  background-image: radial-gradient(#97a18125 0.65px, transparent 0.65px);
  background-size: 7px 7px;
  display: flex;
}
.hero-copy {
  position: relative;
  z-index: 2;
  padding: 27px 0 30px 33px;
  width: 53%;
}
.release-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 9px;
  color: #6d805c;
  background: #e3ead3;
  border: 1px solid #d8e1c6;
  padding: 5px 8px;
  border-radius: 4px;
}
.release-badge > span:first-child {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #769063;
}
.badge-line {
  height: 9px;
  width: 1px;
  background: #c2cdb0;
  margin: 0 2px;
}
.hero-overline {
  font-size: 11px;
  letter-spacing: 2px;
  color: #869173;
  margin-top: 20px;
  margin-bottom: 9px;
}
.hero h2 {
  font-family: "Noto Serif SC", serif;
  font-size: clamp(26px, 2.6vw, 39px);
  line-height: 1.6;
  font-weight: 750;
  letter-spacing: 2px;
  color: #334c35;
}
.hero h2 > span {
  position: relative;
  color: #66814e;
}
.hero h2 svg {
  position: absolute;
  bottom: -7px;
  left: 0;
  width: 100%;
  height: 10px;
  fill: none;
  stroke: #b9c58b;
  stroke-width: 3;
}
.hero-description {
  color: #7b876c;
  font-size: 10px;
  line-height: 2;
  margin-top: 14px;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 21px;
}
.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: #476342;
  border: 1px solid #476342;
  color: #fffef5;
  padding: 11px 17px;
  border-radius: 6px;
  font-size: 11px;
  transition: 0.2s;
}
.primary-button:hover {
  background: #344e31;
  box-shadow: 0 4px 12px #304d3220;
  transform: translateY(-1px);
}
.hero-actions > span {
  font-size: 9px;
  letter-spacing: 0.7px;
  color: #97a083;
}
.craft-art {
  position: absolute;
  width: 55%;
  height: 100%;
  right: -7px;
  top: 0;
  overflow: visible;
}
.hero-edition {
  position: absolute;
  right: 22px;
  bottom: 13px;
  font-size: 7px;
  color: #9ba789;
  letter-spacing: 1.8px;
}
.hero-stats {
  border-top: 1px solid #dae1ca;
  background: #f6f7eead;
  display: flex;
  padding: 18px 30px;
  align-items: center;
}
.hero-stats > div {
  padding-left: 27px;
  border-left: 1px solid #dce2cf;
  flex: 1;
}
.hero-stats > div:first-child {
  padding-left: 0;
  border: 0;
}
.hero-stats strong {
  font-family: Georgia, serif;
  font-size: 26px;
  color: #506546;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
}
.hero-stats strong span {
  font-family: "Noto Sans SC", sans-serif;
  font-size: 10px;
  color: #6a795d;
}
.hero-stats small {
  font-size: 8px;
  color: #98a087;
  letter-spacing: 0.8px;
  margin-top: 8px;
  display: block;
}
.hero-stats > a {
  font-size: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #78866a;
  padding-left: 15px;
}
.middle-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 232px;
  gap: 24px;
  margin-top: 32px;
}
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}
.section-kicker {
  font-size: 7px;
  font-weight: 500;
  color: #a0a68f;
  letter-spacing: 1.8px;
  display: block;
  margin-bottom: 6px;
}
.section-heading h2 {
  font-weight: 600;
  font-size: 19px;
  letter-spacing: 0.7px;
}
.section-heading > a {
  font-size: 10px;
  color: #8a9480;
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: flex-end;
  padding-bottom: 3px;
  white-space: nowrap;
}
.tiny-pencil {
  display: inline-block;
  color: #a2ad81;
  margin-left: 5px;
  font-size: 23px;
  transform: rotate(-10deg);
  font-weight: 400;
}
.math-metrics {
  display: flex;
  gap: 13px;
  align-items: center;
  color: #99a08f;
  font-size: 9px;
  margin: 0 0 20px;
}
.math-metrics b {
  font-family: Georgia, serif;
  font-size: 14px;
  color: #5d6d52;
  font-weight: 400;
  margin-right: 2px;
}
.math-metrics i {
  height: 9px;
  border-left: 1px solid #d9dece;
}
.stage-tabs {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 13px;
}
.stage-tabs button {
  font-size: 10px;
  color: #919986;
  border: 1px solid transparent;
  padding: 5px 11px;
  border-radius: 5px;
}
.stage-tabs button.selected {
  color: #61754f;
  border-color: #dce3cd;
  background: #edf1e3;
  font-weight: 500;
}
.stage-tabs > span {
  margin-left: auto;
  font-size: 8px;
  color: #a6ac9c;
}
.stage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.green {
  --accent: #7f956a;
  --tint: #eff3e8;
  --border: #e2e8d8;
}
.purple {
  --accent: #9b8bac;
  --tint: #f2eef5;
  --border: #e8e2ed;
}
.orange {
  --accent: #b99a6e;
  --tint: #faf3e8;
  --border: #eee4d5;
}
.blue {
  --accent: #809fae;
  --tint: #edf3f6;
  --border: #dfe9ee;
}
.stage-card {
  color: var(--accent);
  background: var(--tint);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 14px 0;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  overflow: hidden;
}
.stage-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 7px 15px #4651320b;
}
.stage-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 13px;
  height: 27px;
}
.stage-symbol {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 23px;
  letter-spacing: 2px;
  opacity: 0.8;
}
.round-arrow {
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 50%;
  width: 23px;
  height: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stage-card h3 {
  color: #56604f;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.stage-card h3 span {
  font-size: 8px;
  color: var(--accent);
  font-weight: 400;
  border: 1px solid var(--border);
  background: #ffffff70;
  padding: 1px 5px;
  border-radius: 4px;
}
.stage-card > p {
  font-size: 9px;
  color: #9a9e8e;
  margin: 6px 0 15px;
}
.stage-card-bottom {
  border-top: 1px solid var(--border);
  font-size: 8px;
  padding: 10px 0;
  position: relative;
  white-space: nowrap;
}
.stage-card-bottom > span {
  position: absolute;
  right: -5px;
  bottom: 10px;
  font-size: 6px;
  opacity: 0.35;
  letter-spacing: 1px;
}
.single-stage {
  grid-template-columns: 1fr;
}
.single-stage .stage-card {
  min-height: 165px;
}
.single-stage .stage-card-bottom > span {
  right: 0;
  font-size: 10px;
}
.section-footnote {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 8px;
  color: #a2a894;
  margin-top: 13px;
  line-height: 1.8;
}
.section-footnote button {
  margin-left: auto;
  color: #899778;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.challenge-card {
  border: 1px solid #ebe2c9;
  background: #f8f4e7;
  border-radius: 9px;
  padding: 17px 20px 15px;
  position: relative;
  overflow: hidden;
}
.challenge-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
}
.challenge-top > span:first-child {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: #a38d5c;
}
.challenge-top > span:last-child {
  font-size: 6px;
  letter-spacing: 0.6px;
  color: #c1b79b;
}
.challenge-doodle {
  position: absolute;
  width: 130px;
  height: 80px;
  right: -21px;
  top: 45px;
  transform: rotate(12deg);
  opacity: 0.7;
}
.doodle-big {
  position: absolute;
  font:
    italic 65px Georgia,
    serif;
  color: #bda675;
  left: 45px;
  top: -10px;
}
.doodle-small {
  position: absolute;
  font:
    italic 30px Georgia,
    serif;
  color: #c8b482;
  left: 82px;
  top: 18px;
  transform: rotate(16deg);
}
.challenge-card h3 {
  font-family: "Noto Serif SC", serif;
  font-size: 20px;
  font-weight: 650;
  line-height: 1.7;
  margin-top: 26px;
  color: #6b6247;
  letter-spacing: 0.5px;
  position: relative;
}
.challenge-card > p {
  font-size: 9px;
  line-height: 2;
  color: #a09880;
  margin-top: 10px;
}
.challenge-button {
  margin-top: 20px;
  background: #eee7d3;
  border: 1px solid #e3d8ba;
  color: #8c7c54;
  border-radius: 5px;
  width: 100%;
  padding: 9px 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  transition: 0.2s;
}
.challenge-button:hover {
  background: #e6dcc0;
}
.challenge-note {
  font-size: 8px;
  display: block;
  text-align: center;
  color: #b5ac93;
  margin-top: 11px;
}
.start-section {
  margin-top: 31px;
}
.handwritten {
  display: inline-block;
  font-family: "Noto Serif SC", serif;
  color: #a4ad90;
  font-size: 10px;
  font-weight: 400;
  margin-left: 14px;
  letter-spacing: 1.2px;
  transform: rotate(-5deg);
}
.lesson-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.lesson-card {
  display: flex;
  align-items: center;
  border: 1px solid #e5e8dd;
  background: #fdfdf9;
  border-radius: 8px;
  padding: 18px 12px 14px 10px;
  gap: 10px;
  transition: 0.2s;
  min-width: 0;
}
.lesson-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 5px 16px #424e2c08;
}
.lesson-art {
  position: relative;
  width: 74px;
  flex-shrink: 0;
  color: var(--accent);
  background: var(--tint);
  height: 84px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  padding: 3px;
}
.lesson-number {
  position: absolute;
  font-size: 7px;
  color: var(--accent);
  opacity: 0.6;
  left: 5px;
  bottom: 3px;
  font-family: Georgia, serif;
}
.lesson-copy {
  min-width: 0;
  flex: 1;
}
.lesson-group {
  color: #a2a794;
  font-size: 8px;
}
.lesson-copy h3 {
  font-size: 12px;
  font-weight: 600;
  margin-top: 5px;
  color: #505c47;
  letter-spacing: 0.3px;
}
.lesson-copy > p {
  font-size: 8px;
  line-height: 1.9;
  color: #9ca28f;
  margin-top: 6px;
  min-height: 30px;
}
.lesson-meta {
  display: flex;
  gap: 5px;
  align-items: center;
  margin-top: 11px;
  font-size: 7px;
  color: #a0a792;
  white-space: nowrap;
}
.lesson-meta > span:first-child {
  color: var(--accent);
  background: var(--tint);
  padding: 2px 4px;
  border-radius: 3px;
}
.lesson-meta svg {
  margin-left: auto;
  color: #a6af99;
  flex-shrink: 0;
}
.feedback-banner {
  display: flex;
  align-items: center;
  gap: 17px;
  border: 1px dashed #dce3d0;
  background: #f3f6ec;
  padding: 20px 24px;
  border-radius: 8px;
  margin-top: 30px;
}
.feedback-icon {
  display: flex;
  color: #93a480;
  background: #e7eddd;
  padding: 10px;
  border-radius: 50%;
}
.feedback-banner h3 {
  color: #6f7d61;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
}
.feedback-banner p {
  font-size: 9px;
  color: #a0a88e;
  margin-top: 6px;
}
.feedback-banner > a {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
  color: #7c8b6c;
  font-size: 10px;
  white-space: nowrap;
}
footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 27px 0 25px;
}
.footer-brand {
  font-size: 12px;
  font-weight: 650;
  color: #8a967e;
  letter-spacing: -0.3px;
}
.footer-brand > span {
  font-size: 8px;
  font-weight: 400;
  margin-left: 11px;
  color: #aeb5a1;
  letter-spacing: 0.4px;
}
footer > div {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 8px;
  color: #a0aa93;
}
footer > div > span {
  color: #bcc2b2;
}
.search-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #26322660;
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 15vh 20px 30px;
}
.search-panel {
  width: 560px;
  max-height: 75vh;
  overflow: auto;
  border: 1px solid #dfe4d2;
  border-radius: 13px;
  background: #fafbf5;
  box-shadow: 0 20px 80px #26322630;
}
.search-input-row {
  display: flex;
  align-items: center;
  padding: 20px;
  gap: 12px;
  color: #8e9d7e;
  border-bottom: 1px solid #e1e7d6;
}
.search-input-row input {
  flex: 1;
  min-width: 0;
  outline: none;
  color: #45543d;
  font-size: 14px;
  background: transparent;
}
.search-caption {
  padding: 17px 22px 8px;
  color: #a1aa95;
  font-size: 10px;
}
.search-results {
  padding: 0 12px 12px;
}
.search-results a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border-radius: 7px;
  color: #748465;
}
.search-results a:hover {
  background: #edf1e4;
}
.search-results small {
  display: block;
  font-size: 9px;
  color: #9aa58c;
  margin-bottom: 4px;
}
.search-results strong {
  font-size: 13px;
  font-weight: 500;
}
.search-all {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 17px 23px;
  border-top: 1px solid #e4e8da;
  color: #7b8b69;
  font-size: 11px;
}
.empty-search {
  padding: 25px 10px;
  color: #8d9980;
  font-size: 12px;
  line-height: 2;
}
.detail-dialog {
  position: fixed;
  margin: auto;
  width: 530px;
  max-width: calc(100% - 32px);
  max-height: 85vh;
  overflow: auto;
  border: 1px solid #dce3cd;
  border-radius: 15px;
  padding: 35px;
  background: #fafbf5;
  color: #45533d;
  box-shadow: 0 20px 80px #25312026;
}
.detail-dialog::backdrop {
  background: #26322660;
  backdrop-filter: blur(5px);
}
.dialog-close {
  position: absolute;
  top: 17px;
  right: 17px;
  color: #94a085;
}
.dialog-eyebrow {
  font-size: 9px;
  letter-spacing: 1.5px;
  color: #9aa68a;
}
.detail-dialog h2 {
  font-family: "Noto Serif SC", serif;
  font-size: 24px;
  font-weight: 650;
  line-height: 1.6;
  margin-top: 20px;
}
.detail-dialog p {
  color: #8a957e;
  font-size: 12px;
  line-height: 2.1;
  margin: 15px 0 22px;
}
.modal-art {
  width: 100px;
  color: var(--accent);
  margin: 22px auto 5px;
}
.modal-art + h2 {
  text-align: center;
  font-size: 22px;
}
.modal-art + h2 + p {
  text-align: center;
}
.answer-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.answer-options button {
  border: 1px solid #dfe6d3;
  border-radius: 6px;
  background: #f2f5e9;
  padding: 12px 6px;
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
}
.answer-options .correct {
  background: #dce8ce;
  border-color: #9fb58b;
}
.answer-options .incorrect {
  background: #f4e8d9;
  border-color: #d3b78e;
}
.answer-feedback {
  padding: 13px;
  border-radius: 6px;
  background: #f2eadd;
  color: #9a8058;
  font-size: 11px;
  line-height: 1.9;
  margin-bottom: 20px;
}
.answer-feedback.right {
  background: #e8efdd;
  color: #70865d;
}
.dialog-note {
  background: #eff3e6;
  padding: 17px;
  border-radius: 7px;
  font-size: 11px;
  color: #849175;
  line-height: 2;
  margin: 17px 0;
}
.text-link {
  color: #6b805a;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (min-width: 1600px) {
  .hero-main {
    min-height: 390px;
  }
  .hero-copy {
    padding-top: 35px;
    padding-bottom: 40px;
  }
  .hero-description {
    font-size: 12px;
  }
  .hero-actions {
    margin-top: 26px;
  }
  .middle-grid {
    grid-template-columns: minmax(0, 1fr) 270px;
  }
  .stage-card {
    padding: 20px 20px 0;
  }
  .stage-card-bottom {
    padding: 15px 0;
  }
  .lesson-card {
    padding: 21px 17px;
    gap: 14px;
  }
  .lesson-art {
    width: 90px;
    height: 95px;
  }
  .lesson-copy h3 {
    font-size: 14px;
  }
  .lesson-copy > p {
    font-size: 10px;
  }
}
@media (max-width: 1200px) {
  .sidebar {
    width: 195px;
    padding-inline: 15px;
  }
  .brand {
    font-size: 20px;
    gap: 8px;
  }
  .brand small {
    font-size: 8px;
  }
  .workspace {
    margin-left: 195px;
  }
  main {
    padding: 28px 28px 0;
  }
  .topbar {
    padding-inline: 28px;
  }
  .hello {
    display: none;
  }
  .top-divider {
    display: none;
  }
  .hero-copy {
    padding-left: 27px;
    width: 56%;
  }
  .hero h2 {
    font-size: 31px;
  }
  .hero-description {
    font-size: 9px;
  }
  .hero-actions > span {
    display: none;
  }
  .hero-stats {
    padding-inline: 25px;
  }
  .hero-stats > div {
    padding-left: 16px;
  }
  .hero-stats strong {
    font-size: 23px;
    gap: 5px;
  }
  .hero-stats strong span {
    font-size: 8px;
  }
  .hero-stats > a {
    font-size: 9px;
    gap: 5px;
  }
  .middle-grid {
    grid-template-columns: minmax(0, 1fr) 205px;
    gap: 20px;
  }
  .math-metrics {
    gap: 8px;
    font-size: 8px;
  }
  .math-metrics b {
    font-size: 12px;
  }
  .stage-tabs > span {
    display: none;
  }
  .stage-grid {
    gap: 8px;
  }
  .stage-card {
    padding-inline: 11px;
  }
  .stage-card-bottom > span {
    display: none;
  }
  .stage-card > p {
    font-size: 8px;
  }
  .challenge-card {
    padding-inline: 17px;
  }
  .challenge-top > span:last-child {
    display: none;
  }
  .lesson-grid {
    gap: 10px;
  }
  .lesson-card {
    gap: 8px;
    padding-inline: 9px;
  }
  .lesson-art {
    width: 52px;
    height: 73px;
  }
  .lesson-copy h3 {
    font-size: 11px;
  }
  .lesson-meta > span:nth-child(2) {
    display: none;
  }
}
@media (max-width: 960px) {
  .brand-logo {
    height: 54px;
    gap: 6px;
  }
  .brand-logo-symbol {
    width: 32px;
    height: 32px;
  }
  .brand-logo-wordmark {
    font-size: 17px;
    letter-spacing: -0.7px;
  }
  .brand-logo-tagline {
    font-size: 7px;
    letter-spacing: 0.8px;
  }
  .sidebar {
    width: 174px;
  }
  .workspace {
    margin-left: 174px;
  }
  .brand {
    font-size: 17px;
    gap: 4px;
  }
  .brand-mark {
    font-size: 40px;
    width: 37px;
  }
  .brand small {
    font-size: 7px;
    letter-spacing: 1px;
  }
  .side-nav button {
    padding-inline: 13px;
    font-size: 12px;
  }
  .nav-label {
    margin-left: 9px;
  }
  .sidebar-note {
    margin-inline: 8px;
  }
  .sidebar-note p {
    font-size: 13px;
  }
  .sidebar-note > span {
    font-size: 8px;
  }
  .sidebar-bottom {
    padding-inline: 4px;
  }
  .sidebar-bottom p {
    font-size: 8px;
  }
  main {
    padding-inline: 22px;
  }
  .topbar {
    padding-inline: 22px;
  }
  .welcome-stamp {
    display: none;
  }
  .hero-copy {
    width: 62%;
    padding-left: 24px;
  }
  .hero h2 {
    font-size: 28px;
  }
  .craft-art {
    width: 55%;
    right: -25px;
    top: 12px;
  }
  .hero-description {
    max-width: 285px;
  }
  .hero-stats {
    padding-inline: 20px;
  }
  .hero-stats > a {
    display: none;
  }
  .hero-stats > div {
    padding-left: 12px;
  }
  .hero-stats strong {
    gap: 5px;
    font-size: 22px;
    flex-wrap: wrap;
  }
  .middle-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .challenge-card {
    padding: 20px 23px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 15px;
  }
  .challenge-top {
    grid-column: 1 / -1;
  }
  .challenge-card h3 {
    margin-top: 15px;
    font-size: 20px;
  }
  .challenge-card h3 br {
    display: none;
  }
  .challenge-card > p {
    margin-top: 16px;
    font-size: 10px;
  }
  .challenge-button {
    grid-column: 2;
    grid-row: 3;
    margin-top: 14px;
  }
  .challenge-note {
    grid-column: 1;
    grid-row: 3;
    text-align: left;
    align-self: center;
  }
  .challenge-doodle {
    right: 8px;
    top: 8px;
    opacity: 0.25;
  }
  .stage-card {
    padding: 16px 16px 0;
  }
  .stage-card-bottom > span {
    display: block;
  }
  .stage-card > p {
    font-size: 9px;
  }
  .math-metrics {
    font-size: 9px;
    gap: 13px;
  }
  .math-metrics b {
    font-size: 14px;
  }
  .lesson-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lesson-art {
    width: 65px;
    height: 83px;
  }
  .lesson-copy h3 {
    font-size: 12px;
  }
  .lesson-card {
    padding: 15px 12px;
    gap: 11px;
  }
  .feedback-banner {
    padding: 18px;
    gap: 12px;
    flex-wrap: wrap;
  }
  .feedback-banner > div {
    flex: 1;
  }
  .feedback-banner p {
    line-height: 1.9;
  }
  .feedback-banner > a {
    margin-left: 57px;
  }
  footer {
    gap: 15px;
    align-items: flex-start;
  }
  footer > div {
    gap: 15px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  footer > div > span {
    display: none;
  }
  .footer-brand > span {
    display: block;
    margin: 5px 0 0;
  }
}
@media (max-width: 640px) {
  .brand-logo {
    height: 44px;
  }
  .sidebar {
    position: sticky;
    top: 0;
    width: 100%;
    height: 65px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 17px;
    border-right: 0;
    border-bottom: 1px solid #dfe5d5;
    background: #f1f3eaf5;
    backdrop-filter: blur(10px);
  }
  .brand {
    font-size: 18px;
    gap: 7px;
    width: 144px;
  }
  .brand-mark {
    font-size: 38px;
    width: 32px;
    line-height: 42px;
  }
  .brand-mark > span {
    font-size: 29px;
  }
  .brand small {
    display: none;
  }
  .nav-label,
  .sidebar-note,
  .sidebar-bottom {
    display: none;
  }
  .side-nav {
    flex-direction: row;
    gap: 4px;
  }
  .side-nav button {
    padding: 9px;
    height: auto;
    border-radius: 6px;
    font-size: 0;
    gap: 0;
  }
  .side-nav button svg {
    width: 19px;
    height: 19px;
  }
  .nav-dot {
    display: none;
  }
  .workspace {
    margin-left: 0;
  }
  .topbar {
    height: 47px;
    padding: 0 20px;
    border-bottom: 0;
    background: transparent;
  }
  .breadcrumb {
    font-size: 9px;
    gap: 8px;
  }
  .search-trigger {
    border: none;
    background: transparent;
    padding: 0;
    width: auto;
    gap: 6px;
    font-size: 9px;
  }
  .search-trigger kbd {
    display: none;
  }
  main {
    padding: 10px 18px 0;
  }
  .welcome {
    margin-bottom: 23px;
  }
  .eyebrow {
    font-size: 7px;
  }
  .welcome h1 {
    font-size: 22px;
    letter-spacing: 0.3px;
  }
  .heading-spark {
    font-size: 23px;
    margin-left: 7px;
  }
  .welcome p {
    font-size: 10px;
    letter-spacing: 0.3px;
  }
  .hero {
    border-radius: 10px;
  }
  .hero-main {
    min-height: 565px;
    display: block;
  }
  .hero-copy {
    width: 100%;
    padding: 23px 23px 0;
  }
  .release-badge {
    font-size: 8px;
  }
  .hero-overline {
    margin-top: 20px;
    font-size: 10px;
  }
  .hero h2 {
    font-size: 31px;
  }
  .hero-description {
    font-size: 9px;
    max-width: none;
    line-height: 2;
    margin-top: 14px;
  }
  .hero-actions {
    margin-top: 18px;
  }
  .primary-button {
    padding: 10px 14px;
    font-size: 10px;
  }
  .hero-actions > span {
    display: block;
    font-size: 8px;
  }
  .craft-art {
    width: 105%;
    height: 280px;
    right: -10px;
    top: 294px;
    pointer-events: none;
  }
  .hero-edition {
    bottom: 8px;
    right: 13px;
    font-size: 6px;
  }
  .hero-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 17px 0;
    padding: 18px 22px;
  }
  .hero-stats > div {
    padding-left: 20px;
  }
  .hero-stats > div:nth-child(3) {
    padding-left: 0;
    border: 0;
  }
  .hero-stats strong {
    font-size: 25px;
    gap: 8px;
  }
  .hero-stats strong span {
    font-size: 10px;
  }
  .hero-stats small {
    font-size: 8px;
    margin-top: 5px;
  }
  .middle-grid {
    margin-top: 27px;
    gap: 23px;
  }
  .section-heading {
    margin-bottom: 15px;
  }
  .section-heading h2 {
    font-size: 18px;
    letter-spacing: 0.2px;
  }
  .section-kicker {
    font-size: 6px;
    letter-spacing: 1.4px;
  }
  .section-heading > a {
    font-size: 9px;
    gap: 5px;
  }
  .math-metrics {
    flex-wrap: wrap;
    gap: 7px;
    font-size: 8px;
    margin-bottom: 17px;
  }
  .math-metrics b {
    font-size: 12px;
  }
  .math-metrics i {
    height: 7px;
  }
  .stage-tabs {
    gap: 5px;
  }
  .stage-tabs button {
    font-size: 9px;
    padding-inline: 10px;
  }
  .stage-grid {
    gap: 8px;
  }
  .stage-card {
    padding: 12px 10px 0;
  }
  .stage-symbol {
    font-size: 20px;
    letter-spacing: 1px;
  }
  .round-arrow {
    width: 19px;
    height: 19px;
  }
  .stage-card h3 {
    font-size: 15px;
    gap: 4px;
  }
  .stage-card h3 span {
    font-size: 7px;
    padding-inline: 3px;
  }
  .stage-card > p {
    font-size: 7px;
    margin-bottom: 12px;
    white-space: nowrap;
  }
  .stage-card-bottom {
    font-size: 7px;
    padding-block: 9px;
  }
  .stage-card-bottom > span {
    display: none;
  }
  .section-footnote {
    font-size: 7px;
    gap: 3px;
    margin-top: 11px;
  }
  .challenge-card {
    padding: 17px 19px;
    grid-template-columns: 1fr 1fr;
  }
  .challenge-card h3 {
    font-size: 18px;
  }
  .challenge-card h3 br {
    display: block;
  }
  .challenge-card > p {
    font-size: 8px;
    margin-top: 23px;
  }
  .challenge-button {
    font-size: 9px;
    padding: 8px 10px;
  }
  .challenge-note {
    font-size: 7px;
  }
  .start-section {
    margin-top: 26px;
  }
  .handwritten {
    font-size: 8px;
    margin-left: 7px;
  }
  .lesson-grid {
    grid-template-columns: 1fr;
    gap: 11px;
  }
  .lesson-card {
    padding: 16px;
    gap: 17px;
  }
  .lesson-art {
    width: 77px;
    height: 81px;
  }
  .lesson-group {
    font-size: 9px;
  }
  .lesson-copy h3 {
    font-size: 14px;
  }
  .lesson-copy > p {
    font-size: 9px;
    min-height: auto;
    margin-top: 5px;
  }
  .lesson-meta {
    font-size: 8px;
    margin-top: 9px;
    gap: 10px;
  }
  .lesson-meta > span:nth-child(2) {
    display: inline;
  }
  .feedback-banner {
    padding: 17px 15px;
    gap: 12px;
    margin-top: 23px;
  }
  .feedback-icon {
    padding: 9px;
  }
  .feedback-banner h3 {
    font-size: 11px;
  }
  .feedback-banner p {
    font-size: 8px;
  }
  .feedback-banner > a {
    font-size: 9px;
    margin-left: 55px;
  }
  footer {
    padding: 23px 0;
  }
  footer > div {
    font-size: 8px;
    gap: 13px;
  }
  .search-backdrop {
    padding-top: 10vh;
  }
  .search-panel {
    max-height: 80vh;
  }
  .search-input-row {
    padding: 16px;
  }
  .search-input-row input {
    font-size: 12px;
  }
  .detail-dialog {
    padding: 29px 22px;
  }
  .detail-dialog h2 {
    font-size: 21px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
  }
}
@media (max-width: 360px) {
  .sidebar {
    padding-inline: 12px;
  }
  .brand {
    font-size: 16px;
    gap: 4px;
    width: 132px;
  }
  .brand-mark {
    width: 29px;
  }
  .side-nav {
    gap: 2px;
  }
  .side-nav button {
    padding: 7px;
  }
  .welcome h1 {
    font-size: 20px;
  }
}

/* ===== src/learning.css ===== */
.learning-shell .topbar {
  gap: 20px;
}
.learning-shell .breadcrumb {
  min-width: 0;
  overflow: hidden;
}
.breadcrumb-segment {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.breadcrumb-segment > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.learning-main {
  padding-top: 29px;
}
.learning-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 242px;
  overflow: hidden;
  border: 1px solid #e0e6d4;
  border-radius: 11px;
  background: #edf1e2;
  background-image: radial-gradient(#a1ad8c25 0.65px, transparent 0.65px);
  background-size: 7px 7px;
}
.learning-hero-copy {
  position: relative;
  z-index: 1;
  width: 66%;
  padding: 34px;
}
.learning-hero h1 {
  font-family: "Noto Serif SC", serif;
  font-size: clamp(24px, 2.35vw, 36px);
  font-weight: 700;
  letter-spacing: 1px;
  color: #3d5943;
  line-height: 1.65;
  margin: 10px 0;
}
.learning-hero p {
  font-size: 11px;
  line-height: 2;
  color: #819071;
  max-width: 520px;
}
.learning-artwork {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 37%;
  height: calc(100% - 8px);
}
.hero-soft-stamp {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #8b9a79;
  font-size: 9px;
  letter-spacing: 0.7px;
  margin-top: 23px;
}
.learning-hero-edition {
  position: absolute;
  right: 22px;
  bottom: 14px;
  font-size: 6px;
  letter-spacing: 1.6px;
  color: #a4af95;
}
.learning-hero.lab {
  background-color: #edf2ed;
  border-color: #dfe6dc;
}
.learning-hero.math {
  background-color: #f0edf3;
  border-color: #e5deeb;
}
.learning-hero.math h1 {
  color: #6f607d;
}
.learning-hero.math p {
  color: #988ba3;
}
.navigation-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
  padding: 20px 8px 6px;
  color: #9aa28d;
  font-size: 9px;
}
.navigation-stats b {
  font-family: Georgia, serif;
  font-size: 23px;
  font-weight: 400;
  color: #6c7e5c;
  margin-right: 7px;
}
.navigation-stats i {
  height: 15px;
  border-left: 1px solid #e0e6d5;
}
.navigation-stats a {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  color: #8b997b;
}
.navigation-stage-section {
  margin-top: 30px;
}
.navigation-stages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}
.navigation-stage {
  position: relative;
  display: flex;
  align-items: center;
  gap: 17px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  text-align: left;
  color: var(--accent);
  background: var(--tint);
  transition: 0.2s;
  min-width: 0;
}
.navigation-stage:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
}
.navigation-stage.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 9%, transparent);
}
.navigation-stage-symbol {
  font-family: Georgia, serif;
  font-size: 31px;
  font-style: italic;
  white-space: nowrap;
  opacity: 0.75;
}
.navigation-stage h3 {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 17px;
  font-weight: 600;
  color: #59654f;
}
.navigation-stage h3 > span {
  font-size: 8px;
  font-weight: 400;
  border: 1px solid var(--border);
  background: #ffffff70;
  color: var(--accent);
  padding: 1px 5px;
  border-radius: 4px;
}
.navigation-stage p {
  font-size: 9px;
  color: #9ca38f;
  margin-top: 6px;
  white-space: nowrap;
}
.navigation-stage > small {
  position: absolute;
  bottom: 9px;
  right: 17px;
  font-size: 5px;
  letter-spacing: 1px;
  opacity: 0.45;
}
.stage-select-dot {
  width: 17px;
  height: 17px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  flex-shrink: 0;
}
.active .stage-select-dot {
  background: var(--accent);
  color: #fff;
}
.learning-browse-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: 27px;
  margin-top: 33px;
  align-items: start;
}
.result-count {
  font-size: 9px;
  color: #9da58f;
  align-self: flex-end;
  padding-bottom: 4px;
  white-space: nowrap;
}
.browse-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0 17px;
}
.toolbar-controls {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.toolbar-controls select,
.topic-practice select {
  font-size: 10px;
  color: #829070;
  border: 1px solid #e0e6d5;
  background: #f6f8ef;
  padding: 7px 21px 7px 9px;
  border-radius: 5px;
  cursor: pointer;
}
.learning-search {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: #a1ac92;
  background: #f4f6ed;
  border: 1px solid #e4e9db;
  border-radius: 6px;
  padding: 8px 10px;
  width: 217px;
}
.learning-search svg {
  flex-shrink: 0;
}
.learning-search input {
  min-width: 0;
  width: 100%;
  background: transparent;
  outline: none;
  font-size: 10px;
  color: #687b55;
}
.learning-search:focus-within {
  border-color: #a7b990;
}
.learning-search input:focus-visible {
  outline: none;
}
.book-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 17px 14px;
}
.book-card {
  overflow: hidden;
  border: 1px solid #e4e8da;
  border-radius: 8px;
  background: #fdfdf9;
  transition: 0.2s;
  min-width: 0;
}
.book-card:hover {
  transform: translateY(-4px);
  border-color: #b9c7a4;
  box-shadow: 0 7px 20px #4d62470a;
}
.book-cover {
  min-height: 188px;
  position: relative;
  background: var(--tint);
  color: var(--accent);
  padding: 15px 17px 15px 21px;
  border-bottom: 1px solid var(--border);
  background-image: radial-gradient(#80916c20 0.55px, transparent 0.55px);
  background-size: 5px 5px;
}
.book-spine {
  position: absolute;
  left: 8px;
  top: 0;
  height: 100%;
  border-left: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
  border-right: 1px solid #ffffff80;
  width: 2px;
}
.book-cover-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 5px;
  letter-spacing: 1.2px;
  opacity: 0.8;
}
.book-cover-top > span:last-child {
  font-family: Georgia, serif;
  font-size: 10px;
}
.book-cover-title {
  margin-top: 22px;
}
.book-cover-title small {
  font-size: 7px;
  letter-spacing: 1px;
  opacity: 0.8;
}
.book-cover-title h3 {
  font-family: "Noto Serif SC", serif;
  font-size: 18px;
  line-height: 1.8;
  font-weight: 650;
  letter-spacing: 0.5px;
  margin-top: 3px;
}
.book-cover-drawing {
  height: 65px;
  position: relative;
  margin-top: 7px;
}
.book-cover-drawing > span {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 20px;
  position: relative;
  z-index: 1;
  opacity: 0.6;
}
.book-cover-drawing svg {
  position: absolute;
  right: -9px;
  bottom: -2px;
  width: 110px;
  height: 55px;
  opacity: 0.45;
}
.book-cover-footer {
  font-size: 4px;
  letter-spacing: 1.15px;
  opacity: 0.65;
  display: block;
  margin-top: 4px;
}
.book-card-copy {
  padding: 14px 13px 0;
}
.book-card-copy h3 {
  font-size: 11px;
  font-weight: 550;
  color: #627453;
  display: flex;
  align-items: center;
  gap: 5px;
  line-height: 1.8;
}
.card-arrow {
  display: flex;
  margin-left: auto;
  color: #94a67f;
  flex-shrink: 0;
}
.book-card-copy p {
  font-size: 8px;
  color: #a0a78f;
  margin-top: 7px;
  line-height: 1.9;
}
.book-card-copy p > span {
  margin: 0 3px;
}
.book-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #edf0e4;
  padding: 10px 0;
  margin-top: 13px;
  font-size: 8px;
  color: #94a381;
}
.browse-footnote {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 5px;
  color: #a0aa91;
  font-size: 8px;
  line-height: 1.9;
  margin-top: 18px;
}
.browse-footnote svg {
  flex-shrink: 0;
  margin-top: 1px;
}
.browse-footnote a {
  color: #8b9b76;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-left: auto;
}
.learning-rail {
  display: grid;
  gap: 18px;
}
.rail-note {
  border: 1px solid #e3e8d6;
  border-radius: 8px;
  background: #f1f4e9;
  padding: 21px;
}
.rail-note > svg {
  color: #a0b087;
  margin: 23px 0 13px;
  transform: rotate(-15deg);
}
.rail-note h3 {
  font-family: "Noto Serif SC", serif;
  font-size: 19px;
  line-height: 1.8;
  letter-spacing: 1px;
  color: #6c7e58;
  font-weight: 600;
}
.rail-note p {
  font-size: 9px;
  color: #9aa68a;
  line-height: 2;
  margin-top: 13px;
}
.rail-note-line {
  display: block;
  width: 29px;
  border-top: 1px solid #d4ddc6;
  margin: 21px 0 4px;
}
.rail-guide {
  border: 1px solid #e6eadc;
  padding: 19px 17px;
  border-radius: 8px;
  background: #fcfcf8;
}
.rail-guide h3 {
  font-size: 11px;
  font-weight: 550;
  color: #798969;
  margin-bottom: 19px;
}
.rail-guide > div {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 14px;
}
.rail-guide > div > b {
  font-family: Georgia, serif;
  font-size: 13px;
  font-weight: 400;
  color: #a8b696;
}
.rail-guide strong {
  font-size: 9px;
  font-weight: 500;
  color: #849374;
  display: block;
}
.rail-guide p > span {
  display: block;
  font-size: 8px;
  color: #abb39d;
  margin-top: 5px;
}
.rail-guide > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #e8ecdf;
  margin-top: 20px;
  padding-top: 13px;
  color: #8d9d79;
  font-size: 9px;
}
.rail-discover {
  display: block;
  padding: 19px;
  border-radius: 8px;
  background: #f7f3e8;
  border: 1px solid #ebe4d2;
  color: #af9c71;
}
.rail-discover h3 {
  font-size: 11px;
  font-weight: 550;
  margin-top: 13px;
}
.rail-discover p {
  font-size: 8px;
  color: #b3a78e;
  line-height: 1.8;
  margin-top: 8px;
}
.rail-discover > span {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 9px;
  margin-top: 15px;
}
.learn-panel {
  border: 1px solid #e2e8d8;
  background: #fdfdf9;
  border-radius: 9px;
  padding: 24px;
}
.learn-muted {
  font-size: 11px;
  line-height: 2;
  color: #939f85;
}
.learn-empty,
.learn-loading {
  padding: 55px 20px;
  text-align: center;
  border: 1px dashed #dce4cd;
  background: #f5f7ef;
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
}
.learn-empty > svg,
.learn-loading > svg {
  color: #a0b087;
}
.learn-empty h1,
.learn-empty h3,
.learn-loading h3 {
  font-size: 17px;
  color: #7b8e67;
  font-weight: 500;
}
.learn-empty p,
.learn-loading p {
  color: #9eaa90;
  font-size: 11px;
  line-height: 2;
}
.search-topic-matches {
  background: #f2f5eb;
  padding: 18px;
  border: 1px solid #e0e7d3;
  border-radius: 8px;
  margin-bottom: 18px;
}
.search-topic-matches a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  color: #7e916c;
  font-size: 12px;
  border-bottom: 1px solid #e3e9d8;
}
.search-topic-matches small {
  display: block;
  font-size: 9px;
  color: #a0ad91;
  margin-top: 4px;
}
.mini-label {
  font-size: 8px;
  color: #a0aa91;
  letter-spacing: 0.65px;
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  color: #8c9d78;
  margin-bottom: 23px;
}
.book-page-heading,
.resource-page-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
}
.book-page-heading h1,
.resource-page-heading h1 {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.7;
  color: #455c3c;
  letter-spacing: 0.6px;
}
.book-page-heading p,
.resource-page-heading p {
  font-size: 11px;
  line-height: 2;
  color: #9aa48b;
  margin-top: 6px;
}
.soft-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 5px;
  border: 1px solid var(--border, #e2e8d8);
  background: var(--tint, #eff3e8);
  color: var(--accent, #8d9e79);
  font-size: 9px;
  font-weight: 400;
  white-space: nowrap;
}
.book-workspace {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.knowledge-outline {
  border: 1px solid #e1e7d5;
  border-radius: 8px;
  background: #f3f6ed;
  padding: 16px 12px;
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #d4dfc5 transparent;
}
.outline-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #788e65;
  font-size: 11px;
  padding: 3px 6px 15px;
  border-bottom: 1px solid #e0e7d3;
}
.outline-heading > span {
  margin-left: auto;
  color: #a8b398;
  font-size: 9px;
}
.outline-group {
  margin-top: 21px;
}
.outline-group h3 {
  font-size: 9px;
  color: #a0af8d;
  font-weight: 500;
  padding: 0 8px 8px;
  letter-spacing: 0.8px;
}
.outline-group > a {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  padding: 9px 7px;
  border-radius: 5px;
  font-size: 10px;
  line-height: 1.7;
  color: #8d9d7a;
}
.outline-group > a:hover {
  background: #e9f0dd;
}
.outline-group > a.active {
  background: #e1ead3;
  color: #657f50;
}
.outline-dot {
  width: 4px;
  height: 4px;
  border: 1px solid #b2c09e;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}
.active .outline-dot {
  background: #7f956a;
  border-color: #7f956a;
}
.outline-group > a > svg {
  margin-left: auto;
  flex-shrink: 0;
  margin-top: 3px;
  color: #b0bd9d;
}
.outline-note {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 22px 8px 4px;
  margin-top: 19px;
  border-top: 1px solid #e0e7d3;
  color: #a1b18d;
}
.outline-note p {
  font-size: 9px;
  line-height: 1.9;
}
.book-content {
  min-width: 0;
}
.book-intro-card {
  position: relative;
  overflow: hidden;
  padding: 29px;
  border: 1px solid #dfe7d0;
  border-radius: 9px;
  background: #edf2e3;
}
.book-intro-card h2 {
  font-family: "Noto Serif SC", serif;
  font-size: 25px;
  line-height: 1.8;
  font-weight: 650;
  color: #627950;
  margin: 13px 0;
  position: relative;
  z-index: 1;
}
.book-intro-card p {
  font-size: 11px;
  line-height: 2;
  color: #93a17f;
  max-width: 390px;
  position: relative;
  z-index: 1;
}
.book-intro-card .primary-button {
  margin-top: 21px;
}
.book-intro-math {
  position: absolute;
  right: 24px;
  top: 77px;
  font-family: Georgia, serif;
  font-size: 54px;
  font-style: italic;
  color: #c8d5b5;
  transform: rotate(-14deg);
}
.book-filters {
  margin: 22px 0 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.book-filters .stage-tabs {
  margin: 0;
  flex-wrap: wrap;
}
.book-filters .learning-search {
  width: 180px;
}
.topic-directory {
  display: grid;
  gap: 12px;
}
.topic-directory-card {
  display: flex;
  align-items: center;
  gap: 18px;
  border: 1px solid #e4e9da;
  border-radius: 8px;
  background: #fdfdf9;
  padding: 19px;
  transition: 0.2s;
}
.topic-directory-card:hover {
  border-color: #bbcba5;
  transform: translateX(3px);
}
.directory-number {
  font-family: Georgia, serif;
  font-size: 25px;
  color: #c9d5b8;
  font-style: italic;
}
.topic-directory-card > div {
  flex: 1;
  min-width: 0;
}
.topic-directory-card h3 {
  font-size: 14px;
  font-weight: 550;
  color: #687f57;
  margin: 4px 0 5px;
}
.topic-directory-card p {
  font-size: 10px;
  line-height: 1.9;
  color: #a1ac92;
}
.directory-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 11px;
  color: #a9b399;
  font-size: 8px;
}
.directory-meta .review-warning {
  color: #b4a174;
}
.learning-content-tabs {
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 0 0 12px;
  border-bottom: 1px solid #e2e8d8;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.learning-content-tabs button {
  font-size: 12px;
  color: #a0ad91;
  padding-bottom: 7px;
  position: relative;
}
.learning-content-tabs button.active {
  color: #6a8157;
  font-weight: 550;
}
.learning-content-tabs button.active:after {
  content: "";
  position: absolute;
  height: 2px;
  background: #8ea674;
  left: 0;
  right: 0;
  bottom: -13px;
}
.learning-content-tabs button > span {
  margin-left: 5px;
  font-size: 9px;
  background: #edf2e4;
  color: #92a57a;
  padding: 1px 5px;
  border-radius: 5px;
}
.learning-content-tabs > a {
  margin-left: auto;
  color: #a6b198;
  font-size: 9px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.understanding-stack {
  display: grid;
  gap: 17px;
}
.understand-card {
  display: flex;
  gap: 18px;
  border-radius: 9px;
  padding: 23px;
  background: #eff3e7;
  border: 1px solid #e0e8d2;
}
.understand-icon {
  flex-shrink: 0;
  padding: 11px;
  height: fit-content;
  background: #e1eacf;
  border-radius: 9px;
  color: #8ca473;
}
.understand-card h2 {
  font-size: 18px;
  font-weight: 550;
  color: #6d8359;
  margin-top: 6px;
}
.understand-card p {
  font-size: 12px;
  line-height: 2.1;
  color: #738568;
  margin-top: 10px;
  white-space: pre-line;
}
.mastery-panel ul {
  display: grid;
  gap: 13px;
  padding-top: 4px;
}
.mastery-panel li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 12px;
  line-height: 1.9;
  color: #78896c;
}
.mastery-panel li > span {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #edf3e3;
  border: 1px solid #dce7cc;
  border-radius: 50%;
  width: 21px;
  height: 21px;
  color: #93a87e;
  flex-shrink: 0;
}
.prerequisite-links {
  display: grid;
  gap: 9px;
}
.prerequisite-links > a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: #f5f7ef;
  border: 1px solid #e5ebdc;
  border-radius: 6px;
  color: #8a9f73;
  font-size: 11px;
}
.prerequisite-links small {
  display: block;
  margin-top: 5px;
  color: #b0bba3;
  font-size: 8px;
}
.prerequisite-links > a > svg:last-child {
  margin-left: auto;
}
.content-caution {
  display: flex;
  gap: 10px;
  color: #b5a073;
  background: #f9f5e9;
  border: 1px solid #eee5ce;
  padding: 14px;
  border-radius: 7px;
}
.content-caution svg {
  flex-shrink: 0;
}
.content-caution p {
  font-size: 10px;
  line-height: 1.9;
}
.content-caution strong {
  display: block;
  margin-bottom: 4px;
  font-weight: 500;
}
.topic-practice {
  margin-top: 28px;
}
.practice-note {
  font-size: 9px;
  margin: -3px 0 17px;
}
.practice-stack {
  display: grid;
  gap: 17px;
}
.practice-card {
  border: 1px solid #e3e9d8;
  background: #fdfdf9;
  border-radius: 9px;
  padding: 23px;
}
.practice-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: #a5b193;
  font-size: 8px;
}
.practice-kicker > span:first-child {
  font-size: 7px;
  letter-spacing: 1.4px;
}
.practice-kicker .soft-tag {
  font-size: 8px;
  padding: 3px 6px;
}
.practice-card h3 {
  font-size: 14px;
  font-weight: 500;
  color: #647e50;
  line-height: 2;
  margin-bottom: 18px;
  white-space: pre-line;
}
.knowledge-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.knowledge-choices > button {
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
  font-size: 12px;
  line-height: 1.8;
  color: #91a47e;
  border: 1px solid #e1e9d5;
  border-radius: 6px;
  padding: 13px;
  background: #f6f8f0;
  transition: 0.2s;
}
.knowledge-choices > button:hover:not(:disabled),
.knowledge-choices > button.selected {
  border-color: #acbf94;
  background: #edf3e1;
  color: #718d58;
}
.choice-letter {
  color: #9eb48b;
  background: #eaf0df;
  border-radius: 5px;
  min-width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}
.knowledge-answer {
  display: flex;
  gap: 10px;
  align-items: center;
}
.knowledge-answer input {
  min-width: 0;
  flex: 1;
  border: 1px solid #e0e8d3;
  border-radius: 6px;
  background: #f6f8ef;
  color: #80966a;
  padding: 12px;
  font-size: 11px;
}
.answer-hint {
  color: #b4a078;
  font-size: 9px;
  margin-bottom: 10px;
}
.question-feedback {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 15px;
  background: #f4efdf;
  color: #ac976b;
  border-radius: 7px;
  margin-top: 16px;
  font-size: 11px;
}
.question-feedback.correct {
  background: #ebf2df;
  color: #7c975f;
}
.question-feedback svg {
  flex-shrink: 0;
}
.question-feedback strong {
  font-weight: 550;
}
.question-feedback p {
  font-size: 9px;
  line-height: 1.8;
  margin-top: 4px;
  opacity: 0.85;
}
.practice-actions {
  display: flex;
  gap: 20px;
  margin-top: 17px;
}
.practice-actions button {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  color: #a0b18b;
}
.question-explanation {
  margin-top: 16px;
  padding: 16px;
  background: #f4f7ed;
  border: 1px solid #e5ecda;
  border-radius: 6px;
  font-size: 11px;
  color: #738968;
  line-height: 2.1;
}
.question-explanation strong {
  font-weight: 500;
}
.question-explanation p {
  margin-top: 8px;
  white-space: pre-line;
}
.question-explanation small {
  display: block;
  color: #a9b699;
  font-size: 9px;
  margin-top: 8px;
}
.question-figure {
  margin: 10px 0;
  max-width: 100%;
}
.question-figure > svg {
  max-width: 100%;
  height: auto;
  max-height: 260px;
  margin-inline: auto;
}
.question-figure svg text {
  font-family: "Noto Sans SC", sans-serif;
}
.topic-pagination {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid #e4ebd9;
  padding-top: 20px;
  margin-top: 26px;
}
.topic-pagination a {
  max-width: 48%;
  color: #8ca276;
  font-size: 11px;
  line-height: 1.9;
}
.topic-pagination a:last-child {
  text-align: right;
  margin-left: auto;
}
.topic-pagination small {
  display: block;
  font-size: 8px;
  color: #b3bfa4;
  margin-bottom: 4px;
}
.learning-source-note {
  margin-top: 25px;
  padding: 16px 18px;
  border: 1px dashed #dde6d0;
  background: #f4f7ee;
  border-radius: 7px;
  color: #a2b28e;
  font-size: 9px;
  line-height: 2;
}
.learning-source-note summary {
  display: flex;
  gap: 7px;
  align-items: center;
  cursor: pointer;
}
.learning-source-note summary > span {
  margin-left: auto;
  font-size: 8px;
}
.learning-source-note p {
  margin-top: 13px;
}
.learning-source-note a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.topic-navigation-section {
  margin-top: 31px;
}
.collection-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 17px;
}
.collection-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fdfdf9;
  overflow: hidden;
  transition: 0.2s;
  min-width: 0;
}
.collection-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 8px 25px #5266440a;
}
.collection-card-art {
  position: relative;
  height: 188px;
  background: var(--tint);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.collection-card-art .learning-artwork {
  width: 100%;
  height: 100%;
  inset: 3px 0 auto;
}
.collection-card-art .craft-art {
  width: 108%;
  height: 100%;
  inset: 0 -4% auto auto;
}
.collection-index {
  position: absolute;
  top: 13px;
  left: 15px;
  font-size: 6px;
  letter-spacing: 1.2px;
  color: var(--accent);
  opacity: 0.7;
}
.collection-art-label {
  position: absolute;
  bottom: 10px;
  right: 12px;
  font-size: 7px;
  color: var(--accent);
  background: #ffffff80;
  border: 1px solid var(--border);
  padding: 4px 6px;
  border-radius: 4px;
}
.collection-card-copy {
  padding: 20px;
}
.collection-card-copy .mini-label {
  color: var(--accent);
  font-size: 6px;
  letter-spacing: 1.5px;
}
.collection-card-copy h2 {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  margin-top: 8px;
  color: #617351;
}
.collection-card-copy p {
  color: #a0ab92;
  font-size: 10px;
  line-height: 2.1;
  margin-top: 13px;
  min-height: 65px;
}
.collection-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #e9eddf;
  padding-top: 15px;
  margin-top: 19px;
}
.collection-card-footer strong {
  font-family: Georgia, serif;
  font-size: 26px;
  font-weight: 400;
  color: var(--accent);
}
.collection-card-footer small {
  font-family: "Noto Sans SC", sans-serif;
  font-size: 8px;
  margin-left: 5px;
}
.collection-card-footer > span {
  color: var(--accent);
  font-size: 9px;
}
.featured-resources {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 17px;
}
.resource-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #fdfdf9;
  min-width: 0;
  transition: 0.2s;
}
.resource-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 6px 18px #5266440a;
}
.resource-image {
  aspect-ratio: 1.65;
  overflow: hidden;
  background: var(--tint);
}
.resource-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}
.resource-card:hover img {
  transform: scale(1.035);
}
.resource-symbol {
  height: 120px;
  background: var(--tint);
  color: var(--accent);
  position: relative;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.resource-symbol > span {
  font-family: Georgia, serif;
  font-size: 39px;
  font-style: italic;
  opacity: 0.7;
}
.resource-symbol svg {
  position: absolute;
  right: 24px;
  top: 25px;
  opacity: 0.5;
}
.resource-copy {
  padding: 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.resource-copy h3 {
  font-size: 14px;
  font-weight: 550;
  line-height: 1.8;
  color: #6d815b;
  margin-top: 7px;
}
.resource-copy p {
  font-size: 10px;
  line-height: 2;
  color: #a4af96;
  margin-top: 9px;
  margin-bottom: 15px;
}
.resource-bottom {
  display: flex;
  align-items: center;
  gap: 7px;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #edf0e5;
}
.resource-bottom .soft-tag {
  font-size: 8px;
  padding: 2px 5px;
}
.resource-bottom > span:last-child {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 8px;
  color: var(--accent);
}
.collection-filters {
  padding: 20px 0;
  border-bottom: 1px solid #e4ead8;
  margin-bottom: 22px;
}
.collection-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.filter-label {
  font-size: 10px;
  color: #a7b297;
  width: 65px;
  flex-shrink: 0;
}
.collection-filter-row button {
  color: #9eae8b;
  font-size: 10px;
  padding: 6px 11px;
  border-radius: 5px;
  border: 1px solid transparent;
}
.collection-filter-row button.active {
  background: #edf3e2;
  border-color: #dfe8d0;
  color: #7b955f;
}
.collection-results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin: 22px 0;
}
.collection-results-bar p {
  font-size: 11px;
  color: #8da478;
}
.collection-results-bar strong {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: 400;
}
.collection-results-bar p > span {
  display: block;
  font-size: 9px;
  color: #acb69c;
  margin-top: 6px;
  line-height: 1.9;
}
.resource-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.learning-player {
  min-width: 0;
  position: relative;
}
.learning-frame {
  width: 100%;
  border: none;
  display: block;
  transition: opacity 0.2s;
}
.player-loading {
  position: absolute;
  top: 80px;
  left: 0;
  right: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  color: #a1b28d;
}
.player-loading h3 {
  font-size: 15px;
  font-weight: 500;
}
.player-loading p {
  font-size: 10px;
  color: #adb99c;
}
.player-source-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px dashed #dce5cc;
  border-radius: 7px;
  background: #f3f6eb;
  padding: 17px;
  margin-top: 22px;
  color: #a3b18f;
}
.player-source-note svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.player-source-note p {
  font-size: 9px;
  line-height: 2.1;
}
.player-source-note a {
  margin-left: 10px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.next-exploration {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #edf2e2;
  border: 1px solid #dfe7d0;
  border-radius: 8px;
  padding: 24px;
  margin-top: 22px;
  color: #8ea375;
}
.next-exploration h3 {
  font-family: "Noto Serif SC", serif;
  font-size: 16px;
  color: #7e9466;
}
.next-exploration p {
  font-size: 9px;
  color: #a3b18e;
  margin-top: 7px;
}
.next-exploration a {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  margin-left: auto;
  white-space: nowrap;
}
.about-intro {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 55px;
  margin: 35px 0;
  padding: 10px 8px 27px;
  border-bottom: 1px solid #e6ebda;
}
.about-intro h2 {
  font-family: "Noto Serif SC", serif;
  font-size: 26px;
  line-height: 1.9;
  letter-spacing: 0.8px;
  font-weight: 600;
  color: #778b62;
  margin-top: 12px;
}
.about-intro > p {
  font-size: 12px;
  line-height: 2.3;
  color: #9aa98a;
  padding-top: 22px;
}
.more-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 19px;
}
.more-card {
  padding: 27px;
  border: 1px solid var(--border);
  background: #fdfdf9;
  border-radius: 9px;
  transition: 0.2s;
}
.more-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
}
.more-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 49px;
  height: 49px;
  background: var(--tint);
  border: 1px solid var(--border);
  color: var(--accent);
  border-radius: 12px;
  margin-bottom: 22px;
  flex-shrink: 0;
}
.more-card .mini-label {
  color: var(--accent);
  font-size: 7px;
  letter-spacing: 1.3px;
}
.more-card h2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  color: #7b9167;
  font-weight: 550;
  margin: 9px 0;
}
.more-card h2 svg {
  color: var(--accent);
}
.more-card p {
  font-size: 11px;
  line-height: 2;
  color: #a5b196;
}
.about-bottom-note {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px dashed #dde6ce;
  padding: 25px;
  margin-top: 29px;
  border-radius: 8px;
  background: #f2f6e9;
  color: #a1b28a;
}
.about-bottom-note p {
  font-family: "Noto Serif SC", serif;
  font-size: 14px;
  color: #8fa279;
}
.about-bottom-note p > span {
  display: block;
  font-family: Georgia, serif;
  font-size: 10px;
  font-style: italic;
  margin-top: 8px;
  color: #b0bc9e;
}
.about-bottom-note a {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  color: #91a67a;
  font-size: 11px;
}
.more-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  border-bottom: 1px solid #e3ead7;
  padding-bottom: 17px;
  margin-bottom: 27px;
}
.more-tabs a {
  color: #a4b195;
  border: 1px solid transparent;
  padding: 7px 13px;
  border-radius: 5px;
  font-size: 11px;
}
.more-tabs a.active {
  border-color: #dce6ca;
  background: #edf3e1;
  color: #8ca473;
}
.more-reading {
  max-width: 890px;
  margin: 0 auto;
  display: grid;
  gap: 22px;
}
.more-reading .learn-panel {
  padding: 29px;
}
.more-reading h2 {
  font-size: 21px;
  font-weight: 550;
  color: #798f65;
  margin-bottom: 20px;
}
.help-paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 17px;
}
.help-paths > a {
  display: block;
  border: 1px solid #e0e8d3;
  background: #f2f6e9;
  padding: 21px;
  border-radius: 8px;
  color: #9bb184;
}
.help-paths h3 {
  font-size: 14px;
  font-weight: 550;
  color: #879f70;
  margin: 15px 0 10px;
}
.help-paths p {
  font-size: 10px;
  color: #a8b79a;
  line-height: 2;
  margin-bottom: 17px;
}
.help-paths > a > span {
  font-size: 10px;
}
.faq-panel details {
  border-top: 1px solid #e5ecd9;
}
.faq-panel summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 21px 0;
  color: #8a9f75;
  font-size: 12px;
  cursor: pointer;
}
.faq-panel summary > span {
  font-family: Georgia, serif;
  color: #b7c4a7;
  font-size: 16px;
}
.faq-panel summary svg {
  margin-left: auto;
  color: #b7c4a7;
  transition: 0.2s;
  flex-shrink: 0;
}
.faq-panel details[open] summary svg {
  transform: rotate(90deg);
}
.faq-panel details > p {
  font-size: 11px;
  line-height: 2.2;
  padding: 0 0 22px 31px;
  color: #78896c;
}
.prose-panel h3 {
  margin: 29px 0 12px;
  font-size: 15px;
  color: #8ca273;
  font-weight: 550;
}
.prose-panel p {
  font-size: 12px;
  line-height: 2.3;
  color: #738269;
  margin-bottom: 15px;
}
.prose-panel a {
  color: #8ca374;
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
}
.feedback-detail {
  text-align: center;
  padding: 48px 25px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.feedback-detail-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #edf3e0;
  color: #a0b787;
  margin-bottom: 29px;
}
.feedback-detail h2 {
  font-family: "Noto Serif SC", serif;
  font-size: 29px;
  letter-spacing: 1px;
  margin: 13px 0 20px;
}
.feedback-detail p {
  font-size: 12px;
  line-height: 2.3;
  color: #a4b292;
}
.feedback-topics {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex-wrap: wrap;
  margin: 27px 0;
}
.feedback-topics span {
  border: 1px solid #e1e9d3;
  background: #f4f7ed;
  border-radius: 5px;
  padding: 6px 9px;
  color: #a2b18f;
  font-size: 9px;
}
.feedback-detail small {
  display: block;
  margin-top: 19px;
  font-size: 9px;
  line-height: 2;
  color: #b2bea3;
}

@media (min-width: 1600px) {
  .learning-browse-layout {
    grid-template-columns: minmax(0, 1fr) 235px;
    gap: 30px;
  }
  .book-cover {
    min-height: 212px;
  }
  .book-cover-title h3 {
    font-size: 23px;
  }
  .book-cover-drawing {
    margin-top: 13px;
  }
  .book-card-copy h3 {
    font-size: 13px;
  }
  .book-card-copy p {
    font-size: 10px;
  }
}
@media (max-width: 1200px) {
  .learning-browse-layout {
    grid-template-columns: minmax(0, 1fr) 185px;
    gap: 20px;
  }
  .book-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .navigation-stage {
    padding: 18px 14px;
    gap: 10px;
  }
  .navigation-stage-symbol {
    font-size: 25px;
  }
  .navigation-stage h3 {
    font-size: 16px;
  }
  .navigation-stage p {
    font-size: 8px;
  }
  .navigation-stats {
    gap: 14px;
  }
  .book-workspace {
    grid-template-columns: 185px minmax(0, 1fr);
    gap: 18px;
  }
  .book-intro-card {
    padding: 23px;
  }
  .book-intro-math {
    opacity: 0.5;
    right: 10px;
  }
  .collection-card-copy {
    padding: 17px;
  }
  .collection-card-copy h2 {
    font-size: 16px;
  }
  .collection-card-copy p {
    font-size: 9px;
  }
  .collection-card-art {
    height: 165px;
  }
  .collection-card-footer {
    flex-wrap: wrap;
    gap: 7px;
  }
  .resource-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .collection-cards,
  .featured-resources {
    gap: 13px;
  }
}
@media (max-width: 960px) {
  .learning-hero-copy {
    padding: 28px;
    width: 70%;
  }
  .learning-hero {
    min-height: 223px;
  }
  .learning-artwork {
    right: -12px;
    width: 38%;
    opacity: 0.85;
  }
  .learning-hero h1 {
    font-size: 27px;
  }
  .learning-hero p {
    font-size: 10px;
  }
  .learning-browse-layout {
    grid-template-columns: 1fr;
  }
  .learning-rail {
    grid-template-columns: 1fr 1fr;
    gap: 17px;
  }
  .rail-note {
    display: none;
  }
  .navigation-stages {
    gap: 10px;
  }
  .navigation-stage {
    flex-wrap: wrap;
    gap: 10px;
    padding: 17px 13px;
  }
  .navigation-stage-symbol {
    font-size: 22px;
  }
  .navigation-stage h3 {
    font-size: 15px;
  }
  .navigation-stage h3 > span {
    display: none;
  }
  .navigation-stage > small {
    display: none;
  }
  .navigation-stage p {
    font-size: 7px;
  }
  .stage-select-dot {
    position: absolute;
    right: 10px;
    top: 12px;
    width: 13px;
    height: 13px;
  }
  .navigation-stats {
    font-size: 8px;
    gap: 12px;
  }
  .navigation-stats b {
    font-size: 20px;
  }
  .book-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
  }
  .book-cover {
    padding-inline: 17px 12px;
    min-height: 170px;
  }
  .book-cover-title h3 {
    font-size: 16px;
  }
  .book-cover-drawing > span {
    font-size: 16px;
  }
  .book-card-copy {
    padding-inline: 10px;
  }
  .book-card-copy p {
    font-size: 7px;
  }
  .book-workspace {
    grid-template-columns: 1fr;
  }
  .knowledge-outline {
    position: static;
    max-height: 160px;
  }
  .outline-group {
    display: inline;
    margin: 0;
  }
  .outline-group h3 {
    display: none;
  }
  .outline-group > a {
    display: inline-flex;
    padding: 8px;
    font-size: 9px;
    margin: 6px 3px 0 0;
  }
  .outline-group > a > svg {
    display: none;
  }
  .outline-note {
    display: none;
  }
  .outline-heading {
    padding-bottom: 12px;
  }
  .collection-cards {
    grid-template-columns: 1fr;
  }
  .collection-card {
    display: grid;
    grid-template-columns: 40% 1fr;
  }
  .collection-card-art {
    height: 100%;
    min-height: 225px;
    border-bottom: 0;
    border-right: 1px solid var(--border);
  }
  .collection-card-copy h2 {
    font-size: 20px;
  }
  .collection-card-copy p {
    font-size: 11px;
    min-height: 0;
  }
  .collection-card-copy {
    padding: 23px;
  }
  .collection-card-footer {
    margin-top: 15px;
    padding-top: 12px;
  }
  .featured-resources {
    grid-template-columns: 1fr;
  }
  .featured-resources .resource-card {
    display: grid;
    grid-template-columns: 35% 1fr;
  }
  .featured-resources .resource-image {
    aspect-ratio: auto;
    height: 100%;
    min-height: 180px;
  }
  .featured-resources .resource-symbol {
    height: 100%;
  }
  .featured-resources .resource-copy {
    padding: 21px;
  }
  .about-intro {
    gap: 24px;
  }
  .about-intro h2 {
    font-size: 22px;
  }
  .about-intro > p {
    font-size: 11px;
    padding-top: 15px;
  }
  .about-bottom-note {
    flex-wrap: wrap;
  }
  .about-bottom-note a {
    margin-left: 42px;
  }
  .book-page-heading h1,
  .resource-page-heading h1 {
    font-size: 25px;
  }
}
@media (max-width: 640px) {
  .learning-main {
    padding-top: 15px;
  }
  .learning-shell .topbar {
    border-bottom: 1px solid #e9edde;
    height: 48px;
  }
  .learning-shell .breadcrumb {
    font-size: 8px;
    gap: 7px;
  }
  .breadcrumb-segment {
    gap: 7px;
  }
  .learning-hero {
    min-height: 310px;
    align-items: flex-start;
  }
  .learning-hero-copy {
    width: 100%;
    padding: 22px;
  }
  .learning-hero h1 {
    font-size: 26px;
    letter-spacing: 0.5px;
    margin-top: 13px;
  }
  .learning-hero p {
    max-width: 270px;
    font-size: 10px;
    position: relative;
    z-index: 1;
  }
  .learning-artwork {
    width: 54%;
    height: 150px;
    top: auto;
    bottom: -3px;
    right: -9px;
    opacity: 0.8;
  }
  .hero-soft-stamp {
    font-size: 8px;
    max-width: 160px;
    margin-top: 37px;
    line-height: 1.9;
    align-items: flex-start;
  }
  .hero-soft-stamp svg {
    flex-shrink: 0;
    margin-top: 1px;
  }
  .learning-hero-edition {
    right: 13px;
    bottom: 9px;
    font-size: 4px;
    letter-spacing: 0.8px;
  }
  .navigation-stats {
    gap: 10px 13px;
    font-size: 8px;
    padding: 16px 1px 0;
  }
  .navigation-stats b {
    font-size: 19px;
    margin-right: 5px;
  }
  .navigation-stats i {
    height: 11px;
  }
  .navigation-stats i:last-of-type {
    display: none;
  }
  .navigation-stats a {
    width: 100%;
    margin-left: 0;
    font-size: 8px;
  }
  .navigation-stats > span:last-child {
    font-size: 8px;
  }
  .navigation-stage-section {
    margin-top: 27px;
  }
  .navigation-stages {
    gap: 8px;
  }
  .navigation-stage {
    display: block;
    padding: 16px 11px 14px;
  }
  .navigation-stage-symbol {
    font-size: 24px;
    display: block;
    margin-bottom: 16px;
  }
  .navigation-stage h3 {
    font-size: 15px;
  }
  .navigation-stage p {
    font-size: 7px;
    line-height: 1.8;
    margin-top: 6px;
  }
  .learning-browse-layout {
    margin-top: 27px;
    gap: 24px;
  }
  .browse-toolbar {
    flex-wrap: wrap;
    padding-top: 6px;
    gap: 12px;
  }
  .toolbar-controls {
    width: 100%;
    gap: 6px;
  }
  .toolbar-controls select {
    flex: 1;
    font-size: 9px;
  }
  .browse-toolbar > .learning-search {
    width: 100%;
  }
  .book-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .book-cover {
    min-height: 175px;
    padding-top: 13px;
  }
  .book-cover-title {
    margin-top: 19px;
  }
  .book-cover-title h3 {
    font-size: 16px;
  }
  .book-cover-drawing > span {
    font-size: 17px;
  }
  .book-cover-drawing svg {
    width: 90px;
  }
  .book-card-copy {
    padding-top: 12px;
  }
  .book-card-copy h3 {
    font-size: 11px;
  }
  .book-card-copy p {
    font-size: 7px;
  }
  .book-card-copy p > span {
    margin: 0 1px;
  }
  .book-card-bottom {
    font-size: 7px;
  }
  .learning-rail {
    gap: 12px;
  }
  .rail-guide {
    padding: 16px 13px;
  }
  .rail-guide h3 {
    font-size: 10px;
    margin-bottom: 16px;
  }
  .rail-guide p > span {
    font-size: 7px;
    line-height: 1.9;
  }
  .rail-guide > div {
    gap: 7px;
  }
  .rail-discover {
    padding: 17px 13px;
    height: fit-content;
  }
  .rail-discover h3 {
    font-size: 11px;
  }
  .rail-discover p {
    font-size: 8px;
  }
  .rail-discover > span {
    font-size: 8px;
    margin-top: 18px;
  }
  .back-link {
    margin-bottom: 20px;
    font-size: 9px;
  }
  .book-page-heading,
  .resource-page-heading {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 21px;
  }
  .book-page-heading h1,
  .resource-page-heading h1 {
    font-size: 23px;
    line-height: 1.8;
  }
  .book-page-heading p,
  .resource-page-heading p {
    font-size: 10px;
  }
  .book-page-heading > .soft-tag,
  .resource-page-heading > .soft-tag {
    font-size: 8px;
  }
  .book-workspace {
    gap: 19px;
  }
  .knowledge-outline {
    max-height: 140px;
    padding: 13px 10px;
  }
  .book-intro-card {
    padding: 23px 20px;
  }
  .book-intro-card h2 {
    font-size: 23px;
  }
  .book-intro-card p {
    font-size: 10px;
  }
  .book-intro-math {
    font-size: 44px;
    top: 80px;
    right: 10px;
    opacity: 0.55;
  }
  .book-filters .learning-search {
    width: 100%;
  }
  .book-filters .stage-tabs {
    gap: 2px;
  }
  .topic-directory-card {
    padding: 16px 12px;
    gap: 12px;
  }
  .directory-number {
    font-size: 21px;
  }
  .topic-directory-card h3 {
    font-size: 13px;
  }
  .topic-directory-card p {
    font-size: 9px;
  }
  .directory-meta {
    gap: 9px;
    font-size: 7px;
  }
  .learn-panel {
    padding: 19px;
  }
  .learning-content-tabs {
    gap: 20px;
  }
  .learning-content-tabs button {
    font-size: 11px;
  }
  .learning-content-tabs > a {
    font-size: 8px;
  }
  .understand-card {
    padding: 19px 16px;
    gap: 12px;
  }
  .understand-icon {
    padding: 9px;
  }
  .understand-card h2 {
    font-size: 17px;
  }
  .understand-card p {
    font-size: 11px;
  }
  .mastery-panel .section-heading > .mini-label {
    display: none;
  }
  .mastery-panel li {
    font-size: 11px;
    gap: 9px;
  }
  .practice-card {
    padding: 19px 16px;
  }
  .practice-kicker {
    gap: 7px;
  }
  .practice-card h3 {
    font-size: 13px;
    line-height: 2;
  }
  .knowledge-choices {
    gap: 8px;
  }
  .knowledge-choices > button {
    font-size: 11px;
    gap: 8px;
    padding: 11px 9px;
  }
  .choice-letter {
    font-size: 9px;
    min-width: 22px;
    height: 22px;
  }
  .knowledge-answer {
    gap: 8px;
  }
  .knowledge-answer input {
    font-size: 10px;
    padding: 11px 9px;
  }
  .knowledge-answer .primary-button {
    font-size: 9px;
    padding: 11px;
    gap: 8px;
    white-space: nowrap;
  }
  .knowledge-answer .primary-button svg {
    display: none;
  }
  .question-feedback {
    font-size: 10px;
    padding: 13px;
  }
  .question-feedback p {
    font-size: 8px;
  }
  .question-explanation {
    font-size: 10px;
    padding: 13px;
  }
  .learning-source-note {
    font-size: 8px;
    padding: 14px;
  }
  .topic-pagination a {
    font-size: 10px;
  }
  .collection-card {
    display: block;
  }
  .collection-card-art {
    height: 180px;
    min-height: 0;
    border-bottom: 1px solid var(--border);
    border-right: none;
  }
  .collection-card-art .learning-artwork {
    width: 95%;
    height: 100%;
    inset: 0 2.5%;
  }
  .collection-card-art .craft-art {
    width: 95%;
    inset: 0 2.5%;
  }
  .collection-card-copy {
    padding: 22px;
  }
  .collection-card-copy h2 {
    font-size: 20px;
  }
  .collection-card-copy p {
    font-size: 11px;
  }
  .collection-card-footer {
    margin-top: 20px;
    padding-top: 16px;
  }
  .featured-resources .resource-card {
    grid-template-columns: 30% 1fr;
  }
  .featured-resources .resource-image {
    min-height: 190px;
  }
  .featured-resources .resource-copy {
    padding: 17px;
  }
  .featured-resources .resource-symbol {
    padding: 14px;
  }
  .featured-resources .resource-symbol > span {
    font-size: 23px;
  }
  .featured-resources .resource-symbol svg {
    width: 15px;
    right: 8px;
  }
  .resource-copy h3 {
    font-size: 13px;
  }
  .resource-copy p {
    font-size: 9px;
  }
  .filter-label {
    width: 53px;
    font-size: 9px;
  }
  .collection-filter-row {
    gap: 3px;
  }
  .collection-filter-row button {
    padding-inline: 9px;
    font-size: 9px;
  }
  .collection-results-bar {
    flex-wrap: wrap;
    margin-block: 19px;
  }
  .collection-results-bar .learning-search {
    width: 100%;
  }
  .collection-results-bar p {
    font-size: 10px;
  }
  .collection-results-bar p > span {
    font-size: 8px;
  }
  .resource-grid {
    gap: 12px;
  }
  .resource-grid .resource-copy {
    padding: 14px 11px;
  }
  .resource-grid .resource-copy h3 {
    font-size: 11px;
  }
  .resource-grid .resource-copy p {
    font-size: 8px;
  }
  .resource-grid .mini-label {
    font-size: 7px;
    letter-spacing: 0;
  }
  .resource-grid .resource-bottom {
    flex-wrap: wrap;
  }
  .resource-grid .resource-image {
    aspect-ratio: 1.3;
  }
  .resource-grid .resource-symbol {
    height: 105px;
    padding: 17px;
  }
  .resource-grid .resource-symbol > span {
    font-size: 29px;
  }
  .resource-grid .resource-symbol svg {
    width: 16px;
    right: 14px;
    top: 14px;
  }
  .resource-bottom > span:last-child {
    font-size: 7px;
    gap: 4px;
  }
  .next-exploration {
    padding: 20px 16px;
    flex-wrap: wrap;
    gap: 11px;
  }
  .next-exploration h3 {
    font-size: 14px;
  }
  .next-exploration p {
    font-size: 8px;
  }
  .next-exploration a {
    margin-left: 34px;
    font-size: 10px;
  }
  .player-source-note {
    padding: 14px;
  }
  .player-source-note p {
    font-size: 8px;
  }
  .about-intro {
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 28px 0;
    padding: 0 3px 23px;
  }
  .about-intro h2 {
    font-size: 23px;
  }
  .about-intro > p {
    font-size: 11px;
    padding-top: 0;
  }
  .more-cards {
    gap: 13px;
  }
  .more-card {
    padding: 20px 17px;
  }
  .more-card-icon {
    width: 41px;
    height: 41px;
    margin-bottom: 19px;
    border-radius: 9px;
  }
  .more-card .mini-label {
    font-size: 5px;
    letter-spacing: 0.9px;
  }
  .more-card h2 {
    font-size: 16px;
  }
  .more-card p {
    font-size: 9px;
  }
  .more-card h2 svg {
    width: 15px;
  }
  .about-bottom-note {
    padding: 22px 17px;
    gap: 11px;
  }
  .about-bottom-note p {
    font-size: 11px;
  }
  .about-bottom-note p > span {
    font-size: 9px;
  }
  .about-bottom-note a {
    margin-left: 36px;
    font-size: 10px;
  }
  .more-tabs {
    gap: 3px;
  }
  .more-tabs a {
    padding: 7px 10px;
    font-size: 10px;
  }
  .more-reading .learn-panel {
    padding: 22px 18px;
  }
  .help-paths {
    grid-template-columns: 1fr;
    gap: 13px;
  }
  .help-paths > a {
    padding: 19px;
  }
  .faq-panel summary {
    font-size: 11px;
    padding-block: 18px;
    gap: 9px;
  }
  .faq-panel details > p {
    font-size: 10px;
    padding-left: 25px;
  }
  .more-reading h2 {
    font-size: 19px;
  }
  .prose-panel h3 {
    font-size: 14px;
  }
  .prose-panel p {
    font-size: 11px;
  }
  .feedback-detail {
    padding: 37px 18px !important;
  }
  .feedback-detail h2 {
    font-size: 24px;
  }
  .feedback-detail p {
    font-size: 10px;
  }
  .feedback-detail small {
    font-size: 8px;
  }
  .feedback-topics {
    gap: 7px;
  }
  .feedback-topics span {
    font-size: 8px;
  }
}
@media (max-width: 360px) {
  .learning-hero h1 {
    font-size: 23px;
  }
  .learning-hero-copy {
    padding: 21px 18px;
  }
  .navigation-stats {
    gap: 9px;
    font-size: 7px;
  }
  .navigation-stats b {
    font-size: 17px;
  }
  .navigation-stage {
    padding-inline: 9px;
  }
  .navigation-stage p {
    font-size: 6px;
  }
  .book-card-copy p {
    font-size: 6px;
  }
  .book-cover-title h3 {
    font-size: 15px;
  }
  .book-cover-top {
    font-size: 4px;
  }
  .knowledge-choices {
    grid-template-columns: 1fr;
  }
  .more-card h2 {
    font-size: 14px;
  }
  .collection-filter-row button {
    font-size: 8px;
    padding-inline: 7px;
  }
}


/* ===== 原生栈适配层 ===== */
.app-shell .sidebar{display:flex;position:fixed;inset:0 auto 0 0;width:224px;height:auto;
  flex-direction:column;padding:4px 21px 22px;background:#f1f3ea;
  border-right:1px solid #e6e9dd;border-bottom:0;z-index:20}
/* 品牌块与顶栏面包屑同一条水平中线（旭哥 21:04 定）。
   顶栏 73 高、面包屑中心 36；品牌块 65 高，顶部放在 4 → 中心 36.5。
   Figma 原稿的 padding-top 34 会让品牌中心落在 66.5，比面包屑低 30px。
   品牌上移后多出的 30px 补给导航，导航仍停在 Figma 原位置（y=99）。 */
.app-shell .side-nav{margin-top:30px}
.app-shell .workspace{margin-left:224px}
/* 品牌区：与 Figma BrandLogo.tsx 完全一致的内联 SVG（手写 G + GoodStudy. + 标语）。
   尺寸沿用 Figma 原值（symbol 42 / wordmark 20 / tagline 8），仅补 224 侧栏内的收缩约束；
   hover 时 G 字轻微左旋由 figma.css 的 .brand-logo-symbol 规则负责。 */
.app-shell .brand-logo{width:174px;height:65px;min-width:0;max-width:100%;color:#476342}
.app-shell .brand-logo-wordmark,.app-shell .brand-logo-tagline{white-space:nowrap}
/* 旧 style.css 里那条 .brand span{font-size:23px} 的选择器特异性是 (0,1,1)，
   高于 Figma 的 .brand-logo-wordmark / .brand-logo-tagline（(0,1,0)），
   会把 20px 主标和标语一起顶到 23px。这里用 span 限定把特异性抬到 (0,3,1) 复位。
   标语字号跟正文副文案（.welcome p，11px / 0.7px 字距）保持一致，不再单独放大。 */
.app-shell .brand span.brand-logo-wordmark{font-size:20px;letter-spacing:-.9px}
.app-shell .brand span.brand-logo-tagline{font-size:11px;letter-spacing:.7px}
.app-shell .topbar{height:73px;padding:0 42px}
.app-shell .side-nav{display:flex;flex-direction:column;gap:9px}
.app-shell .side-nav a{display:flex;align-items:center;gap:13px;height:47px;padding:0 17px;
  color:#7b8476;border:0;background:none;border-radius:7px;font-size:13px;transition:.2s}
.app-shell .side-nav a:hover{background:#e8eddf;color:#3d5943}
.app-shell .side-nav a.active{background:#e0e7d5;color:#3d5943;font-weight:600}
.app-shell .nav-dot{display:block;margin-left:auto;width:5px;height:5px;border-radius:50%;background:#65825c}
/* 首页首屏两栏（旭哥 21:21）：Hero 往左收，右侧放「好奇心加油站」。
   挑战卡原本是 .middle-grid 的第二列，移进 .hero-row 后 middle-grid 变单列，
   「跟着课本」区域吃满整行，不会留一块 232px 的空栏。 */
.app-shell .hero-row{display:grid;grid-template-columns:minmax(0,1fr) 232px;gap:24px;align-items:stretch}
.app-shell .hero-row > .hero{min-width:0}
.app-shell .hero-row > .challenge-card{display:flex;flex-direction:column;min-width:0}
.app-shell .hero-row > .challenge-card .challenge-note{margin-top:auto}
.app-shell .middle-grid{grid-template-columns:minmax(0,1fr)}
/* 首屏主按钮（旭哥 21:34）：字号对齐挑战卡按钮的 14px（ui-review 层统一给的 14px，
   Figma 原稿这里是 11px）。字放大后 6 个字 + 箭头 + 内边距会挤，所以内边距同步放宽到
   11/18 并加 white-space:nowrap，宽度由内容撑开，任何断点都不折行。 */
.app-shell .hero-actions .primary-button{font-size:14px;padding:11px 18px;white-space:nowrap;line-height:1.2}
.app-shell footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;
  margin-top:20px;padding:27px 0 25px;border:0;border-top:1px solid #e6e9dd;color:#8a967e;font-size:11px}
/* 1200 断点必须与 Figma 原稿同步：侧栏 195、内容 28、顶栏 28。
   漏了这一档会导致 1024 视口下「面包屑在 266 / 内容在 252」左右错位 14px。 */
@media(max-width:1200px){
  .app-shell .sidebar{width:195px;padding-inline:15px}
  .app-shell .workspace{margin-left:195px}
  .app-shell .topbar{padding:0 28px}
  /* 侧栏收到 195、内边距 15 后品牌行只剩 165px。标语（11px + 0.7 字距）宽 112px，
     42 图标 + 10 间距 + 112 = 164，正好卡满；.brand-logo 固定 174 会被压到 156，
     标语就会溢出 6px。这里让它吃满可用宽度，靠 flex 收缩而不是溢出。 */
  .app-shell .brand-logo{width:100%}
  /* .brand 自带 padding:0 4px 和 gap:11px，在 195 侧栏里要给它让出空间，
     否则品牌行只剩 156px，标语又会被挤出去。 */
  .app-shell .brand{padding:0}
  /* 内容区收到 940 左右，挑战卡同步收 16px，Hero 仍保得住标题不折行。 */
  .app-shell .hero-row{grid-template-columns:minmax(0,1fr) 216px;gap:20px}
  /* Hero 只剩 537 宽时，统计条 5 等分每格约 95px，装不下「147 张原书插图」——
     数字和单位会被硬拆成两行。这里改 2×2 网格，让每条统计独占一格。 */
  .app-shell .hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;padding:16px 22px}
  .app-shell .hero-stats > div{padding-left:0;border-left:0}
  .app-shell .hero-stats > a{display:none}
  /* 挑战卡收到 216 宽，原来写死的 <br> 会把「展开图」劈开，交给自然折行。 */
  .app-shell .challenge-card > p br,.app-shell .challenge-card h3 br{display:none}
}
@media(max-width:960px){
  .app-shell .sidebar{width:174px;padding-inline:13px}
  .app-shell .workspace{margin-left:174px}
  .app-shell .topbar{height:73px;padding:0 22px}
  .app-shell .side-nav a{padding-inline:13px;font-size:12px}
  /* 148px 可用宽放不下 42 图标 + 112 标语：图标收到 34、字距收到 0.2、
     标语降到 10px（与 Figma 原稿在窄档同步降级），把 1px 的贴边余量留出来。 */
  .app-shell .brand{padding:0}
  .app-shell .brand-logo{gap:6px}
  .app-shell .brand-logo-symbol{width:34px;height:34px}
  .app-shell .brand span.brand-logo-tagline{font-size:10px;letter-spacing:.2px}
  /* 960 以下内容区放不下两栏，挑战卡回落到 Hero 下方整行。
     Figma 原稿在这一档本来就把挑战卡改成「宽卡 + 内部两列」，这里要让位给原稿规则：
     我们的 flex column 特异性更高，不撤掉会把按钮拉成整行宽。 */
  .app-shell .hero-row{grid-template-columns:minmax(0,1fr);gap:20px}
  .app-shell .hero-row > .challenge-card{display:grid;grid-template-columns:1fr 1fr;column-gap:15px}
  .app-shell .hero-row > .challenge-card .challenge-note{margin-top:0}
}
@media(max-width:640px){
  .app-shell .sidebar{position:sticky;top:0;width:100%;height:65px;flex-direction:row;
    align-items:center;justify-content:space-between;padding:0 17px;border-right:0;
    border-bottom:1px solid #dfe5d5;background:#f1f3eaf5;backdrop-filter:blur(10px)}
  .app-shell .workspace{margin-left:0}
  .app-shell .topbar{height:47px;padding:0 18px}
  .app-shell .side-nav{flex-direction:row;gap:4px;margin-top:0}
  .app-shell .side-nav a{padding:9px;height:auto;border-radius:6px;font-size:0;gap:0}
  .app-shell .side-nav a svg{width:19px;height:19px}
  .app-shell .nav-dot,.app-shell .nav-label,.app-shell .sidebar-note,.app-shell .sidebar-bottom{display:none}
  /* Figma 640 断点把 .brand 限到 144px，而 .brand-logo 基础宽度仍是 174px，
     加上 .brand 的 flex-shrink:0 会把图标导航挤出容器造成重叠。手机端显式收窄。 */
  .app-shell .brand{width:auto;min-width:0;flex-shrink:1;font-size:0}
  .app-shell .brand-logo{width:auto;max-width:none;height:44px;gap:6px}
  .app-shell .brand-logo-symbol{width:30px;height:30px;flex-shrink:0}
  .app-shell .brand span.brand-logo-wordmark{font-size:16px}
  .app-shell .brand-logo-tagline{display:none}
  .app-shell .side-nav{flex-shrink:0}
  /* 手机端卡片只有 354 宽，Figma 的「内部两列」会把标题压成 3–4 行、描述挤 5 行。
     回到竖排（标题 / 描述 / 按钮 / 说明），和设计稿里窄卡片的形态一致。 */
  .app-shell .hero-row > .challenge-card{display:flex;flex-direction:column}
  .app-shell .hero-row > .challenge-card h3 br,
  .app-shell .hero-row > .challenge-card > p br{display:block}
  .app-shell .hero-row > .challenge-card .challenge-note{margin-top:11px}
  /* Figma 640 断点把 .learning-browse-layout 改成 grid-template-columns:1fr，
     1fr 的 min 是 auto（=min-content）。册内详情里的长公式 / SVG 会把列撑到 322px，
     在 320 视口造成横向溢出。改成 minmax(0,1fr) 并让功能容器可收缩。 */
  .learning-browse-layout{grid-template-columns:minmax(0,1fr);min-width:0}
  .books-section,.books-section>*,.book-card-grid,.knowledge,#knowledge{min-width:0;max-width:100%}
  .knowledge *,.kdesc,.ksrc,.qprompt,.qexplain{overflow-wrap:anywhere}
  .krow-head,.kfig img,.kfig svg,.qfigure img{max-width:100%}
}
@media(max-width:360px){
  .app-shell .brand-logo{gap:5px;height:40px}
  .app-shell .brand-logo-symbol{width:26px;height:26px}
  .app-shell .brand span.brand-logo-wordmark{font-size:14px}
}

/* 搜索面板：Figma 的 .search-backdrop 是 display:flex，会盖掉 [hidden] 的 UA 规则 */
.search-backdrop[hidden]{display:none!important}

/* 搜索输入行（旭哥 22:05：搜索框和关闭按钮像浏览器默认控件，与站点风格不符）。
   根因：Figma 源稿只给了 input 的 outline/color/font，没写 border/background，
   于是吃 UA 的 2px inset 黑框；关闭按钮同理落到 UA 的 buttonface 方块。
   做法：换成站点通用的「软色块 + 1px 描边 + 9px 圆角」，聚焦时描边转主色并加淡绿光环。 */
/* 注意：#search-backdrop 在 .app-shell 之外（body 直接子节点），选择器不能带 .app-shell 前缀 */
.search-panel .search-input-row{padding:18px 20px;gap:10px;border-bottom:1px solid #eaeedd}
.search-panel .search-input-row>svg{flex:none;color:#8e9d7e;transition:color .18s}
.search-panel .search-input-row:focus-within>svg{color:#476342}
.search-panel .search-input-row input{
  flex:1;min-width:0;height:44px;padding:0 14px;
  border:1px solid #e3e9d7;border-radius:9px;background:#f4f6ec;
  color:#45543d;font-size:15px;line-height:1.4;
  outline:none;box-shadow:none;-webkit-appearance:none;appearance:none;
  transition:background .18s,border-color .18s,box-shadow .18s}
.search-panel .search-input-row input::placeholder{color:#a4ae97}
.search-panel .search-input-row input:hover{background:#f1f4e7}
.search-panel .search-input-row input:focus{
  background:#fdfdf9;border-color:#b3c79f;box-shadow:0 0 0 3px #4763421f}
.search-panel .search-input-row button{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;min-width:34px;min-height:34px;max-height:none;
  padding:0;margin:0;border:1px solid #dfe4d2;border-radius:9px;
  background:#f3f5ea;color:#6d7c5f;cursor:pointer;-webkit-appearance:none;appearance:none;
  transition:background .18s,color .18s,border-color .18s}
.search-panel .search-input-row button svg{width:16px;height:16px}
.search-panel .search-input-row button:hover{background:#476342;border-color:#476342;color:#fdfdf9}
.search-panel .search-input-row button:focus-visible{outline:2px solid #476342;outline-offset:2px}
/* ui-review.css 为防 iOS 缩放把 input 字号锁成 16px!important；桌面端放到 15px 与面板正文更配 */
@media(min-width:641px){
  .search-panel .search-input-row input{font-size:15px!important}
}
@media(max-width:640px){
  .search-panel .search-input-row{padding:14px 16px;gap:8px}
  .search-panel .search-input-row input{height:44px;font-size:16px!important}
  .search-panel .search-input-row button{width:44px;height:44px;min-width:44px;min-height:44px}
}
/* ≤480 的窄屏把 20px 放大镜让给输入框：16px 占位文字在上述宽度只剩 2px 余量，会被裁掉尾字 */
@media(max-width:480px){
  .search-panel .search-input-row{gap:12px}
  .search-panel .search-input-row>svg{display:none}
}

/* 学段导航 hero（旭哥 22:15）：把原来独立的统计条并进副文案下方，「内容说明」上移到标题之上。
   .navigation-stats 沿用 Figma 原有的 23px Georgia 数字 + 竖分隔线，只把外边距清掉，
   否则它自带的 padding:20px 8px 6px 会在 hero 里撑出一段空档。 */
.app-shell .learning-hero-copy .hero-note-link{
  display:inline-flex;align-items:center;gap:8px;
  color:#8b997b;font-size:11px;letter-spacing:.4px;line-height:1.6;
  transition:color .18s,gap .18s}
.app-shell .learning-hero-copy .hero-note-link svg{width:14px;height:14px}
.app-shell .learning-hero-copy .hero-note-link:hover{color:#476342;gap:11px}
.app-shell .learning-hero-copy .navigation-stats{margin-top:18px;padding:0;gap:18px}
@media(max-width:960px){
  /* 统计条进了 66% 宽的文案列，768 起会折行；折行时竖分隔线会孤零零留在行尾，
     所以这段宽度区间收起分隔线，用列间距区分即可 */
  .app-shell .learning-hero-copy .navigation-stats{margin-top:14px;gap:12px 16px}
  .app-shell .learning-hero-copy .navigation-stats i{display:none}
  /* Figma 原稿把「最后一项」当第 4 个（内容说明链接）压到 8px；现在最后一项是真实统计，
     沿用 8px 会让「道自动判分练习」比前两条小一号 */
  .app-shell .learning-hero-copy .navigation-stats>span:last-child{font-size:inherit}
}
@media(max-width:640px){
  .app-shell .learning-hero-copy .hero-note-link{font-size:12px}
  .app-shell .learning-hero-copy .navigation-stats{margin-top:12px;gap:8px 14px}
}

/* 面包屑里的「学段导航」是册次页回上一级的唯一入口（页内返回按钮与学段页签都已移除），
   ui-review 用 !important 把 a 和 span 染成同一个颜色，只能靠 hover 下划线提示可点 */
.app-shell .breadcrumb a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* 窄屏面包屑：册次/知识点页四段太长会折成两行、把顶栏顶高（390 实测 52px）。
   「学习空间」只是回首页，侧栏与底部导航都有入口，所以在有册名的页面里让出这一段。 */
/* 641–899 与 390 一样只有 ~290px 可用（顶栏右侧搜索框+日签占位），四段合计 396 必然折行（641 时甚至三行），
   所以断点不按手机取，按「面包屑容器实际宽度」取到 899。 */
@media(max-width:899px){
  /* 641–699 这类窄桌面：容器只剩 ~163px，再收段也不够，改为不折行（原稿本就是 nowrap+overflow:auto），
     内容可横向滚动，顶栏高度不再被顶高 */
  .app-shell .breadcrumb{flex-wrap:nowrap}
  .app-shell .breadcrumb:has(#crumb-book-name)>a[href="#home"]{display:none}
  /* 让出首页段后，首个可见段前面的箭头会孤零零挂在行首，一并收起 */
  .app-shell .breadcrumb:has(#crumb-book-name)>.breadcrumb-segment:first-of-type>svg{display:none}
  /* 知识点页还要再多一段，390 宽下三段合计 311 > 290 仍会折行：
     连「学段导航」段一起让出（顶栏与底部导航都有该入口），只留可点的册名 + 知识点名 */
  .app-shell .breadcrumb:has(#crumb-topic-name)>.breadcrumb-segment:first-of-type{display:none}
  .app-shell .breadcrumb:has(#crumb-topic-name)>.breadcrumb-segment:nth-of-type(2)>svg{display:none}
}

/* 首页 6 张课卡：外层是功能容器 .starter，内层是 Figma 链接结构 */
.lesson-card{position:relative}
.lesson-card-link{display:flex;align-items:center;gap:10px;width:100%;min-width:0;color:inherit}
/* 课卡右上角「?」使用说明按钮（旭哥 21:40：问号没在框里居中、看不出能点）。
   两个坑：① 旧 style.css 的 .secondary 把 padding:9px 15px / radius:6px / min-height:44px 套上来，
   把 22px 的圆挤成 32×22 的长条，问号被 padding 顶到左上；② ui-review.css 的
   （ui-review.css）的 .app-shell button / .app-shell .secondary 统一给 min-height:44px，
   窄档会把高度撑到 44。所以用 .app-shell .lesson-card .starter-help (0,3,0) 压住两者，
   显式复位 width/height/min-*，做回圆形；悬停变实心深绿 + 轻微放大，按下去缩一下，键盘聚焦有描边。 */
.app-shell .lesson-card .starter-help{position:absolute;right:9px;top:9px;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;min-width:26px;min-height:26px;max-height:none;padding:0;margin:0;
  border:1px solid #cbd6b8;border-radius:50%;background:#eef2e4;color:#55684a;
  font-size:12px;font-weight:600;line-height:1;cursor:pointer;
  box-shadow:0 1px 2px #46523c1f;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease}
.app-shell .lesson-card .starter-help:hover{background:#476342;border-color:#476342;color:#fdfdf9;
  transform:scale(1.08);box-shadow:0 3px 8px #47634233}
.app-shell .lesson-card .starter-help:active{transform:scale(.96)}
.app-shell .lesson-card .starter-help:focus-visible{outline:2px solid #8fa879;outline-offset:2px}
/* 触屏档给足手指面积，但保持正圆（44 的最小高度只放宽到宽高同值，否则会被拉成竖椭圆）。 */
@media(max-width:640px){
  .app-shell .lesson-card .starter-help{width:40px;height:40px;min-width:40px;min-height:40px;font-size:14px}
}
.lesson-card .sr-only{position:absolute}

/* 现网资源卡 .card → Figma .resource-card 外观 */
.card.resource-card{display:flex;flex-direction:column;overflow:hidden;min-width:0;padding:0;
  border:1px solid var(--border,#e2e8d8);border-radius:9px;background:#fdfdf9;
  text-align:left;transition:.2s}
.card.resource-card:hover{transform:translateY(-3px);border-color:var(--accent,#7f956a);box-shadow:0 5px 16px #424e2c08}
.card.resource-card .resource-image,.card.resource-card .resource-symbol{display:grid;place-items:center;
  width:100%;height:88px;object-fit:cover;flex-shrink:0;background:#eff3e8;color:#7f956a;
  font-size:34px;font-weight:600}
.card.resource-card .resource-copy{display:block;padding:13px 15px 15px;min-width:0}
.card.resource-card .resource-copy h3{margin:6px 0 5px;font-size:14px;color:#3d5943}
.card.resource-card .resource-copy p{font-size:11px;line-height:1.8;color:#8a967e}
.card.resource-card .more-link{display:block;margin-top:9px;font-size:11px;color:#617b50}
.card.resource-card.pending{opacity:.72}

/* knowledge.js 的册卡不能用 .book-card 结构替换（判题器依赖），只重造型 */
.book-card-grid{display:block}
.kbook-card{border:1px solid #e2e8d8;border-radius:9px;background:#fdfdf9;box-shadow:none}
.kbook-title,.knum b{color:#3d5943}
.knum b{color:#617b50}
.kbook-title em,.knum i{color:#8a967e}
.kbook-plate{background:#f1f4e9}
.kbook-card:hover{border-color:#cfdabf;background:#f7f9f1;box-shadow:0 5px 16px #424e2c08}

/* 筛选 / 搜索 / 分组标题 */
.chip{display:inline-flex;align-items:center;padding:7px 14px;border:1px solid #e2e8d8;
  border-radius:999px;background:#fdfdf9;color:#7b8476;font-size:11px}
.chip.active{background:#e0e7d5;border-color:#cfdabf;color:#3d5943;font-weight:600}
.chip.pending{background:#f1f4e9;color:#9aa487}
.browse-toolbar .search{width:auto;min-width:190px;padding:8px 10px;border:1px solid #e4e9db;
  border-radius:6px;background:#f4f6ed}
.browse-toolbar .search input{background:transparent;color:#45523d;font-size:12px}
.browse-toolbar .search button{border:0;background:none;color:#7f956a;font-size:16px}
.section-head{display:flex;align-items:center;justify-content:space-between;margin:22px 0 12px;
  padding-bottom:8px;border-bottom:1px solid #e2e8d8}
.section-head h2{font-family:"Noto Serif SC",serif;font-size:18px;color:#3d5943}
.section-head a,.section-head .hint{font-size:11px;color:#8a967e}
.stage-sub h3{margin:14px 0 6px;font-size:13px;color:#7f956a}
.empty,.hint,.count{color:#8a967e}
.badge{background:#f8f4e7;border:1px solid #e2e8d8;color:#b7a071}
.recent,.rail{margin-top:22px;padding:20px;border:1px solid #e2e8d8;border-radius:9px;background:#fdfdf9}

/* 首页「最近打开」面板（旭哥 21:52）：沿用首页课卡/首屏卡那一套边框 + 圆角 + hover 位移，
   并且不借用 .section-head —— 它自带 margin-top:22px 和一条下边框，在卡片内会凭空顶出一行空白。 */
.app-shell .recent{margin-top:28px;padding:22px 24px 20px;border:1px solid #e5e8dd;border-radius:12px;
  background:#fdfdf9;box-shadow:0 1px 2px #46523c0a}
.app-shell .recent-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.app-shell .recent-head h2{margin:0;font-family:"Noto Serif SC",serif;font-size:17px;font-weight:600;
  letter-spacing:.5px;line-height:1.4;color:#3d5943}
.app-shell .recent-clear{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  height:32px;min-height:0;padding:0 14px;border:1px solid #e2e8d8;border-radius:999px;
  background:#f7f9f1;color:#63705b;font-size:13px;font-weight:500;line-height:1;cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease}
.app-shell .recent-clear:hover{background:#eef2e4;border-color:#cfdabf;color:#3d5943}
.app-shell .recent-clear:active{transform:scale(.97)}
.app-shell .recent-clear:focus-visible{outline:2px solid #8fa879;outline-offset:2px}
.app-shell .recent-hint{margin:7px 0 14px;font-size:14px;line-height:1.7;color:#7b8476}
.app-shell .recent-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
  margin:0;padding:0;list-style:none}
.app-shell .recent-item{min-width:0;margin:0;padding:0}
.app-shell .recent-list a{display:flex;align-items:center;gap:12px;min-width:0;
  padding:11px 13px;border:1px solid #e5e8dd;border-radius:10px;background:#fafbf6;
  color:#45523d;font-size:14px;line-height:1.5;text-decoration:none;
  transition:border-color .18s ease,background .18s ease,transform .18s ease,box-shadow .18s ease}
.app-shell .recent-list a:hover{border-color:#8fa879;background:#f4f7ec;transform:translateY(-2px);
  box-shadow:0 5px 16px #424e2c0f}
.app-shell .recent-list a:focus-visible{outline:2px solid #8fa879;outline-offset:2px}
.app-shell .recent-symbol{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:28px;height:28px;border-radius:8px;background:#eef2e4;color:#476342;
  font-size:13px;font-weight:600;line-height:1}
.app-shell .recent-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.app-shell .recent-name{overflow:hidden;font-weight:500;text-overflow:ellipsis;white-space:nowrap}
.app-shell .recent-type{font-size:12px;color:#8a967e;letter-spacing:.2px}
.app-shell .recent-go{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  color:#a3ad97;transition:color .18s ease,transform .18s ease}
.app-shell .recent-list a:hover .recent-go{color:#476342;transform:translateX(2px)}
@media(max-width:960px){
  .app-shell .recent-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .app-shell .recent{margin-top:22px;padding:18px 16px 16px}
  .app-shell .recent-head h2{font-size:16px}
  .app-shell .recent-clear{height:38px;padding:0 16px;font-size:13px}
  .app-shell .recent-list{grid-template-columns:minmax(0,1fr);gap:8px}
  .app-shell .recent-list a{padding:12px 13px}
}

/* 「本次更新 / 数据来源」等现网说明区块，嵌进 Figma .learn-panel */
.learn-panel .update,.learn-panel .about{margin:0;padding:0;border:0;background:transparent}
.learn-panel .update-nums>div,.learn-panel .tg-facts>div,.learn-panel .stage-link,
.learn-panel .tg-update,.learn-panel .notice{background:#f1f4e9;border:1px solid #e2e8d8;border-radius:8px}
.learn-panel .update-nums b,.learn-panel .tg-facts b,.learn-panel .stage-link strong{color:#3d5943}
.learn-panel .update-note,.learn-panel .tg-note,.learn-panel .hint{color:#8a967e}
.learn-panel p,.learn-panel .about p{color:#5f6a58;line-height:2}
.learn-panel h2,.learn-panel h3,.prose-panel .about h3{color:#3d5943}

/* 弹窗表单与按钮 */
.detail-dialog label{display:block;margin-top:13px;font-size:12px;font-weight:600;color:#5f6a58}
.detail-dialog label input,.detail-dialog label select,.detail-dialog label textarea{
  display:block;width:100%;margin-top:5px;padding:9px;border:1px solid #e2e8d8;border-radius:6px;
  background:#fafbf7;color:#45523d;font-family:inherit}
.detail-dialog .close{position:absolute;right:12px;top:8px;border:0;background:none;font-size:26px;color:#7b8476}
.detail-dialog h2,.detail-dialog h3,.detail-dialog p{color:#45523d}
.primary{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border:1px solid #476342;
  border-radius:6px;background:#476342;color:#fffef5;font-size:12px}
.secondary{padding:9px 15px;border:1px solid #e2e8d8;border-radius:6px;background:#fdfdf9;
  color:#3d5943;font-size:12px}

/* Maintained corrections; loaded by the CSS generator after the Figma reference. */
:root{--muted:#63705b}
.app-shell .sidebar-note p{margin:18px 0 0;font-size:14px;line-height:2;color:var(--ink)}
.collection.collection-card{padding:0;display:flex;flex-direction:column}
.collection-card .collection-card-art{width:100%}
/* 青灰配色（2026-11-13）：figma.css 只有 green/purple/orange/blue 四套变量，
   第四张专题卡用的 .cyan 缺一套，导致 border:1px solid var(--border) 整条失效、
   卡片没有边框、art 区没有底色。值取自 tokens.css 的 --hero-cyan-*，与首页 banner 同源。 */
.collection-card.cyan{--accent:#739d94;--tint:#eef3f2;--border:#d6e3e0}
.app-shell .side-nav a{min-height:44px}
.app-shell .section-kicker,.app-shell .eyebrow,.app-shell .mini-label{font-size:12px;letter-spacing:1px}
.app-shell p,.app-shell .resource-copy p{color:var(--muted)}
.app-shell .kstage-nav{display:none}
/* 册卡的尺寸/配色在文件末尾「学段册卡 v2」一节统一维护（2026-11-12） */
.app-shell input,.app-shell textarea,.app-shell select{font-size:16px}
.app-shell .qprompt,.app-shell .kdesc,.app-shell .qexplain{font-size:16px;line-height:1.9}
.app-shell .qfigure,.app-shell .kfig{max-width:100%;overflow:auto}
.app-shell .search-panel{max-height:calc(100dvh - 32px);overflow:auto}
@media(max-width:640px){
 .app-shell .sidebar{height:auto;min-height:108px;flex-wrap:wrap;padding:8px 16px;gap:5px}
 .app-shell .brand-logo{width:120px;max-height:40px}
 .app-shell .side-nav{width:100%;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px}
 .app-shell .side-nav a{font-size:12px;gap:5px;padding:8px 2px;justify-content:center;min-height:44px}
 .app-shell .side-nav a svg{width:16px;height:16px}
 .app-shell .hero{min-height:0}
 .app-shell .hero-main{min-height:0}
 .app-shell .hero-copy{width:100%;padding:22px 20px 170px}
 .app-shell .hero h2{font-size:27px;line-height:1.5}
 .app-shell .hero-description{font-size:13px;line-height:1.8}
 .app-shell .craft-art{width:230px;height:160px;top:auto;bottom:8px;right:5px}
 .app-shell .hero-actions{margin-top:16px}
 .app-shell .hero-actions>span{font-size:12px}
 .app-shell .hero-stats{padding:12px 18px;gap:10px}
 .app-shell .hero-stats small{font-size:12px}
 .app-shell .learning-hero{min-height:0;padding:24px 20px}
 .app-shell .learning-hero-copy{padding:0;width:100%}
 .app-shell .learning-hero h1{font-size:25px;line-height:1.5}
 .app-shell .learning-hero p{font-size:14px}
 .app-shell .learning-hero>svg,.app-shell .learning-hero-edition{display:none}
 .app-shell .navigation-stages{grid-template-columns:1fr;gap:10px}
 .app-shell .navigation-stage{min-height:96px}
 .app-shell .navigation-stage p,.app-shell .stage-card>p,.app-shell .stage-card-bottom,.app-shell .math-metrics,.app-shell .section-footnote,.app-shell .result-count{font-size:12px;white-space:normal}
 .app-shell .stage-grid{grid-template-columns:1fr}
 .app-shell .stage-card h3 span{font-size:12px}
 .app-shell .lesson-grid,.app-shell .resource-grid,.app-shell .more-cards{grid-template-columns:1fr}
 .app-shell .lesson-copy p,.app-shell .lesson-meta,.app-shell .collection-card p{font-size:14px}
 .app-shell .navigation-stats{gap:12px;flex-wrap:wrap;font-size:12px}
 .app-shell .browse-toolbar,.app-shell .toolbar-controls{flex-wrap:wrap;gap:8px}
 .app-shell .browse-toolbar .search{width:100%;margin:0;min-height:44px}
 .app-shell .filters select,.app-shell button,.app-shell .primary,.app-shell .secondary{min-height:44px}
 .app-shell footer{flex-wrap:wrap;gap:16px}
 .app-shell footer>div{display:flex;flex-wrap:wrap;gap:12px;font-size:12px}
 .app-shell .feedback-banner{flex-wrap:wrap}
 .app-shell .feedback-banner p{font-size:14px}
 .app-shell .breadcrumb{min-width:0;overflow:auto;white-space:nowrap}
 .app-shell .topbar-right{flex-shrink:0}
}

@media(max-width:640px){.app-shell .side-nav a{white-space:nowrap;gap:0}.app-shell .side-nav a svg{display:none}.app-shell .hero-main{height:auto}.app-shell .hero-copy{padding-bottom:120px}.app-shell .craft-art{height:115px;width:180px}.app-shell .hero-description{font-size:12px}.app-shell .hero h2{font-size:24px}}

.search-panel input,.detail-dialog input,.detail-dialog textarea,.detail-dialog select{font-size:16px!important}.search-panel button,.detail-dialog button{min-width:44px;min-height:44px}.search-panel{max-height:calc(100dvh - 32px);overflow:auto}.search-backdrop{padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom))}

/* Short mobile feature panel leaves the next learning direction in the first viewport. */
@media(max-width:640px){
 .app-shell .welcome{margin-bottom:18px;padding-top:0}
 .app-shell .welcome h1{font-size:24px;line-height:1.4}
 .app-shell .hero-copy{padding:18px 20px 22px}
 .app-shell .hero-overline{margin-top:14px;margin-bottom:10px;font-size:12px}
 .app-shell .hero-description{font-size:14px;line-height:1.65;margin-top:12px}
 .app-shell .hero-actions{margin-top:14px}
 .app-shell .hero .craft-art{display:none}
 .app-shell .hero-edition{display:none}
 .app-shell .hero-stats{padding:12px 18px;gap:8px}
 .app-shell .hero-stats strong{font-size:22px}
 .app-shell .hero-stats small{margin-top:2px;line-height:1.4}
 .app-shell .middle-grid{margin-top:20px}
}
.app-shell :is(.hero-description,.section-footnote,.browse-footnote,.resource-copy p,.collection-card p,.lesson-copy p){color:var(--muted)}

/* User direction: remove decorative small print, rather than enlarging it. */
.app-shell :is(.section-kicker,.mini-label,.eyebrow,.hero-overline,.hero-edition,.learning-hero-edition,.nav-label,.welcome-stamp,.handwritten,.hero-soft-stamp,.collection-index,.collection-art-label,.lesson-number,.section-footnote){display:none!important}
.app-shell .sidebar-note>span,.app-shell .hero-stats small,.app-shell .stage-card-bottom{display:none!important}
.app-shell :is(.hero-actions>span,.stage-tabs>span,.section-heading .hint){display:none!important}
.app-shell :is(.lesson-group,.lesson-meta,.result-count,.browse-footnote,.meta,.hint){font-size:14px;letter-spacing:0}
.app-shell .welcome{padding-top:0}
.app-shell .hero-copy{padding-top:28px}
.app-shell .hero-stats{padding-block:18px}
@media(max-width:640px){.app-shell .hero-copy{padding-top:22px}.app-shell .hero-stats{padding-block:14px}.app-shell .middle-grid{margin-top:22px}}

.app-shell :is(.release-badge,.math-metrics,.lesson-meta,.sidebar-note){display:none!important}
.app-shell :is(.hero-stats strong span,.stage-card h3 span,.navigation-stage h3 span){font-size:14px}
.app-shell footer{font-size:14px}
@media(max-width:640px){.app-shell .search-trigger>span{display:none}.app-shell .search-trigger{min-width:44px;min-height:44px}.app-shell footer>div{font-size:14px}}

/* Collection detail begins with actionable content, not a promotional hero. */
.collection-page .book-page-heading{min-height:0;padding:0;margin:4px 0 12px;display:block}
.collection-page .book-page-heading h1{font-size:26px;line-height:1.4}
.collection-page .back-link{margin:0 0 8px;min-height:32px;display:inline-flex;align-items:center;font-size:14px}
.collection-page .collection-filter-row{margin:0;gap:8px;padding:0;border:0}
.collection-page .collection-filters{padding:0;margin:0;border:0}
.collection-page .chip{font-size:14px;min-height:44px;padding:8px 14px;color:var(--ink)}
.collection-page .browse-toolbar{margin:12px 0;padding:0;min-height:0}
.collection-page .browse-toolbar .search{margin:0;min-height:44px;max-width:100%}
.collection-page .section-head{margin:16px 0 12px;padding:0 0 8px}
.collection-page .section-head h2{font-size:20px}
.collection-page .section-head .hint{font-size:14px;margin:0}
@media(max-width:640px){.collection-page .book-page-heading h1{font-size:24px}.collection-page .grid{grid-template-columns:minmax(0,1fr)}.collection-page .card.resource-card{display:grid;grid-template-columns:72px minmax(0,1fr);min-height:110px}.collection-page .card.resource-card .resource-symbol,.collection-page .card.resource-card .resource-image{height:100%;min-height:110px;max-height:160px}.collection-page .card.resource-card .resource-copy{padding:12px}.collection-page .card.resource-card h3{margin:2px 0 6px;font-size:18px}.collection-page .resource-copy .meta{font-size:14px}.collection-page .resource-copy p{font-size:14px}.collection-page .more-link{font-size:14px}}

.collection-page .card.resource-card:has(.resource-symbol){display:block;min-height:0}
.collection-page .card.resource-card .resource-symbol{display:none}
.collection-page .card.resource-card .resource-copy{padding:16px}
.collection-page .card.resource-card .resource-copy p{margin:6px 0;min-height:0}
.collection-page .card.resource-card .resource-copy h3{line-height:1.5}

/* Readability audit: keep explanatory text legible; remove remaining decorative marks.
   注意：只隐藏真正的装饰图形。.hello（问候语）、kbd（⌘K）、.search-trigger>span（搜索提示词）
   都是 Figma 原稿的可见内容 —— 之前一并隐藏导致桌面搜索框只剩一个空框，已恢复。 */
.app-shell :is(.tiny-pencil,.doodle-big,.doodle-small,.resource-symbol){display:none!important}
.app-shell :is(.stage-symbol,.navigation-stage-symbol){color:var(--brand)}
.app-shell :is(.more-link,.qlabel,.qbadge,.ksource,.kpre-label,.result-count,.count,.tg-note,.update-note,.tg-old,.challenge-note,.lesson-group,.hint){font-size:14px!important;color:var(--ink)!important}
.app-shell :is(.resource-copy p,.collection-card-copy p,.lesson-copy p){font-size:16px!important;color:var(--ink)!important}
.app-shell :is(.back-link,.footer-brand,.stage-tabs button,.challenge-button,.tg-badge){color:var(--ink)!important}
.app-shell :is(.primary,.challenge-button){background:var(--brand);color:var(--paper)!important}
.app-shell :is(.tg-badge,.qbadge.auto){background:var(--sage)!important;color:var(--ink)!important}

.app-shell .about-bottom-note{display:none!important}
.app-shell .side-nav a{color:var(--ink)!important}
.app-shell .breadcrumb :is(a,span){font-size:14px!important;color:var(--ink)!important}
.app-shell :is(.hero-stats strong span,.stage-card h3 span,.section-heading>a,.stage-tabs button,.collection-card-footer span,.collection-card-footer small){font-size:14px!important;color:var(--ink)!important}
.app-shell .collection-card-footer strong{color:var(--brand)!important}
.app-shell :is(.learn-panel p,.learn-panel a,.learn-panel small,.learn-panel i,.learn-panel .tg-badge,.kstage small,.kbook-title em,.knum i){font-size:14px!important;color:var(--ink)!important}
.app-shell .learn-panel a.primary{color:var(--paper)!important}
.app-shell .knum b{color:var(--brand)!important}
.app-shell .challenge-card :is(p,.challenge-top span){font-size:14px!important;color:var(--ink)!important}
.app-shell .challenge-card .challenge-button{font-size:14px!important;color:var(--paper)!important;background:var(--brand)!important}
/* 反馈条是内容而不是装饰：保留图标与两行说明，只统一字号到 14px。
   之前把 .feedback-banner>div / .feedback-icon 一起隐藏，banner 只剩一个孤立链接，
   高度塌成一条线 —— 已修正。 */
.app-shell .footer-brand>span{display:none!important}
.app-shell .feedback-banner{gap:16px;padding:18px 22px}
.app-shell .feedback-banner>div{display:block;min-width:0}
.app-shell .feedback-icon{display:flex;flex-shrink:0}
.app-shell .feedback-banner h3{font-size:14px!important;color:var(--ink)!important;letter-spacing:0}
.app-shell .feedback-banner p{font-size:14px!important;color:var(--muted)!important;margin:4px 0 0;line-height:1.7}
.app-shell .feedback-banner>a{font-size:14px!important;color:var(--ink)!important;gap:8px;margin-left:auto}
.app-shell footer :is(a,span){font-size:14px!important;color:var(--ink)!important}
.app-shell .resource-copy h3{font-size:18px!important;color:var(--brand)!important}
.app-shell .browse-toolbar .search button{color:var(--ink)!important}

.app-shell .navigation-stage small{display:none!important}
.app-shell .sidebar-bottom :is(a,span),.app-shell .navigation-stage :is(p,h3 span){font-size:14px!important;color:var(--ink)!important}
.app-shell .about-intro>div{display:none}
.app-shell .about-intro{display:block}
.app-shell .about-intro p,.app-shell .more-card p{font-size:16px!important;color:var(--ink)!important}
.app-shell .more-card h2{color:var(--brand)!important}
.app-shell .knowledge :is(small,.kback span){font-size:14px!important;color:var(--ink)!important}
.app-shell .stage-link span{color:var(--ink)!important}

.app-shell .hero-stats>a{display:none!important}
.app-shell .stage-card>p{font-size:14px!important}

/* 学习页是「册卡 + 右栏 210px」的双栏设计，但现网 DOM 只有册卡一列，
   右栏空着会在宽屏留下 237px 空白。只有单个子元素时让册卡铺满；
   将来右栏真有了内容（第二个子元素），自动恢复双栏。 */
.learning-browse-layout:not(:has(> :nth-child(2))){grid-template-columns:minmax(0,1fr)}

/* Figma 的工具栏下拉用 appearance:none 去掉原生箭头，但 background 简写又把
   自定义箭头清掉了 —— 视觉上像一枚普通标签，没人知道能点开。补回箭头。 */
.app-shell .toolbar-controls select{
  appearance:none;-webkit-appearance:none;
  padding:8px 30px 8px 11px;
  font-size:13px!important;
  color:var(--ink)!important;
  background-color:#f6f8ef;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1.5 5 5.5 9 1.5' fill='none' stroke='%23829070' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 11px center;
}
.app-shell .toolbar-controls select:hover{background-color:#eef2e3;border-color:var(--line-strong)}
.app-shell .learning-search{width:248px}
.app-shell .learning-search input{font-size:13px}
.app-shell .learning-search input::placeholder{font-size:13px;color:var(--muted)}

/* 专题页三张大卡：外壳被 grid 拉成等高，但正文区没有撑开，
   底部「N 个学习入口 / 开始探索」三张不在一条水平线上。让正文区吃满剩余高度。 */
.app-shell .collection-card .collection-card-copy{display:flex;flex-direction:column;flex:1;min-height:0}
.app-shell .collection-card .collection-card-footer{margin-top:auto;padding-top:16px}
.app-shell .collection-card .collection-card-copy>p{flex:1 0 auto}

/* 更多页/关于站长正文：1132px 宽度下一行要读到 70+ 个汉字，容易串行。
   限制到约 45 字的舒适行长（16px × 47 ≈ 760px），保持左对齐。
   注意正文有两个落点：页首 intro（.about-intro>p）与页尾合规面板（.prose-panel p）。 */
.app-shell .about-intro>p,
.app-shell .prose-panel p{max-width:760px}

/* 恢复显示的顶栏 / 侧栏文字：Figma 原稿是 9–10px，偏小偏淡。
   统一提到可读基线，搜索框相应放宽，保持单行不折行。 */
.app-shell .search-trigger{width:266px}
.app-shell .search-trigger>span{font-size:13px!important;color:var(--muted)!important;white-space:nowrap}
.app-shell .search-trigger kbd{font-size:11px!important;color:var(--muted)!important}
.app-shell .hello{font-size:13px!important;color:var(--muted)!important;white-space:nowrap}
.app-shell .navigation-stats{font-size:12px!important}
@media(max-width:1200px){.app-shell .search-trigger{width:240px}}
@media(max-width:640px){.app-shell .search-trigger{width:auto}}

/* ===== 3D 知识实验室专题页头部对齐数学能力提升页（2026-11-12 10:20） =====
   参照页头部三层：面包屑行（右侧内容规模统计）→ 一条米色顶栏（左学段切换、右页签）
   → 分组标题。原 3D 专题页在面包屑下还压了返回链接 / 大标题 / 筛选 / 说明 / 独立搜索
   共 5 层、259px。这里把筛选合成一条顶栏，其余区块由 app.js 不再渲染。 */

/* ① 顶栏右侧：只在 lab-3d 这一页隐藏全站通用的搜索按钮与问候语，换成统计条。
   .lab-topic-head 由 updateShell() 按路由开关，离开该页自动还原。 */
.app-shell.lab-topic-head .topbar-right>:is(.search-trigger,.top-divider,.hello){display:none!important}
.app-shell.lab-topic-head .topbar-right{gap:0}
/* 与子应用 study-shell.css:72-84 完全同一套视觉，不另造一套数字条 */
.app-shell .gs-topbar-stats{margin-left:auto;display:flex;align-items:center;font:13px/1.4 var(--font-sans);color:var(--muted)}
.app-shell .gs-topbar-stats .gs-stat{display:inline-flex;align-items:baseline;gap:4px;padding:0 14px;border-left:1px solid var(--line);white-space:nowrap}
.app-shell .gs-topbar-stats .gs-stat:first-child{border-left:0;padding-left:0}
.app-shell .gs-topbar-stats .gs-stat:last-child{padding-right:0}
.app-shell .gs-topbar-stats em{font-style:normal;font-size:12.5px;color:var(--muted)}
.app-shell .gs-topbar-stats b{font-size:15px;font-weight:600;color:#3d5943;font-variant-numeric:tabular-nums;letter-spacing:0}
.app-shell .gs-topbar-stats i{font-style:normal;font-size:12px;color:var(--muted);margin-left:-2px}
@media(max-width:1024px){.app-shell .gs-topbar-stats .gs-stat:nth-child(n+3){display:none}}
@media(max-width:820px){.app-shell .gs-topbar-stats{display:none}}

/* ② 米色筛选顶栏：用负 margin 抵消 #main 的左右内距，铺满整个工作区
   （1440 下 x=224..1440，与数学页 .topbar 同宽），内容仍从 42px 起；
   66px 高、rgba(255,249,240,.92) 底色都取自数学页实测值。 */
.collection-page.lab-topic-page .lab-filter-bar{
  display:flex;align-items:center;gap:16px;min-height:66px;flex-wrap:wrap;
  margin:-29px -42px 14px;padding:9px 42px;
  background:rgba(255,249,240,.92);border-bottom:1px solid var(--line);
}
/* 分组标题紧接顶栏 14px：style.css 的 .section-head.stage-head 与 figma.css 的
   .collection-page .section-head 都给了上外边距。注意不能用 :first-of-type ——
   顶栏也是 div，分组标题并不是第一个同类型子元素，那样根本匹配不上。 */
.collection-page.lab-topic-page>.section-head{margin-top:0!important}
/* 左：学段胶囊组（数学页 .grade-switch 同款：白底、1px #cfdabf、999px 圆角） */
.collection-page.lab-topic-page .lab-stage-switch{
  display:inline-flex;align-items:center;gap:2px;padding:2px;margin:0;
  background:#fff;border:1px solid var(--line-strong);border-radius:999px;
}
.collection-page.lab-topic-page .lab-stage-switch .chip{
  min-height:34px;padding:5px 14px;border:0;border-radius:999px;background:none;
  font-size:13px;color:var(--ink);white-space:nowrap;
}
.collection-page.lab-topic-page .lab-stage-switch .chip.active{background:#3d5943;color:#fff;font-weight:600}
/* 中：本页关键词搜索保留功能，收进顶栏；输入字号沿用 .learning-search 的 13px */
.collection-page.lab-topic-page .lab-search{flex:0 1 160px;min-width:140px}
.collection-page.lab-topic-page .lab-search .search{
  display:flex;align-items:center;gap:6px;width:100%;margin:0;height:38px;min-height:38px;padding:4px 12px;
  background:#fff;border:1px solid var(--line-strong);border-radius:999px;
}
.collection-page.lab-topic-page .lab-search .search input{flex:1;min-width:0;border:0;background:none;outline:0}
.collection-page.lab-topic-page .lab-search .search button{border:0;background:none;color:#7f956a;font-size:16px;line-height:1}
/* 右：学科页签，选中态与数学页 .topnav a 同为 #edf1e3 浅绿 */
.collection-page.lab-topic-page .lab-subject-tabs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 0 auto}
.collection-page.lab-topic-page .lab-subject-tabs .chip{
  min-height:38px;padding:6px 10px;border:0;border-radius:999px;background:none;
  font-size:13px;color:var(--ink);white-space:nowrap;
}
.collection-page.lab-topic-page .lab-subject-tabs .chip.active{background:#edf1e3;color:#3d5943;font-weight:600}
/* 断点：#main 的左右内距在 1200 / 640 两档会变，负 margin 必须同步；
   820 以下顶栏换行（与数学页 641–820 允许换行同一处理）。 */
@media(max-width:1200px){
  .collection-page.lab-topic-page .lab-filter-bar{margin-inline:-28px;padding-inline:28px}
}
/* 960 以下侧栏收 174、#main 左右内距变 22px：负 margin 必须跟着换，
   否则 768 视口会横向溢出 6px（第一版按 28px 抵消，实测 bar 右端跑到 774）。 */
@media(max-width:960px){
  .collection-page.lab-topic-page .lab-filter-bar{margin-inline:-22px;padding-inline:22px}
}
@media(max-width:820px){
  .collection-page.lab-topic-page .lab-filter-bar{row-gap:10px;padding-block:9px}
  .collection-page.lab-topic-page .lab-subject-tabs{margin:0;width:100%}
  .collection-page.lab-topic-page .lab-search{flex:1 1 160px}
}
@media(max-width:640px){
  .collection-page.lab-topic-page .lab-filter-bar{margin-top:-15px;margin-inline:-18px;padding-inline:18px}
  /* 手机端 7 个学科标签改成横向滑动一行，否则会折成三行把头部顶到 240px+ */
  .collection-page.lab-topic-page .lab-subject-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
  .collection-page.lab-topic-page .lab-subject-tabs::-webkit-scrollbar{display:none}
}

/* ---------- 首页三专题轮播 banner（2026-11-12） ----------
   正本在 site/ui-review.css；figma.css 由 build-figma-css.mjs 生成时拼入末尾。
   三套主题色只在 tokens.css 定义，这里只做语义变量映射，组件层不写死色值。 */
.app-shell .hero-carousel{
  --hero-bg:var(--hero-green-bg);--hero-dot:var(--hero-green-dot);--hero-line:var(--hero-green-line);
  --hero-ink:var(--hero-green-ink);--hero-em:var(--hero-green-em);--hero-underline:var(--hero-green-underline);
  --hero-desc:var(--hero-green-desc);--hero-btn:var(--hero-green-btn);--hero-btn-hover:var(--hero-green-btn-hover);
  --hero-stats:var(--hero-green-stats);--hero-figure:var(--hero-green-figure);
  position:relative;background:var(--hero-bg);border-color:var(--hero-line);
  transition:background-color .45s ease,border-color .45s ease;
}
.app-shell .hero-carousel[data-theme="blue"]{
  --hero-bg:var(--hero-blue-bg);--hero-dot:var(--hero-blue-dot);--hero-line:var(--hero-blue-line);
  --hero-ink:var(--hero-blue-ink);--hero-em:var(--hero-blue-em);--hero-underline:var(--hero-blue-underline);
  --hero-desc:var(--hero-blue-desc);--hero-btn:var(--hero-blue-btn);--hero-btn-hover:var(--hero-blue-btn-hover);
  --hero-stats:var(--hero-blue-stats);--hero-figure:var(--hero-blue-figure);
}
.app-shell .hero-carousel[data-theme="purple"]{
  --hero-bg:var(--hero-purple-bg);--hero-dot:var(--hero-purple-dot);--hero-line:var(--hero-purple-line);
  --hero-ink:var(--hero-purple-ink);--hero-em:var(--hero-purple-em);--hero-underline:var(--hero-purple-underline);
  --hero-desc:var(--hero-purple-desc);--hero-btn:var(--hero-purple-btn);--hero-btn-hover:var(--hero-purple-btn-hover);
  --hero-stats:var(--hero-purple-stats);--hero-figure:var(--hero-purple-figure);
}
.app-shell .hero-carousel[data-theme="cyan"]{
  --hero-bg:var(--hero-cyan-bg);--hero-dot:var(--hero-cyan-dot);--hero-line:var(--hero-cyan-line);
  --hero-ink:var(--hero-cyan-ink);--hero-em:var(--hero-cyan-em);--hero-underline:var(--hero-cyan-underline);
  --hero-desc:var(--hero-cyan-desc);--hero-btn:var(--hero-cyan-btn);--hero-btn-hover:var(--hero-cyan-btn-hover);
  --hero-stats:var(--hero-cyan-stats);--hero-figure:var(--hero-cyan-figure);
}
/* 三张 slide 叠在同一网格单元：容器高度取最高者，切换时不塌陷、不抖动 */
.app-shell .hero-slides{display:grid}
.app-shell .hero-slide{
  grid-area:1/1;min-width:0;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .45s ease,visibility 0s linear .45s;
}
.app-shell .hero-slide.is-active{
  opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .45s ease,visibility 0s;
}
@media(prefers-reduced-motion:reduce){
  .app-shell .hero-slide,.app-shell .hero-slide.is-active,.app-shell .hero-carousel,
  .app-shell .hero-carousel .hero-main{transition:none}
}
.app-shell .hero-carousel .hero-main{
  background-color:var(--hero-bg);
  background-image:radial-gradient(var(--hero-dot) .65px,transparent .65px);
  transition:background-color .45s ease;
}
.app-shell .hero-carousel h2{color:var(--hero-ink)}
.app-shell .hero-carousel h2>span{color:var(--hero-em)}
.app-shell .hero-carousel h2 svg{stroke:var(--hero-underline)}
.app-shell .hero-carousel .hero-description{color:var(--hero-desc)}
.app-shell .hero-carousel .primary-button{background:var(--hero-btn);border-color:var(--hero-btn)}
.app-shell .hero-carousel .primary-button:hover{background:var(--hero-btn-hover);border-color:var(--hero-btn-hover)}
.app-shell .hero-carousel .hero-stats{background:var(--hero-stats);border-top-color:var(--hero-line);padding-bottom:24px}
.app-shell .hero-carousel .hero-stats>div{border-left-color:var(--hero-line)}
.app-shell .hero-carousel .hero-stats>div:first-child{border-left-color:transparent}
.app-shell .hero-carousel .hero-stats strong{color:var(--hero-figure)}
/* 两种插画（400×240 LearningArtwork / 600×370 CraftIllustration）统一由 .hero-art 定位 */
.app-shell .hero-carousel .hero-art{
  position:absolute;right:-7px;top:0;width:55%;height:100%;z-index:1;
  display:flex;align-items:center;justify-content:flex-start;
}
.app-shell .hero-carousel .hero-art>svg{display:block;width:100%;height:100%}
.app-shell .hero-carousel .hero-art .craft-art,
.app-shell .hero-carousel .hero-art .learning-artwork{position:static;right:auto;top:auto;width:100%;height:100%}
/* 左右箭头：仅电脑（>640 且具备 hover 能力）显示，手机不显示 */
.app-shell .hero-arrow{
  position:absolute;top:40%;transform:translateY(-50%);z-index:5;
  width:32px;height:32px;min-height:0;padding:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--hero-btn);background:var(--hero-btn);color:var(--paper);
  opacity:.9;transition:opacity .2s ease,transform .2s ease,background-color .45s ease,border-color .45s ease;
}
.app-shell .hero-arrow:hover{opacity:1;background:var(--hero-btn-hover);border-color:var(--hero-btn-hover);transform:translateY(-50%) scale(1.06)}
.app-shell .hero-prev{left:9px}
.app-shell .hero-next{right:9px}
.app-shell .hero-prev svg{transform:scaleX(-1)}
@media(max-width:960px),(hover:none){.app-shell .hero-arrow{display:none}}
/* 箭头只在桌面出现：给文案让出左侧 52px，避免圆按钮压住标题与描述 */
@media(min-width:961px){.app-shell .hero-carousel .hero-copy{padding-left:52px}}
/* 横向间距收紧（2026-11-12）
   现状两个问题：① 箭头固定在 left:10/宽34，与文字只有 8px，显得挤；
   ② 插画按 55% 容器缩放，但文案宽度由标题字数决定，于是 banner 越宽、中间空白越大，
      1440 下文字到画面实测 50px、1600 下 106px。
   处理：箭头缩到 32px 并外移 1px、文案左内边距加大；插画改为「以文字右缘为锚」，
   同时按断点平移补偿（三张插画 viewBox 内部左边距不同），让三张 banner 的插画
   左缘落在同一位置——切换轮播时画面不会左右跳，最长标题（数学/天工）间距约 30px。 */
@media(min-width:1200px){
  .app-shell .hero-carousel .hero-copy{padding-left:56px}
  /* 共研实践插画的取景框比书本宽，默认位置会压到大标题的收尾笔画，右移 22px 让开 */
  .app-shell .hero-slide[data-theme="cyan"] .hero-art>svg{transform:translateX(22px)}
  .app-shell .hero-carousel .hero-art{width:61%}
  .app-shell .hero-carousel .hero-art>svg{transform:translateX(-16px)}
  .app-shell .hero-slide[data-theme="green"] .hero-art>svg{transform:translateX(20px)}
}
@media(min-width:1440px){
  .app-shell .hero-carousel .hero-copy{padding-left:60px}
  .app-shell .hero-carousel .hero-art{width:64%}
}
@media(min-width:1600px){
  .app-shell .hero-carousel .hero-art{width:70%}
  .app-shell .hero-carousel .hero-art>svg{transform:translateX(-53px)}
  .app-shell .hero-slide[data-theme="green"] .hero-art>svg{transform:translateX(-3px)}
}
/* 指示点落在统计条底部预留的一行空白里，不压数字 */
.app-shell .hero-dots{
  position:absolute;right:30px;bottom:9px;z-index:5;
  display:flex;align-items:center;gap:7px;
}
.app-shell .hero-dot{
  width:8px;height:8px;min-height:0;padding:0;border:0;border-radius:50%;
  background:var(--hero-line);transition:width .25s ease,background-color .45s ease;
}
.app-shell .hero-dot.is-active{width:22px;border-radius:5px;background:var(--hero-btn)}
/* 手机：维持既有的「隐藏插画」口径；指示点移到底部居中 */
@media(max-width:640px){
  .app-shell .hero-carousel .hero-art{display:none}
  .app-shell .hero-carousel .hero-stats{padding-bottom:26px}
  .app-shell .hero-dots{right:auto;left:50%;bottom:9px;transform:translateX(-50%)}
}

/* ===== 学段册卡 v2（2026-11-12 Figma 优化稿）=====
   DOM 由 taxonomy/site-patch/knowledge.js 的 bookCard() 生成；.kbook-* / .knum 类名被
   tests/weekend-browser.mjs 依赖，不得改名或换成 Figma 的 .book-card 结构。
   设计：图在上（150px 封面）+ 衬线标题 + 28px 数字（横线 + 竖分隔）。
   色值：JS 在卡上内联 --cover-accent / --cover-bg / --k 的 var() 引用，
   正本在 site/tokens.css 的 --cover-0…5；本文件不写死这 12 个色值。 */
.book-card-grid .kbooks{grid-template-columns:repeat(4,minmax(0,1fr));gap:17px 14px}
.book-card-grid .kbook-card{min-height:0;flex-direction:column-reverse;overflow:hidden;
  border:1px solid #e4e8da;border-radius:11px;background:#fdfdf9}
.book-card-grid .kbook-card::before{width:3px;opacity:.65}
.book-card-grid .kbook-card.is-b::before{opacity:.42}
.book-card-grid .kbook-card:hover{border-color:color-mix(in srgb,var(--cover-accent) 42%,#fff);
  background:#fdfdf9;box-shadow:0 8px 22px #4d624712}
.book-card-grid .kbook-card:hover::before{width:3px}
.book-card-grid .kbook-plate{position:relative;width:100%;height:150px;padding:5px 10px;
  border:0;border-bottom:1px solid color-mix(in srgb,var(--cover-accent) 13%,#fdfdf9);
  background:var(--cover-bg);color:var(--cover-accent);overflow:hidden}
.book-card-grid .kbook-card.is-b .kbook-plate{background:color-mix(in srgb,var(--cover-bg) 78%,#fff)}
.book-card-grid .kbook-plate::before{display:none}
.book-card-grid .kbook-art{display:flex;align-items:center;justify-content:center}
.book-card-grid .kbook-art svg{width:100%;height:100%;max-width:252px;transition:transform .35s ease}
.book-card-grid .kbook-card:hover .kbook-art{transform:translateY(-2px) scale(1.035)}
.book-card-grid .kbook-main{display:flex;flex:1;flex-direction:column;padding:16px 17px 18px}
.book-card-grid .kbook-title{display:block;font-family:var(--font-serif);font-size:17px;
  font-weight:550;line-height:1.8;color:#506747}
.book-card-grid .kbook-nums{display:grid;grid-template-columns:max-content max-content;gap:17px;
  margin-top:13px;padding-top:14px;border-top:1px solid #edf0e6;color:#596e4c}
.book-card-grid .knum{display:flex;flex-direction:column;gap:4px}
.book-card-grid .knum + .knum{padding-left:17px;border-left:1px solid #e9ede1}
.book-card-grid .knum b{font-size:28px;line-height:1.2;font-weight:600;letter-spacing:-.6px}
.book-card-grid .knum i{font-size:14px;line-height:1.6;white-space:nowrap}
/* 三处 !important 是对本文件上方「可读性审计」段的定点复位：
   那里把 .knum b 统一染成 var(--brand)，把 .knum i 统一染成 var(--ink)，
   册卡需要让数字与标签跟着各自的封面色走，而不是全站同一个深绿。 */
.app-shell .book-card-grid .knum b{color:var(--cover-accent)!important}
.app-shell .book-card-grid .knum i{font-size:14px!important;color:#8b967e!important}
.app-shell .book-card-grid .kbook-title em{font-size:14px!important;color:#8a967e!important;font-weight:400;margin-left:3px}
/* 4 列在 1280 视口卡宽约 233px，装不下「84 + 17 + 17 + 84 = 202px」的两列 14px 数字标签，
   会横向溢出。1300 以下退 3 列（卡宽约 314px），比缩字号更稳。 */
@media(max-width:1299px){
  .book-card-grid .kbooks{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:1023px){
  .book-card-grid .kbooks{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:1600px){
  .book-card-grid .kbook-plate{height:166px}
  .book-card-grid .kbook-title{font-size:18px}
}
@media(max-width:640px){
  .book-card-grid .kbooks{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .book-card-grid .kbook-plate{height:135px;padding:3px 6px}
  .book-card-grid .kbook-main{padding:12px 12px 14px}
  .book-card-grid .kbook-title{font-size:15px;line-height:1.7}
  .book-card-grid .kbook-nums{display:flex;flex-direction:column;align-items:flex-start;gap:5px;
    margin-top:11px;padding-top:10px}
  .book-card-grid .knum{flex-direction:row;align-items:baseline;gap:6px}
  .book-card-grid .knum + .knum{padding-left:0;border-left:0}
  .book-card-grid .knum b{font-size:22px}
  .book-card-grid .knum i{font-size:14px!important;white-space:nowrap;line-height:1.4}
}
/* ≤414 的两列卡宽只剩 171px，「道可自动判分」7 字 × 14px = 98px 加 22px 数字装不下，
   会横向裁字（实测 390 溢出 4px、360 溢出 19px、320 溢出 39px）。改单列，
   封面同步抬到 190px，避免 354×135 这种扁条比例。
   2026-11-12 夜：数字区也保持「数字 + 标签」各占一行（原来这里翻回两列并排，
   手机上一行挤两组数字，标签被裁）。 */
@media(max-width:414px){
  .book-card-grid .kbooks{grid-template-columns:minmax(0,1fr)}
  .book-card-grid .kbook-plate{height:190px;padding:4px 10px}
  .book-card-grid .knum b{font-size:26px}
}

/* ===== 3D 实验室资源卡（2026-11-12 回稿对齐）=====
   线上原状：2 列、88px 高横条配 object-fit:cover，把 720×480 的模型截图裁掉约 70%；
   Figma 原稿是 3 列 + 全幅大图 + 底部类型标签。这里按原稿恢复，用 3/2 而不是 1.65，
   因为 146 张素材全是 720×480，3/2 可零裁切。 */
.collection-page .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.collection-page .card.resource-card{min-height:0;border-radius:9px;background:#fdfdf9}
.collection-page .card.resource-card .resource-image{display:block;width:100%;height:auto;
  aspect-ratio:3/2;object-fit:cover;background:#eff3e8;transition:transform .3s ease}
.collection-page .card.resource-card:hover .resource-image{transform:scale(1.035)}
.collection-page .card.resource-card .resource-copy{display:flex;flex-direction:column;padding:18px}
.collection-page .card.resource-card .resource-copy h3{font-size:16px;line-height:1.55;margin:7px 0 0;color:#3d5943}
.collection-page .card.resource-card .resource-copy p{margin:9px 0 15px}
.collection-page .card.resource-card .resource-bottom{margin-top:auto;padding-top:12px;
  border-top:1px solid #edf0e5;display:flex;align-items:center;justify-content:space-between;gap:7px}
.collection-page .card.resource-card .resource-bottom .soft-tag{font-size:14px;padding:3px 8px;
  border-radius:5px;border:1px solid #e2e8d8;background:#eff3e8;color:#7f956a;white-space:nowrap}
.collection-page .card.resource-card .resource-bottom .more-link{margin:0;font-size:14px!important;
  color:#617b50;white-space:nowrap}
@media(max-width:1023px){
  .collection-page .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
}

/* ===== 手机端收口（2026-11-12 夜，旭哥手机验收五条）=====
   全部写在文件末尾：本文件上方已有的手机规则（例如 103 行那条 3D 卡 72px 横条）
   特异性相同，后写的赢，不需要再叠 !important。 */

/* ① 导航短名：桌面显示全名，≤640 换成「首页 / 学段 / 专题 / 更多 / 日志」。
   两套标签由 site/side-nav.js 一起输出，主站与四个子应用共用同一份结构。
   类名避开 .nav-label —— ui-review.css 的可读性清单里有 .nav-label{display:none!important}。 */
.app-shell .nav-mini{display:none}
@media(max-width:640px){
  .app-shell .nav-full{display:none}
  .app-shell .nav-mini{display:inline}
}

/* ② 底部反馈条：手机上只留图标 + 「聊聊你的想法 →」。
   原来两行文案在 354px 宽里折成 6 行，整条撑到 158px 高；
   文案在桌面仍有完整版，这里只收手机。 */
@media(max-width:640px){
  .app-shell .feedback-banner{flex-wrap:nowrap;align-items:center;gap:12px;padding:15px 18px}
  .app-shell .feedback-banner>div{display:none}
  .app-shell .feedback-banner>a{margin-left:auto}
  .app-shell .feedback-icon{padding:9px}
}

/* ③ 3D 实验室资源卡：手机上 2 列会把标题压成 5 行、缩略图只剩 72px。
   改单列：图在上 3:2 满宽，文字在下，底部标签与入口同一行。 */
@media(max-width:640px){
  .collection-page .grid{grid-template-columns:minmax(0,1fr);gap:14px}
  .collection-page .card.resource-card{display:block;min-height:0}
  .collection-page .card.resource-card .resource-image{width:100%;height:auto;
    min-height:0;max-height:none;aspect-ratio:3/2;object-fit:cover}
  .collection-page .card.resource-card .resource-copy{padding:16px}
  .collection-page .card.resource-card .resource-copy h3{font-size:18px;line-height:1.5;margin:6px 0 0}
  .collection-page .card.resource-card .resource-copy p{font-size:14px;line-height:1.75;margin:8px 0 14px}
}