/* Pianpian: the one stylesheet (app.html).
   Colours are tokens; dark mode redefines the tokens only. No build step, works from disk. */

:root {
  --bg:#FBF8F3; --surface:#FFFFFF; --surface-2:#F3EEE5; --fg:#17130F; --fg-2:#4A423B; --muted:#8A7F74;
  --line:#E7DFD3; --line-2:#D5C9B8;
  --red:#DE3B26; --red-fg:#B32A18; --red-tint:#FCEAE7;
  --jade:#0E8A63; --jade-fg:#0A6B4D; --jade-tint:#E4F4EE;
  --amber:#DE9407; --amber-fg:#96650A; --amber-tint:#FCF1DC;
  --display:'Bricolage Grotesque','Archivo',system-ui,-apple-system,sans-serif;
  --body:'Archivo','Avenir Next',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --tr-pinyin:#8A5E06; --tr-en:#2A6496; --tr-other:#2F7A4C;   /* transcript lines on paper: dark enough to read */
  --tone1:#C2352C; --tone2:#A86500; --tone3:#1B7A50; --tone4:#2B5FA6; --tone5:#8A7F74;   /* pinyin tones on paper */
  --wm-red:#DE3B26; --wm-pink:#D9604F; --wm-pink-tint:#FBE3DE; --wm-green:#0E8A63;   /* watermelon: flesh, light flesh, rind */
  --r-who:#2F6DB0; --r-where:#A8701A; --r-how:#7B55B8; --r-what:#C2477A;   /* parts of a sentence; when = rind green, verb = flesh red */
  --r:12px; --r-sm:8px;
  --ease:cubic-bezier(.2,.8,.2,1);                  /* quick start, soft landing: every slide and fold uses it */
}
:root[data-theme="dark"] {
  --bg:#14120F; --surface:#1C1916; --surface-2:#24201C; --fg:#F2EDE4; --fg-2:#C4BBAE; --muted:#8E8479;
  --line:#322C26; --line-2:#443C34;
  --red:#FF6B54; --red-fg:#FF8B76; --red-tint:#2E1A16;
  --jade:#34C795; --jade-fg:#55D9AC; --jade-tint:#10261F;
  --amber:#F5B23C; --amber-fg:#FFC96B; --amber-tint:#2B2113;
  --tr-pinyin:#FFD75E; --tr-en:#9FD8FF; --tr-other:#C8F0C0;   /* on dark: the same colours as on the video */
  --tone1:#FF7B70; --tone2:#F5B23C; --tone3:#46D39A; --tone4:#79B0FF; --tone5:#9A9086;
  --wm-red:#FF6B54; --wm-pink:#FF9A88; --wm-pink-tint:#3A201B; --wm-green:#46D39A;
  --r-who:#86B6F5; --r-where:#E2B66B; --r-how:#B9A2F2; --r-what:#F296BC;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg:#14120F; --surface:#1C1916; --surface-2:#24201C; --fg:#F2EDE4; --fg-2:#C4BBAE; --muted:#8E8479;
  --line:#322C26; --line-2:#443C34;
  --red:#FF6B54; --red-fg:#FF8B76; --red-tint:#2E1A16;
  --jade:#34C795; --jade-fg:#55D9AC; --jade-tint:#10261F;
  --amber:#F5B23C; --amber-fg:#FFC96B; --amber-tint:#2B2113;
  --tr-pinyin:#FFD75E; --tr-en:#9FD8FF; --tr-other:#C8F0C0;   /* on dark: the same colours as on the video */
  --tone1:#FF7B70; --tone2:#F5B23C; --tone3:#46D39A; --tone4:#79B0FF; --tone5:#9A9086;
  --wm-red:#FF6B54; --wm-pink:#FF9A88; --wm-pink-tint:#3A201B; --wm-green:#46D39A;
  --r-who:#86B6F5; --r-where:#E2B66B; --r-how:#B9A2F2; --r-what:#F296BC;
} }

/* ---------- base ---------- */
* { box-sizing:border-box; }
[hidden] { display:none !important; }              /* beats .row { display:flex } and friends */
html { color-scheme:light dark; scroll-behavior:smooth; scroll-padding-top:70px; }
body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.55 var(--body); -webkit-font-smoothing:antialiased; }
a { color:inherit; }
button, input, select, textarea { font:inherit; color:inherit; }
code { font:.88em var(--mono); background:var(--surface-2); border:1px solid var(--line); border-radius:5px; padding:1px 5px; }
h1 { font:800 clamp(28px,5vw,42px)/1.05 var(--display); letter-spacing:-.03em; margin:0 0 8px; }
h2 { font:700 22px var(--display); letter-spacing:-.02em; margin:46px 0 4px; }
h3 { font:600 11px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:26px 0 8px; }
.sub { color:var(--muted); font-size:13.5px; margin:0 0 14px; max-width:70ch; }
.mono { font-family:var(--mono); }
.muted { color:var(--muted); }

/* ---------- motion ---------- */
@keyframes pp-fade { from { opacity:0; transform:translateY(3px); } }
@keyframes pp-drop { from { opacity:0; transform:translateY(-6px) scale(.98); } }
@keyframes pp-rise { from { opacity:0; transform:translateY(6px) scale(.98); } }
.btn, .ib, .dd > summary, .mini, .item, .cue, .field, .thumb { transition:background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .2s ease, opacity .2s ease; }
.btn:active, .ib:active, .dd > summary:active { transform:scale(.97); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* ---------- top bar ---------- */
.bar { position:sticky; top:0; z-index:20; background:var(--bg); border-bottom:1px solid var(--line); }
.bar .in { max-width:1500px; margin:0 auto; padding:10px 20px; display:flex; align-items:center; gap:16px; }
.bar .brand { font:800 17px var(--display); letter-spacing:-.02em; text-decoration:none; margin-right:auto; }
.bar nav { display:flex; gap:14px; }
.bar nav a { font:500 12px var(--mono); text-decoration:none; color:var(--muted); }
.bar nav a:hover, .bar nav a.on { color:var(--fg); }
.dot { display:inline-flex; align-items:center; gap:7px; font:500 11.5px var(--mono); color:var(--muted); }
.dot::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--line-2); }
.dot.ok::before { background:var(--jade); box-shadow:0 0 0 3px var(--jade-tint); }
.dot.busy::before { background:var(--amber); box-shadow:0 0 0 3px var(--amber-tint); }
.dot.off::before { background:var(--red); }
.wrap { max-width:980px; margin:0 auto; padding:34px 20px 80px; }

/* ---------- controls ---------- */
.btn { display:inline-flex; align-items:center; gap:6px; font:600 12px var(--mono); text-decoration:none; white-space:nowrap; cursor:pointer;
  border:1px solid var(--line-2); background:var(--surface); color:var(--fg); padding:6px 12px; border-radius:20px; }
.btn:hover { border-color:var(--red); color:var(--red-fg); }
.btn.primary { background:var(--red); color:#fff; border-color:var(--red); }
.btn.primary:hover { background:var(--red-fg); border-color:var(--red-fg); color:#fff; }
.btn.on { background:var(--jade-tint); color:var(--jade-fg); border-color:var(--jade); }   /* switched on: a soft rind-green tint */
.btn.ok { border-color:var(--jade); color:var(--jade-fg); }
.btn:disabled { opacity:.45; cursor:default; border-color:var(--line-2); color:var(--muted); }
.field { width:100%; font:13px var(--mono); padding:9px 11px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--bg); color:var(--fg); }
.field:focus, textarea.field:focus { outline:2px solid var(--red); outline-offset:-1px; border-color:transparent; }
textarea.field { resize:vertical; min-height:120px; line-height:1.5; }
select { background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:4px 6px; }
input[type=range] { width:120px; accent-color:var(--red); }
input[type=checkbox] { accent-color:var(--jade); }        /* the watermelon touch: rind-green ticks */
.check { display:flex; gap:7px; align-items:center; font-size:13px; color:var(--fg-2); cursor:pointer; }

/* ---------- pills, notes, cards, tables ---------- */
.pill { display:inline-block; font:500 10px var(--mono); letter-spacing:.06em; text-transform:uppercase; padding:2px 7px; border-radius:20px; white-space:nowrap;
  border:1px solid var(--line); color:var(--muted); background:var(--surface-2); }
.pill.yes { background:var(--jade-tint); color:var(--jade-fg); border-color:var(--jade); }
.pill.soon { background:var(--amber-tint); color:var(--amber-fg); border-color:var(--amber); }
.pill.bad { background:var(--red-tint); color:var(--red-fg); border-color:var(--red); }
.note { margin:14px 0 0; padding:11px 14px; border-left:3px solid var(--jade); background:var(--jade-tint); border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:13.5px; color:var(--fg-2); }
.note.warn { border-color:var(--amber); background:var(--amber-tint); }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; }
.card h4 { margin:0 0 8px; font:600 10px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.row + .row { margin-top:8px; }
.tw { overflow-x:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); }
table { width:100%; border-collapse:collapse; font-size:14px; min-width:640px; }
th { text-align:left; font:500 10px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); padding:10px 14px; background:var(--surface-2); border-bottom:1px solid var(--line); }
td { padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
tr:last-child td { border-bottom:0; }
td small { display:block; color:var(--muted); font-size:12.5px; margin-top:2px; }
.path { font:11.5px var(--mono); color:var(--muted); word-break:break-all; }

/* ---------- command blocks ---------- */
.cmd { margin:12px 0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.cmd .h { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 14px; border-bottom:1px solid var(--line); }
.cmd .h b { font:600 14px var(--display); }
.cmd .h span { font:11px var(--mono); color:var(--muted); }
.cmd pre, pre.log { margin:0; padding:12px 14px; font:12.5px/1.6 var(--mono); overflow-x:auto; white-space:pre; background:var(--surface-2); }
.cmd p { margin:0; padding:9px 14px; font-size:13px; color:var(--fg-2); border-top:1px solid var(--line); }
.tested { color:var(--jade-fg) !important; } .untested { color:var(--amber-fg) !important; }

/* ---------- subtitle player (assets/player.js) ---------- */
.pl { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:start; }
.pl.nolist { display:block; }                      /* the page shows the transcript elsewhere (app.html: right panel) */
/* folding the transcript: it leaves the layout at once and slides out on top, while the video and
   the buttons glide into the freed space (Kit.flip in player.js). Only transform and opacity move. */
.pl { position:relative; }
.pl .transcript { width:320px; will-change:transform; transition:opacity .26s ease, transform .34s var(--ease); }
.pl.notr { column-gap:0; }
.pl.notr .transcript { position:absolute; top:0; right:0; opacity:0; transform:translateX(28px); pointer-events:none; }
@media (max-width:1100px) { .pl { grid-template-columns:1fr; } }
/* always as wide as its column (so it lines up with the menu row below); when the window is short,
   the height stops growing and the picture is centred with black bars instead of the box shrinking */
.stage { position:relative; width:100%; background:#000; border-radius:var(--r); overflow:hidden; aspect-ratio:16/9; max-height:calc(100vh - 130px); container-type:size; }
.stage video { width:100%; height:100%; display:block; background:#000; }
/* fullscreen: the final size at once (no max-height left over from the page, no rounded corners
   shrinking), so the system's own zoom animation is the only motion */
.stage:fullscreen { border-radius:0; aspect-ratio:auto; width:100vw; height:100vh; max-height:none; transition:none; }
.stage:-webkit-full-screen { border-radius:0; aspect-ratio:auto; width:100vw; height:100vh; max-height:none; transition:none; }
.stage:fullscreen video, .stage:-webkit-full-screen video { object-fit:contain; }
.vc { position:absolute; left:0; right:0; bottom:0; z-index:2; display:flex; align-items:center; gap:6px; padding:18px 12px 8px;
  background:linear-gradient(transparent, rgba(0,0,0,.72)); color:#fff; font:12px var(--mono); opacity:0; transition:opacity .25s;
  pointer-events:none; }                            /* the bar's empty space never steals clicks from subtitle words */
.vc > * { pointer-events:auto; }
.stage:not(.awake).loaded .vc > * { pointer-events:none; }   /* hidden bar: nothing in it is clickable */
.stage.awake .vc, .stage:not(.loaded) .vc { opacity:1; }
.stage.loaded:not(.awake) { cursor:none; }
.vc button { background:none; border:0; color:#fff; font-size:15px; line-height:1; padding:5px 7px; border-radius:6px; cursor:pointer; min-width:30px; }
.vc button:hover { background:rgba(255,255,255,.16); }
.vc [data-vspeed] { font:600 12px var(--mono); }
.vc [data-time] { white-space:nowrap; opacity:.9; padding:0 4px; }
.vc input[type=range] { flex:1; width:auto; min-width:60px; accent-color:#FF6B54; }   /* the progress bar: red flesh */
.ov { z-index:3; }                                 /* words sit above the bar; the rest of .ov lets clicks through */
.stage .cover { position:absolute; left:0; right:0; bottom:calc(var(--cb, 5) * 1%); height:calc(var(--ch, 25) * 1%); pointer-events:none;
  background:rgba(12,10,8,.35); -webkit-backdrop-filter:blur(18px) brightness(.55); backdrop-filter:blur(18px) brightness(.55);
  -webkit-mask-image:linear-gradient(transparent, #000 12%, #000 88%, transparent); mask-image:linear-gradient(transparent, #000 12%, #000 88%, transparent); }
.ov { position:absolute; left:0; right:0; bottom:calc(var(--lift) * 1cqh); text-align:center; padding:0 5cqw; pointer-events:none; }
.ov .ln { display:block; }
.ov span { display:inline-block; max-width:100%; margin:.1em 0; padding:.05em .45em; border-radius:.2em; font-size:calc(var(--size) * 1cqh);
  line-height:1.25; font-weight:600; text-shadow:0 0 .12em #000,0 0 .12em #000,0 .04em .1em #000; }
.ov.bg span { background:rgba(0,0,0,.62); }
.ov span.blur { filter:blur(.32em); }
/* words linked to their pinyin (zh.words.json): hover lights up both, click pins */
.ov .w { font-style:normal; pointer-events:auto; cursor:pointer; border-radius:.15em; padding:0 .04em; transition:background .12s; }
.ov .w.hl { background:var(--red); color:#fff; }
.ov ruby.w rt { font-size:.48em; font-weight:500; padding-bottom:.08em; }
.ov .gl { display:block; min-height:0; }
.ov .gl span { font-size:calc(var(--size) * .55 * 1cqh); font-weight:500; background:rgba(222,59,38,.92) !important; color:#fff !important; }
.ov .gl b { font-weight:700; }
.cue .w { font-style:normal; border-radius:3px; }
.cue .w.hl { background:var(--red-tint); color:var(--red-fg); }
.stage .drop { position:absolute; inset:0; display:grid; place-items:center; text-align:center; color:#cfc7bb; padding:20px; background:#14120F; font-size:14px; }
.stage .drop b { display:block; font-size:18px; color:#fff; margin-bottom:6px; }
.stage.loaded .drop { display:none; }
.stage.over { outline:3px dashed var(--red); outline-offset:-6px; }
/* the row of dropdowns under the video */
.pbar { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:10px; }
.pbar .grow { flex:1; }
.pbar [data-extra] { display:contents; }
.dd { position:relative; }
.dd > summary, .ib { list-style:none; display:inline-flex; align-items:center; gap:6px; cursor:pointer; user-select:none; white-space:nowrap;
  font:600 12px var(--mono); padding:6px 12px; border:1px solid var(--line-2); border-radius:20px; background:var(--surface); color:var(--fg); }
.dd > summary::-webkit-details-marker { display:none; }
.dd > summary::after { content:'▾'; font-size:10px; color:var(--muted); }
.dd.icon > summary::after { content:none; }
.dd > summary:hover, .ib:hover { border-color:var(--red); color:var(--red-fg); }
.dd[open] > summary { background:var(--red-tint); color:var(--red-fg); border-color:var(--red); }   /* the open menu: a soft flesh tint */
.ib.on { background:var(--jade-tint); color:var(--jade-fg); border-color:var(--jade); }
.dd[open] > summary::after { color:inherit; }
.ib { padding:6px 10px; }
.ddp { position:absolute; top:calc(100% + 6px); left:0; z-index:30; width:max-content; min-width:240px; max-width:min(540px, 92vw); max-height:min(64vh, 560px); overflow:auto;
  display:grid; gap:10px; padding:12px; background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r); box-shadow:0 14px 36px rgba(0,0,0,.18); }
.ddp.wide { width:min(540px, 92vw); }
.ddp.up { top:auto; bottom:calc(100% + 6px); }
.dd[open] > .ddp { animation:pp-drop .18s var(--ease); transform-origin:top left; }
.dd[open] > .ddp.up { animation-name:pp-rise; transform-origin:bottom left; }
.stage video { transition:opacity .35s ease; }
.stage:not(.loaded) video { opacity:0; }
.dd.right .ddp { left:auto; right:0; }
.ddp h5 { margin:2px 0 -4px; font:600 10px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.ddp .row + .row { margin-top:0; }
.ddp a.res { display:block; padding:6px 8px; margin:0 -4px; border-radius:var(--r-sm); text-decoration:none; }
.ddp a.res:hover { background:var(--surface-2); }
.ddp a.res b { display:block; font-size:13.5px; }
.ddp a.res small { color:var(--muted); font-size:12px; }
.trk { display:grid; grid-template-columns:auto auto minmax(0,1fr) 92px auto auto; gap:8px; align-items:center; padding:6px 8px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); }
.trk + .trk { margin-top:6px; }
.trk input[type=color] { width:20px; height:20px; padding:0; border:1px solid var(--line-2); border-radius:50%; background:none; cursor:pointer; }
.trk input[type=color]::-webkit-color-swatch-wrapper { padding:0; } .trk input[type=color]::-webkit-color-swatch { border:0; border-radius:50%; }
.trk input[type=range] { width:92px; }
.mini { font:600 10px var(--mono); border:1px solid var(--line-2); background:var(--surface); border-radius:12px; padding:2px 8px; cursor:pointer; color:var(--muted); }
.mini.on { background:var(--jade-tint); color:var(--jade-fg); border-color:var(--jade); }
.trk .nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px; }
.trk small { color:var(--muted); font:11px var(--mono); }
.trk button { border:0; background:none; cursor:pointer; color:var(--muted); padding:0 3px; }
.trk button:hover { color:var(--fg); }
.keys { font:11px var(--mono); color:var(--muted); line-height:1.9; gap:4px; }
.keys b { color:var(--fg-2); background:var(--surface-2); border:1px solid var(--line); border-radius:4px; padding:0 5px; font-weight:600; }
.transcript { max-height:calc(100vh - 120px); overflow:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); }
@media (max-width:1100px) { .pl .transcript { width:auto; max-height:320px; } .pl .transcript > * { width:auto; } .pl.notr .transcript { display:none; } }
.cue { padding:8px 12px; border-bottom:1px solid var(--line); cursor:pointer; }
.cue:last-child { border-bottom:0; }
.cue:hover { background:var(--surface-2); }
.cue.now { background:var(--surface-2); box-shadow:inset 3px 0 var(--red); }
.cue .t { font:10.5px var(--mono); color:var(--muted); }
.cue .l { font-size:14.5px; }
.cue .l.pinyin { color:var(--tr-pinyin); } .cue .l.en { color:var(--tr-en); } .cue .l.stacked, .cue .l.other { color:var(--tr-other); }
.empty { padding:18px; color:var(--muted); font-size:13px; }

@media (max-width:640px) { .bar nav { display:none; } .wrap { padding:24px 16px 70px; } }

/* ---------- tone colours (pinyin) and tense colours (Chinese) ---------- */
.t1, .t2, .t3, .t4, .t5 { text-decoration:none; }
.ov .t1 { color:#FF6B6B; } .ov .t2 { color:#F5B23C; } .ov .t3 { color:#46D39A; } .ov .t4 { color:#6FA8FF; } .ov .t5 { color:#CFC7BB; }
.t1 { color:var(--tone1); } .t2 { color:var(--tone2); } .t3 { color:var(--tone3); } .t4 { color:var(--tone4); } .t5 { color:var(--tone5); }
.ov .w.hl s, .ov .w.hl .g { color:inherit; background:none; outline:0; box-shadow:none; }
.ov .gl s { color:inherit; }                       /* the card has its own background: plain white pinyin there */
.g { font-weight:inherit; }
/* on the video (always dark): the text stays white, only an underline in the tense's colour
   (solid when sure, dashed for "maybe" and "new situation", dotted for time words) */
.ov .g { cursor:help; pointer-events:auto; text-decoration:underline; text-decoration-thickness:.09em; text-underline-offset:.16em; }
.ov .g.past { text-decoration-color:#46D39A; } .ov .g.present { text-decoration-color:#FF6B54; } .ov .g.future { text-decoration-color:#FF9A88; }
.ov .g.maybe { text-decoration-color:#FF9A88; text-decoration-style:dashed; } .ov .g.change { text-decoration-color:#46D39A; text-decoration-style:dashed; }
.ov .g.time-past, .ov .g.time-present, .ov .g.time-future { text-decoration-style:dotted; }
.ov .g.time-past { text-decoration-color:#46D39A; } .ov .g.time-present { text-decoration-color:#FF6B54; } .ov .g.time-future { text-decoration-color:#FF9A88; }
/* in the transcript and the Grammar menu: the same underlines, in the theme's colours */
.cue .g { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; }
.cue .g.past, .cue .g.change, .cue .g.time-past { text-decoration-color:var(--wm-green); }
.cue .g.present, .cue .g.time-present { text-decoration-color:var(--wm-red); }
.cue .g.future, .cue .g.maybe, .cue .g.time-future { text-decoration-color:var(--wm-pink); }
.cue .g.maybe, .cue .g.change { text-decoration-style:dashed; }
.cue .g.time-past, .cue .g.time-present, .cue .g.time-future { text-decoration-style:dotted; }
.ddp.grammar { width:min(520px, 92vw); gap:12px; }
/* the cheat sheet, in watermelon colours and few of them: the verb in red (the heart of the sentence), time words
   in rind green, the verb's markers (了 过 没 要 会 在) as a soft pink tag; who / where / what stay neutral */
.gr { display:grid; gap:6px; }
.gr h5 { margin:0; display:flex; align-items:center; gap:6px; }
.gr.past h5::before, .gr.future h5::before, .gr.present h5::before { content:''; width:7px; height:7px; border-radius:50%; }
.gr.past h5::before { background:var(--wm-green); } .gr.present h5::before { background:var(--wm-red); } .gr.future h5::before { background:var(--wm-pink); }
.gr p { margin:2px 0 0; font-size:12.5px; color:var(--fg-2); }
.gr .order { display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:4px; font:500 10.5px var(--mono); color:var(--muted); }
.gr .order.zh { font:600 15px var(--body); color:var(--fg); }
.gr .order span { padding:3px 4px; border-radius:6px; background:var(--surface-2); text-align:center; }
.gr .order span.r-who { color:var(--r-who); } .gr .order span.r-when { color:var(--wm-green); } .gr .order span.r-where { color:var(--r-where); }
.gr .order span.r-how { color:var(--r-how); } .gr .order span.r-what { color:var(--r-what); }
.gr .order span[class^="r-"]:not(.r-verb) { box-shadow:inset 0 -2px currentColor; }
.gr .order span.r-verb { background:var(--wm-red); color:#fff; }
.gr .order.zh small { display:block; font:400 9.5px var(--mono); color:inherit; opacity:.75; }
.gr i[class^="r-"] { font-style:normal; }
.r-who { color:var(--r-who); } .r-when { color:var(--wm-green); } .r-where { color:var(--r-where); } .r-how { color:var(--r-how); } .r-what { color:var(--r-what); }
.r-verb { color:var(--wm-red); font-weight:800; }
.gr .ex { display:grid; grid-template-columns:112px auto minmax(0,1fr); gap:8px; align-items:baseline; font-size:12.5px; }
.gr .ex code { font-size:11px; background:none; border:0; padding:0; color:var(--muted); }
.gr .ex em { font-style:normal; color:var(--fg-2); }
.gr .ex.more { opacity:.8; }
.gr .zh { font-size:16px; line-height:2.1; color:var(--fg); }
.gr .zh ruby { ruby-align:center; margin:0 .06em; }
.gr .zh rt { font:500 10px var(--mono); letter-spacing:0; color:var(--muted); }
.gr .zh ruby[class^="r-"] rt { color:inherit; opacity:.85; }   /* each word's pinyin in its word's colour */
/* a tense marker: plain text in a small box whose border is its tense's colour (so it never looks like the red verb) */
.gr .g { background:none; color:var(--fg); font-weight:600; text-decoration:none; border:1.5px solid var(--line-2); border-radius:5px; padding:0 .12em; margin:0 .1em; }
.gr .g.past { border-color:var(--wm-green); } .gr .g.future { border-color:var(--wm-pink); } .gr .g.present { border-color:var(--wm-red); }
.gr .zh ruby.g rt { color:var(--muted); }
.gr .key { display:flex; flex-wrap:wrap; gap:4px 14px; align-items:center; font-size:12px; color:var(--muted); margin:0; }
.gr .key .g { font-size:13px; }
/* the card above the lines: the word's HSK level and measure word, or a tense rule in its colour */
.ov .gl em { font-style:normal; font-size:.85em; margin-left:.45em; padding:0 .35em; border:1px solid rgba(255,255,255,.55); border-radius:.3em; white-space:nowrap; }
.ov .gl span.rule { background:rgba(20,18,15,.92) !important; }
.ov .gl span.rule.past { background:rgba(14,138,99,.95) !important; } .ov .gl span.rule.present { background:rgba(222,59,38,.95) !important; }
.ov .gl span.rule.future { background:rgba(217,96,79,.95) !important; }
.ov .gl span.rule.maybe { box-shadow:inset 0 0 0 .08em #FF9A88; } .ov .gl span.rule.change { box-shadow:inset 0 0 0 .08em #46D39A; }
.ov .gl span.rule.time-past { box-shadow:inset 0 -.18em #46D39A; } .ov .gl span.rule.time-present { box-shadow:inset 0 -.18em #FF6B54; } .ov .gl span.rule.time-future { box-shadow:inset 0 -.18em #FF9A88; }

/* follow the voice: the word being said, on a soft grey (stronger than a hover, keeps its own colours);
   a clicked word's red wins */
.ov .w.say { background:rgba(255,255,255,.36); box-shadow:0 0 0 .08em rgba(255,255,255,.36); transition:background .12s ease; }
.cue .w.say { background:var(--line-2); box-shadow:0 0 0 2px var(--line-2); }
.ov .w.hl.say { background:var(--red); }
.tonekey { margin:-2px 0 0; font:500 11.5px var(--mono); color:var(--muted); display:flex; flex-wrap:wrap; gap:4px 12px; }   /* what the pinyin colours mean */