/*  Networks from the Beginning — design system
    ------------------------------------------
    Warm paper, Fraunces display, Source Serif body and JetBrains Mono, as in
    the other Curionode courses. Styled here once for every plate: the bench
    (tabs, dials, an editor, the output and the drawings under it), the
    network bench with its capture list, the sequence diagram, the packet
    bench, charts and tables, recorded sessions, challenges, the drills, the
    projects, the journey map and the knowledge check.

    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.
    Protocol layers keep one colour each wherever they appear: link ochre,
    network blue, transport green, application plum, security teal.
*/
@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, 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, .bench-note 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: 1040px; 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); }
.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; }
.formula { font-size: 17px; overflow-x: auto; max-width: 100%; margin: 10px 0 2px; }
.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; }
.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 ──────────────────────────────────────────────── */
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: 800px; }
.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; touch-action: manipulation; }
.ws-bar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--paper-rule); background: var(--paper); font: 12px var(--font-mono); }
.ws-bar .sp, .sp { flex: 1; }
.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: 10em; }

/* ─── The bench ─────────────────────────────────────────────── */
.bench-h { font: 600 11px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }
.bench-status, .bench-hint { font: 12px var(--font-mono); color: var(--ink-mute); }
.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.bad { color: var(--red); }
.bench-dials { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 9px 14px; border-bottom: 1px solid var(--paper-rule); background: var(--paper-deep); }
.dial { display: inline-flex; align-items: center; gap: 8px; font: 12.5px var(--font-mono); color: var(--ink-soft); }
.dial input { width: 150px; }
.dial b { min-width: 3.4em; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.bench-main { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.bench.wide .bench-main, .bench.live .bench-main { grid-template-columns: 1fr; }
.bench.live .live-code { margin: 0; max-height: 22em; overflow: auto; }
.bench-ed { border-right: 1px solid var(--paper-rule); min-width: 0; max-height: 560px; overflow: auto; }
.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-run { border-bottom: 1px solid var(--paper-rule); }
.bench-out { padding: 8px 12px 10px; min-width: 0; }
.out-h { font: 600 10px/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin: 2px 0 6px; }
pre.out { margin: 0; min-height: 3.2em; max-height: 420px; overflow: auto; font: 13px/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 .onone { color: var(--ink-faint); font-style: italic; }
.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%; 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: 8px 0; 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); }
.bench-figs { border-top: 1px solid var(--paper-rule); }
.bench-figs:empty { display: none; }
.fig-rec { border-bottom: 1px solid var(--paper-rule); background: var(--fig-paper); }
.fig-rec:last-child { border-bottom: 0; }
.fig-t { font: 600 11px/1.4 var(--font-mono); letter-spacing: 0.06em; color: var(--ink-mute); padding: 8px 12px 4px; }
.fig-empty { padding: 12px; font: italic 14px var(--font-body); color: var(--ink-mute); }
.fig-note { padding: 4px 12px 10px; font: italic 13.5px var(--font-body); color: var(--ink-mute); }
pre.fig-text { margin: 0 12px 12px; padding: 8px 10px; background: var(--input); border: 1px solid var(--paper-rule); font: 13px/1.5 var(--font-mono); white-space: pre-wrap; word-break: break-word; }

/* the network bench */
.nb-bar { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 7px 12px; border-bottom: 1px solid var(--paper-rule); background: var(--paper); }
.nb-bar input[type=range] { flex: 1; min-width: 120px; }
.nb-t { font: 12px var(--font-mono); color: var(--ink-soft); min-width: 12em; font-variant-numeric: tabular-nums; }
.nb-canvas, .ch, .tr, .mp, .sq, .ad { min-width: 0; }
.nb-canvas canvas { cursor: pointer; }
.nb-cap { border-top: 1px solid var(--paper-rule); font: 12px/1.45 var(--font-mono); background: var(--paper); }
.cap-h, .cap-r { display: grid; grid-template-columns: 3.4em 6.8em minmax(7em, 13em) 1fr 4em; gap: 8px; padding: 3px 12px; }
.cap-h { font-weight: 600; color: var(--ink-mute); border-bottom: 1px solid var(--paper-rule); background: var(--paper-vellum); }
.cap-list { max-height: 210px; overflow: auto; }
.cap-r { cursor: pointer; border-bottom: 1px solid var(--paper-rule); color: var(--ink); }
.cap-r span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap-r span:last-child, .cap-h span:last-child { text-align: right; }
.cap-r b { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 1px; vertical-align: 0; }
.cap-r i { color: var(--red); font-style: normal; }
.cap-r.later { color: var(--ink-faint); }
.cap-r.on { background: var(--blue-tint); }
.cap-r.bad span:nth-child(4) { color: var(--red); }
.cap-more { padding: 4px 12px; color: var(--ink-faint); font-style: italic; }
.nb-pkt:empty { display: none; }
.nb-pkt { border-top: 1px solid var(--paper-rule); }
.nb-tables { display: flex; flex-wrap: wrap; gap: 0 18px; border-top: 1px solid var(--paper-rule); padding-bottom: 8px; }
.nb-table { min-width: 0; }

/* tables */
table.ftab { border-collapse: collapse; margin: 2px 12px 12px; font: 12.5px/1.45 var(--font-mono); max-width: calc(100% - 24px); }
.ftab th { text-align: left; padding: 4px 10px; background: var(--paper-vellum); color: var(--ink-mute); font-weight: 600; border-bottom: 1px solid var(--paper-rule); white-space: nowrap; }
.ftab td { padding: 3px 10px; border-bottom: 1px solid var(--paper-rule); white-space: nowrap; }
.ftab tr.on td { background: var(--red-tint); color: var(--red); font-weight: 600; }
.fig-table { overflow-x: auto; }

/* the packet bench */
.pkt-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0; }
.pkt-tree { padding: 4px 10px 10px 12px; font: 12.5px/1.5 var(--font-mono); min-width: 0; }
details.pkt-l { border-left: 4px solid var(--ink-faint); margin: 6px 0; background: var(--paper); }
details.pkt-l summary { cursor: pointer; padding: 3px 8px; display: flex; justify-content: space-between; gap: 8px; }
.pkt-r { color: var(--ink-faint); font-size: 11px; }
.pkt-f { display: grid; grid-template-columns: minmax(9em, 0.9fr) minmax(0, 1.4fr); gap: 2px 10px; padding: 1px 8px 1px 16px; cursor: pointer; border-top: 1px solid var(--paper-rule); }
.pkt-f:hover { background: var(--paper-deep); }
.pkt-f.on { background: var(--blue-tint); }
.pkt-n { color: var(--ink-mute); }
.pkt-v { color: var(--ink); overflow-wrap: anywhere; }
.pkt-note { grid-column: 2; color: var(--ink-faint); font-size: 11px; font-style: italic; }
.pkt-hex { padding: 8px 12px; font: 12px/1.6 var(--font-mono); border-left: 1px solid var(--paper-rule); min-width: 0; overflow: auto; max-height: 380px; }
.hx-h { color: var(--ink-faint); font-size: 11px; margin-bottom: 4px; }
.hx-row { white-space: nowrap; }
.hx-off { color: var(--ink-faint); margin-right: 8px; }
.hx-b { display: inline-block; width: 2.2em; text-align: center; cursor: pointer; border-radius: 2px; }
.hx-b.on { outline: 1.5px solid var(--blue); color: var(--ink); font-weight: 600; }
.hx-gap { display: inline-block; width: 0.6em; }
.hx-asc { margin-left: 10px; color: var(--ink-mute); }

/* recorded sessions */
.ws.session { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.ws.session .ws-bar { border: 0; padding: 0; background: none; }
.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: 440px; 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: 4px 2px; min-height: 3em; }

/* ─── Code: specimens, highlighting, the editor ─────────────── */
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: 13.5px/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: 13px/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); }
.ed { display: grid; grid-template-columns: auto 1fr; background: var(--input); min-width: 0; font: 13.5px/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: 11.5px; }
.ed-gut span { display: block; height: 21px; }
.ed-gut span.on { color: var(--red); 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; 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.err { background: var(--red-tint); border-left: 3px solid var(--red); }

/* ─── 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: 14px/1.5 var(--font-body); margin-top: 8px; color: var(--ink-soft); }
.challenge .msg.bad { color: var(--red); }
.challenge .msg pre.out { max-height: 220px; margin-top: 6px; }
.challenge .w-ed { border: 1px solid var(--paper-rule); margin-top: 8px; }
.challenge .w-st { font: 12px var(--font-mono); color: var(--ink-mute); }
.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; }
details.num-src { margin-top: 8px; font: 13px 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); }
.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. XXXIII and the journey map ──────────── */
div.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 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); }
.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.6em 14em 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; }

/* ─── 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; }
    .bench-main, .pkt-grid { grid-template-columns: 1fr; }
    .bench-ed { border-right: 0; border-bottom: 1px solid var(--paper-rule); }
    .pkt-hex { border-left: 0; border-top: 1px solid var(--paper-rule); }
    .cap-h, .cap-r { grid-template-columns: 2.6em 5.6em 1fr 3em; }
    .cap-h span:nth-child(3), .cap-r span:nth-child(3) { display: none; }
    .brief li { grid-template-columns: 2em 1fr; }
    .brief li b, .brief li em { grid-column: 2; text-align: left; }
    .jrow { grid-template-columns: 3em 1fr; }
    .jcells { grid-column: 1 / -1; }
    .dial input { width: 110px; }
}
.bench-dials[hidden], .bench-note[hidden] { display: none; }

/* ---------------------------------------------------------------------------
   Compiler benches (js/cc-draw.js): tokens, syntax trees, tables, the stack
   machine and the pipeline. One colour per stage, from the editorial palette.
   --------------------------------------------------------------------------- */
.fig-view { margin-top: 14px; }
.fig-view .fig-h { font: 600 11px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 7px; }
.fig-view .fig-sub { font: 600 10px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin: 4px 0 6px; }

/* tokens — ochre family, one chip per token */
.tok-row { display: flex; flex-wrap: wrap; gap: 7px; }
.tok { display: inline-flex; flex-direction: column; align-items: center; border: 1px solid var(--paper-rule); border-radius: 4px; background: var(--paper-deep); padding: 4px 8px 3px; min-width: 24px; }
.tok .tok-t { font: 600 14px var(--font-mono); color: var(--ink); white-space: pre; }
.tok .tok-k { font: 9px var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); margin-top: 2px; }
.tok.tk-num .tok-t { color: var(--sienna); }
.tok.tk-str .tok-t { color: var(--green); }
.tok.tk-kw .tok-t { color: var(--plum); }
.tok.tk-op .tok-t { color: var(--ochre); }
.tok.tk-name .tok-t { color: var(--ink); }
.tok.tk-nl, .tok.tk-ind, .tok.tk-eof { opacity: 0.7; }

/* syntax tree — blue, drawn as a nested list with connectors */
ul.tree, ul.tree ul { list-style: none; margin: 0; padding: 0; }
ul.tree { padding-left: 2px; }
ul.tree ul { margin-left: 18px; border-left: 1px solid var(--paper-rule); padding-left: 14px; }
ul.tree li { position: relative; padding: 3px 0; }
.tn { display: inline-block; border: 1px solid var(--blue); border-radius: 4px; background: var(--paper); color: var(--blue); font: 600 13px var(--font-mono); padding: 2px 8px; }
.tn-num { color: var(--sienna); border-color: var(--sienna); }
.tn-str { color: var(--green); border-color: var(--green); }
.tn-name { color: var(--ink); border-color: var(--ink-mute); }
.tn-op, .tn-cmp { color: var(--ochre); border-color: var(--ochre); }
.tn-module, .tn-stmt, .tn-assign, .tn-call { color: var(--plum); border-color: var(--plum); }
.tn-info { font-style: italic; font-weight: 400; color: var(--teal); }

/* tables — FIRST/FOLLOW, symbol tables, parse tables */
table.ctab { border-collapse: collapse; font: 13px var(--font-mono); margin-top: 2px; }
table.ctab th, table.ctab td { border: 1px solid var(--paper-rule); padding: 4px 9px; text-align: left; }
table.ctab th { background: var(--paper-deep); font-weight: 600; color: var(--ink-mute); }

/* stack machine — plum code, the operand stack as chips */
.mc-grid { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(150px, 1.2fr); gap: 16px; }
.mc-code .mc-ins { display: flex; gap: 8px; align-items: baseline; padding: 1px 4px; border-radius: 3px; }
.mc-code .mc-ins.now { background: var(--plum); color: var(--paper); }
.mc-code .mc-ins.now code, .mc-code .mc-ins.now .mc-ip { color: var(--paper); }
.mc-code .mc-ip { font: 11px var(--font-mono); color: var(--ink-faint); width: 16px; text-align: right; }
.mc-code code { font: 13px var(--font-mono); color: var(--plum); }
.stk { display: flex; flex-direction: column-reverse; gap: 4px; align-items: flex-start; min-height: 30px; }
.stk-v { border: 1px solid var(--ochre); background: var(--paper-deep); color: var(--sienna); font: 600 13px var(--font-mono); padding: 2px 10px; border-radius: 3px; }
.stk-e { color: var(--ink-faint); font: italic 12px var(--font-body); }
.mc-note { margin-top: 8px; font: 13px/1.5 var(--font-body); color: var(--ink-soft); }
.mc-note code { color: var(--plum); }
.mc-bar { display: flex; gap: 8px; align-items: center; margin-top: 10px; }

/* pipeline — tabs over the stages reached */
.pl-tabs { margin-bottom: 10px; }
.pl-body { min-height: 40px; }
@media (max-width: 620px) { .mc-grid { grid-template-columns: 1fr; } }

/* automaton bench (js/cc-draw.js renderAutomaton) */
.fig-automaton .au-svg { max-width: 100%; height: auto; display: block; margin: 4px 0; }
.au-state { fill: var(--paper); stroke: var(--teal); stroke-width: 1.6; }
.au-state.au-accept { stroke: var(--teal); }
.au-state.au-on { fill: var(--teal); }
.au-slabel { font: 600 13px var(--font-mono); fill: var(--ink); }
.au-slabel.au-on { fill: var(--paper); }
.au-edge { fill: none; stroke: var(--ink-mute); stroke-width: 1.4; }
.au-arrowhead { fill: var(--ink-mute); stroke: none; }
.au-label { font: 600 12px var(--font-mono); fill: var(--sienna); }
.au-bar { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.au-tape { font: 15px var(--font-mono); letter-spacing: 1px; color: var(--ink-mute); margin-right: 6px; }
.au-tape b { color: var(--red); }

/* scope bench (js/cc-draw.js renderScopes): nested boxes */
.sc-box { border: 1px solid var(--teal); border-radius: 5px; padding: 8px 10px 10px; margin: 8px 0 0; background: var(--paper); }
.sc-box .sc-box { margin-left: 16px; background: var(--paper-deep); }
.sc-name { font: 600 12px var(--font-mono); color: var(--teal); margin-bottom: 6px; }
.sc-binds { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-bind { border: 1px solid var(--paper-rule); background: var(--paper-vellum); color: var(--ink); font: 13px var(--font-mono); padding: 1px 8px; border-radius: 3px; }
.sc-empty { color: var(--ink-faint); font: italic 12px var(--font-body); }
.sc-unresolved { margin-top: 8px; color: var(--red); font: 13px var(--font-mono); }

/* call-stack bench (js/cc-draw.js renderFrames): frames stacked, newest on top */
.fr-stack { margin-top: 4px; }
.fr-frame { border: 1px solid var(--plum); border-radius: 5px; padding: 6px 10px 8px; margin: 6px 0 0; background: var(--paper-deep); }
.fr-frame.top { border-width: 2px; background: var(--paper); box-shadow: 0 1px 0 var(--paper-rule); }
.fr-name { font: 600 12px var(--font-mono); color: var(--plum); margin-bottom: 5px; }
.fr-slot { display: inline-flex; align-items: baseline; gap: 5px; margin: 0 10px 2px 0; }
.fr-k { font: 13px var(--font-mono); color: var(--ink); }
.fr-k::after { content: '='; color: var(--ink-faint); margin-left: 5px; }
.fr-v { font: 13px var(--font-mono); color: var(--sienna); }
.fr-empty { color: var(--ink-faint); font: italic 12px var(--font-body); }

/* heap bench (js/cc-draw.js renderHeap): objects coloured by state */
.hp-area { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; align-items: flex-start; }
.hp-area .mc-note { flex-basis: 100%; }
.hp-obj { border: 1.5px solid var(--paper-rule); border-radius: 6px; padding: 6px 9px 7px; min-width: 96px; background: var(--paper); }
.hp-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.hp-label { font: 600 13px var(--font-mono); color: var(--ink); }
.hp-count { font: 11px var(--font-mono); color: var(--ink-faint); }
.hp-refs { font: 12px var(--font-mono); color: var(--ink-soft); margin-top: 3px; }
.hp-refs.hp-none { color: var(--paper-rule); }
.hp-state { font: italic 11px var(--font-body); color: var(--ink-mute); margin-top: 4px; }
.hp-obj.hp-root { box-shadow: inset 0 2px 0 var(--red); }
.hp-obj.hp-live { border-color: var(--ink); }
.hp-obj.hp-dead { border-style: dashed; opacity: 0.55; }
.hp-obj.hp-dead .hp-label { text-decoration: line-through; }
.hp-obj.hp-grey { border-color: var(--ochre); background: var(--ochre-tint); }
.hp-obj.hp-from { border-color: var(--blue); background: var(--blue-tint); }
.hp-obj.hp-to { border-color: var(--green); background: var(--green-tint); }

/* CFG bench (js/cc-draw.js renderCfg): basic blocks of three-address code */
.cfg-blocks { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; align-items: flex-start; }
.cfg-block { border: 1.5px solid var(--green); border-radius: 6px; padding: 6px 10px 8px; background: var(--paper); min-width: 180px; }
.cfg-name { font: 600 11px var(--font-mono); color: var(--green); letter-spacing: 0.04em; margin-bottom: 4px; }
.cfg-ins { font: 13px/1.55 var(--font-mono); color: var(--ink); }
.cfg-ins.cfg-empty { color: var(--paper-rule); }
.cfg-succ { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 8px; }
.cfg-edge { font: 11px var(--font-mono); color: var(--sienna); }

/* machine bench (js/cc-draw.js renderMachine): RISC-V registers */
.rv-regs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.rv-reg { display: inline-flex; align-items: baseline; gap: 5px; border: 1px solid var(--paper-rule); background: var(--paper-vellum); border-radius: 3px; padding: 1px 7px; }
.rv-name { font: 600 12px var(--font-mono); color: var(--plum); }
.rv-val { font: 12px var(--font-mono); color: var(--ink); }

/* timeline (Vol. XXXIII) */
.tl { list-style: none; margin: 6px 0 0; padding: 0; position: relative; }
.tl::before { content: ''; position: absolute; left: 58px; top: 4px; bottom: 4px; width: 1px; background: var(--paper-rule); }
.tl-ev { display: grid; grid-template-columns: 46px 24px 1fr; align-items: baseline; padding: 3px 0; }
.tl-year { font: 12px var(--font-mono); color: var(--ink-mute); text-align: right; }
.tl-dot { justify-self: center; width: 7px; height: 7px; border-radius: 50%; background: var(--paper-rule); position: relative; top: -1px; }
.tl-body { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.tl-name { font-family: var(--font-display); color: var(--ink); }
.tl-note { font-size: 13px; color: var(--ink-mute); font-style: italic; }
.tl-ev.now .tl-dot { background: var(--red); width: 9px; height: 9px; }
.tl-ev.now .tl-name { color: var(--red); font-weight: 600; }
.tl-ev.now .tl-year { color: var(--red); }

/* WebAssembly module view (Vol. XXVI) */
.wa-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 720px) { .wa-grid { grid-template-columns: 1fr; } }
.wa-wat { margin: 0; padding: 8px 10px; background: var(--paper-vellum); border: 1px solid var(--paper-rule); border-radius: 3px; font: 12px/1.5 var(--font-mono); overflow-x: auto; max-height: 360px; }
.wa-sec { display: grid; grid-template-columns: 6.5em 1fr; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--paper-rule); align-items: baseline; }
.wa-name { font: 600 11px var(--font-mono); color: var(--plum); text-transform: uppercase; letter-spacing: 0.06em; }
.wa-sec code { font: 11.5px/1.55 var(--font-mono); color: var(--ink); overflow-wrap: anywhere; }
.wa-calls { margin-top: 12px; }
.wa-ok { font: 600 10px var(--font-mono); color: var(--green); text-transform: uppercase; letter-spacing: 0.06em; }
.wa-bad { font: 600 10px var(--font-mono); color: var(--red); text-transform: uppercase; letter-spacing: 0.06em; }