/* lk — minimal default look for the runtime's injected UI.
   Everything reads CSS custom properties; a site restyles lk by redefining the --lk-* tokens
   (or any .lk-* rule). lk never styles the page itself (body, headings, layout). */

:root {
  --lk-font: inherit;
  --lk-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --lk-bg: #faf9f6;
  --lk-surface: #ffffff;
  --lk-fg: #1c1c1a;
  --lk-muted: #5c5a54;
  --lk-line: #dcd8cf;
  --lk-accent: #2b5bc8;
  --lk-accent-fg: #ffffff;
  --lk-accent-soft: #e8eefb;
  --lk-ok: #1d6f46;
  --lk-ok-soft: #e4f3ea;
  --lk-bad: #b0271f;
  --lk-bad-soft: #fbe9e7;
  --lk-warn: #7d5200;
  --lk-warn-soft: #fcf1d8;
  --lk-mark-q: #ffd7cd;
  --lk-mark-k: #fdeea0;
  --lk-mark-d: #d7e4fd;
  --lk-mark-x: #d9f0cf;
  --lk-radius: 10px;
  --lk-radius-sm: 6px;
  --lk-hit: 44px;
  --lk-gap: 12px;
  --lk-shadow: 0 8px 28px rgb(0 0 0 / 0.14);
  --lk-top-offset: 0px;   /* measured and updated by lk: the band a sticky / fixed header covers at the top */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lk-bg: #151618; --lk-surface: #1d1f23; --lk-fg: #ebe9e4; --lk-muted: #a8a59d; --lk-line: #393c43;
    --lk-accent: #8eaefc; --lk-accent-fg: #0d1830; --lk-accent-soft: #1d2945;
    --lk-ok: #74d19f; --lk-ok-soft: #15301f; --lk-bad: #ff8f85; --lk-bad-soft: #3b1b18; --lk-warn: #f0c35e; --lk-warn-soft: #382c10;
    --lk-mark-q: #5d2f27; --lk-mark-k: #56491a; --lk-mark-d: #243a5e; --lk-mark-x: #294826;
    --lk-shadow: 0 8px 28px rgb(0 0 0 / 0.5);
  }
}
:root[data-theme="dark"] {
  --lk-bg: #151618; --lk-surface: #1d1f23; --lk-fg: #ebe9e4; --lk-muted: #a8a59d; --lk-line: #393c43;
  --lk-accent: #8eaefc; --lk-accent-fg: #0d1830; --lk-accent-soft: #1d2945;
  --lk-ok: #74d19f; --lk-ok-soft: #15301f; --lk-bad: #ff8f85; --lk-bad-soft: #3b1b18; --lk-warn: #f0c35e; --lk-warn-soft: #382c10;
  --lk-mark-q: #5d2f27; --lk-mark-k: #56491a; --lk-mark-d: #243a5e; --lk-mark-x: #294826;
  --lk-shadow: 0 8px 28px rgb(0 0 0 / 0.5);
}

/* ---------- landing below a sticky header: the browser's own jumps (#id, scrollIntoView) keep clear of the
   covered band too. Zero specificity: a site rule wins. Do not also set scroll-padding-top on html (they add up). */
:where([data-lk], h2, h3, :target) { scroll-margin-top: calc(var(--lk-top-offset, 0px) + 12px); }

/* ---------- basics */
[data-lk-ui][hidden], [data-lk] > [data-part][hidden] { display: none !important; }
[data-lk-ui] { box-sizing: border-box; font-family: var(--lk-font); }
.lk-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:where([data-lk-ui], .lk-mark):focus-visible { outline: 3px solid var(--lk-accent); outline-offset: 2px; }
.lk-card { background: var(--lk-surface); color: var(--lk-fg); border: 1px solid var(--lk-line); border-radius: var(--lk-radius); padding: 16px 18px; margin: 16px 0; }
.lk-help { color: var(--lk-muted); font-size: 0.88em; margin: 6px 0; }
.lk-help[data-tone="bad"], p[data-tone="bad"] { color: var(--lk-bad); }
.lk-label { display: block; font-size: 0.9em; font-weight: 600; margin: 12px 0 6px; }
.lk-h { font-size: 1.1em; margin: 28px 0 10px; }
.lk-empty { padding: 16px; border: 1px dashed var(--lk-line); border-radius: var(--lk-radius); color: var(--lk-muted); background: var(--lk-surface); }
.lk-error { border: 1px dashed var(--lk-bad); color: var(--lk-bad); background: var(--lk-bad-soft); padding: 8px 12px; border-radius: var(--lk-radius-sm); font-size: 0.9em; margin: 8px 0; white-space: pre-wrap; }
.lk-fatal { margin: 12px; }
html[data-lk-debug] [data-lk] { outline: 1px dashed var(--lk-accent); outline-offset: 4px; }

/* ---------- buttons and fields */
.lk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--lk-hit); padding: 0 16px;
  border: 1px solid var(--lk-line); border-radius: var(--lk-radius-sm); background: var(--lk-surface); color: var(--lk-fg);
  font: inherit; font-size: 0.95em; line-height: 1.2; cursor: pointer; text-decoration: none; text-align: center;
}
.lk-btn:hover:not(:disabled) { border-color: var(--lk-accent); }
.lk-btn[data-variant="primary"] { background: var(--lk-accent); border-color: var(--lk-accent); color: var(--lk-accent-fg); font-weight: 600; }
.lk-btn[data-variant="primary"]:hover:not(:disabled) { filter: brightness(1.08); }
.lk-btn[data-variant="ghost"] { background: transparent; border-color: transparent; color: var(--lk-accent); }
.lk-btn[data-variant="ghost"]:hover:not(:disabled) { background: var(--lk-accent-soft); }
.lk-btn[data-variant="danger"] { color: var(--lk-bad); border-color: var(--lk-bad); background: transparent; }
.lk-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.lk-icon-btn { display: inline-grid; place-items: center; min-width: var(--lk-hit); min-height: var(--lk-hit); border: 1px solid var(--lk-line); border-radius: var(--lk-radius-sm); background: var(--lk-surface); color: var(--lk-fg); font: inherit; font-size: 1.1em; cursor: pointer; }
.lk-icon-btn:disabled { opacity: 0.35; cursor: default; }
.lk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.lk-input, .lk-ta, [data-lk-ui] select {
  min-height: var(--lk-hit); padding: 8px 12px; border: 1px solid var(--lk-line); border-radius: var(--lk-radius-sm);
  background: var(--lk-surface); color: var(--lk-fg); font: inherit;
}
.lk-input { width: min(14em, 100%); font-variant-numeric: tabular-nums; }
.lk-ta { display: block; width: 100%; min-height: 4.5em; resize: vertical; line-height: 1.5; }
.lk-input:disabled, .lk-ta:disabled { opacity: 1; background: var(--lk-bg); color: var(--lk-fg); }
.lk-badge { display: inline-block; padding: 2px 9px; border: 1px solid var(--lk-line); border-radius: 999px; font-size: 0.8em; line-height: 1.6; color: var(--lk-muted); }
.lk-badge[data-level="shaky"] { border-color: var(--lk-warn); color: var(--lk-warn); }
.lk-badge[data-tone="bad"], .lk-badge[data-level="new"] { border-color: var(--lk-bad); color: var(--lk-bad); }
.lk-badge[data-level="known"] { border-color: var(--lk-ok); color: var(--lk-ok); }

/* ---------- questions */
.lk-mq-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 0.85em; color: var(--lk-muted); }
.lk-topic { color: var(--lk-muted); }
.lk-mq-state { margin-left: auto; font-weight: 600; }
.lk-mq[data-state="right"] .lk-mq-state { color: var(--lk-ok); }
.lk-mq[data-state="wrong"] .lk-mq-state { color: var(--lk-bad); }
.lk-mq-stem { margin: 10px 0 14px; font-size: 1.02em; line-height: 1.6; }
.lk-mq-stem > :first-child { margin-top: 0; }
.lk-mq-stem > :last-child { margin-bottom: 0; }
.lk-opts { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; min-width: 0; }
.lk-opt {
  display: flex; align-items: flex-start; gap: 10px; min-height: var(--lk-hit); padding: 10px 12px;
  border: 1px solid var(--lk-line); border-radius: var(--lk-radius-sm); background: var(--lk-surface); cursor: pointer; line-height: 1.5;
}
.lk-opt input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--lk-accent); }
.lk-opt-key { flex: none; min-width: 1.1em; font-weight: 600; color: var(--lk-muted); }
.lk-opt-text > :first-child { margin-top: 0; }
.lk-opt-text > :last-child { margin-bottom: 0; }
.lk-opt:hover { border-color: var(--lk-accent); }
.lk-opt:has(input:checked) { border-color: var(--lk-accent); background: var(--lk-accent-soft); }
.lk-opt:has(input:disabled) { cursor: default; }
.lk-opt-row[data-correct="true"] .lk-opt { border-color: var(--lk-ok); background: var(--lk-ok-soft); }
.lk-opt-row[data-picked="true"][data-correct="false"] .lk-opt { border-color: var(--lk-bad); background: var(--lk-bad-soft); }
.lk-why { margin: 6px 4px 2px 42px; font-size: 0.92em; line-height: 1.55; }
.lk-why-tag { font-weight: 600; }
.lk-opt-row[data-correct="true"] .lk-why-tag { color: var(--lk-ok); }
.lk-opt-row[data-picked="true"][data-correct="false"] .lk-why-tag { color: var(--lk-bad); }
.lk-num-row { display: flex; align-items: center; gap: 8px; }
.lk-unit { color: var(--lk-muted); }
.lk-order { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: lk-o; }
.lk-order-item { display: flex; align-items: center; gap: 10px; padding: 4px 4px 4px 12px; border: 1px solid var(--lk-line); border-radius: var(--lk-radius-sm); background: var(--lk-surface); }
.lk-order-item::before { counter-increment: lk-o; content: counter(lk-o); flex: none; min-width: 1.2em; font-weight: 600; color: var(--lk-muted); }
.lk-order-text { flex: 1; min-width: 0; }
.lk-order-btns { display: flex; gap: 4px; }
.lk-order-item[data-ok="true"] { border-color: var(--lk-ok); background: var(--lk-ok-soft); }
.lk-order-item[data-ok="false"] { border-color: var(--lk-bad); background: var(--lk-bad-soft); }
.lk-hints { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.lk-hint { padding: 8px 12px; border-left: 3px solid var(--lk-accent); background: var(--lk-accent-soft); border-radius: 0 var(--lk-radius-sm) var(--lk-radius-sm) 0; line-height: 1.55; }
.lk-hint-n { font-weight: 600; margin-right: 8px; }
.lk-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lk-submit-label { color: var(--lk-muted); font-size: 0.9em; }
.lk-conf-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.lk-conf-btn { border-color: var(--lk-accent); color: var(--lk-accent); font-weight: 600; }
.lk-conf-btn:hover:not(:disabled) { background: var(--lk-accent-soft); }
.lk-conf-btn[aria-pressed="true"] { background: var(--lk-accent); color: var(--lk-accent-fg); opacity: 1; }
.lk-help-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lk-help-toggle::after { content: ""; width: 0.4em; height: 0.4em; margin: 0 0 0.2em 2px; border-right: 2px solid; border-bottom: 2px solid; transform: rotate(45deg); }
.lk-help-toggle[aria-expanded="true"]::after { margin: 0.25em 0 0 2px; transform: rotate(-135deg); }
.lk-help-menu { display: flex; flex-wrap: wrap; gap: 6px; }
.lk-fb { margin-top: 12px; line-height: 1.6; }
.lk-fb:empty { display: none; }
.lk-fb[data-tone="nudge"] { color: var(--lk-warn); font-weight: 600; }
.lk-verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 8px; }
.lk-verdict-icon { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; font-weight: 700; font-size: 0.9em; color: var(--lk-surface); background: var(--lk-muted); }
.lk-verdict[data-ok="true"] .lk-verdict-icon { background: var(--lk-ok); }
.lk-verdict[data-ok="false"] .lk-verdict-icon { background: var(--lk-bad); }
.lk-verdict[data-ok="true"] strong { color: var(--lk-ok); }
.lk-verdict[data-ok="false"] strong { color: var(--lk-bad); }
.lk-solution, .lk-ref { margin-top: 10px; padding: 10px 14px; border-radius: var(--lk-radius-sm); background: var(--lk-bg); border: 1px solid var(--lk-line); }
.lk-solution > :first-child, .lk-ref > :first-child { margin-top: 0; }
.lk-solution > :last-child, .lk-ref > :last-child { margin-bottom: 0; }
.lk-ref-h { font-weight: 600; margin: 0 0 6px; }
.lk-sched { color: var(--lk-muted); font-size: 0.85em; margin: 10px 0 0; }
.lk-selfgrade { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.lk-after { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.lk-after:empty { display: none; }
.lk-retry-slot > .lk-mq { border-style: dashed; }

/* ---------- predict / checkpoint */
.lk-predict { margin: 12px 0; }
.lk-predict-opts { display: grid; gap: 8px; }
.lk-predict-opt {
  display: block; width: 100%; min-height: var(--lk-hit); padding: 10px 14px; text-align: left; line-height: 1.5;
  border: 1px solid var(--lk-line); border-radius: var(--lk-radius-sm); background: var(--lk-surface); color: var(--lk-fg); font: inherit; cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}
.lk-predict-opt:hover:not(:disabled) { border-color: var(--lk-accent); background: var(--lk-accent-soft); }
.lk-predict-opt:disabled { cursor: default; }
.lk-predict-opt[data-picked="true"] { border-width: 2px; border-color: var(--lk-accent); background: var(--lk-accent-soft); }
.lk-predict-opt[data-correct="true"] { border-color: var(--lk-ok); background: var(--lk-ok-soft); }
.lk-predict-opt[data-picked="true"][data-correct="false"] { border-color: var(--lk-bad); background: var(--lk-bad-soft); }
.lk-predict-opt[data-picked="true"]::after { content: " ←"; font-weight: 700; }
.lk-predict-msg { font-weight: 600; margin: 10px 0 0; }
.lk-predict-msg:empty { display: none; }
[data-lk="predict"][data-state="right"] .lk-predict-msg { color: var(--lk-ok); }
[data-lk="predict"][data-state="wrong"] .lk-predict-msg { color: var(--lk-bad); }
.lk-cp { margin-top: 8px; }
.lk-cp-note { margin: 6px 0; padding-left: 12px; border-left: 3px solid var(--lk-line); }
[data-lk-flash] { animation: lk-flash 1.8s ease-out; }
@keyframes lk-flash { from { background-color: var(--lk-accent-soft); } to { background-color: transparent; } }

/* ---------- highlights */
.lk-mark { color: inherit; border-radius: 2px; padding: 0 1px; cursor: pointer; background: var(--lk-mark-k); }
.lk-mark[data-color="q"] { background: var(--lk-mark-q); }
.lk-mark[data-color="d"] { background: var(--lk-mark-d); }
.lk-mark[data-color="x"] { background: var(--lk-mark-x); }
.lk-mark[data-note] { text-decoration: underline dotted; text-underline-offset: 3px; }
.lk-hl-bar { position: absolute; z-index: 1000; display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; max-width: calc(100vw - 16px); background: var(--lk-surface); border: 1px solid var(--lk-line); border-radius: var(--lk-radius); box-shadow: var(--lk-shadow); }
.lk-hl-bar button { min-height: var(--lk-hit); min-width: var(--lk-hit); padding: 0 10px; border: 0; border-radius: var(--lk-radius-sm); background: transparent; color: var(--lk-fg); font: inherit; font-size: 0.9em; cursor: pointer; }
.lk-hl-bar button:hover { background: var(--lk-accent-soft); }
.lk-hl-color { box-shadow: inset 0 -5px 0 var(--lk-mark-k); }
.lk-hl-color[data-color="q"], .lk-chip[data-color="q"] { box-shadow: inset 0 -5px 0 var(--lk-mark-q); }
.lk-hl-color[data-color="d"], .lk-chip[data-color="d"] { box-shadow: inset 0 -5px 0 var(--lk-mark-d); }
.lk-hl-color[data-color="x"], .lk-chip[data-color="x"] { box-shadow: inset 0 -5px 0 var(--lk-mark-x); }
.lk-chip[data-color="k"] { box-shadow: inset 0 -5px 0 var(--lk-mark-k); }
.lk-hl-card { position: absolute; z-index: 1000; width: min(380px, calc(100vw - 16px)); margin: 0; box-shadow: var(--lk-shadow); }
.lk-hl-quote { margin: 0 0 8px; padding-left: 12px; border-left: 3px solid var(--lk-line); color: var(--lk-muted); line-height: 1.55; }

/* ---------- chips, dialogs */
.lk-chips { border: 0; padding: 0; margin: 10px 0; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.lk-chips > legend { font-size: 0.9em; font-weight: 600; margin-bottom: 6px; padding: 0; }
.lk-chip { display: inline-flex; align-items: center; gap: 6px; min-height: var(--lk-hit); padding: 4px 12px; border: 1px solid var(--lk-line); border-radius: 999px; cursor: pointer; line-height: 1.25; }
.lk-chip input { accent-color: var(--lk-accent); margin: 0; }
.lk-chip small { display: block; color: var(--lk-muted); font-size: 0.78em; }
.lk-chip:has(input:checked) { border-color: var(--lk-accent); background: var(--lk-accent-soft); }
.lk-chip:has(input:focus-visible) { outline: 3px solid var(--lk-accent); outline-offset: 2px; }
dialog.lk-ask { width: min(720px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 1px solid var(--lk-line); border-radius: var(--lk-radius); background: var(--lk-surface); color: var(--lk-fg); box-shadow: var(--lk-shadow); }
dialog.lk-ask::backdrop, dialog.lk-lightbox::backdrop { background: rgb(0 0 0 / 0.45); }
.lk-ask-inner { padding: 14px 20px 18px; }
.lk-ask-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lk-ask-head h2 { font-size: 1.15em; margin: 0; }
.lk-ask-text { font-family: var(--lk-mono); font-size: 0.85em; min-height: 12em; }
.lk-ask-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.lk-ask-grade { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--lk-line); }
dialog.lk-lightbox { max-width: 96vw; max-height: 96dvh; padding: 8px; border: 0; border-radius: var(--lk-radius); background: var(--lk-surface); color: var(--lk-fg); }
dialog.lk-lightbox img { display: block; max-width: 100%; max-height: 84dvh; object-fit: contain; margin: 0 auto; }
dialog.lk-lightbox .lk-icon-btn { float: right; }
/* A figure reserves its box before its image arrives. One image with a width attribute: the figure is that wide (never
   wider than the column; lk sets --lk-fig-w from the attribute); otherwise it takes the column. The image scales inside it
   with the aspect ratio of its width / height attributes. Not width: fit-content — that is measured from the loaded image,
   so a lazy image that arrives later moves everything below it. All zero-specificity defaults a site rule overrides. */
.lk-fig { position: relative; max-width: 100%; }
:where(.lk-fig) { width: var(--lk-fig-w, auto); }
:where(.lk-fig img) { max-width: 100%; height: auto; }
.lk-fig-zoom { position: absolute; top: 8px; right: 8px; min-width: var(--lk-hit); min-height: var(--lk-hit); border: 1px solid var(--lk-line); border-radius: 50%; background: color-mix(in srgb, var(--lk-surface) 88%, transparent); color: var(--lk-fg); font-size: 1.1em; cursor: pointer; }
.lk-status { position: fixed; left: 12px; bottom: 12px; z-index: 999; max-width: min(440px, calc(100vw - 24px)); padding: 10px 14px; border: 1px solid var(--lk-warn); border-radius: var(--lk-radius-sm); background: var(--lk-warn-soft); color: var(--lk-warn); font-size: 0.9em; line-height: 1.45; }

/* ---------- labs */
.lk-canvas { display: block; width: 100%; height: auto; max-width: 100%; border-radius: var(--lk-radius-sm); touch-action: pan-y; }
.lk-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 10px; }
.lk-ctl { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: var(--lk-hit); max-width: 100%; }
.lk-ctl-label { font-size: 0.92em; }
.lk-ctl input[type="range"] { width: min(220px, 48vw); min-width: 0; flex: 1 1 120px; accent-color: var(--lk-accent); min-height: var(--lk-hit); }
.lk-ctl input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--lk-accent); }
.lk-ctl-out { min-width: 3.5em; font-variant-numeric: tabular-nums; color: var(--lk-muted); }
/* api.canvas(w, h, {fit: 'box'}): the site's CSS decides width and height; without a height the w:h aspect (zero specificity) */
:where(.lk-canvas[data-fit="box"]) { aspect-ratio: var(--lk-canvas-aspect, auto); }
/* handle.enable(false): still visible, not usable by the reader (tours still drive it) */
.lk-ctl[data-disabled] { opacity: 0.5; }
.lk-ctl[data-disabled] :is(input, select), button.lk-ctl[data-disabled] { cursor: not-allowed; }
/* data-gate: the note inside a lab whose prediction gate has not been answered yet */
.lk-gate-note { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 10px; padding: 6px 12px; border: 1px dashed var(--lk-line); border-radius: var(--lk-radius-sm); color: var(--lk-muted); font-size: 0.92em; }
.lk-gate-text { flex: 1 1 14em; min-width: 0; }

/* ---------- lab panel (dom/panel.js). lk's own frame: section.lk-panel > .lk-panel-head + the mount. A site frame (the
   mount's parent, labelled by a title in a strip before the mount) keeps its look; lk adds .lk-panel-tools to its strip.
   Both carry [data-lk-panel] and [data-lk-panel-head]. The frame line is a ring (box-shadow), so wrapping a mount does not
   change its width. */
.lk-panel { margin: 20px 0; background: var(--lk-surface); color: var(--lk-fg); border-radius: var(--lk-radius); box-shadow: 0 0 0 1px var(--lk-line); }
.lk-panel-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 48px; padding: 7px 12px 7px 16px; border-bottom: 1px solid var(--lk-line); }
.lk-panel-tag { font-family: var(--lk-mono); font-size: 0.8em; letter-spacing: 0.06em; color: var(--lk-muted); }
.lk-panel-sep { color: var(--lk-muted); }
.lk-panel-title { font-weight: 600; }
:where(.lk-panel > [data-lk="lab"]) { padding: 14px 16px 16px; }
.lk-panel-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; align-self: center; }
.lk-panel-tools:not(:has(> :not([hidden]))) { display: none; }
.lk-tool {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 11px 0 9px;
  border: 1px solid var(--lk-line); border-radius: var(--lk-radius-sm); background: var(--lk-surface); color: var(--lk-fg);
  font: inherit; font-size: 13px; line-height: 1; white-space: nowrap; cursor: pointer;
}
.lk-tool:hover:not(:disabled) { border-color: var(--lk-accent); color: var(--lk-accent); }
.lk-tool:disabled { opacity: 0.55; cursor: progress; }
.lk-tool svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lk-tool svg .lk-fill { fill: currentColor; stroke: none; }
.lk-tool[data-on] { border-color: var(--lk-accent); background: var(--lk-accent-soft); color: var(--lk-accent); }
/* how far the demo has run: a hairline along the bottom of its button */
.lk-tool[data-tool="demo"]::after {
  content: ""; position: absolute; left: 7px; right: 7px; bottom: 3px; height: 2px; border-radius: 1px; background: currentColor;
  transform-origin: left center; transform: scaleX(var(--lk-demo-p, 0)); opacity: 0.75;
}
@media (pointer: coarse) { .lk-tool { min-height: var(--lk-hit); } }
@media (max-width: 600px) {
  .lk-panel-tools { flex: 1 1 100%; margin-left: 0; }
  .lk-panel-head { padding-left: 12px; }
  :where(.lk-panel > [data-lk="lab"]) { padding: 12px; }
}
/* 展开: the frame covers the window (the real full screen where the browser allows it); the strip stays at the top */
[data-lk-panel][data-lk-expanded] {
  position: fixed; inset: 0; z-index: 2147483000; display: flex; flex-direction: column; margin: 0; width: auto; max-width: none;
  height: auto; max-height: none; overflow: auto; overscroll-behavior: contain; border-radius: 0; background: var(--lk-surface); box-shadow: none;
}
[data-lk-panel][data-lk-expanded] > [data-lk-panel-head] { position: sticky; top: 0; z-index: 2; flex: none; background: var(--lk-surface); }
/* the stage in the middle of what is left (a lab taller than the window starts at the top and scrolls) */
[data-lk-panel][data-lk-expanded] > [data-lk="lab"] { box-sizing: border-box; width: 100%; max-width: var(--lk-panel-max, 1280px); margin: auto; flex: none; }
html[data-lk-expanded] { overflow: hidden; }

/* ---------- review, progress, notes, unit nav */
.lk-review-count { font-weight: 600; }
.lk-review-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.lk-review-top progress { flex: 1 1 120px; height: 8px; accent-color: var(--lk-accent); }
.lk-review-pos { font-variant-numeric: tabular-nums; color: var(--lk-muted); }
.lk-review-filter { display: inline-flex; align-items: center; gap: 8px; }
.lk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.lk-stat { padding: 14px 16px; border: 1px solid var(--lk-line); border-radius: var(--lk-radius); background: var(--lk-surface); }
.lk-stat-v { font-size: 2em; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.lk-stat-l { font-weight: 600; margin-top: 4px; }
.lk-stat-n, .lk-stat-cmp { color: var(--lk-muted); font-size: 0.85em; margin-top: 4px; }
.lk-stat-warn { color: var(--lk-bad); font-weight: 600; }
.lk-rows { list-style: none; margin: 0; padding: 0; }
.lk-row { padding: 10px 0; border-bottom: 1px solid var(--lk-line); }
.lk-row-inline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lk-row-inline > .lk-badge { flex: none; white-space: nowrap; }   /* a long name wraps, the badge stays one pill */
.lk-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lk-bar { display: flex; height: 10px; margin: 8px 0 6px; border-radius: 999px; overflow: hidden; background: var(--lk-line); }
.lk-bar-seg[data-level="mastered"] { background: var(--lk-ok); }
.lk-bar-seg[data-level="learning"] { background: var(--lk-accent); }
.lk-bar-seg[data-level="weak"] { background: var(--lk-bad); }
.lk-bar-seg[data-level="new"] { background: transparent; }
.lk-row-counts { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.82em; color: var(--lk-muted); }
.lk-row-counts span::before { content: ""; display: inline-block; width: 0.7em; height: 0.7em; margin-right: 5px; border-radius: 2px; vertical-align: -0.05em; border: 1px solid var(--lk-line); }
.lk-row-counts [data-level="mastered"]::before { background: var(--lk-ok); }
.lk-row-counts [data-level="learning"]::before { background: var(--lk-accent); }
.lk-row-counts [data-level="weak"]::before { background: var(--lk-bad); }
.lk-note { padding: 12px 0; border-bottom: 1px solid var(--lk-line); }
.lk-note .lk-mq-head a { margin-left: auto; }
.lk-note-text { margin: 6px 0 0; }
.lk-diag-start { font-weight: 600; margin-top: 14px; }
.lk-unitnav { margin: 32px 0; }
.lk-unitnav-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lk-unitnav-link { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: var(--lk-hit); padding: 10px 14px; border: 1px solid var(--lk-line); border-radius: var(--lk-radius); background: var(--lk-surface); color: var(--lk-fg); text-decoration: none; }
.lk-unitnav-link:hover { border-color: var(--lk-accent); }
.lk-unitnav-link small { color: var(--lk-muted); }
.lk-unitnav-link[data-rel="next"] { text-align: right; grid-column: 2; }
.lk-unitnav-map { margin-top: 12px; }
.lk-unitnav-map summary { display: flex; align-items: center; min-height: var(--lk-hit); cursor: pointer; color: var(--lk-accent); }
.lk-unitnav-map ol { margin: 4px 0 0; padding-left: 1.6em; }
.lk-unitnav-map li > a, .lk-unitnav-map li > span { display: inline-flex; align-items: center; min-height: var(--lk-hit); }
.lk-unitnav-map li[data-state="current"] { font-weight: 600; }
.lk-unitnav-map small { color: var(--lk-muted); font-weight: 400; }

/* ---------- page layout (opt-in, the one place lk.css lays out a page): put .lk-layout on the element that holds the
   lesson (usually <main>). Its children sit in a text column at a readable measure; children with .lk-wide or data-wide
   (labs, figures, tables, media) break out to --lk-wide, and .lk-full / data-full to the whole width. Every column shrinks
   to the window, never overflowing it. The text track is sized first (min(measure, what fits)), so on a narrow window the
   text keeps its measure and the wide margins give way — a grid of three flexible tracks would starve the text instead. */
:root {
  --lk-measure: 42em;     /* the text column: ~42 CJK characters (1em each), ~85 Latin */
  --lk-wide: 1280px;      /* labs, figures, tables, media marked wide */
  --lk-gutter: 16px;      /* the least space on each side */
}
.lk-layout {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--lk-gutter), 1fr)
    [wide-start] minmax(0, calc((var(--lk-wide) - var(--lk-measure)) / 2))
    [text-start] min(var(--lk-measure), 100% - 2 * var(--lk-gutter)) [text-end]
    minmax(0, calc((var(--lk-wide) - var(--lk-measure)) / 2)) [wide-end]
    minmax(var(--lk-gutter), 1fr) [full-end];
}
.lk-layout > * { grid-column: text; min-width: 0; }
.lk-layout > :is(.lk-wide, [data-wide]) { grid-column: wide; }
.lk-layout > :is(.lk-full, [data-full]) { grid-column: full; }

/* ---------- sidebar contents (ui/toc.js) — site chrome. Dark by default (--lk-toc-*). Docked from 900 px: while it is
   open, <body> is padded on the left by --lk-toc-w; below 900 px and in e-ink mode it is a drawer over the page, under the
   sticky header (--lk-top-offset). */
:root {
  --lk-toc-w: clamp(256px, 19vw, 312px);
  --lk-toc-top: 0px;      /* docked: where it starts (under a position: fixed full-width header: var(--lk-top-offset)) */
  --lk-toc-z: 880;        /* above the page and its sticky header, below the tour player (900) and dialogs */
  --lk-toc-bg: #15181c; --lk-toc-fg: #e9e6e0; --lk-toc-muted: #a5a29b; --lk-toc-line: #2d3137;
  --lk-toc-accent: #9dbbf7; --lk-toc-ok: #86d3a6; --lk-toc-hover: rgb(255 255 255 / 0.06); --lk-toc-current: rgb(255 255 255 / 0.09);
  --lk-toc-field: rgb(255 255 255 / 0.06);
}
:where([data-lk="toc"], [data-lk="eink"]) { display: contents; }
.lk-toc {
  position: fixed; z-index: var(--lk-toc-z); left: 0; top: var(--lk-toc-top); bottom: 0; width: var(--lk-toc-w);
  display: flex; flex-direction: column; background: var(--lk-toc-bg); color: var(--lk-toc-fg); color-scheme: dark;
  border-right: 1px solid var(--lk-toc-line); font-family: var(--lk-font); font-size: 14px; line-height: 1.45;
  visibility: hidden; transform: translateX(-100%);
}
html[data-lk-toc="open"] .lk-toc { visibility: visible; transform: none; }
.lk-toc-scrim { position: fixed; z-index: calc(var(--lk-toc-z) - 1); inset: var(--lk-top-offset, 0px) 0 0 0; background: rgb(0 0 0 / 0.36); }
html:not([data-lk-toc="open"]) .lk-toc-scrim { display: none; }
@media (min-width: 900px) {
  html[data-lk-toc="open"]:not([data-lk-eink]) body { padding-left: var(--lk-toc-w); }
  html[data-lk-toc="open"]:not([data-lk-eink]) .lk-status { left: calc(var(--lk-toc-w) + 12px); }
  html[data-lk-toc="open"]:not([data-lk-eink]) .lk-tour { left: calc(50% + var(--lk-toc-w) / 2); width: min(var(--lk-tour-max, 760px), calc(100vw - var(--lk-toc-w) - 24px)); }
  html:not([data-lk-eink]) :is(.lk-toc-scrim, .lk-toc-x) { display: none; }
}
@media (max-width: 899.98px) {
  .lk-toc { top: var(--lk-top-offset, 0px); width: min(88vw, 360px); box-shadow: var(--lk-shadow); transition: transform 0.2s ease, visibility 0s linear 0.2s; }
  html[data-lk-toc="open"] .lk-toc { transition: transform 0.2s ease; }
}
html[data-lk-eink] .lk-toc { top: 0; bottom: var(--lk-ek-bar-h); width: min(88vw, 360px); }
html[data-lk-eink] .lk-toc-scrim { inset: 0 0 var(--lk-ek-bar-h) 0; background: rgb(0 0 0 / 0.16); }
.lk-toc-head { position: relative; padding: 18px 16px 12px; border-bottom: 1px solid var(--lk-toc-line); }
.lk-toc-title { display: block; padding-right: 40px; color: var(--lk-toc-fg); font-size: 16px; font-weight: 700; line-height: 1.4; text-decoration: none; }
.lk-toc-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.lk-toc-meta { margin: 4px 0 0; color: var(--lk-toc-muted); font-size: 12.5px; }
.lk-toc-x { position: absolute; top: 6px; right: 6px; min-width: var(--lk-hit); min-height: var(--lk-hit); border: 0; border-radius: var(--lk-radius-sm); background: transparent; color: var(--lk-toc-fg); font: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
.lk-toc-x:hover { background: var(--lk-toc-hover); }
.lk-toc-search { padding: 10px 12px 6px; }
.lk-toc-q { width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--lk-toc-line); border-radius: var(--lk-radius-sm); background: var(--lk-toc-field); color: var(--lk-toc-fg); font: inherit; font-size: 14px; }
.lk-toc-q::placeholder { color: var(--lk-toc-muted); opacity: 1; }
.lk-toc-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 8px calc(20px + var(--lk-tour-bar-h, 0px)); scrollbar-width: thin; }
.lk-toc :focus-visible { outline: 2px solid var(--lk-toc-accent); outline-offset: -2px; }
.lk-toc ol { list-style: none; margin: 0; padding: 0; }
.lk-toc-part { margin: 14px 10px 4px; color: var(--lk-toc-muted); font-size: 12px; letter-spacing: 0.06em; }
.lk-toc-unit { display: grid; grid-template-columns: 1.1em minmax(0, 1fr) auto; align-items: baseline; gap: 1px 8px; min-height: var(--lk-hit); padding: 8px 10px 8px 7px; border-left: 3px solid transparent; border-radius: var(--lk-radius-sm); color: var(--lk-toc-fg); text-decoration: none; }
a.lk-toc-unit:hover { background: var(--lk-toc-hover); }
.lk-toc-mark { color: var(--lk-toc-muted); font-size: 12px; text-align: center; }
.lk-toc-mark::before { content: "○"; }
[data-state="done"] > .lk-toc-unit .lk-toc-mark::before { content: "✓"; color: var(--lk-toc-ok); }
[data-state="started"] > .lk-toc-unit .lk-toc-mark::before { content: "◐"; }
[data-state="planned"] > .lk-toc-unit .lk-toc-mark::before { content: "·"; }
[data-state="planned"] > .lk-toc-unit { color: var(--lk-toc-muted); }
.lk-toc-t { min-width: 0; overflow-wrap: anywhere; }
.lk-toc-n { margin-right: 2px; color: var(--lk-toc-muted); font-family: var(--lk-mono); font-size: 0.86em; }
.lk-toc-side { grid-column: 3; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.lk-toc-min { color: var(--lk-toc-muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lk-toc-sub { grid-column: 2; color: var(--lk-toc-muted); font-size: 12px; }
.lk-toc-core { padding: 0 4px; border: 1px solid var(--lk-toc-line); border-radius: 3px; color: var(--lk-toc-muted); font-size: 11px; line-height: 1.5; white-space: nowrap; }
.lk-toc-unit[aria-current="page"] { background: var(--lk-toc-current); border-left-color: var(--lk-toc-accent); }
.lk-toc-unit[aria-current="page"] .lk-toc-t { color: var(--lk-toc-accent); font-weight: 600; }
.lk-toc ol.lk-toc-secs { margin: 2px 0 8px calc(10px + 1.1em + 8px); border-left: 1px solid var(--lk-toc-line); }
.lk-toc-secs a { display: block; min-height: 36px; margin-left: -1px; padding: 9px 10px 9px 11px; border-left: 2px solid transparent; color: var(--lk-toc-muted); font-size: 13px; line-height: 1.4; text-decoration: none; }
.lk-toc-secs a:hover { background: var(--lk-toc-hover); color: var(--lk-toc-fg); }
.lk-toc-secs a[aria-current="location"] { border-left-color: var(--lk-toc-accent); color: var(--lk-toc-fg); font-weight: 600; }
.lk-toc-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 12px 2px 0; padding-top: 12px; border-top: 1px solid var(--lk-toc-line); }
.lk-toc-tool { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: var(--lk-hit); padding: 6px 10px 6px 7px; border-left: 3px solid transparent; border-radius: var(--lk-radius-sm); color: var(--lk-toc-fg); text-decoration: none; }
.lk-toc-tool:hover { background: var(--lk-toc-hover); }
.lk-toc-tool[aria-current="page"] { background: var(--lk-toc-current); border-left-color: var(--lk-toc-accent); }
.lk-toc-due { color: var(--lk-toc-accent); font-size: 11.5px; white-space: nowrap; }
.lk-toc-count { margin: 6px 10px; color: var(--lk-toc-muted); font-size: 12.5px; }
.lk-toc-hit { display: flex; flex-direction: column; justify-content: center; min-height: var(--lk-hit); padding: 7px 10px; border-radius: var(--lk-radius-sm); color: var(--lk-toc-fg); text-decoration: none; }
.lk-toc-hit small { color: var(--lk-toc-muted); font-size: 11.5px; }
.lk-toc-hit:hover { background: var(--lk-toc-hover); }
/* the toggle and the e-ink switch, wherever the site's header puts them */
.lk-toc-btn, .lk-eink-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: var(--lk-hit); min-height: var(--lk-hit); padding: 0 10px;
  border: 0; border-radius: var(--lk-radius-sm); background: transparent; color: inherit; font: inherit; font-size: 0.92em; white-space: nowrap; cursor: pointer;
}
.lk-toc-btn:hover, .lk-eink-btn:hover { background: color-mix(in srgb, currentColor 9%, transparent); }
.lk-btn-ico { display: inline-grid; }
.lk-btn-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.lk-toc-btn[aria-expanded="true"], .lk-eink-btn[aria-pressed="true"] { outline: 1.5px solid currentColor; outline-offset: -4px; }
.lk-toc-fab { position: fixed; z-index: calc(var(--lk-toc-z) + 1); top: calc(var(--lk-top-offset, 0px) + 8px); left: 8px; border: 1px solid var(--lk-line); background: var(--lk-surface); color: var(--lk-fg); }
@media (max-width: 560px) {
  .lk-toc-btn, .lk-eink-btn { padding: 0; }
  :is(.lk-toc-btn, .lk-eink-btn) .lk-btn-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- e-ink reading mode (ui/einkswitch.js, eink/eink.js): html[data-lk-eink="mono|color|lcd"]. Page turns
   instead of scrolling, nothing moves, and on ink screens the colours are remapped for the panel. */
:root { --lk-ek-bar-h: 44px; }
/* every frame of a transition or an animation is a repaint (a flash on e-ink); shadows and blur are grey smears */
html[data-lk-eink], html[data-lk-eink] *, html[data-lk-eink] *::before, html[data-lk-eink] *::after {
  transition: none !important; animation: none !important; scroll-behavior: auto !important;
  box-shadow: none !important; text-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html[data-lk-eink] { overflow-anchor: none; }
/* content-visibility makes scrollHeight an estimate: page ends and page numbers would drift */
html[data-lk-eink] * { content-visibility: visible !important; }
html[data-lk-eink] :is(button, a, [role="button"], .lk-opt, .lk-predict-opt):active { transform: none !important; }
/* only the hover effects that brighten; never *:hover { filter: none } — that would also strip the grey filter off the
   canvas or figure under a finger (and on a touch screen the hover sticks) */
html[data-lk-eink] :is(.lk-btn, .lk-toc-btn, .lk-eink-btn, .lk-opt, .lk-predict-opt, button):hover { filter: none !important; }
/* a sticky header is repainted on every turn and costs its height: the pager marks sticky elements static */
html[data-lk-eink] [data-lk-eink-static] { position: static !important; }
html[data-lk-eink] body { padding-bottom: calc(var(--lk-ek-bar-h) + var(--lk-tour-bar-h, 0px) + env(safe-area-inset-bottom, 0px)); }
html[data-lk-eink][data-lk-ek-fs] body { font-size: var(--lk-ek-fs); }
html[data-lk-eink][data-lk-ek-lh] body { line-height: var(--lk-ek-lh); }
html[data-lk-eink][data-lk-ek-meas] { --lk-measure: var(--lk-ek-measure); }
html[data-lk-eink][data-lk-ek-bold] body { font-weight: 600; }
html[data-lk-eink] .lk-tour { bottom: calc(var(--lk-ek-bar-h) + 8px); }
/* ink screens: a hard white page, black text (small coloured type blurs under a colour filter), light scrims (a large
   dark overlay is a full refresh with heavy ghosting), a light sidebar */
html:is([data-lk-eink="mono"], [data-lk-eink="color"]) {
  color-scheme: light;
  --lk-bg: #fff; --lk-surface: #fff; --lk-fg: #000; --lk-muted: #3a3a3a; --lk-line: #8c8c8c; --lk-accent-fg: #fff; --lk-shadow: none;
  --lk-toc-bg: #fff; --lk-toc-fg: #000; --lk-toc-muted: #3a3a3a; --lk-toc-line: #8c8c8c; --lk-toc-hover: transparent;
  --lk-toc-current: #ececec; --lk-toc-field: #fff; --lk-toc-ok: #000;
}
/* mono: the semantic colours on a grey ramp far enough apart to stay apart on a 16-level panel, every step dark enough to be text */
html[data-lk-eink="mono"] {
  --lk-accent: #000; --lk-accent-soft: #ebebeb; --lk-bad: #1f1f1f; --lk-bad-soft: #e4e4e4; --lk-ok: #3d3d3d; --lk-ok-soft: #f2f2f2;
  --lk-warn: #5c5c5c; --lk-warn-soft: #f3f3f3; --lk-mark-q: #d2d2d2; --lk-mark-k: #e0e0e0; --lk-mark-d: #ececec; --lk-mark-x: #f4f4f4;
  --lk-toc-accent: #000;
}
/* colour e-ink washes colours out by about a step and halves their resolution: only deep saturated hues, spread apart
   (danger pulled toward magenta, warning pressed to olive — red, orange and yellow crowd together on a faded panel),
   each ≥ 5.5:1 on white; colour only marks things (borders, tags, chart lines, highlights), text stays black */
html[data-lk-eink="color"] {
  --lk-accent: #0a3fa8; --lk-accent-soft: #cfdff8; --lk-ok: #0a6b2a; --lk-ok-soft: #c9e8d2; --lk-warn: #6b6100; --lk-warn-soft: #f0e6b8;
  --lk-bad: #b3001b; --lk-bad-soft: #f7cccc; --lk-mark-q: #ff9a93; --lk-mark-k: #ffd45c; --lk-mark-d: #8fbdff; --lk-mark-x: #7fdca6;
  --lk-toc-accent: #0a3fa8;
}
html:is([data-lk-eink="mono"], [data-lk-eink="color"]) body { background: #fff; color: #000; }
html:is([data-lk-eink="mono"], [data-lk-eink="color"]) :is(h1, h2, h3, h4, p, li, td, th, dt, dd, figcaption, blockquote) { color: #000; }
html:is([data-lk-eink="mono"], [data-lk-eink="color"]) :focus-visible { outline: 2px solid #000 !important; outline-offset: 2px; }
html:is([data-lk-eink="mono"], [data-lk-eink="color"]) .lk-toc { border-right: 2px solid #000; }
html:is([data-lk-eink="mono"], [data-lk-eink="color"]) dialog { border: 2px solid #000; }
html:is([data-lk-eink="mono"], [data-lk-eink="color"]) dialog::backdrop { background: rgb(0 0 0 / 0.16); }
/* a second code that survives a grey panel: right / wrong / picked by border style, highlights by underline style */
html:is([data-lk-eink="mono"], [data-lk-eink="color"]) :is(.lk-opt:has(input:checked), .lk-predict-opt[data-picked="true"]) { border: 2px solid #000; }
html:is([data-lk-eink="mono"], [data-lk-eink="color"]) :is(.lk-opt-row[data-correct="true"] .lk-opt, .lk-predict-opt[data-correct="true"]) { border: 4px double #000; }
html:is([data-lk-eink="mono"], [data-lk-eink="color"]) :is(.lk-opt-row[data-picked="true"][data-correct="false"] .lk-opt, .lk-predict-opt[data-picked="true"][data-correct="false"]) { border: 2px dashed #000; }
html:is([data-lk-eink="mono"], [data-lk-eink="color"]) .lk-mark { border-radius: 0; border-bottom: 4px double #000; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
html:is([data-lk-eink="mono"], [data-lk-eink="color"]) .lk-mark[data-color="q"] { border-bottom: 3px solid #000; }
html:is([data-lk-eink="mono"], [data-lk-eink="color"]) .lk-mark[data-color="d"] { border-bottom: 2px dashed #000; }
html:is([data-lk-eink="mono"], [data-lk-eink="color"]) .lk-mark[data-color="x"] { border-bottom: 3px dotted #000; }
html[data-lk-eink="mono"] .lk-mark { background: transparent; padding: 0; }
html:is([data-lk-eink="mono"], [data-lk-eink="color"]) :is(.lk-hl-color, .lk-chip[data-color]) { border-bottom: 4px double #000; }
html:is([data-lk-eink="mono"], [data-lk-eink="color"]) :is(.lk-hl-color, .lk-chip)[data-color="q"] { border-bottom: 3px solid #000; }
html:is([data-lk-eink="mono"], [data-lk-eink="color"]) :is(.lk-hl-color, .lk-chip)[data-color="d"] { border-bottom: 2px dashed #000; }
html:is([data-lk-eink="mono"], [data-lk-eink="color"]) :is(.lk-hl-color, .lk-chip)[data-color="x"] { border-bottom: 3px dotted #000; }
/* mastery bars: hatching instead of three greys that look alike */
html[data-lk-eink="mono"] :is(.lk-bar-seg, .lk-row-counts span)[data-level="mastered"] { --lk-ek-fill: #000; }
html[data-lk-eink="mono"] :is(.lk-bar-seg, .lk-row-counts span)[data-level="learning"] { --lk-ek-fill: repeating-linear-gradient(45deg, #000 0 2px, #fff 2px 6px); }
html[data-lk-eink="mono"] :is(.lk-bar-seg, .lk-row-counts span)[data-level="weak"] { --lk-ek-fill: repeating-linear-gradient(90deg, #000 0 1px, #fff 1px 5px); }
html[data-lk-eink="mono"] .lk-bar-seg[data-level] { background: var(--lk-ek-fill, transparent); }
html[data-lk-eink="mono"] .lk-row-counts span[data-level]::before { background: var(--lk-ek-fill, transparent); }
/* form controls draw in the browser's own colour unless told: a meaningless grey on mono, an off-key blue on colour */
html[data-lk-eink="mono"] :is(input, select, textarea, progress, meter) { accent-color: #000; color-scheme: light; }
html[data-lk-eink="color"] :is(input, select, textarea, progress, meter) { accent-color: var(--lk-accent); color-scheme: light; }
html[data-lk-eink="mono"] input[type="range"] { filter: grayscale(1); }
/* labs and pictures: a still, high-contrast picture (labs are told to stop animating through lk.mode.shot) */
html[data-lk-eink="mono"] canvas { filter: grayscale(1) contrast(1.25); }
html[data-lk-eink="color"] canvas { filter: saturate(1.55) contrast(1.12); }
html[data-lk-eink="mono"] [data-lk="lab"] svg { filter: grayscale(1) contrast(1.3); }
html[data-lk-eink="color"] [data-lk="lab"] svg { filter: saturate(1.5); }
/* the lab panel: no demo and no full-window view on a paged, still screen; on ink the frame is plain black on white */
html[data-lk-eink] .lk-tool:is([data-tool="demo"], [data-tool="expand"]) { display: none; }
html:is([data-lk-eink="mono"], [data-lk-eink="color"]) [data-lk-panel] { background: #fff; color: #000; border-color: #000; box-shadow: none; }
html:is([data-lk-eink="mono"], [data-lk-eink="color"]) .lk-panel { border: 2px solid #000; border-radius: 0; }
html:is([data-lk-eink="mono"], [data-lk-eink="color"]) [data-lk-panel-head] { background: #fff; border-bottom-color: #000; }
html:is([data-lk-eink="mono"], [data-lk-eink="color"]) :is(.lk-panel-tag, .lk-panel-sep, .lk-panel-title) { color: #000; }
html:is([data-lk-eink="mono"], [data-lk-eink="color"]) .lk-tool { border: 1.5px solid #000; background: #fff; color: #000; }
html[data-lk-eink="mono"][data-lk-ek-fig] :is(figure, .lk-fig) img { filter: grayscale(1) contrast(1.35) brightness(1.04); }
html[data-lk-eink="color"][data-lk-ek-fig] :is(figure, .lk-fig) img { filter: saturate(1.45) contrast(1.18); }
/* force grey (mono): putting the content on its own compositing layer is the only thing that stops LCD subpixel
   antialiasing from fringing glyphs with colour. On the content only — a filter on html or body turns position: fixed
   into absolute, and the bar and the mask would scroll away. */
html[data-lk-eink="mono"][data-lk-ek-gray] :is([data-lk-content], main) { filter: grayscale(1); }
/* the bar, the mask over the cut half-line, the settings, the first-visit note */
.lk-ek-bar {
  position: fixed; z-index: 870; left: 0; right: 0; bottom: 0; height: calc(var(--lk-ek-bar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px); display: flex; align-items: stretch;
  background: var(--lk-surface); color: var(--lk-fg); border-top: 1px solid var(--lk-fg); font-family: var(--lk-font); font-size: 13px;
}
.lk-ek-bar button { flex: none; min-width: var(--lk-hit); min-height: var(--lk-ek-bar-h); padding: 0 14px; border: 0; border-right: 1px solid var(--lk-line); background: var(--lk-surface); color: inherit; font: inherit; white-space: nowrap; cursor: pointer; }
.lk-ek-bar button:last-child { border-right: 0; }
.lk-ek-bar button:disabled { opacity: 0.35; cursor: default; }
.lk-ek-bar .lk-ek-nav { min-width: 56px; font-size: 17px; font-weight: 700; }
.lk-ek-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 8px; border-right: 1px solid var(--lk-line); line-height: 1.3; }
.lk-ek-mid b { font-variant-numeric: tabular-nums; }
.lk-ek-mid span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--lk-muted); font-size: 11px; }
.lk-ek-clock { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; padding: 0 12px; border-right: 1px solid var(--lk-line); color: var(--lk-muted); font-size: 11px; line-height: 1.3; white-space: nowrap; }
.lk-ek-clock b { color: var(--lk-fg); font-size: 12px; font-variant-numeric: tabular-nums; }
.lk-ek-clock[hidden] { display: none; }
@media (max-width: 520px) { .lk-ek-clock { display: none; } .lk-ek-bar button { padding: 0 10px; } }
.lk-ek-mask { position: fixed; z-index: 869; left: 0; right: 0; bottom: calc(var(--lk-ek-bar-h) + env(safe-area-inset-bottom, 0px)); height: 0; background: var(--lk-bg); pointer-events: none; }
.lk-ek-flash { position: fixed; inset: 0; z-index: 2147483000; background: #000; pointer-events: none; }
.lk-ek-range { display: inline-flex; align-items: center; gap: 4px; min-width: 0; flex: 1 1 auto; max-width: 100%; }
html[data-lk-eink] .lk-ek-range > input[type="range"] { flex: 1 1 auto; width: auto; min-width: 0; }
/* a slider with step buttons gets a row of its own under its label and value (a site's narrow control grid would squeeze it to nothing) */
html[data-lk-eink] .lk-ctl:has(> .lk-ek-range) { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
html[data-lk-eink] .lk-ctl > .lk-ek-range { order: 1; flex: 1 1 100%; }
.lk-ek-step { flex: none; min-width: var(--lk-hit); min-height: var(--lk-hit); border: 1px solid var(--lk-fg); border-radius: var(--lk-radius-sm); background: var(--lk-surface); color: var(--lk-fg); font: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
dialog.lk-ek-set { width: min(600px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); padding: 0; border: 2px solid var(--lk-fg); border-radius: var(--lk-radius); background: var(--lk-surface); color: var(--lk-fg); }
.lk-ek-set-in { padding: 12px 16px 16px; font-size: 14px; }
.lk-ek-set-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lk-ek-set-head h2 { margin: 0; font-size: 16px; }
.lk-ek-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--lk-line); }
.lk-ek-lab { flex: 0 0 4.5em; color: var(--lk-muted); font-size: 13px; }
.lk-ek-opts { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.lk-ek-opt { min-height: var(--lk-hit); padding: 6px 12px; border: 1px solid var(--lk-fg); border-radius: var(--lk-radius-sm); background: var(--lk-surface); color: var(--lk-fg); font: inherit; font-size: 13px; cursor: pointer; }
.lk-ek-opt[aria-pressed="true"] { background: var(--lk-fg); color: var(--lk-surface); }
.lk-ek-val { min-width: 3.5em; text-align: center; font-variant-numeric: tabular-nums; }
.lk-ek-hint { flex: 1 1 100%; margin: 2px 0 0; color: var(--lk-muted); font-size: 12px; line-height: 1.6; }
.lk-ek-actions { border-bottom: 0; }
.lk-ek-note { margin: 8px 0 0; color: var(--lk-muted); font-size: 12px; line-height: 1.7; }
.lk-ek-tip { position: fixed; z-index: 871; left: 10px; right: 10px; bottom: calc(var(--lk-ek-bar-h) + 10px); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px; border: 2px solid var(--lk-fg); background: var(--lk-surface); color: var(--lk-fg); font-size: 13px; line-height: 1.6; }
.lk-ek-tip-t { flex: 1 1 260px; }

/* ---------- media round (CONTRACTS §21): opening story, lesson film, annotated art, knowledge cards, site identity.
   Tokens a site may redefine: --lk-story-font --lk-story-paper --lk-story-ink --lk-story-accent --lk-sys-bg --lk-sys-fg
   --lk-sys-accent --lk-reel-accent --lk-art-mark --lk-art-mark-2 --lk-art-halo --lk-cn-lit --lk-cn-lit-2 --lk-qr-size. */
:root {
  --lk-story-font: ui-serif, Georgia, "Songti SC", "Noto Serif SC", "Source Han Serif SC", "Source Han Serif CN", "STSong", serif;
  --lk-story-paper: #fbf8f1; --lk-story-ink: #29251f; --lk-story-muted: #6d665a; --lk-story-accent: #b0502a; --lk-story-on-accent: #ffffff; --lk-story-line: #e7dfcf;
  --lk-sys-bg: #0e1520; --lk-sys-fg: #d3e4fb; --lk-sys-accent: #5cb0ff;
  --lk-reel-accent: #ffffff; --lk-reel-q: #ffc53d;
  --lk-art-mark: #e2412a; --lk-art-mark-2: #1f5fd6; --lk-art-halo: #ffffff;
  --lk-cn-lit: #d48f00; --lk-cn-lit-2: #f3c623; --lk-cn-lit-ink: #8a5a00;
  --lk-qr-size: 156px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lk-story-paper: #1c1b18; --lk-story-ink: #ebe5d8; --lk-story-muted: #a59d8e; --lk-story-accent: #f0a274; --lk-story-on-accent: #2b1609; --lk-story-line: #36332d;
    --lk-sys-bg: #0a0f17; --lk-art-mark: #ff7b61; --lk-art-mark-2: #8eb2ff; --lk-art-halo: #11141a;
    --lk-cn-lit: #f2bd3c; --lk-cn-lit-2: #ffe08a; --lk-cn-lit-ink: #f6cd62;
  }
}
:root[data-theme="dark"] {
  --lk-story-paper: #1c1b18; --lk-story-ink: #ebe5d8; --lk-story-muted: #a59d8e; --lk-story-accent: #f0a274; --lk-story-on-accent: #2b1609; --lk-story-line: #36332d;
  --lk-sys-bg: #0a0f17; --lk-art-mark: #ff7b61; --lk-art-mark-2: #8eb2ff; --lk-art-halo: #11141a;
  --lk-cn-lit: #f2bd3c; --lk-cn-lit-2: #ffe08a; --lk-cn-lit-ink: #f6cd62;
}
.lk-ico { display: inline-grid; place-items: center; flex: none; }
/* the media blocks show and hide their own parts with [hidden]; their display rules must not bring them back */
:is(.lk-art, .lk-story, .lk-reel, .lk-concepts, .lk-about-mount) [hidden] { display: none !important; }
.lk-story[data-state="error"] { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.lk-ico svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lk-ico svg .lk-fill, [data-lk-ui] svg .lk-fill { fill: currentColor; stroke: none; }
.lk-media-fail, .lk-story-fail, .lk-reel-datafail { margin: 20px 0; padding: 12px 16px; border: 1px dashed var(--lk-warn); border-radius: var(--lk-radius); background: var(--lk-warn-soft); color: var(--lk-fg); font-size: 0.92em; line-height: 1.6; }
.lk-story-fail strong, .lk-reel-datafail strong { color: var(--lk-warn); }

/* ---- the opening story: a page of a novel set into the lesson */
.lk-story {
  container: lk-story / inline-size; position: relative; margin: 28px 0 40px; border-radius: 18px; overflow: clip;
  background: var(--lk-story-paper); color: var(--lk-story-ink);
  box-shadow: 0 0 0 1px var(--lk-story-line), 0 22px 44px -30px rgb(70 45 10 / 0.45);
}
.lk-story-head { position: relative; }
.lk-story-cover { position: relative; aspect-ratio: 21 / 9 !important; border-radius: 0; cursor: default; }
.lk-story-cover img { object-fit: cover; }
.lk-story-headrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; padding: 22px 28px 6px; }
.lk-story-titles { min-width: 0; }
.lk-story-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; font-family: var(--lk-font); font-size: 0.8em; line-height: 1.4; }
.lk-story-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 9px; border-radius: 999px; white-space: nowrap;
  background: var(--lk-story-accent); color: var(--lk-story-on-accent); font-weight: 700; letter-spacing: 0.08em; font-family: var(--lk-font); font-size: 0.8rem;
}
.lk-story-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.85; }
.lk-story-series { color: var(--lk-story-muted); letter-spacing: 0.04em; }
.lk-story-einkhint { display: none; }
.lk-story .lk-story-title { margin: 0; font-family: var(--lk-story-font); font-size: clamp(1.45em, 4.2cqi, 2.05em); font-weight: 700; line-height: 1.25; letter-spacing: 0.01em; color: inherit; }
.lk-story-ep { display: block; margin-bottom: 4px; font-family: var(--lk-font); font-size: 0.5em; font-weight: 600; letter-spacing: 0.18em; color: var(--lk-story-accent); }
.lk-story-mark { display: inline-flex; align-items: center; gap: 7px; margin: 12px 0 0; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--lk-story-line); font-family: var(--lk-font); font-size: 0.82em; color: var(--lk-story-muted); }
.lk-story-mark::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lk-story-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lk-story-accent) 22%, transparent); }
.lk-story-skip, .lk-story-open {
  display: inline-flex; align-items: center; gap: 4px; flex: none; min-height: 40px; padding: 0 12px; border: 1px solid transparent; border-radius: 999px;
  background: transparent; color: var(--lk-story-muted); font: inherit; font-family: var(--lk-font); font-size: 0.85em; cursor: pointer; white-space: nowrap;
}
.lk-story-skip:hover, .lk-story-open:hover { border-color: var(--lk-story-line); color: var(--lk-story-ink); }
/* a cover wide enough to carry the title: the title sits on the picture */
@container lk-story (min-width: 600px) {
  .lk-story-head[data-cover] .lk-story-headrow {
    position: absolute; inset: auto 0 0 0; align-items: flex-end; padding: 72px 32px 24px; color: #fff;
    background: linear-gradient(to top, rgb(12 9 5 / 0.82), rgb(12 9 5 / 0.45) 55%, transparent);
  }
  .lk-story-head[data-cover] :is(.lk-story-series, .lk-story-skip) { color: rgb(255 255 255 / 0.82); }
  .lk-story-head[data-cover] .lk-story-skip:hover { border-color: rgb(255 255 255 / 0.4); color: #fff; }
  .lk-story-head[data-cover] .lk-story-title { text-shadow: 0 2px 18px rgb(0 0 0 / 0.45); }
  .lk-story-head[data-cover] .lk-story-ep { color: #ffd2b5; }
  .lk-story-head[data-cover] .lk-story-mark { border-color: rgb(255 255 255 / 0.35); color: rgb(255 255 255 / 0.9); background: rgb(0 0 0 / 0.18); backdrop-filter: blur(6px); }
}
@container lk-story (max-width: 599.98px) {
  .lk-story-cover { aspect-ratio: 16 / 10 !important; }
  .lk-story-headrow { flex-direction: column-reverse; padding: 16px 18px 4px; gap: 4px; }
  .lk-story-skip { align-self: flex-end; margin: -6px -8px 0 0; }
}
/* the player bar: sticks to the top of the story (under the site header) while the story scrolls by */
.lk-story-bar {
  position: sticky; top: var(--lk-top-offset, 0px); z-index: 6; display: flex; align-items: center; gap: 14px; margin: 0; padding: 10px 28px;
  background: color-mix(in srgb, var(--lk-story-paper) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--lk-story-line); font-family: var(--lk-font);
}
.lk-story-head:not([data-cover]) + .lk-story-bar { margin-top: 14px; border-top: 1px solid var(--lk-story-line); }
.lk-story-play {
  display: grid; place-items: center; flex: none; width: 46px; height: 46px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--lk-story-accent); color: var(--lk-story-on-accent); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--lk-story-accent) 80%, transparent);
  transition: transform 0.15s ease;
}
.lk-story-play:hover { transform: scale(1.05); }
.lk-story-play svg, .lk-story-rowplay svg { width: 20px; height: 20px; }
.lk-story-play svg .lk-fill, .lk-story-rowplay svg .lk-fill { fill: currentColor; }
.lk-story-track { flex: 1; min-width: 0; }
.lk-story-label { display: flex; justify-content: space-between; gap: 10px; font-size: 0.8em; color: var(--lk-story-muted); line-height: 1.3; }
.lk-story-label > span:first-child { font-weight: 600; color: var(--lk-story-ink); }
.lk-story-time { font-variant-numeric: tabular-nums; }
.lk-story-seekwrap { position: relative; height: 22px; }
.lk-story-ticks { position: absolute; inset: 0; pointer-events: none; }
.lk-story-ticks i { position: absolute; top: 50%; width: 2px; height: 2px; margin: -1px 0 0 -1px; border-radius: 50%; background: var(--lk-story-muted); opacity: 0.55; }
.lk-story-seek, .lk-reel-seek { position: relative; width: 100%; height: 22px; margin: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; }
.lk-story-seek::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--lk-story-accent) var(--p, 0%), color-mix(in srgb, var(--lk-story-ink) 16%, transparent) var(--p, 0%)); }
.lk-story-seek::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--lk-story-accent) var(--p, 0%), color-mix(in srgb, var(--lk-story-ink) 16%, transparent) var(--p, 0%)); }
.lk-story-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: var(--lk-story-accent); border: 2px solid var(--lk-story-paper); box-shadow: 0 1px 4px rgb(0 0 0 / 0.25); }
.lk-story-seek::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--lk-story-accent); border: 2px solid var(--lk-story-paper); }
.lk-story-rate { flex: none; min-width: 52px; min-height: 36px; padding: 0 10px; border: 1px solid var(--lk-story-line); border-radius: 999px; background: transparent; color: var(--lk-story-ink); font: inherit; font-size: 0.85em; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
.lk-story-rate:hover { border-color: var(--lk-story-accent); color: var(--lk-story-accent); }
.lk-story-barfail { display: grid; gap: 4px; width: 100%; padding: 2px 0; font-size: 0.86em; line-height: 1.55; color: var(--lk-story-ink); }
.lk-story-barfail strong { color: var(--lk-bad); }
.lk-story-barfail code { font-family: var(--lk-mono); font-size: 0.92em; padding: 1px 6px; border-radius: 4px; background: color-mix(in srgb, var(--lk-story-ink) 8%, transparent); word-break: break-all; }
.lk-story-failwhy { color: var(--lk-story-muted); }
@container lk-story (max-width: 599.98px) { .lk-story-bar { padding: 8px 14px; gap: 10px; } .lk-story-head + .lk-story-bar { margin-top: 12px; border-top: 1px solid var(--lk-story-line); } }
/* the text */
.lk-story-body { padding: 14px 28px 4px; font-size: 1.06em; line-height: 1.95; }
/* the narrative is set in the story's book face; panels, threads and cards keep the page's own font */
.lk-story-p, .lk-story-art figcaption { font-family: var(--lk-story-font); }
@container lk-story (min-width: 860px) { .lk-story-body { padding-inline: max(28px, calc((100% - 40em) / 2)); } }
@container lk-story (max-width: 599.98px) { .lk-story-body { padding: 10px 18px 4px; font-size: 1.02em; line-height: 1.9; } }
.lk-story-p { margin: 0.55em -12px; padding: 4px 12px; border-radius: 8px; text-indent: 2em; transition: background-color 0.25s, box-shadow 0.25s; }
.lk-story:lang(en) .lk-story-p { text-indent: 0; }
.lk-story-p strong, .lk-story-p b { color: var(--lk-story-accent); font-weight: 700; }
.lk-story[data-audio] [data-t0] { cursor: pointer; }
.lk-story[data-audio] .lk-story-p[data-t0]:hover { background: color-mix(in srgb, var(--lk-story-accent) 5%, transparent); }
.lk-story [data-now].lk-story-p { background: color-mix(in srgb, var(--lk-story-accent) 11%, transparent); box-shadow: inset 3px 0 0 var(--lk-story-accent); }
/* system panel: a screen inside the story */
.lk-story-sys {
  margin: 1.2em 0; padding: 14px 18px 14px 20px; border-radius: 12px; background: var(--lk-sys-bg); color: var(--lk-sys-fg);
  font-family: var(--lk-mono); font-size: 0.82em; line-height: 1.75; box-shadow: inset 3px 0 0 var(--lk-sys-accent), 0 10px 24px -18px rgb(0 20 50 / 0.8);
  transition: box-shadow 0.25s;
}
.lk-story-sys-title { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; color: var(--lk-sys-accent); font-size: 0.86em; font-weight: 700; letter-spacing: 0.12em; }
.lk-story-sys-title::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3ddc97; box-shadow: 0 0 8px #3ddc97; }
.lk-story-sys-text { margin: 0; white-space: pre-line; }
.lk-story [data-now].lk-story-sys { box-shadow: inset 3px 0 0 var(--lk-sys-accent), 0 0 0 2px color-mix(in srgb, var(--lk-sys-accent) 55%, transparent), 0 10px 24px -18px rgb(0 20 50 / 0.8); }
/* forum thread */
.lk-story-forum { margin: 1.3em 0; border-radius: 12px; background: var(--lk-surface); color: var(--lk-fg); font-family: var(--lk-font); font-size: 0.9em; line-height: 1.6; box-shadow: 0 0 0 1px var(--lk-line); overflow: hidden; }
.lk-story-forum-title { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 16px; font-weight: 700; border-bottom: 1px solid var(--lk-line); background: color-mix(in srgb, var(--lk-fg) 3%, transparent); }
.lk-story-forum-title::before { content: "#"; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--lk-accent); color: var(--lk-accent-fg); font-size: 0.85em; }
.lk-story-posts { list-style: none; margin: 0; padding: 4px 0; }
.lk-story-post { display: grid; grid-template-columns: 2.6em auto 1fr; align-items: baseline; gap: 2px 10px; padding: 7px 16px; transition: background-color 0.25s; }
.lk-story-post + .lk-story-post { border-top: 1px dashed color-mix(in srgb, var(--lk-line) 80%, transparent); }
.lk-story-floor { font-family: var(--lk-mono); font-size: 0.82em; color: var(--lk-muted); }
.lk-story-who { font-weight: 700; color: hsl(var(--lk-who-h, 210) 52% 29%); white-space: nowrap; }
:root[data-theme="dark"] .lk-story-who { color: hsl(var(--lk-who-h, 210) 62% 72%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lk-story-who { color: hsl(var(--lk-who-h, 210) 62% 72%); } }
.lk-story-said > :first-child { margin-top: 0; }
.lk-story-said > :last-child { margin-bottom: 0; }
.lk-story[data-audio] .lk-story-post[data-t0]:hover { background: color-mix(in srgb, var(--lk-accent) 5%, transparent); }
.lk-story [data-now].lk-story-post { background: var(--lk-accent-soft); box-shadow: inset 3px 0 0 var(--lk-accent); }
@container lk-story (max-width: 520px) { .lk-story-post { grid-template-columns: auto 1fr; } .lk-story-said { grid-column: 1 / -1; } }
/* a picture in the story */
.lk-story-art { margin: 1.4em 0; }
.lk-story-art .lk-art-frame { border-radius: 12px; box-shadow: 0 14px 30px -22px rgb(0 0 0 / 0.55); cursor: zoom-in; }
.lk-story-cap { margin-top: 8px; text-align: center; font-family: var(--lk-font); font-size: 0.82em; color: var(--lk-story-muted); }
/* settle card: what this episode planted */
.lk-story-settle {
  position: relative; margin: 1.6em 0 0.6em; padding: 16px 20px 14px; border-radius: 14px; font-family: var(--lk-font); font-size: 0.92em; line-height: 1.7;
  background: linear-gradient(135deg, color-mix(in srgb, var(--lk-ok) 10%, var(--lk-story-paper)), var(--lk-story-paper) 70%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--lk-ok) 35%, var(--lk-story-line));
}
.lk-story-settle-title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--lk-ok); font-weight: 800; letter-spacing: 0.14em; font-size: 0.86em; }
.lk-story-settle-title::before { content: "✦"; font-size: 1.1em; }
.lk-story-settle-text { margin: 0; }
.lk-story-settle ul { margin: 0; padding-left: 1.2em; }
.lk-story-settle li { margin: 4px 0; }
.lk-story-settle li::marker { color: var(--lk-ok); }
.lk-story-settle strong { background: linear-gradient(transparent 62%, color-mix(in srgb, var(--lk-ok) 26%, transparent) 0); }
.lk-story-foot { display: flex; justify-content: center; padding: 18px 20px 26px; }
.lk-story-done {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 22px; border-radius: 999px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--lk-story-accent) 55%, transparent); background: transparent; color: var(--lk-story-accent);
  font: inherit; font-family: var(--lk-font); font-size: 0.92em; font-weight: 600;
}
.lk-story-done:hover { background: color-mix(in srgb, var(--lk-story-accent) 9%, transparent); }
/* closed: one line */
.lk-story-row { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 10px 8px 16px; font-family: var(--lk-font); }
.lk-story-rowtitle { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--lk-story-font); font-weight: 700; }
.lk-story-rowplay { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--lk-story-accent); color: var(--lk-story-on-accent); cursor: pointer; }
.lk-story[data-state="closed"] { margin: 20px 0; border-radius: 999px; }
@container lk-story (max-width: 420px) { .lk-story-row .lk-story-tag { display: none; } .lk-story-open { padding: 0 8px; } }

/* ---- the lesson film */
.lk-reel { container: lk-reel / inline-size; position: relative; margin: 28px 0; }
.lk-reel-stage {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 16px; background: #050608; color: #fff; font-family: var(--lk-font);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.06), 0 26px 50px -30px rgb(0 0 0 / 0.65); -webkit-tap-highlight-color: transparent;
}
.lk-reel-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #050608; }
.lk-reel-cover { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: radial-gradient(120% 90% at 30% 20%, #2a3446, #0b0e14); transition: opacity 0.35s; }
.lk-reel-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lk-reel-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(4 6 10 / 0.86) 0%, rgb(4 6 10 / 0.35) 42%, rgb(4 6 10 / 0) 70%); pointer-events: none; }
.lk-reel-coverinfo { position: absolute; z-index: 1; left: clamp(16px, 4cqi, 32px); right: clamp(16px, 4cqi, 32px); bottom: clamp(14px, 3.6cqi, 28px); pointer-events: none; }
.lk-reel-tag { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 8px; padding: 3px 10px; border-radius: 999px; background: rgb(255 255 255 / 0.16); backdrop-filter: blur(8px); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; }
.lk-reel-tag::before { content: ""; width: 0; height: 0; border-left: 7px solid currentColor; border-block: 4.5px solid transparent; }
.lk-reel-title { margin: 0; font-size: clamp(1.05rem, 3.4cqi, 1.75rem); font-weight: 800; line-height: 1.3; text-shadow: 0 2px 16px rgb(0 0 0 / 0.5); max-width: 30em; }
.lk-reel-meta { margin: 6px 0 0; font-size: clamp(0.76rem, 1.8cqi, 0.9rem); color: rgb(255 255 255 / 0.78); font-variant-numeric: tabular-nums; }
.lk-reel-bigplay {
  position: relative; z-index: 1; display: grid; place-items: center; width: clamp(60px, 13cqi, 92px); aspect-ratio: 1; border: 0; border-radius: 50%; cursor: pointer;
  background: rgb(255 255 255 / 0.94); color: #10131a; box-shadow: 0 14px 40px -10px rgb(0 0 0 / 0.65), 0 0 0 10px rgb(255 255 255 / 0.12);
  transition: transform 0.18s ease, box-shadow 0.18s ease; margin-bottom: 6%;
}
.lk-reel-bigplay:hover { transform: scale(1.06); box-shadow: 0 14px 40px -10px rgb(0 0 0 / 0.65), 0 0 0 14px rgb(255 255 255 / 0.16); }
.lk-reel-bigplay .lk-ico svg { width: 40%; height: 40%; margin-left: 7%; }
.lk-reel-bigplay .lk-ico { width: 100%; height: 100%; }
.lk-reel:not([data-state="poster"]):not([data-state="error"]) .lk-reel-cover { opacity: 0; pointer-events: none; }
.lk-reel-ctrls {
  position: absolute; z-index: 3; inset: auto 0 0 0; padding: 30px 12px 8px; color: #fff;
  background: linear-gradient(to top, rgb(0 0 0 / 0.78), rgb(0 0 0 / 0.38) 60%, transparent); transition: opacity 0.25s;
}
.lk-reel[data-state="poster"] .lk-reel-ctrls, .lk-reel[data-state="error"] .lk-reel-ctrls { opacity: 0; pointer-events: none; }
.lk-reel[data-idle] .lk-reel-ctrls { opacity: 0; }
.lk-reel[data-idle] .lk-reel-stage { cursor: none; }
.lk-reel-seekwrap { position: relative; height: 20px; margin: 0 6px; }
.lk-reel-marks { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.lk-reel-tick { position: absolute; top: 50%; width: 4px; height: 8px; margin: -4px 0 0 -2px; background: #08090c; border-radius: 1px; }
.lk-reel-qmark { position: absolute; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--lk-reel-q); box-shadow: 0 0 0 2px rgb(0 0 0 / 0.55); }
.lk-reel-seek::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--lk-reel-accent) var(--p, 0%), rgb(255 255 255 / 0.3) var(--p, 0%)); }
.lk-reel-seek::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--lk-reel-accent) var(--p, 0%), rgb(255 255 255 / 0.3) var(--p, 0%)); }
.lk-reel-seek::-webkit-slider-thumb { -webkit-appearance: none; position: relative; z-index: 2; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: #fff; box-shadow: 0 1px 6px rgb(0 0 0 / 0.5); }
.lk-reel-seek::-moz-range-thumb { width: 13px; height: 13px; border: 0; border-radius: 50%; background: #fff; }
.lk-reel-seekwrap:hover .lk-reel-seek::-webkit-slider-runnable-track { height: 6px; }
.lk-reel-seekwrap:hover .lk-reel-seek::-webkit-slider-thumb { margin-top: -4px; }
.lk-reel-row { display: flex; align-items: center; gap: 2px; min-width: 0; }
.lk-reel-btn { display: inline-grid; place-items: center; flex: none; min-width: 40px; height: 40px; padding: 0 8px; border: 0; border-radius: 10px; background: transparent; color: #fff; font: inherit; font-size: 0.86rem; font-weight: 700; cursor: pointer; }
.lk-reel-btn:hover { background: rgb(255 255 255 / 0.14); }
.lk-reel-btn .lk-ico svg, .lk-reel-play svg { width: 22px; height: 22px; }
.lk-reel-play svg .lk-fill { fill: currentColor; }
.lk-reel-btn[aria-pressed="true"], .lk-reel-btn[aria-expanded="true"] { background: rgb(255 255 255 / 0.2); }
.lk-reel-time { flex: none; padding: 0 6px; font-size: 0.82rem; font-variant-numeric: tabular-nums; color: rgb(255 255 255 / 0.9); }
.lk-reel-chap { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 8px; border-left: 1px solid rgb(255 255 255 / 0.25); font-size: 0.82rem; color: rgb(255 255 255 / 0.72); }
.lk-reel-chap:empty { display: none; }
.lk-reel-sp { flex: 1; }
.lk-reel-rate { font-variant-numeric: tabular-nums; }
@container lk-reel (max-width: 520px) {
  .lk-reel-cover { place-items: start center; }
  .lk-reel-bigplay { margin: 11% 0 0; }
  .lk-reel-tag { display: none; }
  .lk-reel-chap { display: none; }
  .lk-reel-btn { min-width: 36px; padding: 0 6px; }
  .lk-reel-ctrls { padding: 22px 6px 4px; }
}
.lk-reel-cap { position: absolute; z-index: 2; left: 6%; right: 6%; bottom: 76px; text-align: center; pointer-events: none; transition: bottom 0.25s; }
.lk-reel[data-idle] .lk-reel-cap { bottom: 22px; }
.lk-reel-cap span { display: inline; padding: 0.15em 0.55em; border-radius: 6px; background: rgb(0 0 0 / 0.66); color: #fff; font-size: clamp(0.85rem, 2.6cqi, 1.2rem); line-height: 1.7; white-space: pre-line; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lk-reel-cap[hidden] { display: none; }
/* question and end card: over the picture when it is wide enough, under it on a phone */
.lk-reel-ask, .lk-reel-end { position: absolute; z-index: 5; inset: 0 0 auto 0; aspect-ratio: var(--lk-reel-ar, 16 / 9); display: grid; place-items: center; padding: 3%; border-radius: 16px; background: rgb(6 8 12 / 0.62); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.lk-reel-ask[hidden], .lk-reel-end[hidden] { display: none; }
.lk-reel-askpanel, .lk-reel-endpanel {
  width: min(600px, 100%); max-height: 100%; overflow: auto; padding: 18px 22px 16px; border-radius: 14px;
  background: var(--lk-surface); color: var(--lk-fg); box-shadow: 0 24px 60px -20px rgb(0 0 0 / 0.7); font-family: var(--lk-font);
}
.lk-reel-askpanel:focus { outline: none; }
.lk-reel-asktag { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 6px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; color: var(--lk-story-accent); }
.lk-reel-askt { color: var(--lk-muted); font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-reel-q { margin: 0 0 12px; font-size: 1.08em; font-weight: 700; line-height: 1.5; }
.lk-reel-opts { display: grid; gap: 7px; margin-bottom: 12px; }
.lk-reel-opt { display: flex; align-items: center; gap: 10px; min-height: var(--lk-hit); padding: 8px 12px; text-align: left; border: 1px solid var(--lk-line); border-radius: 10px; background: var(--lk-surface); color: var(--lk-fg); font: inherit; line-height: 1.45; cursor: pointer; }
.lk-reel-opt:hover:not(:disabled) { border-color: var(--lk-accent); }
.lk-reel-opt[aria-pressed="true"] { border-color: var(--lk-accent); background: var(--lk-accent-soft); box-shadow: inset 0 0 0 1px var(--lk-accent); }
.lk-reel-opt[data-correct="true"] { border-color: var(--lk-ok); background: var(--lk-ok-soft); box-shadow: none; }
.lk-reel-opt[data-picked="true"][data-correct="false"] { border-color: var(--lk-bad); background: var(--lk-bad-soft); box-shadow: none; }
.lk-reel-opt:disabled { cursor: default; }
.lk-reel-optkey { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--lk-fg) 8%, transparent); font-size: 0.8em; font-weight: 700; }
.lk-reel-askfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 8px; }
.lk-reel-askmsg { margin: 0; color: var(--lk-warn); font-size: 0.9em; }
.lk-reel-askmsg:empty { visibility: hidden; }
.lk-reel-verdict { display: grid; gap: 6px; margin-top: 4px; }
.lk-reel-verdict p { margin: 0; line-height: 1.6; }
.lk-reel-verdict[data-ok="true"] strong { color: var(--lk-ok); }
.lk-reel-verdict[data-ok="false"] strong { color: var(--lk-bad); }
.lk-reel-why2 { color: var(--lk-muted); }
.lk-reel-verdict .lk-btn { justify-self: start; margin-top: 4px; }
.lk-reel-endbtns { display: flex; flex-wrap: wrap; gap: 8px; }
@container lk-reel (max-width: 599.98px) {
  .lk-reel-ask, .lk-reel-end { position: static; aspect-ratio: auto; display: block; margin-top: 10px; padding: 0; background: none; backdrop-filter: none; border-radius: 14px; }
  .lk-reel-askpanel, .lk-reel-endpanel { box-shadow: 0 0 0 1px var(--lk-line), 0 12px 30px -20px rgb(0 0 0 / 0.5); padding: 16px; }
}
.lk-reel-fail { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; padding: 6%; background: rgb(10 12 16 / 0.9); }
.lk-reel-failin { max-width: 34em; font-size: clamp(0.8rem, 2.2cqi, 0.95rem); line-height: 1.65; }
.lk-reel-failin strong { display: block; margin-bottom: 4px; font-size: 1.1em; color: #ffb4a8; }
.lk-reel-failin p { margin: 4px 0; }
.lk-reel-failin code { padding: 1px 6px; border-radius: 4px; background: rgb(255 255 255 / 0.12); font-family: var(--lk-mono); word-break: break-all; }
.lk-reel-failwhy { color: rgb(255 255 255 / 0.72); }
.lk-reel-tx { margin-top: 10px; max-height: 300px; overflow: auto; overscroll-behavior: contain; border-radius: 14px; background: var(--lk-surface); box-shadow: 0 0 0 1px var(--lk-line); }
.lk-reel-tx ol { list-style: none; margin: 0; padding: 6px; }
.lk-reel-line { display: grid; grid-template-columns: 3.2em auto 1fr; align-items: baseline; gap: 2px 10px; width: 100%; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--lk-fg); font: inherit; font-size: 0.92em; line-height: 1.55; text-align: left; cursor: pointer; user-select: text; }
.lk-reel-line:hover { background: color-mix(in srgb, var(--lk-accent) 6%, transparent); }
.lk-reel-line[aria-current] { background: var(--lk-accent-soft); box-shadow: inset 3px 0 0 var(--lk-accent); }
.lk-reel-lt { font-family: var(--lk-mono); font-size: 0.82em; color: var(--lk-muted); font-variant-numeric: tabular-nums; }
.lk-reel-who { font-weight: 700; color: var(--lk-accent); white-space: nowrap; }
.lk-reel-eink { display: none; }
.lk-reel > figcaption { margin-top: 10px; color: var(--lk-muted); font-size: 0.9em; line-height: 1.6; }
.lk-reel[data-fs] { display: flex; flex-direction: column; justify-content: center; background: #000; margin: 0; }
.lk-reel[data-fs] .lk-reel-stage { width: min(100vw, calc(100vh * var(--lk-reel-arn, 1.7778))); margin: auto; border-radius: 0; box-shadow: none; }
.lk-reel[data-fs] :is(.lk-reel-tx, figcaption) { display: none; }
.lk-reel[data-fs] :is(.lk-reel-ask, .lk-reel-end) { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }

/* ---- annotated art */
.lk-art { position: relative; margin: 28px 0; }
.lk-art-frame { position: relative; display: block; width: 100%; overflow: hidden; border-radius: var(--lk-radius); background: var(--lk-art-bg, color-mix(in srgb, var(--lk-line) 45%, var(--lk-surface))); }
.lk-art > .lk-art-frame { cursor: zoom-in; }
.lk-art-frame picture, .lk-art-frame img { display: block; width: 100%; height: 100%; }
.lk-art-frame img { object-fit: cover; }
.lk-art > figcaption { margin-top: 8px; color: var(--lk-muted); font-size: 0.9em; line-height: 1.6; }
/* the author's annotation layer: same aspect as the picture, scales with it, paints with the theme's mark colours */
.lk-art-marks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; color: var(--lk-art-mark); font-family: var(--lk-font, system-ui, sans-serif); font-weight: 700; stroke-linejoin: round; stroke-linecap: round; paint-order: stroke fill; }
.lk-art-marks .mk { fill: none; stroke: currentColor; }
.lk-art-marks .mk-text { fill: currentColor; stroke: var(--lk-art-halo); }
.lk-art-marks .mk-fill { fill: currentColor; stroke: none; }
.lk-art-marks .mk-2 { color: var(--lk-art-mark-2); }
.lk-art-marks .mk-halo { stroke: var(--lk-art-halo); }
.lk-art .lk-fig-zoom { z-index: 1; opacity: 0; transition: opacity 0.2s; }
.lk-art:hover .lk-fig-zoom, .lk-art .lk-fig-zoom:focus-visible { opacity: 1; }
@media (hover: none) { .lk-art .lk-fig-zoom { opacity: 1; } }
.lk-art-missing { display: flex; align-items: baseline; gap: 8px; margin: 12px 0; padding: 8px 12px; border: 1px dashed var(--lk-line); border-radius: var(--lk-radius-sm); color: var(--lk-muted); font-family: var(--lk-font); font-size: 0.88em; line-height: 1.55; word-break: break-word; }
.lk-art-missing-ico { flex: none; opacity: 0.7; }
/* dark theme: the picture is dimmed a little, never inverted (the annotations keep their full colour) */
:root[data-theme="dark"] .lk-art-frame img { filter: brightness(0.86) saturate(0.94); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lk-art-frame img { filter: brightness(0.86) saturate(0.94); } }
/* the lightbox with an annotation layer on top */
dialog.lk-lightbox .lk-lb-stage { position: relative; width: min(calc(96vw - 16px), calc(84dvh * var(--lk-lb-ar, 1.6))); margin: 0 auto; }
dialog.lk-lightbox .lk-lb-stage img { width: 100%; height: auto; max-height: none; }

/* ---- knowledge cards */
.lk-concepts { container: lk-cn / inline-size; margin: 24px 0; }
.lk-cn-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 28px; margin-bottom: 18px; }
.lk-cn-tally { min-width: min(100%, 300px); }
.lk-cn-count { display: flex; align-items: baseline; gap: 2px; margin: 0; }
.lk-cn-count b { font-size: 2.6em; font-weight: 800; line-height: 1; color: var(--lk-cn-lit-ink); font-variant-numeric: tabular-nums; }
.lk-cn-of { margin: 0 10px 0 4px; font-size: 1.15em; font-weight: 600; color: var(--lk-muted); font-variant-numeric: tabular-nums; }
.lk-cn-countl { color: var(--lk-muted); font-size: 0.92em; }
.lk-cn-meter { display: flex; gap: 3px; max-width: 360px; margin: 10px 0 8px; }
.lk-cn-meter i { flex: 1; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--lk-fg) 10%, transparent); }
.lk-cn-meter i[data-on] { background: linear-gradient(90deg, var(--lk-cn-lit), var(--lk-cn-lit-2)); box-shadow: 0 0 10px -1px color-mix(in srgb, var(--lk-cn-lit) 70%, transparent); }
.lk-cn-how { margin: 0; max-width: 36em; color: var(--lk-muted); font-size: 0.86em; line-height: 1.6; }
.lk-cn-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.lk-cn-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border: 1px solid var(--lk-line); border-radius: 999px; background: var(--lk-surface); color: var(--lk-fg); font: inherit; font-size: 0.9em; cursor: pointer; }
.lk-cn-chip small { color: var(--lk-muted); font-variant-numeric: tabular-nums; }
.lk-cn-chip:hover { border-color: var(--lk-accent); }
.lk-cn-chip[aria-pressed="true"] { background: var(--lk-fg); border-color: var(--lk-fg); color: var(--lk-bg); }
.lk-cn-chip[aria-pressed="true"] small { color: inherit; opacity: 0.7; }
.lk-cn-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 228px), 1fr)); gap: 14px; }
.lk-cn-card { position: relative; display: flex; flex-direction: column; border-radius: 16px; background: var(--lk-surface); box-shadow: 0 0 0 1px var(--lk-line); transition: box-shadow 0.25s, transform 0.2s; }
.lk-cn-card[hidden] { display: none; }
.lk-cn-card:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--lk-accent) 45%, var(--lk-line)), 0 14px 28px -20px rgb(0 0 0 / 0.45); }
.lk-cn-face { display: flex; flex-direction: column; flex: 1; width: 100%; padding: 0; border: 0; border-radius: inherit; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.lk-cn-pic { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 16px 16px 0 0; background: hsl(var(--lk-cn-h, 210) 62% 93%); }
:root[data-theme="dark"] .lk-cn-pic { background: hsl(var(--lk-cn-h, 210) 30% 20%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lk-cn-pic { background: hsl(var(--lk-cn-h, 210) 30% 20%); } }
.lk-cn-pic .lk-art-frame { position: absolute; inset: 0; aspect-ratio: auto !important; border-radius: 0; height: 100%; }
.lk-cn-pic .lk-art-frame img { transition: filter 0.4s; }
.lk-cn-mono { font-family: var(--lk-story-font); font-size: 2.8em; font-weight: 800; color: hsl(var(--lk-cn-h, 210) 48% 40%); transition: opacity 0.3s; }
:root[data-theme="dark"] .lk-cn-mono { color: hsl(var(--lk-cn-h, 210) 60% 74%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lk-cn-mono { color: hsl(var(--lk-cn-h, 210) 60% 74%); } }
.lk-cn-text { display: grid; gap: 4px; padding: 12px 15px 4px; }
.lk-cn-name { font-size: 1.04em; font-weight: 750; line-height: 1.35; }
.lk-cn-plain { color: var(--lk-muted); font-size: 0.88em; line-height: 1.6; }
.lk-cn-state { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; justify-self: start; margin: 8px 15px 14px; padding: 2px 10px 2px 8px; border: 1px solid var(--lk-line); border-radius: 999px; color: var(--lk-muted); font-size: 0.78em; font-weight: 600; white-space: nowrap; }
.lk-cn-card[data-state="new"] .lk-cn-pic img { filter: grayscale(0.92) contrast(0.95); opacity: 0.92; }
.lk-cn-card[data-state="new"] .lk-cn-mono { opacity: 0.45; }
.lk-cn-card[data-state="seen"] .lk-cn-pic img { filter: grayscale(0.3); }
.lk-cn-card[data-state="seen"] .lk-cn-state { border-color: color-mix(in srgb, var(--lk-accent) 45%, var(--lk-line)); color: var(--lk-accent); }
/* mastered: the card lights up */
.lk-cn-card[data-state="mastered"] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--lk-cn-lit) 10%, var(--lk-surface)), var(--lk-surface) 55%);
  box-shadow: 0 0 0 1.5px var(--lk-cn-lit), 0 16px 34px -18px color-mix(in srgb, var(--lk-cn-lit) 75%, transparent);
}
.lk-cn-card[data-state="mastered"] .lk-cn-state { border-color: transparent; background: linear-gradient(90deg, var(--lk-cn-lit), var(--lk-cn-lit-2)); color: #3b2600; }
.lk-cn-card[data-state="mastered"] .lk-cn-pic::after { content: "✦"; position: absolute; top: 8px; right: 10px; color: #fff; font-size: 1.1em; text-shadow: 0 0 10px var(--lk-cn-lit), 0 0 2px var(--lk-cn-lit); }
.lk-cn-glyph { font-size: 0.95em; }
.lk-cn-card[data-open] { grid-column: 1 / -1; transform: none; }
.lk-cn-more { padding: 0 15px 16px; font-size: 0.92em; line-height: 1.7; }
.lk-cn-more p { margin: 0 0 8px; }
.lk-cn-all { display: block; margin: 18px auto 0; min-height: 44px; padding: 0 22px; border: 1px solid var(--lk-line); border-radius: 999px; background: var(--lk-surface); color: var(--lk-fg); font: inherit; font-weight: 600; cursor: pointer; }
.lk-cn-all:hover { border-color: var(--lk-accent); color: var(--lk-accent); }

/* ---- the film strip (data-lk="films"): poster cards in one sideways row, a click lands on the film in its lesson */
.lk-films { margin: 18px 0; }
.lk-films-strip { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding: 0 0 10px; }
.lk-films-strip:focus-visible { outline: 3px solid var(--lk-accent); outline-offset: 2px; }
.lk-films-strip ol { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 300px); gap: 12px; }
.lk-films-strip li { scroll-snap-align: start; }
.lk-films-strip a { display: grid; align-content: start; gap: 2px; height: 100%; color: var(--lk-fg); text-decoration: none; background: var(--lk-surface); border: 1px solid var(--lk-line); border-radius: var(--lk-radius); overflow: hidden; padding-bottom: 12px; }
.lk-films-strip a:hover { border-color: var(--lk-fg); }
.lk-films-pic { position: relative; display: block; aspect-ratio: 16 / 9; background: #15110e; }
.lk-films-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lk-films-len { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 8px; border-radius: 999px; background: rgb(14 11 9 / 0.78); color: #fff; font-size: 13px; font-variant-numeric: tabular-nums; }
.lk-films-play { width: 0; height: 0; border-style: solid; border-width: 5.5px 0 5.5px 9px; border-color: transparent transparent transparent currentColor; }
.lk-films-strip a:hover .lk-films-len { background: var(--lk-accent); color: var(--lk-accent-fg); }
.lk-films-no { margin: 10px 12px 0; font-size: 12px; letter-spacing: 0.08em; color: var(--lk-accent); }
.lk-films-t { margin: 0 12px; font-weight: 600; font-size: 17px; line-height: 1.45; }
.lk-films-done { justify-self: start; margin: 4px 12px 0; padding: 1px 8px; border-radius: 999px; background: var(--lk-accent-soft); color: var(--lk-accent); font-size: 12px; }
.lk-films-done[hidden] { display: none; }
html[data-lk-eink] .lk-films-strip { overflow: visible; }
html[data-lk-eink] .lk-films-strip ol { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.lk-cn-all[hidden] { display: none; }
.lk-cn-use { padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--lk-accent, #b5532d) 9%, transparent); }
.lk-cn-use b { color: var(--lk-accent, #b5532d); font-weight: 600; margin-right: 2px; }
.lk-cn-go { font-weight: 700; color: var(--lk-accent); text-decoration: none; }
a.lk-cn-go:hover { text-decoration: underline; text-underline-offset: 3px; }
@container lk-cn (min-width: 640px) {
  .lk-cn-card[data-open] { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); grid-template-rows: auto 1fr; }
  .lk-cn-card[data-open] .lk-cn-face { display: contents; }
  .lk-cn-card[data-open] .lk-cn-pic { grid-row: 1 / span 3; aspect-ratio: auto; min-height: 220px; border-radius: 16px 0 0 16px; }
  .lk-cn-card[data-open] .lk-cn-text { padding-top: 18px; }
  .lk-cn-card[data-open] .lk-cn-name { font-size: 1.25em; }
  .lk-cn-card[data-open] .lk-cn-more { grid-column: 2; padding-top: 4px; }
}
@container lk-cn (max-width: 520px) {
  .lk-cn-grid { grid-template-columns: 1fr; gap: 10px; }
  .lk-cn-face { display: grid; grid-template-columns: 84px 1fr; grid-template-rows: auto auto; column-gap: 0; }
  .lk-cn-pic { grid-row: 1 / span 2; aspect-ratio: auto; height: 100%; min-height: 96px; border-radius: 16px 0 0 16px; }
  .lk-cn-mono { font-size: 2em; }
  .lk-cn-text { padding: 11px 13px 2px; }
  .lk-cn-state { margin: 6px 13px 11px; }
  .lk-cn-card[data-open] .lk-cn-pic { border-radius: 16px 0 0 0; }
}

/* ---- site identity and the WeChat codes */
.lk-about-mount { margin: 32px 0; }
.lk-about { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; margin: 12px 0 0; padding: 22px 26px; border-radius: 18px; background: var(--lk-surface); box-shadow: 0 0 0 1px var(--lk-line); }
.lk-about-who { flex: 1 1 260px; min-width: 0; }
.lk-about-name { margin: 0; font-size: 1.3em; font-weight: 800; line-height: 1.3; }
.lk-about-by, .lk-about-mp { margin: 4px 0 0; color: var(--lk-muted); font-size: 0.92em; }
.lk-about-mp b { color: var(--lk-fg); }
.lk-about-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.lk-about-link { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px 0 11px; border: 1px solid var(--lk-line); border-radius: 999px; color: var(--lk-fg); text-decoration: none; font-size: 0.9em; }
.lk-about-link small { color: var(--lk-muted); }
.lk-about-link:hover { border-color: var(--lk-accent); color: var(--lk-accent); }
.lk-about-codes { display: flex; flex-wrap: wrap; gap: 16px; }
.lk-qr { width: var(--lk-qr-size); margin: 0; text-align: center; }
.lk-qr-img { padding: 9px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08), 0 10px 22px -16px rgb(0 0 0 / 0.5); }
/* a code is never dimmed, inverted or boosted by any theme or e-ink filter: scanners need it as it is */
.lk-qr img { display: block; width: 100%; height: auto; filter: none !important; mix-blend-mode: normal !important; opacity: 1 !important; }
.lk-qr figcaption { display: grid; gap: 1px; margin-top: 8px; font-size: 0.85em; line-height: 1.45; }
.lk-qr figcaption span:empty { display: none; }
.lk-about-hint { margin: 10px 0 0; color: var(--lk-muted); font-size: 0.82em; }
@media (max-width: 560px) { :root { --lk-qr-size: 132px; } .lk-about { padding: 18px; } .lk-about-codes { width: 100%; justify-content: center; } }

/* ---- the media blocks in e-ink, film and print */
html[data-lk-eink] :is(.lk-story-bar, .lk-story-rowplay) { display: none !important; }
html[data-lk-eink] .lk-story-einkhint { display: inline-flex; align-items: center; padding: 2px 8px; border: 1px solid currentColor; border-radius: 999px; font-weight: 700; }
html[data-lk-eink] .lk-story [data-t0] { cursor: auto; }
/* e-ink: the title under the cover, in ink, never on the picture */
html[data-lk-eink] .lk-story .lk-story-head[data-cover] .lk-story-headrow { position: static !important; background: none !important; color: inherit !important; padding: 18px 24px 6px !important; }
html[data-lk-eink] .lk-story .lk-story-head[data-cover] :is(.lk-story-series, .lk-story-skip, .lk-story-mark, .lk-story-ep) { color: inherit !important; text-shadow: none !important; background: none !important; }
html[data-lk-eink] .lk-story .lk-story-title { text-shadow: none !important; }
html[data-lk-eink] :is(.lk-reel-video, .lk-reel-ctrls, .lk-reel-bigplay, .lk-reel-cap, .lk-reel-ask, .lk-reel-end, .lk-reel-tx) { display: none !important; }
html[data-lk-eink] .lk-reel-eink { display: block; margin-top: 10px; font-size: 0.95em; line-height: 1.7; }
html[data-lk-eink] .lk-reel-eink ol { margin: 6px 0 0; padding-left: 1.4em; }
html:is([data-lk-eink="mono"], [data-lk-eink="color"]) .lk-story { background: #fff; color: #000; border: 2px solid #000; border-radius: 0; }
html:is([data-lk-eink="mono"], [data-lk-eink="color"]) :is(.lk-story-sys, .lk-story-forum, .lk-story-settle) { background: #fff; color: #000; border: 2px solid #000; border-radius: 0; }
html:is([data-lk-eink="mono"], [data-lk-eink="color"]) :is(.lk-story-sys-title, .lk-story-settle-title, .lk-story-who, .lk-story-ep, .lk-story-p strong) { color: #000; }
html:is([data-lk-eink="mono"], [data-lk-eink="color"]) .lk-story-tag { background: #000; color: #fff; }
html:is([data-lk-eink="mono"], [data-lk-eink="color"]) :is(.lk-story-sys-title, .lk-story-mark)::before { background: #000; box-shadow: none; }
html:is([data-lk-eink="mono"], [data-lk-eink="color"]) :is(.lk-reel-stage, .lk-cn-card, .lk-about) { border: 2px solid #000; border-radius: 0; }
html[data-lk-eink="mono"] :is(.lk-art-frame, .lk-story-cover, .lk-cn-pic) img { filter: grayscale(1) contrast(1.25); }
html[data-lk-eink="mono"] .lk-cn-card[data-state="mastered"] { border-width: 4px; border-style: double; }
html[data-lk-film] :is(.lk-story-skip, .lk-story-foot, .lk-story-bar, .lk-art .lk-fig-zoom, .lk-reel-ctrls) { display: none !important; }
@media print {
  :is(.lk-story-bar, .lk-story-row, .lk-story-foot, .lk-story-skip, .lk-reel-ctrls, .lk-reel-bigplay, .lk-reel-ask, .lk-reel-end, .lk-cn-filter) { display: none !important; }
  .lk-story-body, .lk-story-head, .lk-cn-more { display: block !important; }
  :is(.lk-story-sys, .lk-story-forum, .lk-story-settle, .lk-cn-card, .lk-qr) { break-inside: avoid; }
}

/* ---------- modes */
@media (prefers-reduced-motion: reduce) {
  [data-lk-ui], [data-lk-flash] { transition: none !important; animation: none !important; }
}
html[data-lk-shot] [data-lk-ui], html[data-lk-shot] [data-lk-flash] { transition: none !important; animation: none !important; }
html[data-lk-film] :is(.lk-hl-bar, .lk-hl-card, .lk-status, .lk-help-wrap, .lk-fig-zoom, .lk-toc, .lk-toc-scrim, .lk-toc-btn, .lk-eink-btn, .lk-panel-tools) { display: none !important; }

/* D13: printing never shows hints, answers or explanations of unanswered questions, nor any controls. */
@media print {
  :is(.lk-hl-bar, .lk-hl-card, .lk-status, .lk-actions, .lk-after, .lk-help-wrap, .lk-fig-zoom, .lk-controls, .lk-unitnav-map, .lk-panel-tools, dialog) { display: none !important; }
  :is(.lk-toc, .lk-toc-scrim, .lk-toc-btn, .lk-eink-btn, .lk-ek-bar, .lk-ek-mask, .lk-ek-tip, .lk-ek-step) { display: none !important; }
  html[data-lk-toc] body { padding-left: 0 !important; }
  html[data-lk-eink] body { padding-bottom: 0 !important; }
  .lk-mq[data-state="open"] :is(.lk-hints, .lk-fb, .lk-why, .lk-solution, .lk-ref) { display: none !important; }
  [data-lk="predict"]:not([data-state]) > [data-part="reveal"] { display: none !important; }
  /* only what still fits when moved whole: a question with its hints and feedback is often taller than a page, and keeping
     it whole would push out a page of blank paper and clip its end (learned with the old shell's PDF export) */
  .lk-card { box-shadow: none; }
  :is(.lk-card:not(.lk-mq), .lk-stat, .lk-opt-row, .lk-hint, figure, tr) { break-inside: avoid; }
}