:root {
  --t1: #D32F2F; --t2: #EF6C00; --t3: #2E7D32; --t4: #1565C0; --t5: #555555;
  --p0: #FFF8D6; --p1: #E6F4FF; --p2: #EBF7E4; --p3: #FDECF4; --p4: #F2ECFF; --p5: #FFEEE0; --pn: #EFEFEF;
  --snd: #0008;
  --ink: #111; --muted: #666; --line: #e3e3e3;
  --bg: #fff; --soft: #fafafa; --head: #f0f0f0; --rule: #bbb; --note: #444; --hlc: #0004;
  color-scheme: light dark;
}
/* dark theme: the phone's setting ("Default"), or forced by the theme picker (html data-theme).
   Pair colours are saturated (not pale) so the six stay apart on black. Keep the two blocks identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --t1: #FF6B66; --t2: #FFB050; --t3: #6FD27A; --t4: #5CB3FF; --t5: #C8C8C8;
    --p0: #514200; --p1: #004678; --p2: #00521F; --p3: #6D2345; --p4: #4C3173; --p5: #6C2D00; --pn: #3A3A3A;
    --snd: #fff9; --ink: #eee; --muted: #aaa; --line: #333;
    --bg: #161616; --soft: #222; --head: #262626; --rule: #444; --note: #bbb; --hlc: #fff8;
  }
}
:root[data-theme="dark"] {
    --t1: #FF6B66; --t2: #FFB050; --t3: #6FD27A; --t4: #5CB3FF; --t5: #C8C8C8;
    --p0: #514200; --p1: #004678; --p2: #00521F; --p3: #6D2345; --p4: #4C3173; --p5: #6C2D00; --pn: #3A3A3A;
    --snd: #fff9; --ink: #eee; --muted: #aaa; --line: #333;
    --bg: #161616; --soft: #222; --head: #262626; --rule: #444; --note: #bbb; --hlc: #fff8;
}
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
* { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); background: var(--bg); line-height: 1.5;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}
main, .top nav, footer { max-width: 40rem; margin: 0 auto; padding: 0 16px; }
.top { position: sticky; top: 0; background: var(--bg); border-bottom: 1px solid var(--line); z-index: 2; }
.top nav { display: flex; gap: 1rem; overflow-x: auto; padding-top: .6rem; padding-bottom: .6rem; }
.top a { color: var(--ink); text-decoration: none; font-weight: 600; white-space: nowrap; }
#theme { margin-left: auto; flex: none; font: inherit; font-size: 1.1rem; line-height: 1; color: var(--ink);
  background: none; border: 1px solid var(--line); border-radius: 999px; width: 1.9rem; height: 1.9rem; padding: 0; cursor: pointer; }
@media (max-width: 400px) { .top nav { gap: .6rem; } }   /* 4 links + the theme button fit a 360px phone */
footer { color: var(--muted); font-size: .8125rem; margin-top: 2rem; padding-bottom: 2rem; }
h1 { font-size: 1.5rem; margin: 1rem 0 .25rem; }
h2 { font-size: 1.125rem; margin: 1.5rem 0 .5rem; border-bottom: 1px solid var(--line); padding-bottom: .2rem; }
h3 { font-size: 1rem; margin: 1rem 0 .25rem; }
.zht { font-weight: 400; color: var(--muted); }
.slide, .date, .crumb { color: var(--muted); font-size: .8125rem; font-weight: 400; }
.crumb a { color: var(--muted); }

/* tones: whole syllable, bold */
.t1 { color: var(--t1); } .t2 { color: var(--t2); } .t3 { color: var(--t3); }
.t4 { color: var(--t4); } .t5 { color: var(--t5); }
.s, .c { font-weight: 700; }
.zh { font-size: 1.25rem; }
.py { font-size: 1rem; }
.en { font-size: .8125rem; color: var(--ink); }
.inl .zh, .inl .py { font-size: inherit; }

/* pair backgrounds: sentences only */
.p0 { background: var(--p0); } .p1 { background: var(--p1); } .p2 { background: var(--p2); }
.p3 { background: var(--p3); } .p4 { background: var(--p4); } .p5 { background: var(--p5); }
.pn { background: var(--pn); }  /* no direct English partner */
.w, .e { border-radius: .25rem; padding: 0 .1rem; }
.hl { outline: 2px solid var(--hlc); }
.w.hw { text-decoration: underline; text-underline-offset: .2em; }

/* provenance */
.auto { text-decoration: underline dotted #888; text-underline-offset: .25em; }
.x { color: var(--muted); font-weight: 400; margin-left: .1rem; }
.extra .note, .note.extra { color: var(--note); }
.lit { font-size: .92em; }  /* the literal, word-paired English in brackets */

/* items */
.sentence, .entry { padding: .5rem 0; border-bottom: 1px solid var(--line); }
.sentence .head { display: flex; align-items: center; gap: .5rem; min-height: 1.6rem; }
.speaker { color: var(--muted); font-size: .8125rem; }
.entry .line { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; }
.emoji { font-size: 1.25rem; }
.note { font-size: .8125rem; color: var(--muted); margin-top: .2rem; }
.said { font-size: .875rem; color: var(--muted); }
.example { margin-left: 1rem; }
.example .sentence { border-bottom: 0; padding: .25rem 0; }
.example .zh { font-size: 1rem; } .example .py { font-size: .875rem; }

/* audio affordances */
[data-audio] { cursor: pointer; }

button.play, button.spelled {
  border: 1px solid var(--line); background: var(--soft); color: var(--ink); border-radius: 999px;
  font: inherit; font-size: .8125rem; line-height: 1; padding: .35rem .6rem; cursor: pointer;
}
.playing { outline: 2px solid #1565C0aa; outline-offset: 1px; border-radius: .25rem; }

/* grids and tables */
main { overflow-wrap: anywhere; }
table.grid { border-collapse: collapse; margin: .5rem 0; display: block; max-width: 100%; overflow-x: auto; }
table.grid td { border: 1px solid var(--line); padding: .35rem .7rem; text-align: center; }
table.legend td { padding: .2rem .6rem .2rem 0; }
.contours { width: 100%; max-width: 22rem; }
.contours polyline { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.contours polyline.t1 { stroke: var(--t1); } .contours polyline.t2 { stroke: var(--t2); }
.contours polyline.t3 { stroke: var(--t3); } .contours polyline.t4 { stroke: var(--t4); }
.contours .gridline { stroke: var(--line); }
.contours .axis { font-size: 10px; fill: var(--muted); }
.letters a { margin-right: .4rem; }
#tip { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); background: #333; color: #fff;
  font-size: .8125rem; padding: .3rem .7rem; border-radius: .3rem; opacity: 0; transition: opacity .2s; pointer-events: none; }
#tip.on { opacity: .95; }

/* dictionary: Image | Word | Example table, like the old Google Doc */
.hint { color: var(--muted); font-size: .8125rem; margin: 0 0 .5rem; }
table.dict { width: 100%; border-collapse: collapse; margin: .5rem 0 1rem; table-layout: fixed; }
table.dict th, table.dict td { border: 1px solid var(--rule); padding: .4rem .5rem; vertical-align: middle; text-align: left; }
table.dict thead th { background: var(--head); font-size: .9375rem; }
table.dict th.img { width: 3rem; padding: .4rem .2rem; text-align: center; font-size: .75rem; }
table.dict td.img { text-align: center; font-size: 1.75rem; padding: .2rem; }
table.dict th:nth-child(2) { width: 42%; }
table.dict tr.letter th { background: var(--soft); font-size: .875rem; color: var(--muted); padding: .15rem .5rem; scroll-margin-top: 3rem; }
table.dict td.word { cursor: default; }
table.dict td.word > .zh { font-size: 1.25rem; line-height: 1.3; }
table.dict td.word > .py { font-size: 1rem; font-style: italic; }
table.dict td.ex > .py { font-size: 1rem; }
table.dict .en { font-size: .875rem; }
table.dict td.word[data-audio] > .py, table.dict td.ex > .py[data-audio] { cursor: pointer; display: inline; }
table.dict td.word[data-audio] { cursor: pointer; }
table.dict .w.hw { font-style: italic; }
table.dict .en .hw { font-style: italic; }
table.dict td.word .note, table.dict .said { font-size: .75rem; }

/* generated (computer voice) clips */
span.inl[data-audio] { cursor: pointer; }
button.play.tts { background: var(--bg); }

/* sound cue: solid = teacher's voice, dashed = computer voice (one rule set for every page) */
.w[data-audio], span.inl[data-audio] > .py,
.entry[data-audio] > .line > .py, td[data-audio] > .py,
table.dict td.word[data-audio] > .py, table.dict td.ex > .py[data-audio] {
  border-bottom: 2px solid var(--snd); padding-bottom: 1px;
}
.w[data-tts], span.inl[data-tts] > .py, .entry[data-tts] > .line > .py, td[data-tts] > .py,
table.dict td.word[data-tts] > .py, table.dict td.ex > .py[data-tts] { border-bottom-style: dashed; }
.entry[data-audio] { cursor: pointer; }
.legend-line { display: inline-block; margin-right: .9rem; }
.legend-line .cue { border-bottom: 2px solid var(--snd); }
.legend-line .cue.tts { border-bottom-style: dashed; }