/*  Python from the Beginning — design system
    ----------------------------------------
    Warm paper, Fraunces display, Source Serif body and JetBrains Mono for
    code, as in the other Curionode courses. The bench (an editor, the output,
    the memory picture, the trace table, the turtle, a chart and the files),
    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.

    Code is highlighted with the same few colours everywhere: keywords plum,
    strings green, numbers sienna, comments faint italic, built-ins teal,
    names being defined blue. In the output, what a program prints is ink,
    what it writes to standard error red, and what the reader typed blue.
*/
@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; }
/* Code is read character by character: no ligature may turn <= into ≤ or != into ≠.
   !important because a later `font:` shorthand (pre.out, .ed-hl) resets both properties. */
code, kbd, pre, textarea, .mono, .ed-hl, .ed-ta { font-variant-ligatures: none !important; font-feature-settings: "liga" 0, "calt" 0 !important; }
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 label.argv input.txt { width: 18em; }
.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; }

/* ─── 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); }
}

/* ─── Code: specimens, highlighting ─────────────────────────── */
.syntax-group { max-width: 760px; margin: 0 0 30px; padding: 14px 18px 16px; background: var(--paper-deep); border-top: 1px solid var(--paper-rule); border-bottom: 1px solid var(--paper-rule); }
.syntax-title { font: 600 11px/1.4 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 8px; }
.syntax-group .formula { margin-top: 10px; }
pre.code-spec, pre.code-show { margin: 8px 0 0; padding: 10px 14px; background: var(--input); border: 1px solid var(--paper-rule); border-left: 3px solid var(--plum); font: 14px/1.5 var(--font-mono); overflow-x: auto; white-space: pre; }
pre.code-spec code, pre.code-show code, .prose pre code { font-size: inherit; background: none; border: 0; padding: 0; }
.prose pre, .quiz-q-text pre, .quiz-expl pre, .challenge-q pre, .marginalia pre, dd pre { font: 13.5px/1.5 var(--font-mono); background: var(--input); border: 1px solid var(--paper-rule); padding: 8px 12px; overflow-x: auto; white-space: pre; font-style: normal; text-indent: 0; }
.hk { color: var(--plum); font-weight: 500; }
.hs { color: var(--green); }
.hn { color: var(--sienna); }
.hc { color: var(--ink-faint); font-style: italic; }
.hb { color: var(--teal); }
.hf { color: var(--blue); }
.hd { color: var(--ochre); }

/* ─── The bench ─────────────────────────────────────────────── */
.bench .ws-bar { gap: 8px; }
.bench .ws-bar .sp { flex: 1; }
.bench-status { font: 12px var(--font-mono); color: var(--ink-mute); min-width: 7em; }
.bench-note { padding: 8px 14px; border-bottom: 1px solid var(--paper-rule); background: var(--paper); font: 14.5px/1.5 var(--font-body); color: var(--ink-soft); }
.bench-note b.ok { color: var(--green); font-weight: 600; }
.bench-note b.bad { color: var(--red); font-weight: 600; }
.bench-main { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.bench.wide .bench-main { grid-template-columns: 1fr; }
.bench-ed { border-right: 1px solid var(--paper-rule); min-width: 0; }
.bench.wide .bench-ed { border-right: 0; border-bottom: 1px solid var(--paper-rule); }
.bench-right { min-width: 0; display: flex; flex-direction: column; background: var(--paper); }
.bench-out { padding: 8px 12px 10px; min-width: 0; }
.out-h { font: 600 10px/1.4 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin: 2px 0 6px; }
pre.out { margin: 0; min-height: 3.2em; max-height: 360px; overflow: auto; font: 13.5px/1.5 var(--font-mono); white-space: pre; color: var(--ink); background: var(--input); border: 1px solid var(--paper-rule); padding: 8px 10px; }
pre.out .oe { color: var(--red); }
pre.out .oi { color: var(--blue); }
pre.out .later { opacity: 0.22; }
pre.out .onone { color: var(--ink-faint); font-style: italic; }
pre.out input.stdin { font: inherit; color: var(--blue); border: 0; border-bottom: 1px solid var(--blue); background: transparent; outline: none; min-width: 12em; padding: 0; }
.gloss { margin-top: 8px; padding: 7px 10px; border-left: 3px solid var(--red); background: var(--red-tint); font: 14px/1.5 var(--font-body); color: var(--ink-soft); }
.gloss b { font: 600 13px var(--font-mono); color: var(--red); }
.native { margin-top: 8px; padding: 7px 10px; border-left: 3px solid var(--teal); background: var(--teal-tint); font: 13.5px/1.5 var(--font-body); color: var(--ink-soft); }
.native pre { margin: 6px 0 0; font: 13px/1.45 var(--font-mono); white-space: pre-wrap; }
.pred-l { display: block; font: 14px/1.5 var(--font-body); color: var(--ink-soft); margin: 2px 0 6px; }
textarea.pred { width: 100%; box-sizing: border-box; font: 13.5px/1.5 var(--font-mono); background: var(--input); color: var(--ink); border: 1px solid var(--paper-rule); padding: 8px 10px; resize: vertical; }
.pred-r { margin-top: 8px; padding: 7px 10px; font: 14px/1.5 var(--font-body); border-left: 3px solid var(--green); background: var(--green-tint); }
.pred-r.bad { border-left-color: var(--red); background: var(--red-tint); }
.pred-r pre { margin: 6px 0 0; font: 13px/1.45 var(--font-mono); white-space: pre-wrap; }
.turtle-host, .chart-host { border-top: 1px solid var(--paper-rule); flex: 1; min-height: 0; }
.bench-viz { border-top: 1px solid var(--paper-rule); background: var(--fig-paper); outline: none; }
.bench-viz:focus-visible { box-shadow: inset 0 0 0 2px var(--blue); }
.step-bar { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; padding: 7px 12px; border-bottom: 1px solid var(--paper-rule); background: var(--paper); }
.step-bar input[type=range] { width: 180px; }
.step-l { font: 12.5px var(--font-mono); color: var(--ink-soft); }
.step-l b { color: var(--blue); font-weight: 600; }
.step-l b.bad { color: var(--red); }
.mem-host { overflow-x: auto; }
.trace-host { border-top: 1px solid var(--paper-rule); }
.trace-wrap { max-height: 300px; overflow: auto; }
table.trace { border-collapse: collapse; width: 100%; font: 12.5px/1.4 var(--font-mono); }
table.trace th { position: sticky; top: 0; background: var(--paper-vellum); text-align: left; padding: 4px 8px; font-weight: 600; color: var(--ink-mute); border-bottom: 1px solid var(--paper-rule); white-space: nowrap; }
table.trace td { padding: 3px 8px; border-bottom: 1px solid var(--paper-rule); white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
table.trace tr.cur td { background: var(--blue-tint); }
table.trace tr.later td { color: var(--ink-faint); }
table.trace td.tc { color: var(--plum); }
table.trace td.tp { color: var(--green); }
.files-host { border-top: 1px solid var(--paper-rule); padding: 8px 12px 12px; background: var(--paper); }
.fv-none { font: italic 14px var(--font-body); color: var(--ink-mute); margin: 4px 0; }
details.fv-f { border: 1px solid var(--paper-rule); border-left: 3px solid var(--ink-faint); margin: 5px 0; background: var(--input); }
details.fv-f.add { border-left-color: var(--green); }
details.fv-f.chg { border-left-color: var(--ochre); }
details.fv-f.del { border-left-color: var(--red); opacity: 0.7; }
details.fv-f summary { display: flex; gap: 12px; align-items: baseline; padding: 5px 10px; cursor: pointer; font: 13px var(--font-mono); }
.fv-n { color: var(--ink); font-weight: 500; }
.fv-s { color: var(--ink-mute); font-size: 12px; }
.fv-st { margin-left: auto; font: 600 10px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
details.fv-f pre { margin: 0; padding: 6px 10px; border-top: 1px solid var(--paper-rule); font: 12.5px/1.45 var(--font-mono); max-height: 200px; overflow: auto; white-space: pre-wrap; word-break: break-all; }

/* ─── The editor: a textarea over its own highlighting ──────── */
.ed { display: grid; grid-template-columns: auto 1fr; background: var(--input); min-width: 0; font: 14px/21px var(--font-mono); }
.ed-gut { padding: 10px 6px 10px 10px; text-align: right; color: var(--ink-faint); user-select: none; border-right: 1px solid var(--paper-rule); font-size: 12px; }
.ed-gut span { display: block; height: 21px; }
.ed-gut span.on { color: var(--blue); font-weight: 600; }
.ed-body { position: relative; overflow: hidden; min-width: 0; }
.ed-hl, .ed-ta { margin: 0; padding: 10px 12px; font: inherit; white-space: pre; tab-size: 4; letter-spacing: 0; word-spacing: 0; border: 0; box-sizing: border-box; width: 100%; min-height: 63px; }
.ed-hl code { font: inherit; font-size: inherit; line-height: inherit; }
.ed-hl { position: absolute; inset: 0 0 auto 0; pointer-events: none; overflow: hidden; color: var(--ink); }
.ed-ta { position: relative; display: block; resize: none; overflow-x: auto; overflow-y: hidden; background: transparent; color: transparent; caret-color: var(--ink); outline: none; }
.ed-ta::selection { background: var(--ochre-tint); color: transparent; }
.ed-ta:focus-visible { box-shadow: inset 0 0 0 2px var(--blue); }
.ed-marks { position: absolute; inset: 0; pointer-events: none; }
.ed-mark { position: absolute; left: 0; right: 0; height: 21px; }
.ed-mark.cur { background: var(--blue-tint); border-left: 3px solid var(--blue); }
.ed-mark.err { background: var(--red-tint); border-left: 3px solid var(--red); }

/* ─── Challenges: tests and predictions ─────────────────────── */
.challenge .w-ed { border: 1px solid var(--paper-rule); margin-top: 8px; }
.challenge .w-st { font: 12px var(--font-mono); color: var(--ink-mute); }
ul.tests { list-style: none; margin: 8px 0 0; padding: 0; font: 14px/1.5 var(--font-body); }
ul.tests li { padding: 4px 8px; border-top: 1px solid var(--paper-rule); color: var(--ink-soft); }
ul.tests li b { font-family: var(--font-mono); margin-right: 4px; }
ul.tests li.pass b { color: var(--green); }
ul.tests li.fail b { color: var(--red); }
.challenge .msg pre.out { max-height: 220px; margin-top: 6px; }
.challenge .from { display: block; margin-top: 8px; font: 12px var(--font-mono); color: var(--ink-faint); }
.challenge .small, .small { font-size: 14px; color: var(--ink-mute); margin: 6px 0; }
.challenge textarea.pred { margin-top: 4px; }

@media (max-width: 760px) {
    .bench-main { grid-template-columns: 1fr; }
    .bench-ed { border-right: 0; border-bottom: 1px solid var(--paper-rule); }
    .step-bar input[type=range] { width: 110px; }
}

/* ---------------------------------------------------------------- recorded sessions */
.ws.session { display: flex; flex-direction: column; gap: 8px; }
.term-h { font: 11px/1.4 var(--font-mono); color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.06em; }
.term { background: var(--input); border: 1px solid var(--paper-rule); border-left: 3px solid var(--teal); padding: 10px 12px; max-height: 420px; overflow: auto; font: 13px/1.5 var(--font-mono); }
.t-step { opacity: 0.55; }
.t-step.now { opacity: 1; }
.t-ps { color: var(--teal); font-weight: 600; }
.t-cmd { color: var(--ink); font-weight: 600; white-space: pre-wrap; }
.t-out { margin: 2px 0 8px; font: inherit; white-space: pre-wrap; word-break: break-word; color: var(--ink-soft); }
.t-note { font: 15px/1.6 var(--font-body); color: var(--ink); padding: 6px 2px; min-height: 3em; }