/*  Rocket Science from the Beginning — design system
    ---------------------------------------------------
    The Curionode editorial look, written for this course: warm paper,
    Fraunces for display, Source Serif for prose, JetBrains Mono for numbers.
    Every plate has a workshop (a launcher, an engine, an orbit the reader
    drives), practice problems, a worked example and the ten-question check.

    Colours are tokens with one meaning each on every figure: ochre thrust and
    flame, blue trajectory and orbit, teal propellant and flow, plum structure,
    sienna air and heat, green margin, red loss and limits, ink measurement.
    Canvases read them through js/figure.js as FIG. The dark values appear
    twice — for a system preference and for an explicit choice — and must
    stay identical.
*/
@import url('../vendor/fonts/fonts.css');

:root {
    --paper: #fbf8f3;  --paper-deep: #f3ecdf;  --paper-vellum: #efe7d7;  --paper-rule: #e2d8c4;
    --ink: #1b1b1f;  --ink-soft: #3a3a40;  --ink-mute: #6c6c73;  --ink-faint: #9a958b;
    --red: #b3302d;  --red-tint: #f5e6e2;  --blue: #1f4fc9;  --blue-tint: #e6ecf6;  --teal: #0f6d68;  --teal-tint: #e0eeeb;
    --plum: #5b3b7b;  --plum-tint: #ece2f0;  --ochre: #b6781a;  --ochre-tint: #f5e6c6;  --green: #2c6a4e;  --green-tint: #dfece3;
    --sienna: #a6520e;  --olive: #5b5b1d;  --input: #fffefa;
    --fig-paper: #fffdf7;  --fig-grid: #d2c9b3;  --fig-rule: #e2d8c4;  --fig-ink: #1b1b1f;  --fig-muted: #6c6c73;  --fig-faint: #a39e93;
    --fig-blue: #1f4fc9;  --fig-red: #b3302d;  --fig-green: #2c6a4e;  --fig-teal: #0f6d68;  --fig-plum: #5b3b7b;  --fig-ochre: #c27f12;  --fig-sienna: #a6520e;  --fig-olive: #6a6a2a;
    --shadow: 0 2px 6px rgba(27, 27, 31, 0.06);  --shadow-lg: 0 10px 30px rgba(27, 27, 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;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
    --paper: #14130e;  --paper-deep: #1c1a13;  --paper-vellum: #211f16;  --paper-rule: #3a3529;
    --ink: #ece5d5;  --ink-soft: #c9c1ae;  --ink-mute: #9c9483;  --ink-faint: #766f60;
    --red: #e3716a;  --red-tint: #3b211e;  --blue: #84a9f4;  --blue-tint: #1d2740;  --teal: #52b6ae;  --teal-tint: #15302d;
    --plum: #b694d9;  --plum-tint: #2c2339;  --ochre: #e6b459;  --ochre-tint: #3b3016;  --green: #6dbb8f;  --green-tint: #1a3025;
    --sienna: #e48d48;  --olive: #b9b96b;  --input: #1b1912;
    --fig-paper: #17150f;  --fig-grid: #3b3528;  --fig-rule: #3b3528;  --fig-ink: #ece5d5;  --fig-muted: #9c9483;  --fig-faint: #776f60;
    --fig-blue: #84a9f4;  --fig-red: #e3716a;  --fig-green: #6dbb8f;  --fig-teal: #52b6ae;  --fig-plum: #b694d9;  --fig-ochre: #e6b459;  --fig-sienna: #e48d48;  --fig-olive: #b9b96b;
    --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: #14130e;  --paper-deep: #1c1a13;  --paper-vellum: #211f16;  --paper-rule: #3a3529;
    --ink: #ece5d5;  --ink-soft: #c9c1ae;  --ink-mute: #9c9483;  --ink-faint: #766f60;
    --red: #e3716a;  --red-tint: #3b211e;  --blue: #84a9f4;  --blue-tint: #1d2740;  --teal: #52b6ae;  --teal-tint: #15302d;
    --plum: #b694d9;  --plum-tint: #2c2339;  --ochre: #e6b459;  --ochre-tint: #3b3016;  --green: #6dbb8f;  --green-tint: #1a3025;
    --sienna: #e48d48;  --olive: #b9b96b;  --input: #1b1912;
    --fig-paper: #17150f;  --fig-grid: #3b3528;  --fig-rule: #3b3528;  --fig-ink: #ece5d5;  --fig-muted: #9c9483;  --fig-faint: #776f60;
    --fig-blue: #84a9f4;  --fig-red: #e3716a;  --fig-green: #6dbb8f;  --fig-teal: #52b6ae;  --fig-plum: #b694d9;  --fig-ochre: #e6b459;  --fig-sienna: #e48d48;  --fig-olive: #b9b96b;
    --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 { 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; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; }
html[lang^="zh"] body { font-family: var(--font-body), 'Songti SC', 'Noto Serif CJK SC', 'Source Han Serif SC', serif; }

.btn { border: 1px solid var(--paper-rule); background: var(--paper); color: var(--ink); cursor: pointer; font: 13px var(--font-mono); padding: 6px 12px; border-radius: 3px; }
.btn:hover { background: var(--paper-deep); }
.btn.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.seg { display: inline-flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--paper-rule); border-radius: 3px; overflow: hidden; }
.seg button { border: 0; border-right: 1px solid var(--paper-rule); background: var(--paper); padding: 5px 10px; cursor: pointer; font: 12.5px var(--font-mono); }
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* ─── Plate frame ──────────────────────────────────────────── */
.topbar { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 22px; background: var(--paper); border-bottom: 1px solid var(--paper-rule); }
.topbar-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.topbar-back { font: 13px var(--font-mono); color: var(--ink-mute); text-decoration: none; white-space: nowrap; }
.topbar-title { font: 15px var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-title .icon { font: 600 11px var(--font-mono); letter-spacing: 0.1em; color: var(--red); margin-right: 6px; text-transform: uppercase; }
.lang-btn { border: 1px solid var(--paper-rule); background: var(--paper); border-radius: 3px; padding: 4px 12px; cursor: pointer; font-size: 14px; }
.main-content { max-width: 940px; margin: 0 auto; padding: 26px 28px 60px; }
.plate-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 18px; font: 12px/1.5 var(--font-mono); color: var(--ink-mute); text-transform: none; border-bottom: 1px solid var(--paper-rule); padding-bottom: 8px; }
.plate-meta b { color: var(--red); font-weight: 600; }
.thread { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px solid var(--teal); color: var(--teal); border-radius: 2px; font: 600 11px var(--font-mono); }
.plate-title { font-size: 46px; line-height: 1.05; margin: 22px 0 10px; }
.plate-title em { color: var(--red); }
.plate-deck { font: italic 20px/1.45 var(--font-body); color: var(--ink-soft); margin: 0 0 22px; }
.info-box.lede { border-left: 3px solid var(--ochre); padding: 2px 0 2px 18px; margin: 0 0 22px; }
.info-box.lede p { margin: 0 0 12px; }
.preview { color: var(--ink-soft); font-size: 15.5px; }
.formula-group { display: flex; flex-wrap: wrap; gap: 6px 26px; justify-content: center; margin: 4px 0 18px; padding: 8px 0; border-top: 1px solid var(--paper-rule); border-bottom: 1px solid var(--paper-rule); }
.formula { font-size: 17px; overflow-x: auto; max-width: 100%; }
.learning-objectives { background: var(--paper-deep); border: 1px solid var(--paper-rule); padding: 12px 18px; margin: 0 0 26px; }
.learning-objectives-title, .threads-title, .example-label { font: 600 11px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
.learning-objectives ul { margin: 6px 0 0; padding-left: 20px; }
.section-title { font: 600 12px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); margin: 26px 0 8px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.model-chip { font: 11px var(--font-mono); letter-spacing: 0.02em; text-transform: none; color: var(--sienna); border: 1px dashed var(--sienna); padding: 1px 8px; border-radius: 2px; }
.figure { margin: 0 0 18px; }
.figure-caption { font: 14px/1.5 var(--font-body); color: var(--ink-mute); margin-top: 8px; font-style: italic; }
h2 { font-size: 28px; margin: 34px 0 10px; }
.prose p { margin: 0 0 14px; }
.marginalia { border-left: 2px solid var(--plum); padding: 4px 0 4px 14px; font-size: 15px; color: var(--ink-soft); margin: 20px 0; }
dl.terms { display: grid; grid-template-columns: minmax(120px, 210px) 1fr; gap: 6px 18px; margin: 0; }
dl.terms dt { font: 600 14.5px var(--font-body); }
dl.terms dd { margin: 0; font-size: 15.5px; color: var(--ink-soft); }
.key-concept { margin: 26px 0; padding: 14px 18px; background: var(--ochre-tint); border-left: 3px solid var(--ochre); font-size: 17.5px; }
.threads, .sources { margin: 22px 0; font-size: 14.5px; color: var(--ink-soft); }
.threads ul, .sources ul { margin: 6px 0 0; padding-left: 20px; }
.sources .src { font: 12.5px var(--font-mono); color: var(--ink-mute); }
.example { border: 1px solid var(--paper-rule); background: var(--paper-vellum); padding: 12px 18px; margin: 22px 0; }
.example-title { font: 17px var(--font-display); margin: 4px 0 6px; }
.example ol { margin: 0; padding-left: 22px; font-size: 15.5px; }
.example li { margin: 3px 0; }
.section-break { height: 1px; background: var(--paper-rule); margin: 30px 0 14px; }
.nav-footer { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font: 13.5px var(--font-mono); }
.nav-footer a { text-decoration: none; }
.nav-report { color: var(--ink-mute) !important; }
.disclaimer { font: 12px/1.5 var(--font-body); color: var(--ink-faint); margin-top: 28px; }

/* ─── Workshop ─────────────────────────────────────────────── */
.ws { border: 1px solid var(--paper-rule); background: var(--paper-vellum); padding: 10px; }
.ws-fig { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-panel { background: var(--fig-paper); border: 1px solid var(--fig-rule); overflow: hidden; }
.ws-panel canvas { display: block; }
.ws-anim { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; }
.ws-anim:empty { display: none; }
.ws-anim input { flex: 1; }
.ws-anim .t { font: 12px var(--font-mono); color: var(--ink-mute); min-width: 90px; }
.ws-body { display: grid; grid-template-columns: 1fr 260px; gap: 12px; margin-top: 10px; }
.ws-controls { display: flex; flex-direction: column; gap: 6px; }
.ctl { display: grid; grid-template-columns: minmax(130px, 210px) 1fr auto; align-items: center; gap: 10px; font-size: 14px; }
.ctl label { color: var(--ink-soft); }
.ctl input[type=range] { width: 100%; accent-color: var(--ink); }
.ctl output { font: 12.5px var(--font-mono); color: var(--ink); white-space: nowrap; min-width: 84px; text-align: right; }
.ctl .seg { grid-column: 2 / 4; }
.rail-stats { display: flex; flex-direction: column; gap: 3px; border-left: 1px solid var(--paper-rule); padding-left: 12px; }
.stat { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; border-bottom: 1px dotted var(--paper-rule); padding: 2px 0; }
.stat .k { color: var(--ink-mute); }
.stat .v { font: 13px var(--font-mono); white-space: nowrap; }
.stat .v small { color: var(--ink-mute); font-size: 11px; }
.ws-note { margin-top: 10px; font-size: 15px; color: var(--ink-soft); }
.ws-note:empty { display: none; }
.ws-ch { margin-top: 10px; }
.ws-ch:empty { display: none; }
.ch-title { font: 600 11px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); }
.ws-ch ol { list-style: none; padding: 0; margin: 4px 0 0; }
.ws-ch li { display: flex; gap: 8px; align-items: baseline; font-size: 14.5px; padding: 2px 0; }
.ws-ch .box { display: inline-flex; width: 16px; height: 16px; border: 1px solid var(--ink-faint); border-radius: 2px; align-items: center; justify-content: center; font-size: 12px; flex: none; transform: translateY(2px); }
.ws-ch li.ok .box { background: var(--green); border-color: var(--green); color: var(--paper); }
.ws-ch li.was .box { border-color: var(--green); color: var(--green); }
table.ws-table { border-collapse: collapse; width: 100%; font: 12.5px var(--font-mono); background: var(--fig-paper); }
table.ws-table th, table.ws-table td { border-bottom: 1px solid var(--fig-rule); padding: 4px 8px; text-align: left; }
table.ws-table th { color: var(--ink-mute); font-weight: 600; }
table.ws-table tr.hl td { background: var(--ochre-tint); }
.ws-table-title { font: 600 11px var(--font-mono); padding: 6px 8px 0; color: var(--ink); }

/* ─── Practice, drills, projects ───────────────────────────── */
.try-block, .project-block, .mis-block, .journey { border: 1px solid var(--paper-rule); padding: 12px 16px; margin: 14px 0; background: var(--paper); }
.try-block:empty, .project-block:empty { display: none; }
.try-title, .pj-title { font: 600 11px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
.try-q { margin: 6px 0; }
.try-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.try-row input { width: 150px; border: 1px solid var(--paper-rule); background: var(--input); color: var(--ink); padding: 5px 8px; font: 14px var(--font-mono); }
.try-row .u { font: 13px var(--font-mono); color: var(--ink-mute); }
.try-msg { font-size: 14.5px; color: var(--ink-soft); margin-top: 6px; min-height: 1.2em; }
.drill-head { font: 12px var(--font-mono); color: var(--ink-mute); }
.drill-done { font: 22px var(--font-display); margin: 6px 0 10px; }
.pj-checks { list-style: none; padding: 0; }
.pj-checks li { display: flex; gap: 8px; padding: 2px 0; }
.pj-checks .box { width: 16px; flex: none; text-align: center; }
.pj-checks li.ok .box { color: var(--green); }
.pj-checks li.no .box { color: var(--red); }
.pj-foot { display: flex; align-items: center; gap: 12px; font: 13px var(--font-mono); }
.from { font: 11px var(--font-mono); color: var(--ink-faint); }
.jm-sum { font: 14px var(--font-mono); margin-bottom: 8px; }
.jm-key { font-size: 13px; color: var(--ink-mute); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.jm-vol { margin: 6px 0; }
.jm-name { font: 13px var(--font-display); }
.jm-cells { display: flex; flex-wrap: wrap; gap: 3px; }
.jm-cell { display: inline-flex; width: 24px; height: 22px; border: 1px solid var(--paper-rule); align-items: center; justify-content: center; font: 10px var(--font-mono); color: var(--ink-mute); text-decoration: none; }
.jm-cell.open { background: var(--blue-tint); }
.jm-cell.read { background: var(--green); color: var(--paper); border-color: var(--green); }
.jm-cell.cap { background: var(--ochre); color: var(--paper); border-color: var(--ochre); }

/* ─── Knowledge check ──────────────────────────────────────── */
.quiz-container { margin-top: 30px; }
.quiz-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--ink); }
.quiz-head h3 { font-size: 24px; margin: 0 0 6px; }
.quiz-score { font: 13px var(--font-mono); color: var(--ink-mute); }
.quiz-q { padding: 10px 0; border-bottom: 1px solid var(--paper-rule); }
.quiz-q p { margin: 0 0 8px; }
.quiz-q .n { font: italic 15px var(--font-display); color: var(--red); margin-right: 8px; }
.quiz-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.quiz-opts button { text-align: left; border: 1px solid var(--paper-rule); background: var(--paper); padding: 7px 10px; cursor: pointer; font-size: 15px; border-radius: 3px; }
.quiz-opts button:hover:not(:disabled) { background: var(--paper-deep); }
.quiz-opts button.right { background: var(--green-tint); border-color: var(--green); }
.quiz-opts button.wrong { background: var(--red-tint); border-color: var(--red); }
.quiz-opts button:disabled { cursor: default; color: var(--ink); }
.quiz-why { font-size: 14.5px; color: var(--ink-soft); margin-top: 6px; }
.quiz-foot { padding: 12px 0; }

@media (max-width: 760px) {
    .main-content { padding: 18px 16px 50px; }
    .plate-title { font-size: 34px; }
    .ws-body { grid-template-columns: 1fr; }
    .rail-stats { border-left: 0; padding-left: 0; }
    .ctl { grid-template-columns: 1fr auto; }
    .ctl label { grid-column: 1 / 3; }
    .ctl .seg { grid-column: 1 / 3; }
    .quiz-opts { grid-template-columns: 1fr; }
    dl.terms { grid-template-columns: 1fr; }
    .topbar { padding: 8px 12px; }
}