:root[data-theme="fresh"] {
  --paper: #f2f8f6;
  --ink: #143b36;
  --muted: #526f68;
  --blue: #087b67;
  --line: #cfdfd9;
  --soft: #e0f2e9;
  --clay: #a54b32;
  --surface: #ffffff;
  --surface-muted: #e5f1e9;
  --nav-surface: #f6fbf9;
  --number-font: Inter, system-ui, sans-serif;
}
:root[data-theme="clear"] {
  --paper: #f6f8fc;
  --ink: #142b4b;
  --muted: #455c75;
  --blue: #174d8b;
  --line: #a5b7cb;
  --soft: #e5edf8;
  --clay: #914127;
  --surface: #ffffff;
  --surface-muted: #edf2f8;
  --nav-surface: #ffffff;
  --number-font: Inter, "Microsoft YaHei", sans-serif;
  font-size: 18px;
}
.appearance-options {
  border: 0;
  padding: 0;
  margin: 24px 0;
  min-width: 0;
}
.appearance-options legend {
  padding: 0;
  font-size: 17px;
  font-weight: 550;
  margin-bottom: 14px;
}
.theme-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.theme-option {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 12px;
  background: transparent;
  cursor: pointer;
  min-width: 0;
}
.theme-option:has(input:checked) {
  border: 2px solid var(--blue);
  padding: 11px;
  background: var(--soft);
}
.theme-option:focus-within {
  outline: 3px solid #bc8743;
  outline-offset: 3px;
}
.theme-option-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 550;
}
.theme-option input {
  width: 17px;
  height: 17px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--blue);
}
.theme-option small {
  display: block;
  font-size: 11px;
  line-height: 1.8;
  color: var(--muted);
}
.theme-swatch {
  height: 66px;
  padding: 11px;
  border-radius: 7px;
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 10px;
  background: var(--sample-paper);
  border: 1px solid var(--sample-line);
}
.theme-swatch i {
  display: block;
  border-radius: 4px;
  background: var(--sample-accent);
}
.theme-swatch span {
  display: flex;
  flex-direction: column;
  gap: 7px;
  justify-content: center;
}
.theme-swatch span::before,
.theme-swatch span::after {
  content: "";
  height: 7px;
  background: var(--sample-line);
  border-radius: 4px;
}
.theme-swatch span::after {
  width: 65%;
  background: var(--sample-accent);
}
.theme-option[data-sample="warm"] {
  --sample-paper: #f8f5ed;
  --sample-line: #d8d4c8;
  --sample-accent: #3459d6;
}
.theme-option[data-sample="fresh"] {
  --sample-paper: #eff9f3;
  --sample-line: #c3e1d3;
  --sample-accent: #087b67;
}
.theme-option[data-sample="clear"] {
  --sample-paper: #fff;
  --sample-line: #a5b7cb;
  --sample-accent: #174d8b;
}
:root:is(
    [data-theme="fresh"],
    [data-theme="clear"],
    [data-theme="lavender"],
    [data-theme="amber"],
    [data-theme="night"]
  )
  .sidebar {
  background: var(--nav-surface);
}
:root:is(
    [data-theme="fresh"],
    [data-theme="clear"],
    [data-theme="lavender"],
    [data-theme="amber"],
    [data-theme="night"]
  )
  :is(
    .hero,
    .panel,
    .small-task,
    .challenge-card,
    .method-step,
    .flow-empty,
    .badge,
    .share-preview-wrap
  ) {
  background: var(--surface);
}
:root:is(
    [data-theme="fresh"],
    [data-theme="clear"],
    [data-theme="lavender"],
    [data-theme="amber"],
    [data-theme="night"]
  )
  .hero {
  border-color: var(--line);
}
:root:is(
    [data-theme="fresh"],
    [data-theme="clear"],
    [data-theme="lavender"],
    [data-theme="amber"],
    [data-theme="night"]
  )
  .hero-art:after {
  background: linear-gradient(90deg, var(--surface), transparent 35%);
}
:root:is(
    [data-theme="fresh"],
    [data-theme="clear"],
    [data-theme="lavender"],
    [data-theme="amber"],
    [data-theme="night"]
  )
  .small-task {
  background: var(--surface-muted);
}
:root:is(
    [data-theme="fresh"],
    [data-theme="clear"],
    [data-theme="lavender"],
    [data-theme="amber"],
    [data-theme="night"]
  )
  :is(.counter, .metric b, .big-number, .sidebar-bottom, .bar) {
  font-family: var(--number-font);
}
:root:is(
    [data-theme="fresh"],
    [data-theme="clear"],
    [data-theme="lavender"],
    [data-theme="amber"],
    [data-theme="night"]
  )
  .counter {
  font-weight: 550;
  letter-spacing: -2px;
}
:root:is(
    [data-theme="fresh"],
    [data-theme="clear"],
    [data-theme="lavender"],
    [data-theme="amber"],
    [data-theme="night"]
  )
  .metric
  b {
  font-weight: 550;
}
:root:is(
    [data-theme="fresh"],
    [data-theme="clear"],
    [data-theme="lavender"],
    [data-theme="amber"],
    [data-theme="night"]
  )
  :is(
    .field input,
    .field select,
    .field textarea,
    .date-picker,
    .flow-textarea
  ) {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}
:root:is(
    [data-theme="fresh"],
    [data-theme="clear"],
    [data-theme="lavender"],
    [data-theme="amber"],
    [data-theme="night"]
  )
  :is(.primary, .help-button, .nav a.active) {
  background: var(--blue);
  color: #fff;
}
:root:is(
    [data-theme="fresh"],
    [data-theme="clear"],
    [data-theme="lavender"],
    [data-theme="amber"],
    [data-theme="night"]
  )
  .primary:hover {
  filter: brightness(0.9);
  background: var(--blue);
}
:root:is(
    [data-theme="fresh"],
    [data-theme="clear"],
    [data-theme="lavender"],
    [data-theme="amber"],
    [data-theme="night"]
  )
  .secondary {
  border-color: var(--line);
  background: var(--surface);
}
:root:is(
    [data-theme="fresh"],
    [data-theme="clear"],
    [data-theme="lavender"],
    [data-theme="amber"],
    [data-theme="night"]
  )
  .secondary:hover {
  background: var(--soft);
}
:root:is(
    [data-theme="fresh"],
    [data-theme="clear"],
    [data-theme="lavender"],
    [data-theme="amber"],
    [data-theme="night"]
  )
  :is(
    .pill,
    .notice,
    .tool-feature,
    .return-guide,
    .tabs button.selected,
    .chip.selected,
    .badge.earned .badge-mark,
    .calendar button.is-free
  ) {
  background: var(--soft);
  color: var(--blue);
}
:root:is(
    [data-theme="fresh"],
    [data-theme="clear"],
    [data-theme="lavender"],
    [data-theme="amber"],
    [data-theme="night"]
  )
  .calendar
  button.is-reviewed:not(.is-free) {
  background: var(--surface-muted);
  color: var(--ink);
}
:root:is(
    [data-theme="fresh"],
    [data-theme="clear"],
    [data-theme="lavender"],
    [data-theme="amber"],
    [data-theme="night"]
  )
  .legend
  i {
  background: var(--soft);
}
:root:is(
    [data-theme="fresh"],
    [data-theme="clear"],
    [data-theme="lavender"],
    [data-theme="amber"],
    [data-theme="night"]
  )
  .legend
  .record {
  background: var(--surface-muted);
}
:root:is(
    [data-theme="fresh"],
    [data-theme="clear"],
    [data-theme="lavender"],
    [data-theme="amber"],
    [data-theme="night"]
  )
  .notice.clay {
  background: #f8ebe1;
  color: #7d3924;
}
:root:is(
    [data-theme="fresh"],
    [data-theme="clear"],
    [data-theme="lavender"],
    [data-theme="amber"],
    [data-theme="night"]
  )
  .badge:not(.earned)
  .badge-mark {
  background: var(--surface-muted);
  color: var(--muted);
}
:root:is(
    [data-theme="fresh"],
    [data-theme="clear"],
    [data-theme="lavender"],
    [data-theme="amber"],
    [data-theme="night"]
  )
  .progress-track {
  background: var(--line);
}
:root:is(
    [data-theme="fresh"],
    [data-theme="clear"],
    [data-theme="lavender"],
    [data-theme="amber"],
    [data-theme="night"]
  )
  :is(.progress-track span, .bar i) {
  background: var(--blue);
}
:root:is(
    [data-theme="fresh"],
    [data-theme="clear"],
    [data-theme="lavender"],
    [data-theme="amber"],
    [data-theme="night"]
  )
  .return-guide {
  border-color: var(--line);
}
:root:is(
    [data-theme="fresh"],
    [data-theme="clear"],
    [data-theme="lavender"],
    [data-theme="amber"],
    [data-theme="night"]
  )
  .return-guide-icon {
  background: var(--surface);
}
:root:is(
    [data-theme="fresh"],
    [data-theme="clear"],
    [data-theme="lavender"],
    [data-theme="amber"],
    [data-theme="night"]
  )
  .orbit {
  background: var(--soft);
  border-color: var(--line);
}
:root:is(
    [data-theme="fresh"],
    [data-theme="clear"],
    [data-theme="lavender"],
    [data-theme="amber"],
    [data-theme="night"]
  )
  .orbit::before,
:root:is(
    [data-theme="fresh"],
    [data-theme="clear"],
    [data-theme="lavender"],
    [data-theme="amber"],
    [data-theme="night"]
  )
  .orbit::after {
  border-color: var(--blue);
  background: transparent;
}
:root:is(
    [data-theme="fresh"],
    [data-theme="clear"],
    [data-theme="lavender"],
    [data-theme="amber"],
    [data-theme="night"]
  )
  .mini-orbit,
:root:is(
    [data-theme="fresh"],
    [data-theme="clear"],
    [data-theme="lavender"],
    [data-theme="amber"],
    [data-theme="night"]
  )
  .mini-orbit::after {
  border-color: var(--blue);
}
:root:is(
    [data-theme="fresh"],
    [data-theme="clear"],
    [data-theme="lavender"],
    [data-theme="amber"],
    [data-theme="night"]
  )
  .article
  blockquote {
  background: var(--soft);
}
:root[data-theme="fresh"]
  :is(
    .hero,
    .panel,
    .small-task,
    .tool-feature,
    .challenge-card,
    .help-button,
    .badge
  ) {
  border-radius: 22px;
}
:root[data-theme="fresh"] .hero {
  box-shadow: 0 8px 32px #245c4610;
}
:root[data-theme="fresh"] :is(.primary, .secondary) {
  border-radius: 14px;
}
:root[data-theme="fresh"] .help-button {
  background: linear-gradient(110deg, #087b67, #176b58);
}
:root[data-theme="fresh"] .page-head h1 {
  font-weight: 600;
  letter-spacing: -0.5px;
}
:root[data-theme="fresh"] .editorial-banner {
  border-radius: 20px;
  border: 1px solid var(--line);
}
:root[data-theme="clear"]
  :is(
    .hero,
    .panel,
    .small-task,
    .challenge-card,
    .badge,
    .tool-feature,
    .return-guide
  ) {
  border-radius: 9px;
  border: 1.5px solid var(--line);
  box-shadow: none;
}
:root[data-theme="clear"] :is(h1, h2, h3, .list-button b) {
  font-weight: 650;
}
:root[data-theme="clear"] h1 {
  font-size: 32px;
  letter-spacing: 0;
}
:root[data-theme="clear"] h2 {
  font-size: 22px;
}
:root[data-theme="clear"]
  :is(
    p,
    .muted,
    .subtext,
    .list-button small,
    .field,
    .notice,
    .calendar-copy,
    .preference small,
    .calendar-copy,
    .radio-option small,
    .flow-note,
    .share-controls > p
  ) {
  font-size: 16px;
  line-height: 1.95;
}
:root[data-theme="clear"]
  :is(
    .primary,
    .secondary,
    .list-button b,
    .preference,
    .nav a,
    .field input,
    .field select,
    .field textarea,
    .link
  ) {
  font-size: 17px;
}
:root[data-theme="clear"] :is(.primary, .secondary) {
  min-height: 54px;
  border-radius: 8px;
  border-width: 1.5px;
}
:root[data-theme="clear"] .icon-button {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
:root[data-theme="clear"] .theme-option input {
  width: 21px;
  height: 21px;
}
:root[data-theme="clear"] .help-button {
  padding: 26px;
  border-radius: 10px;
}
:root[data-theme="clear"] .help-button b {
  font-size: 25px;
}
:root[data-theme="clear"] .help-button small {
  font-size: 15px;
  opacity: 1;
}
:root[data-theme="clear"] .list-button {
  padding: 24px 0;
}
:root[data-theme="clear"]
  :is(
    .metric span,
    .pill,
    .badge small,
    .calendar > span,
    .eyebrow,
    .topbar,
    .record-row small,
    .field small,
    .share-checkboxes label
  ) {
  font-size: 13px;
}
:root[data-theme="clear"] .calendar button {
  font-size: 16px;
  border-radius: 5px;
}
:root[data-theme="clear"] .badge small {
  line-height: 1.9;
}
:root[data-theme="clear"] .return-guide h2 {
  font-size: 20px;
}
:root[data-theme="clear"] .theme-option-heading {
  font-size: 16px;
}
:root[data-theme="clear"] .theme-option small {
  font-size: 13px;
}
:root[data-theme="clear"] .welcome-steps b {
  font-size: 17px;
}
:root[data-theme="clear"] .welcome-steps small {
  font-size: 14px;
}
:root[data-theme="clear"] .theme-options {
  gap: 14px;
}
:root[data-theme="clear"].large-text
  :is(
    p,
    .muted,
    .subtext,
    .list-button small,
    .field,
    .notice,
    .calendar-copy,
    .preference small,
    .radio-option small
  ) {
  font-size: 19px;
}
@media (max-width: 760px) {
  :root:is(
      [data-theme="fresh"],
      [data-theme="clear"],
      [data-theme="lavender"],
      [data-theme="amber"],
      [data-theme="night"]
    )
    .sidebar {
    background: var(--nav-surface);
  }
  :root:is(
      [data-theme="fresh"],
      [data-theme="clear"],
      [data-theme="lavender"],
      [data-theme="amber"],
      [data-theme="night"]
    )
    .nav
    a.active {
    background: var(--soft);
    color: var(--blue);
  }
  :root[data-theme="clear"] h1 {
    font-size: 28px;
  }
  :root[data-theme="clear"] .nav a {
    font-size: 12px;
    min-height: 60px;
  }
  :root[data-theme="clear"] .nav a.active {
    color: #fff;
    background: var(--blue);
  }
  :root[data-theme="clear"] .hero {
    grid-template-columns: 1fr;
  }
  :root[data-theme="clear"] .hero-copy {
    padding: 25px;
  }
  :root[data-theme="clear"] .hero-art {
    min-height: 130px;
  }
  :root[data-theme="clear"] .hero-art:after {
    background: linear-gradient(180deg, var(--surface), transparent 45%);
  }
  :root[data-theme="clear"] .hero .subtext {
    font-size: 15px;
  }
  :root[data-theme="clear"] .quick-buttons {
    grid-template-columns: 1fr;
  }
  :root[data-theme="clear"] .metric b {
    font-size: clamp(20px, 6.6vw, 27px);
  }
  :root[data-theme="clear"] .metric span {
    font-size: 12px;
  }
  :root[data-theme="clear"] .calendar {
    gap: 4px;
  }
  :root[data-theme="clear"] .feedback {
    flex-direction: column;
  }
  :root[data-theme="clear"] .feedback button {
    min-height: 54px;
  }
  .theme-options {
    grid-template-columns: 1fr;
  }
  .theme-option {
    display: grid;
    grid-template-columns: 86px 1fr;
    column-gap: 16px;
    align-items: center;
  }
  .theme-swatch {
    grid-row: 1/3;
  }
  .theme-option-heading {
    font-size: 15px;
  }
  .theme-option small {
    font-size: 12px;
  }
  :root[data-theme="clear"] .share-checkboxes {
    grid-template-columns: 1fr;
  }
  :root[data-theme="clear"] .field-row {
    grid-template-columns: 1fr;
  }
}

:root[data-theme="lavender"] {
  --paper: #f7f3fb;
  --ink: #38264c;
  --muted: #73617e;
  --blue: #79529d;
  --line: #ddd0e6;
  --soft: #ece2f4;
  --clay: #a34d59;
  --surface: #fffafd;
  --surface-muted: #f0e8f5;
  --nav-surface: #f4edf8;
  --number-font: Inter, system-ui, sans-serif;
}
:root[data-theme="amber"] {
  --paper: #f7f0e5;
  --ink: #47382c;
  --muted: #7c6b57;
  --blue: #8a542b;
  --line: #d9cab4;
  --soft: #f0e2c9;
  --clay: #9d4933;
  --surface: #fffbf2;
  --surface-muted: #f2e8d7;
  --nav-surface: #eee2cd;
  --number-font: Georgia, "Songti SC", serif;
}
:root[data-theme="night"] {
  color-scheme: dark;
  --paper: #131d29;
  --ink: #e9edf1;
  --muted: #a9b7c5;
  --blue: #9fcdbd;
  --line: #3a4c5d;
  --soft: #273e40;
  --clay: #efb69c;
  --surface: #1c2a38;
  --surface-muted: #243343;
  --nav-surface: #172431;
  --number-font: Inter, system-ui, sans-serif;
}
.theme-option[data-sample="lavender"] {
  --sample-paper: #f7f3fb;
  --sample-line: #ddd0e6;
  --sample-accent: #79529d;
}
.theme-option[data-sample="amber"] {
  --sample-paper: #f7f0e5;
  --sample-line: #d9cab4;
  --sample-accent: #8a542b;
}
.theme-option[data-sample="night"] {
  --sample-paper: #131d29;
  --sample-line: #3a4c5d;
  --sample-accent: #9fcdbd;
}
:root[data-theme="lavender"]
  :is(.hero, .panel, .small-task, .challenge-card, .badge, .tool-feature) {
  border-radius: 28px;
  box-shadow: 0 8px 24px #79529d08;
}
:root[data-theme="lavender"] :is(.primary, .secondary) {
  border-radius: 24px;
}
:root[data-theme="lavender"] .page-head h1 {
  letter-spacing: 1px;
  font-weight: 500;
}
:root[data-theme="amber"] :is(h1, h2, .counter) {
  font-family: var(--serif);
}
:root[data-theme="amber"]
  :is(.hero, .panel, .small-task, .challenge-card, .badge) {
  border-radius: 4px;
}
:root[data-theme="amber"] .sidebar {
  border-right: 3px double var(--line);
}
:root[data-theme="amber"] .page-head {
  border-bottom: 1px solid var(--line);
  padding-bottom: 22px;
}
:root[data-theme="night"]
  :is(.hero, .panel, .small-task, .challenge-card, .badge, .tool-feature) {
  border-radius: 16px;
}
:root[data-theme="night"] :is(.primary, .help-button, .nav a.active) {
  color: #142c26;
}
:root[data-theme="night"] :is(.hero-art img, .editorial-banner img) {
  filter: brightness(0.8) saturate(0.8);
}
:root[data-theme="night"] :is(.support-link, .support-link:hover) {
  background: #c97546;
  color: #161b22;
}
:root[data-theme="night"] :is(.notice.clay, .usage-context) {
  background: #3b302d;
  color: #f3c0a7;
}
:root[data-theme="night"]
  :is(.calendar button.is-today, .calendar button.is-reviewed) {
  color: var(--ink);
}
:root[data-theme="night"]
  :is(
    .badge-mark,
    .sound-track,
    .plan-option,
    .radio-option,
    .theme-option:has(input:checked)
  ) {
  background: var(--surface);
}
:root[data-theme="night"] :is(.danger, .form-error, .error) {
  color: #ffb5a5;
}
:root[data-theme="night"] .sound-track.selected {
  background: var(--soft);
  color: var(--ink);
}
:root[data-theme="night"] .share-preview-wrap {
  background: var(--surface);
}
:root[data-theme="night"] .share-preview-wrap .muted {
  color: var(--muted);
}
.goal-panel {
  margin: 28px 0;
}
.milestone-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 22px 0;
}
.milestone {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  min-width: 0;
}
.milestone span {
  min-width: 0;
}
.milestone b {
  display: block;
  font-size: 15px;
}
.milestone small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 5px;
}
.milestone.achieved {
  background: var(--soft);
  border-color: var(--blue);
  color: var(--blue);
}
.goal-note {
  font-size: 12px;
  line-height: 1.9;
}
@media (max-width: 600px) {
  .milestone-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .milestone {
    padding: 12px 9px;
    gap: 7px;
  }
  .theme-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .theme-option {
    display: flex;
    align-items: stretch;
    gap: 10px;
  }
  .theme-option-heading {
    flex-wrap: wrap;
    font-size: 13px;
  }
  .theme-swatch {
    height: 56px;
  }
}

.achievement-notice {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px;
  border: 1px solid var(--blue);
  border-radius: 14px;
  background: var(--soft);
  margin: 20px 0 28px;
}
.achievement-notice-mark {
  display: grid;
  place-items: center;
  color: var(--blue);
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border: 1px solid var(--blue);
  border-radius: 50%;
}
.achievement-notice h2 {
  font-size: 18px;
  margin: 0 0 6px;
}
.achievement-notice p {
  font-size: 13px;
  line-height: 1.8;
  margin: 0;
  color: var(--muted);
}
.achievement-notice .actions {
  margin: 12px 0 0;
}
.achievement-notice .primary {
  min-height: 40px;
  font-size: 13px;
  padding: 9px 14px;
}
:root[data-theme="night"] .player-main {
  color: #142c26;
}
:root[data-theme="night"] .toast {
  background: #e9edf1;
  color: #131d29;
}
:root[data-theme="night"] :is(.welcome-step, .usage-guide, .usage-guide-step) {
  background: var(--surface);
}
:root[data-theme="night"] .postcard {
  background: var(--surface);
}
@media (max-width: 600px) {
  .achievement-notice {
    padding: 17px;
    gap: 12px;
  }
}
:root[data-theme="night"] .support-link small {
  color: #2b1b14;
}
@media (max-width: 760px) {
  :root[data-theme="night"] .nav a.active {
    background: var(--soft);
    color: var(--blue);
  }
}

.reading-intro {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--soft);
}
.reading-intro h2 {
  margin: 8px 0 12px;
}
.reading-intro p {
  font-size: 13px;
  margin: 6px 0;
}
.reading-symbol {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 64px;
  height: 84px;
  border: 1px solid var(--blue);
  border-left: 4px solid var(--blue);
  border-radius: 3px 9px 9px 3px;
  color: var(--blue);
}
.reading-symbol svg {
  width: 30px;
  height: 30px;
}
.reading-cards {
  margin-top: 18px;
  gap: 0 32px;
}
.reading-quote-source {
  display: block;
  margin-top: 12px;
  color: var(--muted);
  font-family: Inter, "Microsoft YaHei", sans-serif;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.8;
}
.reading-practice {
  padding: 18px 20px;
  margin: 22px 0;
  border-left: 3px solid var(--blue);
  background: var(--soft);
  border-radius: 0 10px 10px 0;
}
.reading-practice h3 {
  font-size: 15px;
  margin: 0 0 8px;
}
.reading-practice p {
  margin: 0;
  font-size: 14px;
}
.reading-citation {
  margin: 22px 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}
.reading-citation p {
  font-size: 11px;
  line-height: 1.9;
  margin: 6px 0;
  overflow-wrap: anywhere;
}
.reading-citation .actions {
  gap: 12px 20px;
}
.reading-citation a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  min-height: 36px;
}
.reading-citation svg {
  width: 15px;
  height: 15px;
}
@media (max-width: 600px) {
  .reading-intro {
    padding: 20px 17px;
    gap: 15px;
  }
  .reading-symbol {
    width: 46px;
    height: 66px;
  }
  .reading-intro h2 {
    font-size: 19px;
  }
}

/* Focused overview pages and secondary collections. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.hub-page .section {
  margin: 24px 0;
}
.hub-page .page-head,
.today-page .page-head,
.progress-overview .page-head {
  margin-top: 24px;
  margin-bottom: 24px;
}
.hub-page .page-head h1,
.today-page .page-head h1,
.progress-overview .page-head h1 {
  font-size: 28px;
}
.compact-list > .list-button {
  padding: 15px 0;
}
.compact-list > .list-button small {
  margin-top: 5px;
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 24px;
  font-size: 13px;
}
.back-link + .page-head {
  margin-top: 18px;
}
.identity-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.identity-card h2 {
  font-size: 20px;
}
.identity-card .subtext {
  margin-bottom: 0;
}
.account-note {
  font-size: 12px;
  line-height: 1.8;
}
.about-link {
  display: inline-block;
  margin: 8px 0;
  font-size: 13px;
}
.compact-goal {
  margin: 22px 0;
  padding: 18px 22px;
}
.compact-goal .list-button {
  padding: 0 0 14px;
  border: 0;
}
.compact-goal .list-button small {
  font-size: 12px;
}
.compact-goal > .link {
  margin-top: 14px;
}
.disclosure {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin: 22px 0 10px;
  font-size: 13px;
  line-height: 1.85;
}
.disclosure summary {
  cursor: pointer;
  color: var(--blue);
  min-height: 30px;
}
.disclosure p {
  font-size: 13px;
  line-height: 1.9;
}
.category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.category-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface, var(--paper));
  text-decoration: none;
  color: var(--ink);
}
.category-card > svg:first-child {
  color: var(--blue);
  margin-top: 3px;
}
.category-card > svg:last-child {
  margin-left: auto;
  width: 16px;
  color: var(--muted);
}
.category-card span {
  flex: 1;
  min-width: 0;
}
.category-card b {
  display: block;
  font-size: 16px;
  font-weight: 550;
}
.category-card small {
  display: block;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.7;
  margin-top: 9px;
}
.collection-search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 12px;
}
.collection-search input,
.collection-filter select {
  min-width: 0;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px 12px;
  color: var(--ink);
  background: var(--surface, var(--paper));
  font-size: 14px;
}
.collection-search input {
  flex: 1;
  width: 100%;
}
.collection-search > .secondary {
  min-height: 44px;
  padding: 10px 13px;
}
.collection-filter {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  color: var(--muted);
  margin: 14px 0;
}
.collection-filter select {
  flex: 1;
  max-width: 280px;
}
.collection-caption {
  font-size: 12px;
  color: var(--muted);
  margin: 16px 0 10px;
}
.collection-results {
  scroll-margin-top: 100px;
}
.collection-results:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 6px;
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 22px 0;
}
.pagination > span {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.pagination .secondary {
  font-size: 13px;
  min-height: 44px;
  padding: 10px 14px;
}
.challenge-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.challenge-choice h3 {
  font-size: 17px;
  margin: 7px 0;
}
.challenge-choice p {
  margin: 0;
  font-size: 12px;
  line-height: 1.7;
}
.challenge-choice .link {
  flex-shrink: 0;
  font-size: 13px;
}
.current-challenge {
  padding: 22px;
}
.current-challenge h2 {
  font-size: 20px;
}
.current-challenge .disclosure {
  margin-top: 15px;
  padding-top: 12px;
}
.collection-results .badge-grid {
  margin-top: 14px;
}
.collection-results .badge {
  padding: 20px 14px;
}
.collection-results .badge-mark {
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
}
.reading-section .reading-cards {
  display: block;
}
.main .editorial-banner img {
  height: 115px;
}
.main footer {
  margin-top: 26px;
  padding-top: 18px;
}
.today-hero {
  min-height: 190px;
  grid-template-columns: minmax(0, 1fr) 30%;
}
.today-hero .hero-copy {
  padding: 24px;
}
.today-hero .hero-art {
  min-height: 0;
}
.today-hero .counter {
  font-size: 46px;
  margin: 8px 0;
}
.today-hero h2 {
  font-size: 22px;
  line-height: 1.6;
  margin-bottom: 8px;
}
.today-hero .subtext {
  font-size: 12px;
  margin: 6px 0 12px;
}
.today-hero .link {
  font-size: 13px;
}
.today-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
  margin: 20px 0;
}
.baseline-prompt {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  padding: 18px 20px;
  border: 1px solid var(--blue);
  border-radius: 16px;
  background: var(--soft);
}
.baseline-prompt > svg {
  flex: 0 0 24px;
  color: var(--blue);
}
.baseline-prompt > div {
  flex: 1;
  min-width: 0;
}
.baseline-prompt h2 {
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 4px;
}
.baseline-prompt p,
.summary-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
  margin: 0;
}
.baseline-prompt button {
  flex-shrink: 0;
}
.today-summary {
  padding: 20px 24px;
  margin-top: 18px;
}
.today-summary .section-head {
  margin-bottom: 0;
}
.today-summary .section-head h2 {
  font-size: 17px;
}
.today-summary .metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 22px 0 18px;
}
.today-summary .metric b {
  font-size: 34px;
  color: var(--blue);
}
.today-bottom:has(> :only-child) {
  grid-template-columns: 1fr;
}
@media (max-width: 640px) {
  .baseline-prompt {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    padding: 16px;
    gap: 12px;
  }
  .baseline-prompt button {
    grid-column: 1 / -1;
    width: 100%;
  }
  .today-summary {
    padding: 18px;
  }
  .today-summary .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 14px;
  }
}
.today-actions .help-button {
  padding: 19px 22px;
  min-height: 84px;
}
.today-actions .help-button b {
  font-size: 21px;
}
.today-actions .help-button small {
  font-size: 12px;
  margin-top: 5px;
}
.today-actions .quick-buttons {
  margin: 0;
  align-content: stretch;
}
.today-actions .quick-buttons > * {
  font-size: 15px;
  padding: 12px;
}
.today-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 20px 0;
}
.today-bottom .panel {
  padding: 20px 22px;
}
.today-bottom .section-head {
  margin-bottom: 16px;
}
.today-bottom .section-head h2 {
  font-size: 16px;
}
.today-task h3 {
  font-size: 18px;
  line-height: 1.7;
  margin-bottom: 12px;
}
.today-task .link {
  font-size: 13px;
}
.today-progress .metrics {
  margin: 0;
  gap: 16px;
}
.today-progress .metric b {
  font-size: 32px;
}
.today-progress .metric span {
  font-size: 12px;
}
.today-extras {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.today-extras > .list-button {
  grid-column: 1/-1;
  padding: 12px 0;
}
.today-extras > .secondary {
  font-size: 13px;
}
.compact-usage {
  margin: 20px 0;
  padding: 18px 20px;
}
.compact-usage h2 {
  font-size: 16px;
  line-height: 1.6;
}
.compact-usage p {
  font-size: 12px;
  line-height: 1.8;
  margin: 7px 0;
}
.compact-usage .actions {
  align-items: center;
  gap: 14px;
  margin-top: 12px;
}
.compact-usage .primary {
  min-height: 40px;
  padding: 8px 14px;
  font-size: 13px;
}
.compact-usage .icon-button {
  margin-left: auto;
}
.compact-notice {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
  margin: 16px 0;
  border-radius: 10px;
}
.compact-notice > svg {
  color: var(--blue);
}
.compact-notice > span {
  flex: 1;
  font-size: 13px;
}
.compact-notice > .link {
  font-size: 13px;
  white-space: nowrap;
}
.compact-notice > .icon-button {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
@media (max-width: 760px) {
  .category-card {
    padding: 17px 14px;
    gap: 10px;
    flex-wrap: wrap;
  }
  .category-card > svg:last-child {
    display: none;
  }
  .category-card > span {
    flex-basis: calc(100% - 35px);
  }
  .category-card b {
    font-size: 15px;
  }
  .category-card small {
    font-size: 12px;
  }
  .today-actions {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .today-actions .quick-buttons {
    grid-template-columns: 1fr 1fr;
  }
  .today-bottom {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .today-hero .hero-copy {
    padding: 19px;
  }
  .today-hero .counter {
    font-size: 42px;
  }
  .today-progress .metrics {
    grid-template-columns: 1fr 1fr;
  }
  .today-progress .metric b {
    font-size: 27px;
  }
  .challenge-choice {
    gap: 12px;
  }
  .challenge-choice h3 {
    font-size: 16px;
  }
  .challenge-choice .link {
    font-size: 12px;
  }
  .pagination .secondary {
    padding: 10px 11px;
  }
  :root[data-theme="clear"] .today-hero {
    grid-template-columns: minmax(0, 1fr) 26%;
  }
  :root[data-theme="clear"] .today-hero .hero-art {
    min-height: 0;
  }
  :root[data-theme="clear"] .today-hero .counter {
    font-size: 38px;
  }
  :root[data-theme="clear"] .category-card small {
    font-size: 13px;
  }
}

.today-bottom > :only-child {
  grid-column: 1/-1;
}
.today-page .page-head,
.hub-page .page-head,
.progress-overview .page-head {
  flex-wrap: nowrap;
}
.today-page .page-head > div,
.hub-page .page-head > div,
.progress-overview .page-head > div {
  width: auto;
  min-width: 0;
}
.hub-page .page-head > .link,
.progress-overview .page-head > .link {
  flex-shrink: 0;
  font-size: 13px;
}
@media (min-width: 761px) {
  .today-hero .hero-art::after {
    background: linear-gradient(
      90deg,
      var(--surface, var(--paper)),
      transparent 40%
    );
  }
}
@media (max-width: 760px) {
  .today-hero .hero-art::after {
    background: linear-gradient(
      90deg,
      var(--surface, var(--paper)),
      transparent 35%
    );
  }
}

.compact-list .list-button b,
.challenge-choice h3,
.collection-results .badge b {
  overflow-wrap: anywhere;
}
#results-records .record-row small {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}