right before a panel */ .bk-prose p:has(+ .bk-panel) { color: var(--ink); font-style: italic; } /* free-standing shell commands in prose also go dark — one rule: monospace in a box is a lab instrument. (Region includes are placeholders, so the only
marked emits here are the shell/command fences.) */
.bk-prose pre {
margin: 1.4rem 0; padding: 0.95rem 1.1rem; overflow-x: auto;
background: var(--code-bg);
border: 1px solid var(--code-line);
border-left: 3px solid var(--signal-line);
border-radius: 8px;
max-width: var(--page);
box-shadow: 0 18px 40px -32px rgba(30,18,8,0.5);
}
.bk-prose pre code {
font-family: var(--font-mono);
font-size: 0.8rem; line-height: 1.6;
color: var(--code-fg);
background: none; border: none; padding: 0;
white-space: pre;
}
/* ---------------------------------------------------------------------------
Tables (Break It measurements) — book ledger on the warm surface
------------------------------------------------------------------------ */
.bk-prose table {
width: 100%; border-collapse: collapse;
margin: 1.5rem 0; font-size: 0.96rem;
display: block; overflow-x: auto;
font-variant-numeric: tabular-nums;
}
.bk-prose th, .bk-prose td {
text-align: left; padding: 0.55rem 0.9rem;
border-bottom: 1px solid var(--rule);
}
.bk-prose thead th {
font-family: var(--font-mono);
font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--ink-mute);
border-bottom: 1.5px solid var(--rule-strong);
font-weight: 400;
}
.bk-prose tbody tr:last-child td { border-bottom: 1.5px solid var(--rule-strong); }
.bk-prose td:not(:first-child) { font-family: var(--font-mono); font-size: 0.88rem; }
/* ---------------------------------------------------------------------------
Wall-clock — an honest instrument ledger (injected into "Run it")
------------------------------------------------------------------------ */
.bk-wall {
max-width: var(--measure);
margin: 1.6rem auto;
border: 1px solid var(--rule);
border-radius: 4px;
overflow: hidden;
background: var(--paper-2);
}
.bk-wall-head {
display: flex; align-items: center; justify-content: space-between;
gap: 1rem; flex-wrap: wrap;
padding: 0.6rem 0.9rem;
background: var(--paper-3);
border-bottom: 1px solid var(--rule);
}
.bk-wall-eyebrow {
font-family: var(--font-mono); font-size: 0.68rem;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute);
}
.bk-wall table { width: 100%; border-collapse: collapse; }
.bk-wall td { padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--rule); font-size: 0.9rem; }
.bk-wall tr:last-child td { border-bottom: 0; }
.bk-wall .bk-tier { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink); width: 9rem; }
.bk-wall .bk-line { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.bk-wall tr[data-measured="false"] .bk-line { color: var(--ink-mute); font-style: italic; }
.bk-pill {
font-family: var(--font-mono); font-size: 0.62rem;
letter-spacing: 0.1em; text-transform: uppercase;
padding: 0.14rem 0.5rem; border-radius: 100px; white-space: nowrap;
}
.bk-pill[data-measured="true"] { color: var(--entity-target-ink); background: color-mix(in srgb, var(--entity-target) 14%, transparent); }
.bk-pill[data-measured="false"] { color: var(--ink-mute); background: color-mix(in srgb, var(--ink-mute) 12%, transparent); }
/* ---------------------------------------------------------------------------
Colophon (region_hashes fingerprint + imprint)
------------------------------------------------------------------------ */
.bk-colophon {
max-width: var(--measure);
margin: 4.5rem auto 0;
padding-top: 1.6rem;
border-top: 1px solid var(--rule);
color: var(--ink-mute);
}
.bk-colophon h2 {
font-family: var(--font-mono);
font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--ink-mute); margin: 0 0 0.9rem;
}
.bk-colophon p { font-size: var(--step--1); font-style: italic; margin: 0 0 0.9rem; }
.bk-colophon p code { font-style: normal; font-family: var(--font-mono); font-size: 0.9em; color: var(--ink-soft); }
.bk-colophon dl {
margin: 0.8rem 0 0;
display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem;
font-family: var(--font-mono); font-size: 0.72rem;
}
.bk-colophon dt { color: var(--book); }
.bk-colophon dd { margin: 0; color: var(--ink-mute); overflow-wrap: anywhere; }
/* ---------------------------------------------------------------------------
Focus + a11y
------------------------------------------------------------------------ */
.book a:focus-visible,
.book button:focus-visible {
outline: 2px solid var(--signal);
outline-offset: 3px;
border-radius: 1px;
}
/* ---------------------------------------------------------------------------
Responsive
------------------------------------------------------------------------ */
@media (max-width: 62rem) {
.book { --gutter: 0rem; }
.bk-prose h2 { padding-left: 0; }
.bk-prose h2::before {
position: static; display: inline-block; width: auto;
margin-right: 0.6rem; font-size: 0.85em; vertical-align: 0.05em;
}
}
@media (max-width: 34rem) {
.book { font-size: 1.1rem; line-height: 1.58; }
.bk-page { padding: 0 1.15rem 4rem; }
.bk-runninghead { padding: 1.1rem 1.15rem 0.8rem; }
.bk-runninghead .bk-imprint { display: none; }
.bk-titleblock { padding-top: 2rem; }
.bk-plate { padding: 0.45rem; }
.bk-plate::before { inset: 0.22rem; }
.bk-hud { font-size: 0.62rem; padding: 0.36rem 0.5rem; top: 0.55rem; left: 0.55rem; }
.bk-cl { grid-template-columns: 2.2rem 1fr; }
.bk-cl::before { padding-right: 0.6rem; }
.bk-panel code, .bk-prose pre code { font-size: 0.74rem; }
.bk-control-note { display: none; }
.bk-lede p:first-of-type { font-size: 1.08rem; }
}
@media (prefers-reduced-motion: reduce) {
.book *, .book *::before, .book *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
@media print {
.bk-ribbon, .bk-controls, .bk-copy { display: none; }
body.book::before { display: none; }
}
/* ===========================================================================
ENGINE CHROME — the multi-chapter frame Variant C never had.
Variant C was one standalone page; the shared engine adds a sidebar, a
breadcrumb, prev/next, a reading-progress bar and a landing TOC. These are
styled in C's own language (warm paper, oxblood chrome, mono instruments,
one signal blue) so the whole site reads as the single won design system.
The reading column itself (title, objectives, hero, prose, panels, wall,
colophon) is Variant C verbatim, above.
======================================================================== */
/* --- global surface + paper grain on the page body ---------------------- */
:root {
/* Entity tokens re-exposed at :root as the shared design-system foundation
for P2 toys/diagrams. .book (above) is the authoritative source; these
mirror it so a component outside a .book subtree can still reach them. */
--entity-pusher: #b0560f;
--entity-block: #a5257d;
--entity-tee: var(--entity-block);
--entity-target: #0c7d5f;
}
html { background: #f7f3ea; }
/* smooth anchor scroll only when the reader hasn't asked to reduce motion
(html is outside the .book * reduced-motion reset) */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* visually-hidden live region for screen-reader status announcements */
.bk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px; }
body.book { min-height: 100vh; }
/* faint paper grain across the whole viewport (C's grain, lifted to body) */
body.book::before {
content: "";
position: fixed; inset: 0;
pointer-events: none; z-index: 0;
opacity: 0.5; mix-blend-mode: multiply;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}
body.book > * { position: relative; z-index: 1; }
/* --- reading-progress bar (JS-enhanced; invisible without JS) ------------ */
.progress {
position: fixed; top: 0; left: 0; right: 0; height: 3px;
z-index: 50; background: transparent;
}
.progress__bar {
height: 100%; width: 0; background: var(--signal);
transition: width 0.1s linear;
}
/* --- skip link ---------------------------------------------------------- */
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 100;
background: var(--signal); color: var(--signal-ink);
font-family: var(--font-mono); font-size: 0.8rem;
padding: 0.5rem 1rem;
}
.skip-link:focus { left: 0; }
/* --- shell: sidebar + reading column ------------------------------------ */
.shell {
display: grid;
grid-template-columns: 15.5rem minmax(0, 1fr);
max-width: 76rem;
margin: 0 auto;
}
.shell__sidebar { border-right: 1px solid var(--rule); }
.shell__main { min-width: 0; }
/* the reading column mirrors Variant C's .bk-page frame */
.book .reading {
max-width: var(--page);
margin: 0 auto;
padding: 1.2rem 1.5rem 6rem;
}
/* --- sidebar (warm paper, mono instruments, oxblood chrome) -------------- */
.sidebar {
position: sticky; top: 0;
max-height: 100vh; overflow-y: auto;
padding: 1.6rem 1.15rem 2.4rem;
}
.sidebar__brand {
display: block;
font-family: var(--font-display);
font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em;
color: var(--ink);
text-decoration: none;
margin-bottom: 1.6rem;
padding-bottom: 0.9rem;
border-bottom: 1px solid var(--rule);
}
.sidebar__brand::first-letter { color: var(--book); }
/* Search affordance (JS-only; revealed by SidebarNav's enhancer). Opens the
overlay island — the "/" and ⌘K keybinds do the same. */
/* brand + theme toggle row */
.sidebar__top {
display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
margin-bottom: 1.2rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--rule);
}
.sidebar__top .sidebar__brand { margin: 0; padding: 0; border: 0; }
/* search + help affordances (JS-only) */
.sidebar__util { display: flex; gap: 0.4rem; margin-bottom: 0.9rem; }
.sidebar__search {
display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
flex: 1; margin: 0; padding: 0.42rem 0.7rem;
font: inherit; font-size: 0.82rem; color: var(--ink-soft);
background: var(--paper-2); border: 1px solid var(--rule); border-radius: 7px;
cursor: pointer; text-align: left;
}
.sidebar__search:hover { color: var(--ink); border-color: var(--ink-mute); }
.sidebar__search:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.sidebar__search kbd {
font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-mute);
background: var(--paper); border: 1px solid var(--rule); border-radius: 4px;
padding: 0.02rem 0.34rem;
}
/* quick links (start here / progress) */
.sidebar__quicklinks { list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; gap: 0.9rem; }
.sidebar__quicklinks a {
font-size: 0.82rem; color: var(--ink-soft); text-decoration: none;
border-bottom: 1px solid var(--rule);
}
.sidebar__quicklinks a:hover { color: var(--book); border-color: var(--book-soft); }
.sidebar__quicklinks a:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.sidebar__quicklinks a[aria-current="page"] { color: var(--book); }
.sidebar__phase { margin-bottom: 1.5rem; }
.sidebar__phase-label {
font-family: var(--font-mono);
font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--ink-mute);
margin: 0 0 0.5rem; padding: 0 0.3rem;
}
.sidebar__list { list-style: none; margin: 0; padding: 0; }
.sidebar__link {
display: flex; gap: 0.55rem; align-items: baseline;
padding: 0.36rem 0.5rem; border-radius: 3px;
color: var(--ink-soft);
text-decoration: none;
font-size: 0.95rem; line-height: 1.35;
}
.sidebar__link:hover { background: color-mix(in srgb, var(--book) 6%, transparent); }
.sidebar__link[aria-current="page"] {
background: color-mix(in srgb, var(--book) 10%, transparent);
color: var(--book); font-weight: 600;
}
.sidebar__num {
font-family: var(--font-mono);
font-size: 0.74rem; color: var(--ink-mute);
min-width: 2.2em; font-variant-numeric: tabular-nums;
}
.sidebar__link[aria-current="page"] .sidebar__num { color: inherit; }
.sidebar__title { color: inherit; }
/* reading-progress decorates read chapters with a target-green check (JS) */
.sidebar__link[data-read="true"] .sidebar__title::after {
content: " ✓"; color: var(--entity-target);
}
/* --- breadcrumb --------------------------------------------------------- */
.breadcrumb {
font-family: var(--font-mono);
font-size: 0.72rem; letter-spacing: 0.03em;
color: var(--ink-mute);
margin: 0 auto 0.4rem;
max-width: var(--page);
}
.breadcrumb__list {
list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem;
margin: 0; padding: 0;
}
.breadcrumb__item a { color: var(--ink-mute); text-decoration: none; }
.breadcrumb__item a:hover { color: var(--book); }
.breadcrumb__item + .breadcrumb__item::before {
content: "/"; margin-right: 0.45rem; color: var(--rule-strong);
}
.breadcrumb__item--current { color: var(--ink-soft); }
/* --- prev / next -------------------------------------------------------- */
.prevnext {
display: flex; justify-content: space-between; gap: 1rem;
max-width: var(--measure);
margin: 4rem auto 0;
padding: 1.4rem 1.5rem 0;
border-top: 1px solid var(--rule);
}
.prevnext__link {
display: flex; flex-direction: column; gap: 0.2rem;
max-width: 48%; text-decoration: none;
color: var(--ink);
}
.prevnext__link--next { text-align: right; margin-left: auto; }
.prevnext__dir {
font-family: var(--font-mono);
font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--book);
}
.prevnext__label {
font-family: var(--font-display); font-size: 1.05rem; color: var(--ink-soft);
}
.prevnext__link:hover .prevnext__label { color: var(--book); }
.prevnext__spacer { flex: 1; }
/* --- running head (per-chapter; folio + imprint) ------------------------ */
/* .bk-runninghead is styled in the Variant C core above. */
/* --- the hero when JS is off / non-BC chapters: the generic poster ------- */
/* Reuses the Variant C stage (.bk-stage / .bk-arena / .bk-grid / .bk-tee /
.bk-pusher / .bk-target) so every chapter's poster reads as one instrument.
The BC chapter mounts the interactive drift toggle; every other chapter
shows this static, captioned poster (the real toy lands in P2). */
.bk-poster-cap {
display: flex; align-items: center; justify-content: space-between;
gap: 0.8rem; flex-wrap: wrap;
padding: 0.7rem 0.2rem 0.2rem;
font-family: var(--font-mono);
font-size: 0.72rem; color: var(--ink-mute);
}
.bk-poster-demo { color: var(--ink-soft); }
.bk-poster-demo b { color: var(--book); font-weight: 600; letter-spacing: 0.02em; }
.bk-poster-p2 {
margin-left: auto; color: var(--signal);
letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.66rem;
}
.bk-plot-caption {
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
fill: var(--ink-mute);
}
.bk-target-fill { fill: color-mix(in srgb, var(--entity-target) 12%, transparent); }
/* --- home / table of contents ------------------------------------------- */
.home-header { max-width: var(--measure); margin: 3.2rem auto 3rem; }
.home-header__kicker {
font-family: var(--font-mono);
font-size: var(--step--1); letter-spacing: 0.28em; text-transform: uppercase;
color: var(--book);
margin: 0 0 1rem;
display: flex; align-items: center; gap: 0.9rem;
}
.home-header__kicker::after {
content: ""; flex: 1 1 auto; height: 1px;
background: linear-gradient(90deg, var(--rule-strong), transparent);
}
.home-header__title {
font-family: var(--font-display); font-weight: 600;
font-size: var(--step-4); line-height: 1.02; letter-spacing: -0.015em;
margin: 0 0 0.9rem; color: var(--ink);
}
.home-header__lede {
font-size: 1.14rem; color: var(--ink-soft); font-style: italic; margin: 0;
}
.home-phase { max-width: var(--measure); margin: 0 auto 2.6rem; }
.home-phase__label {
font-family: var(--font-mono);
font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--ink-mute);
margin: 0 0 0.4rem; padding-bottom: 0.5rem;
border-bottom: 1px solid var(--rule-strong);
}
.home-chapters { list-style: none; margin: 0; padding: 0; }
.home-chapter { counter-increment: none; }
.home-chapter__link {
display: flex; gap: 1.1rem; align-items: baseline;
padding: 0.9rem 0.5rem; border-radius: 3px;
color: var(--ink); text-decoration: none;
border-bottom: 1px solid var(--rule);
}
.home-chapter:last-child .home-chapter__link { border-bottom: 0; }
.home-chapter__link:hover { background: color-mix(in srgb, var(--book) 6%, transparent); }
.home-chapter__num {
font-family: var(--font-mono); font-size: 0.85rem;
color: var(--book); min-width: 2.8em; font-variant-numeric: tabular-nums;
}
.home-chapter__body { display: flex; flex-direction: column; gap: 0.25rem; }
.home-chapter__title {
font-family: var(--font-display); font-weight: 600; font-size: 1.22rem;
color: var(--ink);
}
.home-chapter__link:hover .home-chapter__title { color: var(--book); }
.home-chapter__meta {
font-family: var(--font-mono); font-size: 0.76rem; color: var(--ink-mute);
}
.home-chapter__meta code {
font-family: var(--font-mono); background: var(--paper-3);
border: 1px solid var(--paper-edge); border-radius: 2px;
padding: 0.02em 0.3em; color: var(--ink-soft);
}
/* --- shell responsive: collapse the sidebar with the gutter ------------- */
@media (max-width: 62rem) {
.shell { grid-template-columns: 1fr; max-width: var(--page); }
.shell__sidebar {
border-right: 0; border-bottom: 1px solid var(--rule);
}
.sidebar {
position: static; max-height: none;
display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; align-items: baseline;
padding: 1rem 1.5rem;
}
.sidebar__top { width: 100%; margin-bottom: 0.8rem; }
.sidebar__util, .sidebar__quicklinks { width: 100%; margin-bottom: 0.4rem; }
.sidebar__phase { margin-bottom: 0; }
/* ≥44px tap targets on the collapsed horizontal nav (WCAG 2.5.5) */
.sidebar__link { min-height: 44px; align-items: center; }
}
/* ===========================================================================
CONCEPT-TOY ISLAND (.ct-*) — the ch1.1 covariate-shift toy, and the FROZEN
skin every P5 chapter toy reuses. A crisp SQUARE lab stage (the arena is
square: ±0.45 m) mounted in the same warm .bk-plate mat as every hero.
Two co-located layers in one square figure, so booting causes NO layout
shift: the SSR poster (JS-off fallback + pre-boot) and the live MuJoCo-WASM
canvas (shown only once booted). All colour comes from the shared design
tokens: --entity-* for the three task entities, one --signal blue for the
live/interactive handle, --alert red for the failing readout, neutral ink
for the "make-invisible-visible" coverage region (it is a map, not an
entity and not live, so it wears neither an entity hue nor signal blue).
======================================================================== */
.ct {
display: grid;
gap: 0;
}
.ct-figure {
position: relative;
margin: 0;
aspect-ratio: 1 / 1; /* square arena — no reflow poster⇄canvas */
border: 1px solid #dcd0b6;
border-radius: 3px;
overflow: hidden;
background: linear-gradient(180deg, #fbf9f3, #f4efe3);
touch-action: none; /* pointer-drag the block, never scroll the page */
}
.ct-figure:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
/* the live canvas — square, fills the figure, hidden until the sim boots */
.ct-canvas {
position: absolute; inset: 0;
width: 100%; height: 100%;
display: block;
cursor: grab;
}
.ct-canvas[data-dragging="true"] { cursor: grabbing; }
.ct-canvas[hidden] { display: none; }
/* the SSR poster (JS-off + pre-boot) — same square box as the canvas */
.ct-poster { position: absolute; inset: 0; }
.ct-poster[hidden] { display: none; }
.ct-poster-svg { display: block; width: 100%; height: 100%; }
/* graph paper + arena, shared poster/none */
.ct-grid line { stroke: color-mix(in srgb, var(--rule-strong) 55%, transparent); stroke-width: 1; }
.ct-arena { fill: none; stroke: var(--rule-strong); stroke-width: 1.5; }
.ct-axis {
font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em;
fill: var(--ink-mute);
}
/* the demonstrated-coverage region — the training distribution made visible.
Neutral warm ink (a MAP), dashed boundary; never an entity hue, never blue. */
.ct-coverage {
fill: color-mix(in srgb, var(--ink-mute) 12%, transparent);
stroke: var(--ink-mute);
stroke-width: 1.4;
stroke-dasharray: 5 4;
stroke-opacity: 0.72;
}
.ct-coverage-label {
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em;
fill: var(--ink-mute);
}
/* entities on the poster — the three page hues */
.ct-target rect { fill: none; stroke: var(--entity-target); stroke-width: 2; stroke-dasharray: 5 5; }
.ct-target-label { fill: var(--entity-target); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; }
.ct-tee rect { fill: var(--entity-block); }
.ct-pusher-ring { fill: none; stroke: var(--entity-pusher); stroke-width: 1.5; opacity: 0.5; }
.ct-pusher-core { fill: var(--entity-pusher); }
/* the drag affordance — the one LIVE handle (signal blue) */
.ct-halo { fill: none; stroke: var(--signal); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: 0.85; }
.ct-drag-label { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.02em; fill: var(--signal); }
@media (prefers-reduced-motion: no-preference) {
.ct-halo { animation: bk-halo-spin 12s linear infinite; transform-box: fill-box; transform-origin: center; }
}
/* HUD — the live instrument readout (poster ships the nominal, in-distribution
state; the island overwrites it every ~10 Hz). */
.ct-hud {
position: absolute; top: 0.7rem; left: 0.7rem; right: 0.7rem;
display: grid; gap: 0.3rem;
padding: 0.55rem 0.7rem;
background: color-mix(in srgb, #fdfbf6 86%, transparent);
border: 1px solid var(--rule-strong);
border-radius: 5px;
backdrop-filter: blur(3px);
font-family: var(--font-mono);
font-size: 0.72rem;
pointer-events: none;
}
.ct-hud-row { display: flex; gap: 0.8rem; justify-content: space-between; align-items: baseline; }
.ct-hud .ct-k { color: var(--ink-mute); letter-spacing: 0.02em; }
.ct-hud .ct-v { font-variant-numeric: tabular-nums; font-weight: 600; }
.ct-hud .ct-ok { color: var(--entity-target); }
.ct-hud .ct-bad { color: var(--alert); }
/* the distance-from-demos meter bar */
.ct-meter {
grid-column: 1 / -1;
height: 5px; border-radius: 3px; margin-top: 0.1rem;
background: color-mix(in srgb, var(--ink-mute) 18%, transparent);
overflow: hidden;
}
.ct-meter-fill {
height: 100%; width: 0%;
background: var(--entity-target);
transition: width 0.12s linear, background 0.2s ease;
}
.ct-meter-fill[data-ood="true"] { background: var(--alert); }
/* boot / error status line under the HUD */
.ct-status {
position: absolute; left: 0.7rem; bottom: 0.7rem; right: 0.7rem;
font-family: var(--font-mono); font-size: 0.66rem;
color: var(--ink-mute);
display: flex; justify-content: space-between; gap: 0.8rem;
pointer-events: none;
}
.ct-status[data-failed="true"] { color: var(--alert); }
/* controls — JS-only affordances (the poster reads without them) */
.ct-controls {
display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
padding: 0.85rem 0.1rem 0.1rem;
}
.ct-btn {
font-family: var(--font-mono);
font-size: 0.74rem; letter-spacing: 0.01em;
padding: 0.4rem 0.85rem;
border: 1px solid var(--rule-strong);
border-radius: 100px;
background: var(--paper);
color: var(--ink-soft);
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ct-btn:hover { border-color: var(--signal); color: var(--ink); }
.ct-btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.ct-btn--primary {
background: var(--signal); color: var(--signal-ink); border-color: var(--signal);
box-shadow: 0 1px 4px -1px var(--signal-line);
}
.ct-btn--primary:hover { color: #fff; background: color-mix(in srgb, var(--signal) 90%, #000); }
.ct-btn[disabled] { opacity: 0.5; cursor: default; }
.ct-control-note {
font-family: var(--font-mono); font-size: 0.66rem;
color: var(--ink-mute); margin-left: auto;
}
@media (max-width: 34rem) {
.ct-hud { font-size: 0.62rem; padding: 0.4rem 0.5rem; top: 0.5rem; left: 0.5rem; right: 0.5rem; }
.ct-control-note { display: none; }
}
/* ===========================================================================
DARK THEME — "read like a book at night". Token-only override layer.
---------------------------------------------------------------------------
The whole design system is token-based, and every token that carries COLOUR
is authored on `.book` (the ). So a dark theme is just: redefine those
tokens under a dark selector and let every component / concept-toy / exercise
/ progress / landing / search surface inherit the new values. Nothing below
restructures an existing rule — this is a pure additive skin.
TRIGGER — dark applies when EITHER:
· the reader toggled dark → :root[data-theme="dark"] (explicit, wins on any OS)
· OR the OS prefers dark AND they have not toggled light
→ @media (prefers-color-scheme: dark)
:root:not([data-theme="light"]) (the default signal)
The explicit toggle ALWAYS wins over the media query in BOTH directions:
· light-toggle on a dark OS → :not([data-theme="light"]) fails, media block skipped → light.
· dark-toggle on a light OS → :root[data-theme="dark"] matches outside the media block → dark.
SPECIFICITY — the colour tokens live on `.book` (0,1,0). Both dark selectors
below target `… .book` at (0,3,0), so they redefine the tokens ON the body
element itself (not merely inherited from :root) and therefore win; the new
values then cascade to the entire `.book` subtree.
NO-FLASH — the two `:root … { background }` rules paint the correct page
colour on the FIRST paint of , before is styled,
so there is no light flash. The orchestrator's synchronous snippet
(see ThemeToggle wire-in note) stamps data-theme from localStorage before
first paint for the toggled case; for the untoggled OS-dark case the media
rule already covers it with zero JS.
FIXED-INSTRUMENT SURFACES (intentional, flagged): the code panels are an
always-dark instrument (code-* unchanged); the sim/graph-paper stages
(.bk-plate / .bk-stage / .ct-figure / HUD chips) carry hardcoded warm-light
backgrounds in their own files and the toy canvases are painted light in JS —
they stay LIGHT lab-instruments in both themes, so --entity-* BASE + -hi keep
their light-surface tuning. Only the entity TEXT that sits on the flipping
paper is retargeted to the bright -hi/-ink hues below.
======================================================================== */
/* ---- payload macro, applied to the two trigger selectors below ------------ */
/* (A) explicit toggle — highest authority, any OS */
:root[data-theme="dark"] { background: #15120d; color-scheme: dark; }
:root[data-theme="dark"] .book {
color-scheme: dark;
/* reading surface — warm near-black paper, warm light ink */
--paper: #15120d;
--paper-2: #1d1912;
--paper-3: #241f16;
--paper-edge: #322b1f;
--ink: #ece4d6; /* body — 14.8:1 on paper */
--ink-soft: #cabfac; /* subheads — 10.3:1 */
--ink-mute: #9d917d; /* captions/marginalia — 6.0:1 on paper, 5.6:1 on-2 */
--rule: #322b20;
--rule-strong: #4a4030;
/* book chrome (numerals, drop cap, rules, prose links) — warm terracotta,
still "old ink", not a live signal — 7.9:1 on paper */
--book: #dd9a72;
--book-soft: #b9714f; /* 4.9:1 */
/* the ONE live signal — brighter blue for the dark surface — 7.1:1 on paper;
signal-ink flips DARK so button text (dark-on-blue) clears 7.2:1 */
--signal: #6f9dff;
--signal-ink: #0c1018;
--signal-soft: rgba(111, 157, 255, 0.12);
--signal-line: rgba(111, 157, 255, 0.40);
/* semantic alert — warm coral, 6.9:1 on paper */
--alert: #ff6f61;
/* entity BASE + -hi unchanged (fixed light/dark instrument surfaces above);
only the -ink variants — entity TEXT on the flipping paper — go bright: */
--entity-pusher-ink: #f0a25c; /* 8.4:1 on paper-2 */
--entity-target-ink: #45c79e; /* 8.3:1 on paper-2 */
/* code-* deliberately NOT redefined: the code panel is an always-dark
instrument and its light-theme values already clear AA on code-bg. */
}
/* paper grain: multiply darkens (invisible on near-black) → switch to screen */
:root[data-theme="dark"] body.book::before { mix-blend-mode: screen; opacity: 0.32; }
/* entity TEXT/underlines that read off base --entity-* on the flipping paper
fall below AA there; retarget to the bright -hi hues (6.5–8.9:1). */
:root[data-theme="dark"] .book .bk-legend-item .bk-e-block { color: var(--entity-block-hi); }
:root[data-theme="dark"] .book .bk-ent-pusher { border-color: var(--entity-pusher-hi); }
:root[data-theme="dark"] .book .bk-ent-block { border-color: var(--entity-block-hi); }
:root[data-theme="dark"] .book .bk-ent-target { border-color: var(--entity-target-hi); }
:root[data-theme="dark"] .book .sidebar__link[data-read="true"] .sidebar__title::after { color: var(--entity-target-hi); }
/* the sim/poster stages + HUD chips are hardcoded-LIGHT instruments in BOTH
themes (see the comment above); hold their TEXT at light-theme token values so
the flipped dark tokens don't render labels/HUD/status light-on-light. */
:root[data-theme="dark"] .book :is(.bk-stage, .bk-svg, .ct-figure, .bk-hud, .ct-hud, .cp-figure, .cp-hud, .fl-figure, .fl-hud, .df-figure, .df-hud, .fd-figure, .fd-side) {
--ink: #23201b; --ink-soft: #473f34; --ink-mute: #6d6252;
--signal: #1f56de; --alert: #c0362a;
}
/* (B) OS default — identical payload, gated on "prefers dark & not toggled light" */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { background: #15120d; color-scheme: dark; }
:root:not([data-theme="light"]) .book {
color-scheme: dark;
--paper: #15120d;
--paper-2: #1d1912;
--paper-3: #241f16;
--paper-edge: #322b1f;
--ink: #ece4d6;
--ink-soft: #cabfac;
--ink-mute: #9d917d;
--rule: #322b20;
--rule-strong: #4a4030;
--book: #dd9a72;
--book-soft: #b9714f;
--signal: #6f9dff;
--signal-ink: #0c1018;
--signal-soft: rgba(111, 157, 255, 0.12);
--signal-line: rgba(111, 157, 255, 0.40);
--alert: #ff6f61;
--entity-pusher-ink: #f0a25c;
--entity-target-ink: #45c79e;
}
:root:not([data-theme="light"]) body.book::before { mix-blend-mode: screen; opacity: 0.32; }
:root:not([data-theme="light"]) .book .bk-legend-item .bk-e-block { color: var(--entity-block-hi); }
:root:not([data-theme="light"]) .book .bk-ent-pusher { border-color: var(--entity-pusher-hi); }
:root:not([data-theme="light"]) .book .bk-ent-block { border-color: var(--entity-block-hi); }
:root:not([data-theme="light"]) .book .bk-ent-target { border-color: var(--entity-target-hi); }
:root:not([data-theme="light"]) .book .sidebar__link[data-read="true"] .sidebar__title::after { color: var(--entity-target-hi); }
:root:not([data-theme="light"]) .book :is(.bk-stage, .bk-svg, .ct-figure, .bk-hud, .ct-hud, .cp-figure, .cp-hud, .fl-figure, .fl-hud, .df-figure, .df-hud, .fd-figure, .fd-side) {
--ink: #23201b; --ink-soft: #473f34; --ink-mute: #6d6252;
--signal: #1f56de; --alert: #c0362a;
}
}
/* ---------------------------------------------------------------------------
ThemeToggle — the button that stamps data-theme on . Styled in C's
language: a warm paper chip, mono glyph, one signal-blue focus ring. Adapts
to dark automatically (it consumes the same tokens).
------------------------------------------------------------------------ */
.theme-toggle {
display: inline-flex; align-items: center; justify-content: center;
width: 2.1rem; height: 2.1rem; padding: 0;
background: var(--paper-2);
color: var(--ink-soft);
border: 1px solid var(--rule);
border-radius: 7px;
cursor: pointer;
line-height: 0;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-mute); }
.theme-toggle:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.theme-toggle svg { width: 1.02rem; height: 1.02rem; display: block; }
/* the two glyphs cross-fade on state (JS toggles the button's data-theme attr) */
.theme-toggle .tt-moon { display: none; }
.theme-toggle .tt-sun { display: block; }
.theme-toggle[data-active="dark"] .tt-moon { display: block; }
.theme-toggle[data-active="dark"] .tt-sun { display: none; }