:root {
    --bg: #0d1117;
    --surface: #161b22;
    --surface2: #1c2333;
    --border: #30363d;
    --text: #e6edf3;
    --text2: #8b949e;
    --accent: #58a6ff;
    --accent2: #3fb950;
    --red: #f85149;
    --orange: #d29922;
    --han: #ffa657;
    --py: #79c0ff;
    --en: #8b949e;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    padding: 0;
    -webkit-font-smoothing: antialiased;
  }
  .container { max-width: 900px; margin: 0 auto; padding: 20px 16px; }
  /* Lesson details */
  .lesson {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
  }
  .lesson summary {
    padding: 14px 18px;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 12px;
    user-select: none;
    transition: background 0.15s;
  }
  .lesson summary:hover { background: var(--surface2); }
  .lesson summary::-webkit-details-marker { color: var(--text2); }
  .lesson[open] summary { border-bottom: 1px solid var(--border); background: var(--surface2); }
  .lesson-num {
    background: var(--accent);
    color: #fff;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
  }
  .lesson-theme { color: var(--text); font-weight: 600; flex: 1; }
  .lesson-body { padding: 18px; }

  /* Pattern box */
  .pattern-box {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 16px;
  }
  .pattern-label { font-size: 0.8rem; color: var(--orange); font-weight: 600; margin-bottom: 6px; }
  .pattern-cn { font-size: 1rem; color: var(--han); margin-bottom: 4px; }
  .pattern-en { font-size: 0.85rem; color: var(--text2); }

  /* Vocab table */
  .vocab-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
    font-size: 0.9rem;
  }
  .vocab-table th {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 2px solid var(--border);
    color: var(--text2);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .vocab-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
  }
  .vocab-table .han { color: var(--han); font-size: 1.1rem; font-weight: 500; }
  .vocab-table .py { color: var(--py); }
  .vocab-table .en { color: var(--text2); }
  .vocab-table tr:hover td { background: rgba(88,166,255,0.05); }

  /* Passage */
  .passage-box {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 4px;
  }
  .passage-label { font-size: 0.8rem; color: var(--accent2); font-weight: 600; margin-bottom: 10px; }
  .sentence { margin-bottom: 10px; }
  .sentence .han { color: var(--han); font-size: 1rem; line-height: 1.7; }
  .sentence .py { color: var(--py); font-size: 0.85rem; line-height: 1.5; font-style: italic; }
  .sentence .en { color: var(--text2); font-size: 0.8rem; line-height: 1.4; }
  .sentence-spacer { height: 8px; }

  /* Examples box */
  .examples-box {
    background: rgba(63,185,80,0.05);
    border: 1px solid var(--accent2);
    border-radius: 8px;
    padding: 14px;
    margin-top: 12px;
    margin-bottom: 4px;
  }
  .examples-label { font-size: 0.8rem; color: var(--accent2); font-weight: 600; margin-bottom: 10px; }

  .extra-note {
    margin-top: 12px;
    padding: 10px 14px;
    background: rgba(210, 153, 34, 0.1);
    border: 1px solid var(--orange);
    border-radius: 8px;
    color: var(--orange);
    font-size: 0.85rem;
  }

  /* Controls */
  .controls {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
  }
  .controls button {
    padding: 8px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
  }
  .controls button:hover { background: var(--surface2); border-color: var(--accent); }
  .controls button.active { background: var(--accent); color: #fff; border-color: var(--accent); }

  /* Footer */
  footer {
    text-align: center;
    padding: 32px 0;
    color: var(--text2);
    font-size: 0.8rem;
    border-top: 1px solid var(--border);
    margin-top: 32px;
  }

  /* Search */
  .search-box {
    width: 100%;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 0.9rem;
    margin-bottom: 16px;
    outline: none;
  }
  .search-box:focus { border-color: var(--accent); }
  .search-box::placeholder { color: var(--text2); }

  .highlight { background: rgba(255,166,87,0.3); padding: 0 2px; border-radius: 2px; }

  /* Audio buttons */
  .audio-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 1px 6px;
    margin-left: 4px;
    transition: all 0.2s;
    vertical-align: middle;
    line-height: 1.4;
  }
  .audio-btn:hover { background: var(--surface2); border-color: var(--accent); }
  .audio-btn-sm {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0 2px;
    margin-left: 2px;
    vertical-align: middle;
    opacity: 0.7;
    transition: opacity 0.2s;
  }
  .audio-btn-sm:hover { opacity: 1; }
  .audio-btn.playing, .audio-btn-sm.playing { opacity: 0.5; pointer-events: none; }

  /* Clickable characters for stroke order */
  .char-link {
    cursor: pointer;
    color: var(--han);
    text-decoration: none;
    border-bottom: 1px dashed rgba(255,166,87,0.3);
    transition: all 0.15s;
  }
  .char-link:hover {
    color: #fff;
    border-bottom-color: var(--accent);
    background: rgba(88,166,255,0.15);
    border-radius: 2px;
  }
  .char-link-sm {
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed rgba(255,166,87,0.15);
    transition: all 0.15s;
  }
  .char-link-sm:hover {
    color: var(--han);
    border-bottom-color: var(--accent);
    background: rgba(88,166,255,0.1);
    border-radius: 2px;
  }

  /* Stroke order modal */
  .stroke-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.75);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
    padding: 20px;
  }
  .stroke-overlay.open { display: flex; }
  .stroke-modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    width: auto;
    display: inline-block;
    overflow-x: auto;
  }
  .stroke-modal .close-btn {
    position: absolute;
    top: 8px; right: 12px;
    background: none;
    border: none;
    color: var(--text2);
    font-size: 1.4rem;
    cursor: pointer;
  }
  .stroke-modal .close-btn:hover { color: var(--text); }
  .stroke-modal .char-label {
    font-size: 1.1rem;
    color: var(--text2);
    margin-bottom: 8px;
  }
  .stroke-modal .char-big {
    font-size: 3rem;
    color: var(--text2);
    margin-bottom: 12px;
    cursor: pointer;
    user-select: none;
    transition: transform 0.15s;
  }
  .stroke-modal .char-big:hover {
    transform: scale(1.05);
    color: var(--accent);
  }
  .stroke-modal .char-big:active {
    transform: scale(0.98);
  }
  .stroke-modal #stroke-character {
    display: block;
    margin: 0 auto;
  }

  @media (max-width: 600px) {
    .lesson-body { padding: 12px; }
    .vocab-table { font-size: 0.8rem; }
    .vocab-table td, .vocab-table th { padding: 5px 6px; }
  }

  /* Character Decomposition */
  .decomp {
    margin-top: 12px;
    padding: 10px 12px;
    background: rgba(88,166,255,0.06);
    border: 1px solid var(--accent);
    border-radius: 8px;
    text-align: left;
  }
  .decomp-header {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 6px;
  }
  .decomp-row {
    font-size: 0.82rem;
    padding: 3px 0;
    line-height: 1.6;
    border-bottom: 1px solid rgba(48,54,61,0.5);
  }
  .decomp-row:last-child { border-bottom: none; }
  .decomp-char {
    color: var(--han);
    font-size: 1rem;
    font-weight: 600;
    margin-right: 4px;
  }
  .decomp-comp {
    color: var(--py);
    font-size: 0.8rem;
  }
  /* Clickable components in the breakdown + their card popup (scripts/rcard-lib.js) */
  .rc-c { cursor: pointer; border-bottom: 1px dotted var(--ac); }
  .rc-c:hover { background: #30363d; border-radius: 3px; }
  #rtip { position: fixed; display: none; z-index: 99999; max-width: 330px;
          background: #0d1117; border: 1px solid #3d444d; border-radius: 8px;
          padding: 8px 12px; box-shadow: 0 10px 26px rgba(0, 0, 0, .6); }
  #rtip .rc-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  #rtip .rc-comp { font-size: 1.7rem; color: var(--orange); line-height: 1.15; }
  #rtip .rc-name { color: #e6edf3; font-weight: 600; }
  #rtip .rc-cat { color: #8b949e; font-size: .72rem; border: 1px solid #30363d;
                  border-radius: 999px; padding: 1px 7px; }
  #rtip .rc-desc { margin: 6px 0 4px; color: #adbac7; font-size: .85rem; line-height: 1.4; }
  #rtip .rc-ex { margin: 2px 0; color: #8b949e; font-size: .8rem; }
  #rtip .rc-more { margin: 6px 0 0; font-size: .78rem; }
  #rtip a { color: var(--ac); text-decoration: none; }
  #rtip a:hover { text-decoration: underline; }
  /* ↻/💾/📋 icon row under the big character (scripts/wordlist-save.js) */
  #wl-save-row { margin: 8px auto 2px; display: flex; align-items: center; justify-content: center;
                 gap: 8px; flex-wrap: wrap; }
  #wl-save-row .wl-btn { width: 34px; height: 30px; padding: 0; font-size: 1rem; line-height: 1;
                         background: #21262d; color: #adbac7; border: 1px solid #30363d;
                         border-radius: 7px; cursor: pointer; }
  #wl-save-row .wl-btn:hover { background: #30363d; color: #e6edf3; border-color: #58a6ff; }
  #wl-save-row .wl-btn.wl-ok { border-color: #3fb950; background: #12261a; }
  #wl-save-row .wl-btn[disabled] { opacity: .55; cursor: default; }
  #wl-save-row .wl-msg { font-size: .78rem; color: #8b949e; }
  #wl-save-row .wl-msg.ok { color: #3fb950; }
  #wl-save-row .wl-msg.err { color: #f85149; }
  /* Per-character chips under the strokes (scripts/wordlist-save.js) */
  #wl-chips { margin: 8px auto 2px; display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
  #wl-chips .wl-chip { min-width: 36px; padding: 4px 8px; font-size: 1.1rem; line-height: 1.2;
                       background: #161b22; color: #e6edf3; border: 1px solid #30363d;
                       border-radius: 8px; cursor: pointer; }
  #wl-chips .wl-chip:hover { border-color: #58a6ff; color: #79c0ff; }
  .decomp-hint {
    color: var(--text2);
    font-size: 0.78rem;
  }
  /* Commonly confused words in stroke modal */
  .confused-box {
    margin-top: 16px;
    padding: 12px;
    background: rgba(210,153,34,0.08);
    border: 1px solid var(--orange);
    border-radius: 8px;
    text-align: left;
  }
  .confused-header {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--orange);
    margin-bottom: 8px;
  }
  .confused-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .confused-item {
    min-width: 110px;
    flex: 1;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px;
    text-align: center;
  }
  .confused-char {
    font-size: 1.6rem;
    color: var(--han);
    cursor: pointer;
  }
  .confused-char:hover { color: var(--accent); }
  .confused-pinyin {
    font-size: 0.8rem;
    color: var(--py);
    margin-top: 2px;
    font-weight: 500;
  }
  .confused-meaning {
    font-size: 0.75rem;
    color: var(--text2);
    margin-top: 2px;
  }

  /* Related / Confusable Popovers */
  .related-tag {
    display: inline-block;
    margin-left: 4px;
    padding: 0 5px;
    font-size: 0.7rem;
    color: var(--orange);
    cursor: pointer;
    border: 1px solid var(--orange);
    border-radius: 4px;
    background: rgba(210,153,34,0.1);
    transition: all 0.15s;
    user-select: none;
    position: relative;
  }
  .related-tag:hover { background: var(--orange); color: #000; }
  .related-popup {
    display: none;
    position: fixed;
    min-width: 220px;
    max-width: 320px;
    background: var(--surface);
    border: 1px solid var(--orange);
    border-radius: 8px;
    padding: 8px 10px;
    z-index: 99999;
    font-size: 0.78rem;
    line-height: 1.5;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  }
  .related-popup.show { display: block; }
  .related-popup-row { padding: 2px 0; border-bottom: 1px solid rgba(48,54,61,0.4); }
  .related-popup-row:last-child { border-bottom: none; }
  .related-popup-char { color: var(--han); font-weight: 600; font-size: 0.9rem; }
  .related-popup-type {
    color: var(--accent); font-size: 0.7rem;
    background: rgba(88,166,255,0.12); padding: 0 4px; border-radius: 3px; margin: 0 2px;
  }
  .related-popup-note { color: var(--text2); font-size: 0.75rem; }

  /* Section-specific hide toggles */
  .passage-box, .examples-box {
    position: relative;
  }
  .section-hide-toggle {
    position: absolute;
    top: 10px;
    right: 10px;
    margin: 0;
  }
  .passage-box .passage-label,
  .examples-box .examples-label {
    padding-right: 70px;
  }

  /* Section hide-mode rules (in addition to lesson-level) */
  .lesson.hide-mode .han, .lesson.hide-mode .pattern-cn,
  .passage-box.hide-mode .han, .passage-box.hide-mode .pattern-cn,
  .examples-box.hide-mode .han, .examples-box.hide-mode .pattern-cn {
    color: transparent !important;
    background: var(--surface2);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
  }
  .lesson.hide-mode .han > *, .lesson.hide-mode .pattern-cn > *,
  .passage-box.hide-mode .han > *, .passage-box.hide-mode .pattern-cn > *,
  .examples-box.hide-mode .han > *, .examples-box.hide-mode .pattern-cn > * {
    visibility: hidden;
  }
  .lesson.hide-mode .han .audio-btn, .lesson.hide-mode .han .audio-btn-sm,
  .lesson.hide-mode .pattern-cn .audio-btn, .lesson.hide-mode .pattern-cn .audio-btn-sm,
  .passage-box.hide-mode .han .audio-btn, .passage-box.hide-mode .han .audio-btn-sm,
  .passage-box.hide-mode .pattern-cn .audio-btn, .passage-box.hide-mode .pattern-cn .audio-btn-sm,
  .examples-box.hide-mode .han .audio-btn, .examples-box.hide-mode .han .audio-btn-sm,
  .examples-box.hide-mode .pattern-cn .audio-btn, .examples-box.hide-mode .pattern-cn .audio-btn-sm {
    visibility: visible;
  }
  .lesson.hide-mode .han:hover, .lesson.hide-mode .pattern-cn:hover,
  .passage-box.hide-mode .han:hover, .passage-box.hide-mode .pattern-cn:hover,
  .examples-box.hide-mode .han:hover, .examples-box.hide-mode .pattern-cn:hover {
    background: var(--border);
  }
  .lesson.hide-mode .han.revealed, .lesson.hide-mode .pattern-cn.revealed,
  .passage-box.hide-mode .han.revealed, .passage-box.hide-mode .pattern-cn.revealed,
  .examples-box.hide-mode .han.revealed, .examples-box.hide-mode .pattern-cn.revealed {
    color: var(--han) !important;
    background: transparent;
  }
  .lesson.hide-mode .han.revealed > *, .lesson.hide-mode .pattern-cn.revealed > *,
  .passage-box.hide-mode .han.revealed > *, .passage-box.hide-mode .pattern-cn.revealed > *,
  .examples-box.hide-mode .han.revealed > *, .examples-box.hide-mode .pattern-cn.revealed > * {
    visibility: visible;
  }

  .hide-toggle {
    display: inline-block;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--orange);
    cursor: pointer;
    padding: 2px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    margin: 4px 0 8px 0;
    transition: all 0.15s;
  }
  .hide-toggle:hover { background: var(--orange); color: #000; border-color: var(--orange); }
  .hide-toggle.active { background: var(--accent2); color: #000; border-color: var(--accent2); }
  .hide-toggle.active:hover { opacity: 0.85; }
  .reveal-next-btn {
    display: none;
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 6px;
    color: #000;
    cursor: pointer;
    padding: 2px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 6px;
    transition: all 0.15s;
  }
  .reveal-next-btn:hover { opacity: 0.85; }
  .lesson.hide-mode .reveal-next-btn { display: inline-block; }
  /* Sticky search */
  .sticky-search-wrap {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
  }
  .sticky-search-wrap .container {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .sticky-search-wrap .search-box {
    margin-bottom: 0;
  }
  .lesson summary .hide-toggle {
    margin-left: auto;
    margin-top: 0;
    margin-bottom: 0;
  }


  /* ===== Reading treatment (same as the /dialogues/ pages) =====
     Characters are grouped into words with pinyin in <rt> above them. The pinyin
     stays hidden until body.show-py (the 拼音 toggle) or the pointer hovers a word,
     which pops up pinyin + meaning (#wtip). Generated by
     ~/chinese-vocab-test/scripts/wordify-index.py — do not hand-edit the .w/.h markup. */
  .sentence .han { font-size: 1.75rem; line-height: 2.55rem; letter-spacing: .02em; }
  .sentence .han ruby { ruby-align: center; }
  .sentence .han rt { font-size: .62rem; color: var(--py); font-weight: 400;
                      letter-spacing: .01em; visibility: hidden; }
  body.show-py .sentence .han rt { visibility: visible; }
  .sentence .han .h { cursor: pointer; }
  .sentence .han .w { border-radius: 3px; }
  .sentence .han .w:hover, .sentence .han .h:hover { background: var(--border); }
  .sentence .han .w.hovered { background: var(--border); box-shadow: 0 0 0 1px var(--border); }
  .sentence .en { font-size: .95rem; font-style: italic; color: var(--text2);
                  margin-top: 6px; }
  .sentence { margin-bottom: 14px; }
  /* the romanisation line only comes back for the writing test (🙈 Hide) */
  .sentence .py { display: none; }
  .lesson.hide-mode .sentence .py,
  .passage-box.hide-mode .sentence .py,
  .examples-box.hide-mode .sentence .py { display: block; }
  .lesson.hide-mode .sentence .han rt,
  .passage-box.hide-mode .sentence .han rt,
  .examples-box.hide-mode .sentence .han rt { visibility: hidden; }
  .pattern-cn { font-size: 1.35rem; line-height: 2rem; }
  .vocab-table .han { font-size: 1.25rem; }
  #wtip { position: fixed; display: none; z-index: 99999; max-width: 330px;
          pointer-events: none; background: var(--bg); border: 1px solid var(--border);
          border-radius: 8px; padding: 6px 11px; box-shadow: 0 8px 22px rgba(0,0,0,.55); }
  #wtip .tp { color: var(--py); font-size: 1.15rem; font-weight: 600; line-height: 1.3; }
  #wtip .tm { color: #adbac7; font-size: .85rem; margin-top: 2px; line-height: 1.35; }
  #py-all-btn.active { background: var(--accent2); color: #000; border-color: var(--accent2); }
  @media (max-width: 520px) {
    .sentence .han { font-size: 1.5rem; line-height: 2.3rem; }
    .pattern-cn { font-size: 1.2rem; }
  }
  /* ===== Pattern section: press-and-hold to peek =====
     Each Chinese chunk in a pattern is a .pw span. In hide mode the whole line is
     transparent; holding the left mouse button on a chunk (or touching it) shows
     that chunk only, and it hides again the moment the button is released. */
  .section-divider { height: 1px; background: var(--border); margin: 16px 0 12px; }
  .pattern-cn .pw { border-radius: 3px; cursor: pointer; user-select: none; }
  .lesson.hide-mode .pattern-cn .pw.peek,
  .passage-box.hide-mode .pattern-cn .pw.peek,
  .examples-box.hide-mode .pattern-cn .pw.peek {
    color: var(--han) !important; background: transparent;
  }

/* ── Daily Chinese Dialogues: layout on top of the course-page theme ── */
body { margin: 0; }
.bar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px;
       flex-wrap: wrap; padding: 10px 14px; background: #0d1117; border-bottom: 1px solid #30363d; }
.bar .ttl { font-weight: 600; color: #e6edf3; font-size: 1rem; }
.bar .back, .bar .yt { color: #58a6ff; text-decoration: none; font-size: .9rem; white-space: nowrap; }
.bar .back:hover, .bar .yt:hover { text-decoration: underline; }
.bar .ctl { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.tg { background: #161b22; color: #8b949e; border: 1px solid #30363d; border-radius: 6px;
      padding: 5px 10px; font-size: .85rem; cursor: pointer; }
.tg.on { color: #e6edf3; border-color: #58a6ff; background: #1f2937; }
.meta { padding: 8px 14px; color: #8b949e; font-size: .85rem; border-bottom: 1px solid #21262d; }
#nofile { display: none; margin: 8px 14px; padding: 8px 10px; border: 1px solid #d29922;
          border-radius: 6px; color: #d29922; font-size: .85rem; }

.player { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
          padding: 8px 14px; border-bottom: 1px solid #21262d; background: #10151c;
          position: sticky; top: var(--barh, 47px); z-index: 20; }
.player audio { height: 34px; max-width: 460px; width: 100%; flex: 1 1 300px; }
.player .hint { color: #6e7681; font-size: .78rem; }
.player .pos { color: #79c0ff; font-size: .85rem; font-variant-numeric: tabular-nums; }
.meta a { color: #58a6ff; text-decoration: none; word-break: break-all; }
.meta a:hover { text-decoration: underline; }
.bar .yt { color: #ff7b72; border: 1px solid #6e3031; border-radius: 6px; padding: 4px 10px;
           background: #2b1a1a; text-decoration: none; white-space: nowrap; }
.bar .yt:hover { text-decoration: none; background: #3a2222; }

#list { max-width: 900px; margin: 0 auto; padding: 8px 12px 80px; }
.s { position: relative; padding: 10px 12px 10px 46px; border-radius: 8px; cursor: pointer;
     border-bottom: 1px solid #161b22; }
.s:hover { background: #161b22; }
.s.playing { background: #12261a; box-shadow: inset 3px 0 0 #3fb950; }
.s .pl { position: absolute; left: 10px; top: 12px; background: none; border: none;
         color: #58a6ff; font-size: 1rem; cursor: pointer; padding: 0; }
/* Copy-the-line button: sits under the speaker in the left gutter, copies the hanzi. */
.s .cp { position: absolute; left: 11px; top: 38px; background: none; border: none;
         color: #6e7681; font-size: .82rem; cursor: pointer; padding: 0; opacity: .65; }
.s .cp:hover { color: #e6edf3; opacity: 1; }
.s .cp.ok { color: #3fb950; opacity: 1; }
.s .cp.err { color: #f85149; opacity: 1; }
.s .zh { font-size: 1.9rem; line-height: 2.5rem; color: #ffa657; letter-spacing: .02em; }
.s .zh ruby { ruby-align: center; }
.s .zh rt { font-size: .62rem; color: #79c0ff; font-weight: 400; letter-spacing: .01em; }
.s .zh .h { cursor: pointer; }
.s .zh .h:hover { background: #30363d; border-radius: 3px; }
.s .zh .p { color: #8b949e; font-size: 1.4rem; }
.s .en { margin-top: 6px; color: #8b949e; font-size: .95rem; font-style: italic; }

/* view modes */
body.no-py .zh rt { visibility: hidden; }
body.no-en .s .en { display: none; }
body.hide-cn .zh .h { color: transparent !important; background: #21262d; border-radius: 3px; }
body.hide-cn .zh .h.rv { color: #ffa657 !important; background: transparent; }

/* word hover popup (pinyin + meaning) */
.w { border-radius: 3px; }
.w.hovered { background: #30363d; box-shadow: 0 0 0 1px #3d444d; }
#wtip { position: absolute; display: none; z-index: 80; max-width: 330px; pointer-events: none;
        background: #0d1117; border: 1px solid #3d444d; border-radius: 8px;
        padding: 6px 11px; box-shadow: 0 8px 22px rgba(0, 0, 0, .55); }
#wtip .tp { color: #79c0ff; font-size: 1.15rem; font-weight: 600; line-height: 1.3; }
#wtip .tm { color: #adbac7; font-size: .85rem; margin-top: 2px; line-height: 1.35; }

ul.idx { list-style: none; max-width: 900px; margin: 0 auto; padding: 12px; }
ul.idx li a { display: flex; justify-content: space-between; gap: 12px; padding: 9px 10px;
              border-bottom: 1px solid #161b22; color: #e6edf3; text-decoration: none; }
ul.idx li a:hover { background: #161b22; }
ul.idx .t { color: #ffa657; }
ul.idx .n { color: #8b949e; font-size: .85rem; white-space: nowrap; }

/* 多音字: darker orange + a dotted underline, so a doubtful reading is visible */
.s .zh .h.amb, .s .zh .w.amb .h { color: #c2610c; border-bottom: 1px dotted rgba(194,97,12,.6); }
.s .zh .h.amb:hover, .s .zh .w.amb .h:hover { background: #2b1c0c; }
body.hide-cn .zh .h.amb.rv { color: #c2610c !important; }
#wtip .ta { color: #c2610c; font-size: .78rem; margin-top: 4px; line-height: 1.35;
            border-top: 1px solid rgba(194,97,12,.35); padding-top: 4px; }