/*  Linear Algebra from the Beginning — design system
    ---------------------------------------------------
    Warm paper, Fraunces display, Source Serif body and JetBrains Mono for
    numbers, as in the other Curionode courses. The workshop furniture (a bar
    of controls with sliders, switches and typed matrices, a canvas, a readout
    rail, a LaTeX rail, a note and a step player), the challenges, the
    projects, the journey map and the knowledge check are styled here once for
    every plate.

    Colours are tokens. The dark values are written twice: once for a reader
    whose system asks for dark (no script, so no flash of a light page) and
    once for an explicit choice; tools/build.py fails if the two drift apart.

    The figure's own grammar: the first basis vector red, the second blue, the
    third teal; an image under a matrix dashed in its source's colour; a span
    tinted, a null space plum, an eigenvector line ochre; pivots boxed in red.
*/
@import url('../vendor/fonts/fonts.css');

:root {
    --paper: #fbf8f3;  --paper-deep: #f4ede0;  --paper-vellum: #f0e9da;  --paper-rule: #e3dac6;
    --ink: #1c1c1f;  --ink-soft: #3a3a3f;  --ink-mute: #6e6e74;  --ink-faint: #9a958b;
    --red: #b8312f;  --red-tint: #f5e7e3;  --blue: #1d4ed8;  --blue-tint: #e6ecf6;  --teal: #0f6e6a;  --teal-tint: #e1eeec;
    --plum: #5a3a7a;  --plum-tint: #ece2f0;  --ochre: #b3791f;  --ochre-tint: #f4e6c8;  --green: #2d6a4f;  --green-tint: #e0ede4;
    --sienna: #a8530c;  --olive: #5a5a1c;  --input: #fffefb;
    --fig-paper: #fffdf7;  --fig-grid: #cfc6b0;  --fig-rule: #e3dac6;  --fig-ink: #1c1c1f;  --fig-muted: #6e6e74;  --fig-faint: #9a958b;
    --fig-blue: #1d4ed8;  --fig-red: #b8312f;  --fig-green: #2d6a4f;  --fig-teal: #0f6e6a;  --fig-plum: #5a3a7a;  --fig-ochre: #b3791f;  --fig-sienna: #a8530c;  --fig-olive: #5a5a1c;
    --shadow: 0 2px 6px rgba(28, 28, 31, 0.06);  --shadow-lg: 0 10px 30px rgba(28, 28, 31, 0.14);
    --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
    --font-body: 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
    --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
    --font-zh: 'PingFang SC', 'Hiragino Sans GB', 'Noto Serif CJK SC', 'Source Han Serif SC', 'Microsoft YaHei', serif;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
    --paper: #17150f;  --paper-deep: #1e1b14;  --paper-vellum: #221f17;  --paper-rule: #3a3427;
    --ink: #ece5d6;  --ink-soft: #c8c0ae;  --ink-mute: #9b9384;  --ink-faint: #756e60;
    --red: #e2706a;  --red-tint: #3b211f;  --blue: #82a8f4;  --blue-tint: #1d2740;  --teal: #4fb5ae;  --teal-tint: #16302e;
    --plum: #b492d8;  --plum-tint: #2c2339;  --ochre: #e2b257;  --ochre-tint: #3b3017;  --green: #6cba8e;  --green-tint: #1a3026;
    --sienna: #e28c48;  --olive: #b8b86a;  --input: #1c1a13;
    --fig-paper: #1a1710;  --fig-grid: #3a3427;  --fig-rule: #3a3427;  --fig-ink: #ece5d6;  --fig-muted: #9b9384;  --fig-faint: #756e60;
    --fig-blue: #82a8f4;  --fig-red: #e2706a;  --fig-green: #6cba8e;  --fig-teal: #4fb5ae;  --fig-plum: #b492d8;  --fig-ochre: #e2b257;  --fig-sienna: #e28c48;  --fig-olive: #b8b86a;
    --shadow: 0 2px 6px rgba(0, 0, 0, 0.38);  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
    }
}
:root[data-theme="dark"] {
    --paper: #17150f;  --paper-deep: #1e1b14;  --paper-vellum: #221f17;  --paper-rule: #3a3427;
    --ink: #ece5d6;  --ink-soft: #c8c0ae;  --ink-mute: #9b9384;  --ink-faint: #756e60;
    --red: #e2706a;  --red-tint: #3b211f;  --blue: #82a8f4;  --blue-tint: #1d2740;  --teal: #4fb5ae;  --teal-tint: #16302e;
    --plum: #b492d8;  --plum-tint: #2c2339;  --ochre: #e2b257;  --ochre-tint: #3b3017;  --green: #6cba8e;  --green-tint: #1a3026;
    --sienna: #e28c48;  --olive: #b8b86a;  --input: #1c1a13;
    --fig-paper: #1a1710;  --fig-grid: #3a3427;  --fig-rule: #3a3427;  --fig-ink: #ece5d6;  --fig-muted: #9b9384;  --fig-faint: #756e60;
    --fig-blue: #82a8f4;  --fig-red: #e2706a;  --fig-green: #6cba8e;  --fig-teal: #4fb5ae;  --fig-plum: #b492d8;  --fig-ochre: #e2b257;  --fig-sienna: #e28c48;  --fig-olive: #b8b86a;
    --shadow: 0 2px 6px rgba(0, 0, 0, 0.38);  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* ─── Base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.62 var(--font-body); font-optical-sizing: auto; }
::selection { background: var(--ochre-tint); }
a { color: var(--blue); text-underline-offset: 2px; }
code, kbd, .mono { font-family: var(--font-mono); font-size: 0.86em; }
p code, li code, dd code, .prose code, .info-box code, .marginalia code, .key-concept code, .quiz-q code, .challenge code { background: var(--paper-deep); border: 1px solid var(--paper-rule); border-radius: 3px; padding: 0 0.28em; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
sub, sup { line-height: 0; }

/* ─── Topbar ───────────────────────────────────────────────── */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 32px;
    background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--paper-rule); }
.topbar-left { display: flex; align-items: baseline; gap: 20px; min-width: 0; }
.topbar-back { font: 500 11px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); text-decoration: none; white-space: nowrap; }
.topbar-back:hover { color: var(--red); }
.topbar-title { font: 400 19px/1.2 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-title .icon { font: 600 12px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); margin-right: 10px; }
.lang-btn { border: 1px solid var(--paper-rule); background: var(--paper); font: 500 12px/1 var(--font-mono); padding: 6px 12px; border-radius: 3px; cursor: pointer; }
.lang-btn:hover { border-color: var(--ink-mute); }

/* ─── The plate ────────────────────────────────────────────── */
.main-content { max-width: 980px; margin: 0 auto; padding: 34px 32px 80px; }
.plate-meta { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--paper-rule);
    font: 500 11px/1.6 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
.plate-meta b { color: var(--red); font-weight: 600; margin-right: 8px; }
.thread { display: inline-block; margin-left: 6px; padding: 0 5px; border: 1px solid var(--teal); color: var(--teal); border-radius: 2px; font-size: 10px; }
h1.plate-title { font: 400 clamp(36px, 6vw, 56px)/1.05 var(--font-display); font-variation-settings: 'opsz' 144, 'SOFT' 30; letter-spacing: -0.02em; margin: 32px 0 14px; }
h1.plate-title em { color: var(--red); }
.plate-deck { font: italic 20px/1.45 var(--font-body); color: var(--ink-soft); margin: 0 0 32px; max-width: 720px; }
.info-box.lede { border-left: 3px solid var(--ink); padding: 2px 0 2px 18px; margin: 0 0 30px; max-width: 720px; }
.info-box.lede p { margin: 0 0 12px; }
.info-box.lede > p:first-child::first-letter { float: left; font: 400 66px/0.84 var(--font-display); color: var(--red); margin: 6px 10px 0 0; }
.info-box.lede > p.preview { font-style: italic; padding-top: 12px; border-top: 1px solid var(--paper-rule); font-size: 15px; color: var(--ink-soft); }
.formula-group { display: flex; flex-wrap: wrap; gap: 18px 40px; align-items: center; background: var(--paper-deep); border-top: 1px solid var(--paper-rule);
    border-bottom: 1px solid var(--paper-rule); padding: 20px 26px; margin: 0 0 30px; max-width: 760px; }
.formula { font-size: 17px; overflow-x: auto; max-width: 100%; }
.formula[data-eq]::after { content: '(' attr(data-eq) ')'; margin-left: 16px; font: italic 13px var(--font-body); color: var(--ink-faint); }
.learning-objectives { border-top: 1px solid var(--ink); padding-top: 14px; margin: 0 0 34px; max-width: 720px; }
.learning-objectives-title, .section-title { font: 600 11px/1.4 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.learning-objectives-title::before { content: '§ '; color: var(--red); }
.learning-objectives ul { list-style: none; padding: 0; margin: 12px 0 0; counter-reset: obj; }
.learning-objectives li { counter-increment: obj; position: relative; padding: 6px 0 6px 36px; border-bottom: 1px solid var(--paper-rule); }
.learning-objectives li::before { content: counter(obj, decimal-leading-zero); position: absolute; left: 0; top: 7px; font: italic 14px var(--font-display); color: var(--red); }
.section-title { margin: 20px 0 16px; display: flex; align-items: center; gap: 12px; }
.section-title::before { content: ''; width: 26px; border-top: 1px solid var(--ink-mute); }
h2 { font: 400 30px/1.2 var(--font-display); letter-spacing: -0.01em; margin: 44px 0 14px; }
.prose { max-width: 720px; }
.prose p { margin: 0; }
.prose p + p { text-indent: 1.4em; margin-top: 12px; }
/* a matrix quoted in running text: a small bracketed grid */
.imat { display: inline-grid; grid-template-columns: repeat(var(--c), auto); column-gap: 0.5em; vertical-align: middle; margin: 2px 0.15em; padding: 1px 0.4em; font-size: 0.85em; font-variant-numeric: tabular-nums; line-height: 1.25; text-indent: 0; text-align: right; border-left: 1.2px solid currentColor; border-right: 1.2px solid currentColor; border-radius: 3px; }
.imat i { font-style: normal; }
.marginalia { margin: 28px 0; padding: 12px 16px; max-width: 760px; border-left: 2px solid var(--red); background: var(--red-tint); font: italic 15px/1.55 var(--font-body); color: var(--ink-soft); }
dl.terms { max-width: 720px; margin: 0; }
dl.terms dt { font: italic 18px var(--font-display); margin-top: 14px; }
dl.terms dd { margin: 4px 0 0; padding-bottom: 12px; border-bottom: 1px solid var(--paper-rule); color: var(--ink-soft); }
.key-concept { margin: 40px 0; padding: 4px 0 4px 22px; max-width: 720px; border-left: 3px solid var(--red); font: italic 21px/1.45 var(--font-body); }
.key-concept::before { content: 'In short'; display: block; margin-bottom: 6px; font: 600 11px/1 var(--font-mono); font-style: normal; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); }
html[lang="zh"] .key-concept::before { content: '要点'; }
.key-concept strong { font-weight: 600; }
.threads { max-width: 720px; margin: 0 0 20px; font-size: 15px; color: var(--ink-soft); }
.threads-title { font: 600 11px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.threads ul { margin: 6px 0 0; padding-left: 1.2em; }
.section-break { text-align: center; margin: 46px 0 20px; color: var(--ink-faint); }
.section-break::before { content: '⁂'; font-size: 22px; }
.nav-footer { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--paper-rule); padding-top: 16px;
    font: 500 12px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.nav-footer a { color: var(--ink-soft); text-decoration: none; }
.nav-footer a:hover { color: var(--red); }
.nav-footer a.nav-report { color: var(--ink-faint); }

/* ─── Figures and workshops ────────────────────────────────── */
main { counter-reset: fig; }
.figure { margin: 0 0 26px; counter-increment: fig; }
.figure-caption { margin-top: 10px; font: italic 14px/1.5 var(--font-body); color: var(--ink-soft); max-width: 780px; }
.figure-caption::before { content: 'Fig. ' counter(fig) '.'; margin-right: 8px; font: 600 11px var(--font-mono); font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); }
html[lang="zh"] .figure-caption::before { content: '图 ' counter(fig); }
.ws { border: 1px solid var(--paper-rule); background: var(--fig-paper); box-shadow: var(--shadow); }
.ws canvas { display: block; width: 100%; touch-action: none; }
.ws-bar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--paper-rule); background: var(--paper); font: 12px var(--font-mono); }
.ws-bar label { color: var(--ink-mute); display: inline-flex; gap: 6px; align-items: center; }
.ws-bar input[type="range"] { width: 120px; }
.ws-bar input.txt { font: 13px var(--font-mono); width: 22em; max-width: 60vw; padding: 3px 6px; border: 1px solid var(--paper-rule); background: var(--paper-deep); color: var(--ink); }
.ws-bar input.txt.bad { border-color: var(--red); }
.ws-bar b[data-pv] { color: var(--ink); font-weight: 500; min-width: 3.5em; }
.ws-body { display: grid; grid-template-columns: minmax(0, 1fr) 240px; }
.ws-body > .ws-canvas { border-right: 1px solid var(--paper-rule); min-width: 0; }
.ws-rail { padding: 10px 14px; font: 13px/1.5 var(--font-mono); background: var(--paper); min-width: 0; }
.ws-rail h4 { font: 600 10px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin: 4px 0 8px; }
.rail-stats { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; }
.rail-stats span:nth-child(odd) { color: var(--ink-mute); }
.rail-stats span:nth-child(even) { color: var(--ink); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rail-stats span.wide { grid-column: 1 / -1; }
.rail-stats span.wide:nth-child(even) { text-align: left; white-space: normal; padding-left: 10px; margin-bottom: 4px; }
.ws-note { padding: 9px 14px; border-top: 1px solid var(--paper-rule); background: var(--paper); font: 14px/1.5 var(--font-body); color: var(--ink-soft); }
.btn, .seg button { border: 1px solid var(--paper-rule); background: var(--paper); color: var(--ink-soft); font: 500 12px/1 var(--font-mono); padding: 7px 11px; border-radius: 3px; cursor: pointer; white-space: nowrap; }
.btn:hover, .seg button:hover { border-color: var(--ink-mute); color: var(--ink); }
.btn.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.seg { display: inline-flex; flex-wrap: wrap; }
.seg button { border-radius: 0; margin-left: -1px; }
.seg button:first-child { border-radius: 3px 0 0 3px; margin-left: 0; }
.seg button:last-child { border-radius: 0 3px 3px 0; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); position: relative; }
input[type="range"] { accent-color: var(--red); }
.ans-input { border: 1px solid var(--paper-rule); background: var(--input); color: var(--ink); font: 14px/1.4 var(--font-mono); padding: 5px 8px; border-radius: 3px; min-width: 0; width: 9em; }

/* The LaTeX rail: the workshop's matrices and equations typeset, refilled as the parameters move */
.texrail { padding: 10px 14px; border-top: 1px solid var(--paper-rule); background: var(--paper); display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: baseline; font: 15px/1.5 var(--font-body); }
.texrail .lab { font: 600 10px var(--font-mono); letter-spacing: 0.12em; text-transform: none; color: var(--ink-faint); white-space: nowrap; }
.texrail .tex { font-size: 1.05em; overflow-x: auto; }
.texrail .bad { color: var(--red); font-style: italic; font-size: 14px; }
/* The step player: a derivation one line at a time */
.steps { padding: 10px 14px; background: var(--paper); border-top: 1px solid var(--paper-rule); font: 15px/1.6 var(--font-body); }
.steps .step { display: grid; grid-template-columns: 2.2em 1fr; gap: 10px; padding: 5px 0; border-top: 1px solid var(--paper-rule); color: var(--ink-mute); }
.steps .step.on { color: var(--ink); }
.steps .step.cur { color: var(--ink); background: var(--ochre-tint); }
.steps .step::before { content: attr(data-n); font: 600 12px var(--font-mono); color: var(--red); padding-top: 4px; }
.steps .step .katex { font-size: 1.05em; }
.steps .why { display: block; font: italic 13px/1.5 var(--font-body); color: var(--ink-mute); }
.steps .bar { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; padding: 12px; background: var(--paper); }
.board .card { border: 1px solid var(--paper-rule); background: var(--paper); padding: 12px 14px; cursor: pointer; text-align: left; font: 15px/1.45 var(--font-body); }
.board .card b { display: block; font: 400 18px/1.25 var(--font-display); margin-bottom: 4px; }
.board .card .tag { font: 600 10px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); }
.board .card .more { display: none; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--paper-rule); color: var(--ink-soft); font-size: 14px; }
.board .card.open .more { display: block; }
.board .card.open { border-color: var(--ink); }


/* Typed matrices in the bar of controls */
.ws-bar label.mlab { align-items: center; }
.mgrid { display: inline-grid; gap: 2px; padding: 2px 6px; border-left: 2px solid var(--ink-mute); border-right: 2px solid var(--ink-mute); border-radius: 3px; }
.mcell { width: 100%; font: 13px var(--font-mono); text-align: center; padding: 3px 2px; border: 1px solid var(--paper-rule); background: var(--input); color: var(--ink); }
.mcell.bad { border-color: var(--red); background: var(--red-tint); }
.ans-input.wide { width: 14em; }
.texrail .tex .katex { font-size: 1.08em; }

/* ─── Challenges and the knowledge check ──────────────────── */
.try-block { margin: 28px 0 10px; }
.challenge { border: 1px solid var(--paper-rule); background: var(--paper); margin: 12px 0; padding: 14px 16px; }
.challenge-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.challenge-state { font: 600 11px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
.challenge.solved { border-color: var(--green); background: var(--green-tint); }
.challenge.solved .challenge-state { color: var(--green); }
.challenge .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.challenge .unit { font: 13px var(--font-mono); color: var(--ink-mute); }
.challenge .opts { display: grid; gap: 5px; margin-top: 8px; }
.challenge .opts button { text-align: left; border: 1px solid var(--paper-rule); background: var(--paper); padding: 6px 10px; border-radius: 3px; cursor: pointer; font: 14px/1.4 var(--font-body); }
.challenge .opts button.right { border-color: var(--green); background: var(--green-tint); }
.challenge .opts button.wrong { border-color: var(--red); background: var(--red-tint); }
.challenge .msg { font: 13px/1.5 var(--font-body); margin-top: 8px; color: var(--ink-soft); }
.challenge .msg.bad { color: var(--red); }
.drill-score { font: 600 13px var(--font-mono); color: var(--ink-soft); margin: 8px 0; }
.drills { padding: 4px 14px 14px; background: var(--paper); }
.quiz-container { margin: 46px 0 0; max-width: 780px; }
.quiz-title { font: 400 28px var(--font-display); margin: 0 0 4px; }
.quiz-sub { font: italic 15px var(--font-body); color: var(--ink-mute); margin: 0 0 16px; }
.quiz-q { border-top: 1px solid var(--paper-rule); padding: 16px 0; }
.quiz-q-text { margin: 0 0 10px; }
.quiz-q-text b { font: 600 12px var(--font-mono); color: var(--red); margin-right: 8px; }
.quiz-opts { display: grid; gap: 6px; }
.quiz-opt { text-align: left; border: 1px solid var(--paper-rule); background: var(--paper); cursor: pointer; padding: 8px 12px; border-radius: 3px; font: 15px/1.45 var(--font-body); }
.quiz-opt:hover:not([disabled]) { border-color: var(--ink-mute); }
.quiz-opt.right { border-color: var(--green); background: var(--green-tint); }
.quiz-opt.wrong { border-color: var(--red); background: var(--red-tint); }
.quiz-opt[disabled] { cursor: default; }
.quiz-expl { margin: 10px 0 0; font-size: 15px; color: var(--ink-soft); padding-left: 12px; border-left: 2px solid var(--paper-rule); }
.quiz-score { font: 600 13px var(--font-mono); margin-top: 14px; color: var(--ink-soft); }

/* ─── Projects of Vol. XXX and the journey map ─────────────── */
.project { margin: 22px 0 8px; }
.brief { list-style: none; margin: 10px 0; padding: 0; counter-reset: brief; }
.brief li { counter-increment: brief; display: grid; grid-template-columns: 2.2em 1fr auto 6.5em; gap: 10px; align-items: baseline; padding: 9px 12px; border: 1px solid var(--paper-rule); border-left: 4px solid var(--ink-faint); background: var(--paper); margin: 6px 0; font: 15px/1.45 var(--font-body); }
.brief li::before { content: counter(brief, decimal-leading-zero); font: 600 12px var(--font-mono); color: var(--red); }
.brief li b { font: 600 13px var(--font-mono); color: var(--ink); white-space: nowrap; }
.brief li em { font: 600 11px var(--font-mono); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); text-align: right; }
.brief li.met { border-left-color: var(--green); background: var(--green-tint); }
.brief li.met em { color: var(--green); }
.brief-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.brief-score { font: 600 13px var(--font-mono); color: var(--ink-soft); margin-right: auto; }
.brief-msg { margin-top: 8px; font: italic 14px/1.5 var(--font-body); color: var(--ink-mute); }
@media (max-width: 620px) { .brief li { grid-template-columns: 2em 1fr; } .brief li b, .brief li em { grid-column: 2; text-align: left; } }
.journey { padding: 14px 16px; background: var(--paper); border: 1px solid var(--paper-rule); }
.jsum { display: flex; flex-wrap: wrap; gap: 6px 22px; font: 14px var(--font-body); color: var(--ink-soft); margin-bottom: 10px; }
.jsum b { font: 600 18px var(--font-mono); color: var(--ink); }
.jkey { display: flex; flex-wrap: wrap; gap: 4px 18px; font: 12px var(--font-mono); color: var(--ink-mute); margin-bottom: 12px; }
.jkey span { display: inline-flex; align-items: center; gap: 6px; }
.jrow { display: grid; grid-template-columns: 3.4em 13em 1fr; gap: 8px; align-items: center; padding: 3px 0; border-top: 1px solid var(--paper-rule); }
.jvol { font: 600 12px var(--font-mono); color: var(--red); }
.jname { font: 13px var(--font-body); color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jcells { display: flex; flex-wrap: wrap; gap: 3px; }
.jc { display: inline-block; width: 13px; height: 13px; border: 1px solid var(--paper-rule); background: var(--paper-deep); }
.jc.opened { background: var(--ochre-tint); border-color: var(--ochre); }
.jc.read { background: var(--blue-tint); border-color: var(--blue); }
.jc.mastered { background: var(--green); border-color: var(--green); }
.jc.project { outline: 2px solid var(--red); outline-offset: 1px; }
@media (max-width: 620px) { .jrow { grid-template-columns: 3em 1fr; } .jcells { grid-column: 1 / -1; } }

/* ─── Chinese ──────────────────────────────────────────────── */
html[lang="zh"] body { font-family: var(--font-body), var(--font-zh); }
html[lang="zh"] h1.plate-title, html[lang="zh"] h2 { font-family: var(--font-display), var(--font-zh); letter-spacing: 0; }
html[lang="zh"] .info-box.lede > p:first-child::first-letter { float: none; font: inherit; color: inherit; margin: 0; }
html[lang="zh"] .prose p + p { text-indent: 2em; }

/* ─── Narrow viewports ─────────────────────────────────────── */
@media (max-width: 760px) {
    body { font-size: 16px; }
    .topbar { padding: 10px 16px; }
    .topbar-title .icon { display: none; }
    .main-content { padding: 22px 16px 60px; }
    .ws-body { grid-template-columns: 1fr; }
    .ws-body > .ws-canvas { border-right: 0; border-bottom: 1px solid var(--paper-rule); }
    .texrail { grid-template-columns: 1fr; }
}