:root {
  color-scheme: light;
  --bg: #f2ede3;
  --surface: #fbf8f0;
  --text-primary: #1b1916;
  --text-secondary: #746e64;
  --border: #d9d1c4;
  --accent: #a53f2b;
  --accent-soft: #f1dfd5;
  --tag-bg: #e8e1d6;
  --saved: #39634f;
  --error: #9f302c;
  --warning: #8b5d21;
  --ink: var(--text-primary);
  --ink-soft: var(--text-secondary);
  --paper: var(--bg);
  --paper-deep: var(--tag-bg);
  --accent-dark: #742a20;
  --accent-border: #d8bbae;
  --saved-soft: #e3ece5;
  --line: var(--border);
  --white: var(--surface);
  --surface-translucent: rgba(251, 248, 240, 0.78);
  --header-bg: rgba(242, 237, 227, 0.96);
  --mobile-nav-bg: rgba(251, 248, 240, 0.98);
  --highlight-strong: rgba(165, 63, 43, 0.2);
  --shadow-subtle: rgba(55, 43, 31, 0.045);
  --shadow-popover: rgba(55, 43, 31, 0.16);
  --display: "Iowan Old Style", "Palatino Linotype", Palatino, "Songti SC", STSong, Georgia, serif;
  --reading: "Songti SC", STSong, "Noto Serif CJK SC", "Source Han Serif SC", SimSun, Georgia, serif;
  --sans: "Avenir Next", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: var(--bg);
}

button, select, input, textarea { font: inherit; }

button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 10;
  padding: 0.75rem 1rem;
  color: var(--white);
  background: var(--ink);
  transform: translateY(-150%);
}

.skip-link:focus { transform: translateY(0); }

.site-header,
main,
footer {
  width: min(1180px, calc(100% - 3rem));
  margin-inline: auto;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 86px;
  border-bottom: 1px solid var(--line);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
}

.wordmark__mark {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  color: var(--paper);
  background: var(--ink);
  border-radius: 50%;
}

.phase-label,
.eyebrow,
.state-control,
#result-count {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.phase-label { color: var(--ink-soft); }

.header-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.vocabulary-link {
  display: inline-flex;
  gap: 0.55rem;
  align-items: center;
  min-height: 40px;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  cursor: pointer;
}

.vocabulary-link:hover { color: var(--white); background: var(--ink); }
.vocabulary-link:disabled { cursor: wait; opacity: 0.55; }

#vocabulary-count {
  display: grid;
  min-width: 1.45rem;
  min-height: 1.45rem;
  padding: 0.15rem;
  place-items: center;
  color: var(--white);
  background: var(--accent-dark);
  border-radius: 50%;
  font-size: 0.72rem;
  line-height: 1;
}

.intro {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(16rem, 0.7fr);
  gap: 5rem;
  align-items: end;
  padding: clamp(4rem, 10vw, 8rem) 0 clamp(3rem, 7vw, 5rem);
}

.eyebrow {
  margin: 0 0 1rem;
  color: var(--accent-dark);
}

h1,
h2,
h3,
p { margin-top: 0; }

h1 {
  max-width: 850px;
  margin-bottom: 0;
  font-family: var(--display);
  font-size: clamp(3.1rem, 7.5vw, 6.7rem);
  font-weight: 500;
  line-height: 0.93;
  letter-spacing: -0.055em;
}

h1 span { color: var(--accent); }

.intro__copy {
  margin-bottom: 0.5rem;
  color: var(--ink-soft);
  font-family: var(--display);
  font-size: 1.15rem;
  line-height: 1.65;
}

.controls {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.controls__actions {
  display: flex;
  gap: 0.8rem;
  align-items: center;
}

.import-view {
  max-width: 850px;
  margin-inline: auto;
  padding: 3rem 0 7rem;
  outline: none;
}

.import-view__header {
  margin: 2.5rem 0 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--ink);
}

.import-view__header h2 {
  max-width: 18ch;
  margin-bottom: 1rem;
  font-family: var(--display);
  font-size: clamp(2.4rem, 6vw, 4.8rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.import-view__header > p:last-child {
  max-width: 42rem;
  margin-bottom: 0;
  color: var(--ink-soft);
  font-family: var(--display);
  font-size: 1.08rem;
  line-height: 1.65;
}

.import-tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
}

.import-tabs button {
  min-height: 46px;
  padding: 0.65rem 1rem;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--ink-soft);
  background: transparent;
  cursor: pointer;
}

.import-tabs button[aria-selected="true"] {
  border-bottom-color: var(--accent);
  color: var(--ink);
  font-weight: 750;
}

.import-form {
  padding: 2rem 0;
  border-bottom: 1px solid var(--ink);
}

.import-form label {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 750;
}

.import-form label span { color: var(--ink-soft); font-weight: 500; }

.import-form input,
.import-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
  background: var(--surface);
}

.import-form input { min-height: 48px; padding: 0.65rem 0.75rem; }
.import-form textarea { min-height: 18rem; padding: 1rem; resize: vertical; font-family: var(--reading); font-size: 1.05rem; line-height: 1.8; }

.form-note,
.import-preview__meta {
  margin: 0.65rem 0 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.5;
}

.import-form__grid {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: 1rem 1.5rem;
  align-items: center;
  margin-bottom: 1.5rem;
}

.import-form__grid label { margin: 0; }

.import-form__footer {
  display: grid;
  grid-template-columns: auto minmax(13rem, 0.45fr) auto;
  gap: 0.8rem;
  align-items: center;
  margin-top: 1.5rem;
}

.import-form__footer label { margin: 0; }
.import-form .status { margin: 1rem 0 0; }
.import-form .notice { margin: 0.75rem 0 0; }

.import-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem 2rem;
  align-items: end;
  margin-top: 2rem;
  padding: 2rem;
  border: 1px solid var(--accent-border);
  background: var(--surface-translucent);
}

.import-preview h3 {
  margin-bottom: 0.6rem;
  font-family: var(--display);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 550;
  line-height: 1.2;
}

.import-preview__excerpt {
  max-width: 42rem;
  margin: 1.2rem 0 0;
  color: var(--ink-soft);
  font-family: var(--reading);
  line-height: 1.7;
}

.import-preview__image {
  width: 100%;
  max-height: 22rem;
  margin-bottom: 1.5rem;
  object-fit: cover;
}

.primary-button {
  min-height: 48px;
  padding: 0.75rem 1.4rem;
  border: 1px solid var(--ink);
  border-radius: 0;
  color: var(--white);
  background: var(--ink);
  cursor: pointer;
}

.primary-button:hover { background: var(--accent-dark); }
.primary-button:disabled { cursor: wait; opacity: 0.65; }

.secondary-button {
  min-height: 44px;
  padding: 0.65rem 1rem;
  border: 1px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
}

.secondary-button:hover { color: var(--white); background: var(--ink); }
.secondary-button:disabled { cursor: wait; opacity: 0.55; }

.text-button,
.article-card__action {
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.text-button {
  min-height: 44px;
  color: var(--ink-soft);
  font-weight: 700;
}

.text-button:hover,
.article-card__action:hover { color: var(--accent-dark); }

.state-control {
  display: grid;
  gap: 0.4rem;
  color: var(--ink-soft);
}

select {
  min-height: 42px;
  padding: 0.45rem 2.5rem 0.45rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
  background: var(--white);
}

.reading-list { padding: 4rem 0 6rem; }

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 1.4rem;
}

.section-heading h2 {
  margin-bottom: 0;
  font-family: var(--display);
  font-size: clamp(2.1rem, 4vw, 3.5rem);
  font-weight: 500;
}

#result-count { padding-bottom: 0.45rem; color: var(--ink-soft); }

.status {
  min-height: 1.5rem;
  margin-bottom: 1.25rem;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.notice {
  margin-bottom: 1.5rem;
  padding: 1rem 1.1rem;
  border-left: 4px solid currentColor;
  background: var(--white);
  line-height: 1.5;
}

.notice--warning { color: var(--warning); }
.notice--error { color: var(--error); }
.notice--empty { color: var(--ink-soft); }

.article-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}

.article-card {
  position: relative;
  display: flex;
  min-height: 420px;
  flex-direction: column;
  padding: 2rem;
  border-bottom: 1px solid var(--line);
}

.article-card:nth-child(odd) { border-right: 1px solid var(--line); }

.article-card__topline,
.article-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--ink-soft);
  font-size: 0.78rem;
}

.source-label { font-weight: 750; color: var(--accent-dark); }

.article-card__title {
  max-width: 22ch;
  margin: 2rem 0 1rem;
  font-family: var(--display);
  font-size: clamp(1.65rem, 2.7vw, 2.4rem);
  font-weight: 600;
  line-height: 1.25;
}

.article-card__action {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.topic-pill {
  align-self: flex-start;
  padding: 0.34rem 0.58rem;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.76rem;
}

.article-card__description {
  margin: 1.3rem 0;
  color: var(--ink-soft);
  line-height: 1.65;
}

.article-card__reasons {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.55rem 1rem;
  margin: 0 0 2rem;
  font-size: 0.86rem;
  line-height: 1.45;
}

.article-card__reasons dt { font-weight: 750; }
.article-card__reasons dd { margin: 0; color: var(--ink-soft); }

.article-card__footer {
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.article-card__order {
  color: var(--accent);
  font-family: var(--display);
  font-size: 1.45rem;
}

footer {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem 0 3rem;
  border-top: 1px solid var(--ink);
  color: var(--ink-soft);
  font-size: 0.82rem;
}

body[data-busy="true"] .article-grid { opacity: 0.45; }

.reader {
  max-width: 920px;
  margin: 0 auto;
  padding: 3rem 0 7rem;
  outline: none;
}

.reader__toolbar {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 4rem;
  border-bottom: 1px solid var(--ink);
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.reader__header {
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--line);
}

.reader__source-line {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.reader__title {
  max-width: 20ch;
  margin-bottom: 1.25rem;
  font-family: var(--display);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 550;
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.reader__byline {
  margin-bottom: 1.3rem;
  color: var(--ink-soft);
}

.reader__original {
  color: var(--accent-dark);
  font-weight: 750;
  text-underline-offset: 0.25em;
}

.language-tools {
  margin-bottom: 3.5rem;
  padding: 2rem;
  border: 1px solid var(--ink);
  background: var(--surface-translucent);
}

.language-tools__controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: end;
}

.language-tools__controls h2 {
  max-width: 18ch;
  margin-bottom: 0;
  font-family: var(--display);
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  font-weight: 550;
  line-height: 1.15;
}

.language-tools__actions {
  display: flex;
  gap: 0.8rem;
  align-items: end;
}

.language-tools__actions label {
  display: grid;
  gap: 0.35rem;
  color: var(--ink-soft);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.language-status {
  min-height: 1.35rem;
  margin: 1.2rem 0 0;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.save-status {
  min-height: 1.35rem;
  margin: 0.35rem 0 0;
  color: var(--accent-dark);
  font-size: 0.85rem;
  font-weight: 700;
}

.analysis-panel {
  margin-top: 1.2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

.analysis-gist {
  display: grid;
  grid-template-columns: minmax(8rem, 0.35fr) minmax(0, 1fr);
  gap: 1rem 2rem;
}

.analysis-gist .eyebrow { margin-top: 0.35rem; }

.analysis-gist p:not(.eyebrow) {
  margin-bottom: 0.6rem;
  font-family: var(--display);
  font-size: 1.15rem;
  line-height: 1.55;
}

.analysis-terms {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

.analysis-terms__heading {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.analysis-terms__heading p:last-child {
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.term-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}

.term-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  background: transparent;
}

.term-card:nth-child(odd) { border-right: 1px solid var(--line); }
.term-card__jump {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 0.8rem;
  padding: 1rem 0.75rem;
  border: 0;
  color: var(--ink);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.term-card__jump:hover { background: var(--paper-deep); }
.term-card__save {
  align-self: center;
  min-height: 36px;
  margin-right: 0.75rem;
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--line);
  color: var(--accent-dark);
  background: var(--white);
  cursor: pointer;
}
.term-card__save:hover { border-color: var(--accent-dark); }
.term-card__save:disabled { cursor: wait; opacity: 0.7; }
.term-card__save--saved,
.term-card__save--saved:disabled { color: var(--ink); background: var(--paper-deep); opacity: 1; cursor: default; }
.term-card__zh { grid-row: 1 / 3; font-family: var(--display); font-size: 1.2rem; }
.term-card__pinyin { color: var(--accent-dark); font-size: 0.78rem; }
.term-card__meaning { color: var(--ink-soft); font-size: 0.82rem; }

.term-highlight {
  position: relative;
  display: inline;
  padding: 0.05em 0.12em;
  border: 0;
  border-bottom: 2px solid var(--accent);
  color: inherit;
  background: var(--accent-soft);
  font: inherit;
  line-height: inherit;
  cursor: help;
}

.term-highlight:hover,
.term-highlight:focus,
.term-highlight[aria-expanded="true"] { background: var(--highlight-strong); }

.term-tooltip {
  position: absolute;
  z-index: 4;
  bottom: calc(100% + 0.55rem);
  left: 50%;
  display: none;
  width: max-content;
  max-width: min(18rem, 75vw);
  padding: 0.65rem 0.8rem;
  color: var(--white);
  background: var(--ink);
  box-shadow: 0 8px 24px var(--shadow-popover);
  font-family: var(--sans);
  font-size: 0.78rem;
  line-height: 1.4;
  text-align: left;
  transform: translateX(-50%);
}

.term-tooltip strong,
.term-tooltip span { display: block; }
.term-tooltip strong { margin-bottom: 0.15rem; color: var(--accent); }
.term-highlight:hover .term-tooltip,
.term-highlight:focus .term-tooltip,
.term-highlight[aria-expanded="true"] .term-tooltip { display: block; }

.sentence-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.8fr);
  gap: 1rem 2rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--ink);
}

.sentence-tools h3 { margin-bottom: 0.6rem; font-family: var(--display); font-size: 1.35rem; }
.sentence-tools p { color: var(--ink-soft); line-height: 1.5; }
.sentence-tools__action { display: grid; gap: 0.8rem; align-content: start; }
.sentence-tools__action #selection-preview {
  max-height: 6.5rem;
  margin: 0;
  padding: 0.75rem;
  overflow: auto;
  border-left: 3px solid var(--accent);
  background: var(--paper);
  font-family: var(--display);
}

.sentence-tools .language-status,
.sentence-tools .notice,
.sentence-result { grid-column: 1 / -1; }

.sentence-result {
  padding: 1.4rem;
  border: 1px solid var(--line);
  background: var(--paper);
  outline: none;
}

.sentence-result__source { margin: 0 0 1.5rem; font-family: var(--display); font-size: 1.1rem; line-height: 1.65; }
.sentence-result__translation { color: var(--ink) !important; font-family: var(--display); font-size: 1.12rem; }

.reader__body {
  max-width: 38em;
  margin: 3rem auto 0;
  font-family: var(--display);
  font-size: clamp(1.12rem, 2vw, 1.35rem);
  line-height: 1.95;
}

.reader__body p { margin-bottom: 1.6em; }

.publication-note {
  display: grid;
  grid-template-columns: minmax(9rem, 0.65fr) minmax(16rem, 1.35fr) auto;
  gap: 1rem 2rem;
  align-items: start;
  margin-top: 5rem;
  padding: 2rem 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.publication-note .eyebrow {
  grid-column: 1 / -1;
  margin-bottom: 0.25rem;
}

.publication-note__name {
  margin: 0;
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 600;
}

.publication-note__description {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.6;
}

.publication-note__link {
  color: var(--accent-dark);
  font-size: 0.88rem;
  font-weight: 750;
  white-space: nowrap;
  text-underline-offset: 0.25em;
}

.reader[aria-busy="true"] {
  min-height: 55vh;
}

.vocabulary {
  padding: 3rem 0 6rem;
  outline: none;
}

.vocabulary__toolbar { margin-bottom: 3rem; }

.vocabulary__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.7fr);
  gap: 3rem;
  align-items: end;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--ink);
}

.vocabulary__header h2 {
  margin-bottom: 0;
  font-family: var(--display);
  font-size: clamp(2.4rem, 6vw, 4.8rem);
  font-weight: 500;
  line-height: 1;
}

.vocabulary__header > p { margin-bottom: 0; color: var(--ink-soft); line-height: 1.6; }
.vocabulary-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }

.vocabulary-card {
  padding: 1.6rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface-translucent);
}

.vocabulary-card:nth-child(even) { border-right: 0; }
.vocabulary-card__heading { display: flex; gap: 1rem; align-items: baseline; justify-content: space-between; }
.vocabulary-card__term { margin-bottom: 0.35rem; font-family: var(--display); font-size: 2rem; font-weight: 600; }
.vocabulary-card__pinyin { margin-bottom: 0; color: var(--accent-dark); }
.vocabulary-card__meaning { font-weight: 750; }
.vocabulary-card__context { margin: 1.25rem 0; padding-left: 1rem; border-left: 3px solid var(--accent); font-family: var(--display); line-height: 1.7; }
.vocabulary-card__article { margin-bottom: 0.35rem; font-family: var(--display); font-weight: 700; }
.vocabulary-card__meta { color: var(--ink-soft); font-size: 0.78rem; line-height: 1.5; }
.vocabulary-card__actions { display: flex; gap: 1rem; align-items: center; justify-content: space-between; }
.vocabulary-card__link { color: var(--accent-dark); font-size: 0.85rem; font-weight: 750; text-underline-offset: 0.25em; }
.vocabulary-card__remove { color: var(--error); }

/* Daily Chinese Read visual style guide */
.site-header {
  position: sticky;
  z-index: 6;
  top: 0;
  min-height: 72px;
  border-color: var(--border);
  background: var(--header-bg);
}

.wordmark__mark { color: var(--surface); background: var(--text-primary); }
.wordmark__copy { display: grid; gap: 0.1rem; }
.wordmark__copy strong { font-family: var(--display); font-size: 1.02rem; }
.wordmark__copy small { color: var(--text-secondary); font-family: var(--sans); font-size: 0.68rem; font-weight: 500; }
.phase-label { color: var(--text-secondary); }
.vocabulary-link { border-color: var(--border); border-radius: 10px; background: var(--surface); }
.vocabulary-link:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
#vocabulary-count { background: var(--accent); }

.intro {
  grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 0.8fr);
  max-width: 850px;
  gap: 3rem;
  margin-inline: auto;
  padding: 3rem 0 2rem;
}

h1 { max-width: none; font-family: var(--reading); font-size: clamp(2.25rem, 5vw, 3.8rem); font-weight: 600; line-height: 1.18; letter-spacing: 0.03em; }
h1 span { color: var(--text-primary); }
.intro__copy { font-family: var(--display); font-size: 1.05rem; line-height: 1.7; }
.eyebrow { color: var(--accent); }

.controls {
  max-width: 850px;
  margin-inline: auto;
  padding: 1rem 0;
  border-color: var(--border);
}

.primary-button { border-color: var(--accent); border-radius: 10px; background: var(--accent); }
.primary-button:hover { background: var(--accent-dark); }
.secondary-button { border-color: var(--border); border-radius: 10px; background: var(--surface); }
.secondary-button:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
select { border-color: var(--border); border-radius: 10px; }

.reading-list { max-width: 850px; margin-inline: auto; padding: 2.5rem 0 6rem; }
.section-heading h2 { font-family: var(--reading); font-size: 2rem; font-weight: 600; letter-spacing: 0.02em; }
.notice { border: 1px solid currentColor; border-radius: 12px; background: var(--surface); }
.article-grid { grid-template-columns: 1fr; gap: 1rem; border-top: 0; }
.article-card,
.article-card:nth-child(odd) {
  min-height: auto;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 5px 18px var(--shadow-subtle);
}
.article-card__image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 1rem;
  border-radius: 11px;
  background: var(--tag-bg);
  object-fit: cover;
}
.article-card__title { max-width: none; margin: 0.85rem 0 0.65rem; font-family: var(--reading); font-size: clamp(1.3rem, 2.4vw, 1.72rem); font-weight: 600; line-height: 1.5; letter-spacing: 0.015em; }
.article-card__topline, .article-card__footer { color: var(--text-secondary); }
.source-label { color: var(--text-secondary); }
.topic-pill { margin-top: 0.15rem; border: 0; border-radius: 7px; color: var(--text-primary); background: var(--tag-bg); }
.article-card__description { margin: 0.85rem 0; line-height: 1.55; }
.article-card__reasons { margin-bottom: 1rem; }
.article-card__reasons dt { color: var(--accent); }
.article-card__footer { padding-top: 0.85rem; }
.article-card__order { color: var(--accent); font-family: var(--display); font-size: 1rem; font-weight: 700; }

.reader { max-width: 760px; }
.reader__toolbar { margin-bottom: 2.5rem; border-color: var(--border); }
.reader__header { padding-bottom: 2rem; border-bottom: 1px solid var(--border); }
.reader__image {
  display: block;
  width: 100%;
  max-height: 520px;
  margin: 2rem 0;
  border-radius: 12px;
  background: var(--tag-bg);
  object-fit: cover;
}
.reader__title { font-family: var(--reading); font-size: clamp(2rem, 5vw, 3.15rem); font-weight: 600; line-height: 1.3; letter-spacing: 0.015em; }
.reader__body { max-width: 740px; font-family: var(--reading); font-size: clamp(1.25rem, 2.1vw, 1.375rem); font-weight: 400; line-height: 1.95; letter-spacing: 0.015em; }
.reader__body p { margin-bottom: 1.65em; }
.reader__original, .publication-note__link { color: var(--accent); }

.language-tools { padding: 0; border: 0; background: transparent; }
.language-tools__controls { padding: 1.25rem; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.language-tools__controls h2 { max-width: 22ch; font-family: var(--display); font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 600; line-height: 1.2; }
.analysis-panel { border-top: 0; }
.analysis-gist { margin-top: 2rem; padding: 1.15rem; border: 1px solid var(--accent-border); border-radius: 14px; background: var(--accent-soft); }
.analysis-gist p:not(.eyebrow) { font-family: var(--display); font-size: 1.05rem; line-height: 1.65; }
.analysis-terms { border-color: var(--border); }
.term-list { gap: 0.55rem; border: 0; }
.term-card,
.term-card:nth-child(odd) { overflow: hidden; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); }
.term-card__jump:hover { background: var(--accent-soft); }
.term-card__zh { font-family: var(--reading); font-weight: 600; }
.term-card__pinyin { color: var(--accent); }
.term-card__save { border-color: var(--border); border-radius: 8px; color: var(--accent); }
.term-card__save:hover { border-color: var(--accent); background: var(--accent-soft); }
.term-card__save--saved, .term-card__save--saved:disabled { color: var(--saved); background: var(--saved-soft); }
.save-status { color: var(--saved); }

.term-highlight { border-bottom-color: var(--accent); border-radius: 4px; color: var(--accent-dark); background: var(--accent-soft); }
.term-highlight:hover, .term-highlight:focus, .term-highlight[aria-expanded="true"] { background: var(--accent-border); }
.term-tooltip { border: 1px solid var(--border); border-radius: 12px; color: var(--text-primary); background: var(--surface); box-shadow: 0 10px 30px var(--shadow-popover); }
.term-tooltip strong { color: var(--accent); }

.sentence-tools { border-color: var(--border); }
.sentence-tools h3 { font-family: var(--display); font-weight: 600; }
.sentence-tools__action #selection-preview, .sentence-result { border-color: var(--accent); border-radius: 10px; background: var(--surface); }
.sentence-result__source { font-family: var(--reading); }
.sentence-result__translation { font-family: var(--display); }
.publication-note { border-color: var(--border); }
.publication-note__name { font-family: var(--reading); font-weight: 600; }

.reader__article-text {
  max-width: 850px;
  margin-inline: auto;
  padding-top: 2rem;
  border-top: 1px solid var(--ink);
}
.reader__article-label { margin-bottom: 1.5rem; }
.publication-note + .language-tools { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--ink); }

.reader-save {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  justify-content: flex-end;
  max-width: 850px;
  margin: 0 auto 1.5rem;
  color: var(--text-secondary);
  font-size: 0.82rem;
}
.reader-save[hidden] { display: none; }

.related-reading {
  max-width: 850px;
  margin: 4rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid var(--ink);
}
.related-reading__heading { display: flex; gap: 1rem; align-items: end; justify-content: space-between; }
.related-reading__heading h2 { margin-bottom: 1rem; font-family: var(--display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 500; }
.related-reading__list { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); }
.related-card { padding: 1.25rem 1.25rem 1.25rem 0; border-bottom: 1px solid var(--border); }
.related-card + .related-card { padding-left: 1.25rem; border-left: 1px solid var(--border); }
.related-card h3 { margin-bottom: 0.65rem; font-family: var(--display); font-size: 1.22rem; font-weight: 600; line-height: 1.25; }
.related-card__link { color: var(--text-primary); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.related-card__link:hover { color: var(--accent); }
.related-card__description, .related-reading__note { color: var(--text-secondary); font-size: 0.88rem; line-height: 1.55; }
.related-reading__note { margin: 0.85rem 0 0; }

.vocabulary { max-width: 850px; margin-inline: auto; }
.vocabulary__header { border-color: var(--border); }
.vocabulary__header h2 { font-family: var(--display); font-size: clamp(2.3rem, 5vw, 3.8rem); font-weight: 600; letter-spacing: -0.035em; }
.vocabulary-list { grid-template-columns: 1fr; gap: 1rem; border: 0; }
.vocabulary-card, .vocabulary-card:nth-child(even) { padding: 1.35rem; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.vocabulary-card__term, .vocabulary-card__article, .vocabulary-card__context { font-family: var(--reading); }
.vocabulary-card__pinyin, .vocabulary-card__link { color: var(--accent); }
.vocabulary-card__context { border-color: var(--accent); }

.saved-articles { margin: 1.5rem 0 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--ink); }
.saved-articles__heading h3 { margin-bottom: 1rem; font-family: var(--display); font-size: 1.8rem; font-weight: 600; }
.saved-articles__list { border-top: 1px solid var(--border); }
.saved-article-card { display: flex; gap: 1.5rem; align-items: center; justify-content: space-between; padding: 1rem 0; border-bottom: 1px solid var(--border); }
.saved-article-card h4 { margin: 0 0 0.35rem; font-family: var(--reading); font-size: 1.08rem; font-weight: 600; }
.saved-article-card__link { color: var(--text-primary); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.saved-article-card__link:hover { color: var(--accent); }
.saved-article-card__meta { margin: 0; color: var(--text-secondary); font-size: 0.8rem; }

.term-card__actions {
  display: grid;
  gap: 0.35rem;
  align-content: center;
  padding: 0.6rem 0.75rem 0.6rem 0;
}
.term-card__actions .term-card__save { margin: 0; }
.term-card__known {
  min-height: 32px;
  padding: 0.35rem 0.55rem;
  border: 0;
  color: var(--text-secondary);
  background: transparent;
  font-size: 0.75rem;
  cursor: pointer;
}
.term-card__known:hover { color: var(--accent); }
.term-card__known--known { color: var(--text-primary); cursor: default; }

.word-token {
  display: inline;
  padding: 0;
  border: 0;
  border-radius: 3px;
  color: inherit;
  background: transparent;
  font: inherit;
  line-height: inherit;
  cursor: help;
}
.word-token:hover, .word-token:focus { color: var(--accent); background: var(--accent-soft); }
.word-help {
  position: fixed;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.65rem 1rem;
  width: min(18rem, calc(100vw - 1.5rem));
  margin: 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--accent-border);
  border-radius: 12px;
  background: var(--accent-soft);
  box-shadow: 0 12px 35px var(--shadow-popover);
}
.word-help[hidden] { display: none; }
.word-help > div, .word-help > p { grid-column: 1 / -1; }
.word-help strong { margin-right: 0.65rem; font-size: 1.35rem; }
.word-help span { color: var(--accent); }
.word-help p { margin: 0; }
.word-help > .text-button { position: absolute; top: 0.7rem; right: 0.8rem; }
.word-help::before {
  position: absolute;
  top: 50%;
  left: -7px;
  width: 12px;
  height: 12px;
  border-bottom: 1px solid var(--accent-border);
  border-left: 1px solid var(--accent-border);
  background: var(--accent-soft);
  content: "";
  transform: translateY(-50%) rotate(45deg);
}
.word-help[data-placement="left"]::before {
  right: -7px;
  left: auto;
  border: 0;
  border-top: 1px solid var(--accent-border);
  border-right: 1px solid var(--accent-border);
}
.word-help[data-placement="below"]::before {
  top: -7px;
  left: 1.25rem;
  border: 0;
  border-top: 1px solid var(--accent-border);
  border-left: 1px solid var(--accent-border);
  transform: rotate(45deg);
}

.review-summary, .known-words {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
  margin: 1.5rem 0;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.review-summary[hidden], .review-session[hidden], .known-words[hidden] { display: none; }
.review-summary h3, .known-words h3 { margin: 0.15rem 0 0.25rem; }
.review-summary p, .known-words p { margin: 0; color: var(--text-secondary); }
.review-session {
  margin: 1.5rem 0;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  border: 1px solid var(--accent-border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 10px 30px var(--shadow-subtle);
}
.review-session__topline { display: flex; align-items: center; justify-content: space-between; }
.review-session h3 { margin: 1.5rem 0 1rem; font-size: clamp(2.4rem, 7vw, 4rem); }
.review-session blockquote { margin: 0 0 1.5rem; padding-left: 1rem; border-left: 3px solid var(--accent); line-height: 1.8; }
.review-answer { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.review-answer #review-pinyin { color: var(--accent); font-size: 1.15rem; }
.review-answer #review-meaning { font-size: 1.2rem; font-weight: 700; }
.review-ratings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-top: 1rem; }
.review-ratings button { min-height: 44px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; }
.review-ratings button:hover { border-color: var(--accent); color: var(--accent); }
.known-words { align-items: flex-start; margin-top: 2rem; }
#known-words-list { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; }
.known-word { display: inline-flex; gap: 0.5rem; align-items: center; padding: 0.4rem 0.6rem; border-radius: 999px; background: var(--accent-soft); }
.vocabulary-card__actions { flex-wrap: wrap; }
.vocabulary-card__known { color: var(--accent); }

.mobile-nav { display: none; }
footer { max-width: 850px; border-color: var(--border); }

@media (max-width: 760px) {
  body { padding-bottom: 74px; }
  .site-header, main, footer { width: min(100% - 2rem, 1180px); }
  .phase-label { display: none; }
  .header-actions { margin-left: auto; }
  .vocabulary-link { font-size: 0.8rem; }
  .intro { grid-template-columns: 1fr; gap: 1rem; padding: 2rem 0 1.5rem; }
  .intro__copy { max-width: 34rem; }
  .controls { align-items: stretch; flex-direction: column; }
  .controls__actions { align-items: stretch; flex-direction: column; }
  .primary-button, select { width: 100%; }
  .import-view { padding-top: 1.5rem; }
  .import-form__grid { grid-template-columns: 1fr; gap: 0.45rem; }
  .import-form__grid input { margin-bottom: 0.75rem; }
  .import-form__footer { grid-template-columns: 1fr; align-items: stretch; }
  .import-preview { grid-template-columns: 1fr; padding: 1.25rem; }
  .reading-list { padding: 3rem 0 4rem; }
  .article-grid { grid-template-columns: 1fr; }
  .article-card { min-height: auto; padding: 1rem; border: 1px solid var(--border) !important; }
  .article-card__title { font-size: 1.35rem; }
  footer { flex-direction: column; }
  .reader { padding-top: 1.5rem; }
  .reader__toolbar { align-items: flex-start; flex-direction: column; justify-content: center; margin-bottom: 2.5rem; }
  .reader__source-line { flex-direction: column; }
  .reader__title { font-size: 2.4rem; }
  .reader__body { font-size: 1.18rem; line-height: 1.8; }
  .publication-note { grid-template-columns: 1fr; gap: 0.8rem; margin-top: 3.5rem; }
  .publication-note .eyebrow { grid-column: auto; }
  .reader-save { align-items: flex-start; flex-direction: column; }
  .related-reading__heading { align-items: flex-start; flex-direction: column; }
  .related-reading__list { grid-template-columns: 1fr; }
  .related-card, .related-card + .related-card { padding-inline: 0; border-left: 0; }
  .language-tools { padding: 1.25rem; }
  .language-tools__controls, .analysis-gist, .sentence-tools { grid-template-columns: 1fr; }
  .language-tools__actions { align-items: stretch; flex-direction: column; }
  .language-tools__actions .secondary-button { width: 100%; }
  .analysis-terms__heading { display: block; }
  .term-list { grid-template-columns: 1fr; }
  .term-card:nth-child(odd) { border-right: 0; }
  .term-card { grid-template-columns: 1fr; }
  .term-card__jump { padding-left: 0.5rem; }
  .term-card__save { justify-self: start; margin: 0 0.75rem 0.75rem; }
  .term-card__actions { grid-template-columns: 1fr 1fr; padding-left: 0.5rem; }
  .term-card__actions .term-card__save { justify-self: stretch; margin: 0; }
  .word-help { width: min(20rem, calc(100vw - 1.5rem)); }
  .review-summary, .known-words { align-items: stretch; flex-direction: column; }
  .saved-article-card { align-items: flex-start; }
  .review-ratings { grid-template-columns: 1fr; }
  #known-words-list { justify-content: flex-start; }
  .vocabulary__header { grid-template-columns: 1fr; gap: 1rem; }
  .vocabulary-list { grid-template-columns: 1fr; }
  .vocabulary-card { padding-inline: 0.5rem; border-right: 0; }
  .sentence-tools .language-status, .sentence-tools .notice, .sentence-result { grid-column: auto; }

  .mobile-nav {
    position: fixed;
    z-index: 8;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 64px;
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--border);
    background: var(--mobile-nav-bg);
  }

  .mobile-nav button {
    display: grid;
    gap: 0.2rem;
    place-items: center;
    border: 0;
    color: var(--text-secondary);
    background: transparent;
    font-size: 0.72rem;
    cursor: pointer;
  }

  .mobile-nav button[aria-current="page"] { color: var(--accent); }
  .mobile-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}