/* Kernel Engineering, the book. A Tufte-style page (et-book on ivory, notes in the margin), in the manner of
   siboehm.com, with wide figures for the drawings and the film stills. Own stylesheet; no framework. */
@font-face { font-family: 'et-book'; src: url(fonts/et-book-roman-line-figures.woff) format('woff');
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'et-book'; src: url(fonts/et-book-display-italic-old-style-figures.woff) format('woff');
  font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'et-book'; src: url(fonts/et-book-bold-line-figures.woff) format('woff');
  font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url(fonts/JetBrainsMono-400-normal.woff2) format('woff2');
  font-weight: 400; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url(fonts/JetBrainsMono-700-normal.woff2) format('woff2');
  font-weight: 700; font-display: swap; }

:root {
  --bg: #fffff8; --ink: #111111; --soft: #4a4a4a; --muted: #77746b; --rule: #e2ddcb; --code: #f5f2e6;
  --link: #1c5d99; --mark: #9c36b5;
  --col: 640px;            /* the reading column */
  --gut: 48px;             /* gap between column and margin notes */
  --note: 270px;           /* margin notes */
}
* { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink);
  font-family: et-book, Palatino, 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  counter-reset: sidenote-counter; -webkit-font-smoothing: antialiased; }
article { max-width: calc(var(--col) + var(--gut) + var(--note)); margin: 0 auto; padding: 56px 32px 96px; }
.body > *, .masthead > * { max-width: var(--col); }

/* masthead */
.eyebrow { font-variant: small-caps; letter-spacing: 0.12em; font-size: 1.05rem; color: var(--muted); margin: 0 0 1.2rem; }
h1 { font-weight: 400; font-size: 3.1rem; line-height: 1.08; margin: 0 0 1rem; }
.subtitle { font-style: italic; font-size: 1.45rem; line-height: 1.4; color: var(--soft); margin: 0 0 1.4rem; }
.byline { font-size: 1.05rem; color: var(--muted); margin: 0 0 0.6rem; }
.links { margin: 0 0 2.6rem; font-size: 1.05rem; }
.links a { margin-right: 1.2rem; }
a { color: var(--link); text-decoration: none; border-bottom: 1px solid rgba(28, 93, 153, 0.25); }
a:hover { border-bottom-color: var(--link); }
a.xref { border-bottom: none; }

/* text */
p, li { font-size: 1.32rem; line-height: 1.56; }
p { margin: 1.15rem 0; hyphens: auto; -webkit-hyphens: auto; }
ol, ul { padding-left: 1.6rem; }
li { margin: 0.35rem 0; }
h2 { font-weight: 400; font-style: italic; font-size: 2.05rem; line-height: 1.2; margin: 3.4rem 0 1.2rem; }
h3 { font-weight: 400; font-style: italic; font-size: 1.55rem; margin: 2.4rem 0 0.8rem; }
.secnum { font-style: normal; color: var(--muted); margin-right: 0.6rem; font-size: 0.82em; }
code { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 0.8em; }
/* show code exactly as typed: no ligatures (JetBrains Mono would draw >= as one symbol) */
code, pre, .code, .output { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
p code, li code, figcaption code { background: var(--code); padding: 0.05em 0.3em; border-radius: 3px; }

/* sidenotes */
.sidenote-number { counter-increment: sidenote-counter; }
.sidenote-number::after, .sidenote::before { position: relative; vertical-align: baseline; font-family: et-book, serif; }
.sidenote-number::after { content: counter(sidenote-counter); font-size: 0.85rem; top: -0.55rem; left: 0.08rem;
  color: var(--mark); }
.sidenote::before { content: counter(sidenote-counter) "\00a0\00a0"; font-size: 0.85rem; top: -0.4rem; color: var(--mark); }
.sidenote { float: right; clear: right; width: var(--note); margin-right: calc(-1 * (var(--note) + var(--gut)));
  margin-top: 0.3rem; margin-bottom: 0.6rem; font-size: 1.02rem; line-height: 1.42; color: var(--soft);
  position: relative; hyphens: none; }
input.margin-toggle { display: none; }
label.sidenote-number { display: inline; cursor: default; }

/* contents */
nav.contents { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin: 2.4rem 0; padding: 0.6rem 0 0.9rem; }
nav.contents .clabel { font-variant: small-caps; letter-spacing: 0.1em; color: var(--muted); font-size: 1rem; margin: 0.4rem 0; }
nav.contents ol { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 2rem; }
nav.contents li { font-size: 1.08rem; line-height: 1.35; margin: 0.25rem 0; break-inside: avoid; }
nav.contents a { border: none; color: var(--ink); }
nav.contents a:hover { color: var(--link); }

/* figures */
figure { margin: 2.2rem 0 2.4rem; padding: 0; }
.body > figure.wide { max-width: calc(var(--col) + var(--gut) + var(--note)); }
/* wide things start below any margin note that hangs down beside the text */
.body > figure.wide, .body > figure.listing, .output, .body > h2 { clear: right; }
figure img, figure video { display: block; width: 100%; height: auto; }
figure.still img, figure.loop video, figure.loop img { border-radius: 4px; background: #0d0d10; }
figure.shot img { border: 1px solid var(--rule); border-radius: 4px; width: auto; max-width: 100%; margin: 0 auto; }
div.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
figcaption { font-size: 1.02rem; line-height: 1.42; color: var(--soft); margin-top: 0.7rem; max-width: var(--col); }
.fignum { font-variant: small-caps; letter-spacing: 0.06em; color: var(--ink); margin-right: 0.35rem; }
.vwrap { position: relative; }
.vbadge { position: absolute; right: 10px; bottom: 10px; font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.75); background: rgba(0, 0, 0, 0.45); padding: 5px 7px;
  border-radius: 3px; pointer-events: none; }
figure.missing .placeholder { border: 1px dashed var(--muted); color: var(--muted); padding: 3rem; text-align: center;
  font-style: italic; }

/* code, output, tables, equations */
figure.listing figcaption { margin: 0 0 0.5rem; }
pre { margin: 0; overflow-x: auto; }
pre.code, .codehilite pre, .output pre { background: var(--code); border-radius: 4px; padding: 0.9rem 1.1rem;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 0.86rem; line-height: 1.55; }
pre.code code, .output code, .codehilite code { font-size: 1em; background: none; padding: 0; }
.body > figure.listing { max-width: calc(var(--col) + var(--gut) + var(--note)); }
.codehilite { margin: 1.4rem 0; max-width: var(--col); }
.output { margin: -1.2rem 0 2.2rem; max-width: calc(var(--col) + var(--gut) + var(--note)); }
.output pre { background: #fbf9f1; border: 1px solid var(--rule); border-top: none; }
.olabel { display: inline-block; font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); margin: 0.5rem 0 0.4rem 0.2rem; }
figure.table table { border-collapse: collapse; width: 100%; font-size: 1.1rem; line-height: 1.35; }
figure.table th, figure.table td { text-align: left; padding: 0.45rem 0.7rem 0.45rem 0; border-bottom: 1px solid var(--rule);
  vertical-align: top; }
figure.table th { font-weight: 400; font-style: italic; color: var(--soft); border-bottom: 1px solid #b9b39c; }
figure.table td:not(:first-child), figure.table th:not(:first-child) { text-align: right; }
figure.table figcaption { margin: 0 0 0.6rem; }
.eq { font-size: 1.32rem; line-height: 1.8; text-align: center; margin: 1.4rem 0; color: var(--ink); }

/* pygments, a quiet light theme */
.code .k, .code .kn, .code .kd { color: #8a2be2; } .code .s, .code .s1, .code .s2, .code .sa, .code .si { color: #2f7d32; }
.code .c, .code .c1 { color: #8c8a80; font-style: italic; } .code .mi, .code .mf { color: #b35c00; }
.code .nf, .code .fm { color: #1c5d99; } .code .nd { color: #9c36b5; } .code .nb, .code .bp { color: #6a4c93; }
.code .o, .code .ow { color: #555; }

footer { border-top: 1px solid var(--rule); margin-top: 4rem; padding-top: 1rem; max-width: var(--col); }
footer p { font-size: 0.98rem; line-height: 1.45; color: var(--muted); }
.print-only { display: none; }

/* narrow screens: notes drop into the text and open on tap */
@media (max-width: 1040px) {
  article { max-width: calc(var(--col) + 64px); }
  .body > figure.wide, .body > figure.listing, .output { max-width: var(--col); }
  .sidenote { display: none; }
  label.sidenote-number { cursor: pointer; }
  .margin-toggle:checked + .sidenote { display: block; float: left; clear: both; width: 100%; margin: 0.8rem 0;
    padding: 0.6rem 0.9rem; background: #f6f3e7; border-radius: 4px; }
}
@media (max-width: 600px) {
  html { font-size: 14px; }
  article { padding: 28px 16px 64px; }
  h1 { font-size: 2.4rem; }
  nav.contents ol { columns: 1; }
  div.pair { grid-template-columns: 1fr; }
}

/* print and the PDF: notes inline, posters instead of loops */
@media print {
  @page { size: A4; margin: 16mm 17mm 18mm 17mm; }
  html { font-size: 10.6pt; }
  body { background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  article { max-width: none; padding: 0; }
  .body > *, .masthead > *, .body > figure.wide, .body > figure.listing, .output, figcaption, footer { max-width: 100% !important; }
  p, li { font-size: 1.1rem; line-height: 1.5; }
  .sidenote { display: block; float: none; width: auto; margin: 0.35rem 0 0.35rem 1.4rem; font-size: 0.92rem; color: #444; }
  .no-print, nav.contents { display: none; }
  figure, .output, pre, table, .eq { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
  pre.code, .output pre, .codehilite pre { white-space: pre-wrap; font-size: 0.72rem; }
  .vbadge { display: none; }
  a { color: inherit; border: none; }
  /* keep figures modest on paper so a figure that does not fit leaves a smaller gap */
  figure.still img, figure.loop img { width: auto; max-width: 100%; max-height: 82mm; margin: 0 auto; }
  figure.stills img { max-height: none; width: 100%; }
  figure.fig img { width: auto; max-width: 100%; max-height: 105mm; margin: 0 auto; }
  figure.shot img { max-height: 90mm; }
  figcaption { text-align: left; }
  h2 { margin-top: 2.2rem; }
}

/* "In the real run": what happened when we ran a kernel on our H100. Closed until the reader opens it; the PDF
   prints it open. The story stays above it; the measurements, compiler output and counters live inside. */
details.real { clear: right; margin: 1.8rem 0 2.2rem; max-width: var(--col); }
details.real[open] { max-width: calc(var(--col) + var(--gut) + var(--note)); }
details.real > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 0.35rem 0.75rem; max-width: var(--col); padding: 0.75rem 1rem 0.8rem; background: #f3efe1;
  border: 1px solid var(--rule); border-radius: 6px; }
details.real > summary::-webkit-details-marker { display: none; }
details.real > summary::before { content: "\25B8"; color: var(--muted); font-size: 0.95rem; display: inline-block;
  transition: transform 0.15s; }
details.real[open] > summary::before { transform: rotate(90deg); }
details.real > summary:hover { border-color: #cfc8b0; }
.rtag { font: 600 0.72rem/1.2 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase;
  color: #2b7a35; background: #e3f1df; padding: 0.28rem 0.5rem; border-radius: 3px; white-space: nowrap; }
.rtitle { font-style: italic; font-size: 1.2rem; line-height: 1.35; color: var(--ink); flex: 1 1 16rem; }
.rbody { border-left: 3px solid #cfe5c8; padding: 0.1rem 0 0.4rem 1.2rem; margin: 0.7rem 0 0 0.45rem; }
.rbody > * { max-width: var(--col); }
.rbody > figure.wide, .rbody > figure.listing, .rbody > .output, .rbody > figure.widget {
  max-width: calc(var(--col) + var(--gut) + var(--note) - 1.65rem); }
.rbody h3 { margin-top: 1.8rem; font-size: 1.4rem; }
.rbody > p:first-child { margin-top: 0.6rem; }

/* quizzes */
.quiz { max-width: var(--col); margin: 1.4rem 0 2.2rem; }
.qlist { padding-left: 1.7rem; margin: 0; }
.qlist > li.q { margin: 0 0 1.9rem; }
.qtext { margin: 0 0 0.65rem; }
.qopts { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; }
.qopts > li { margin: 0; }
.qopt { display: flex; gap: 0.75rem; align-items: baseline; width: 100%; text-align: left; font: inherit;
  font-size: 1.14rem; line-height: 1.42; color: var(--ink); background: #fbf9f1; border: 1px solid var(--rule);
  border-radius: 6px; padding: 0.55rem 0.85rem; cursor: pointer; }
.qopt:hover:not(:disabled) { border-color: #b9b39c; background: #f5f1e2; }
.qopt:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.qopt:disabled { cursor: default; }
.qopt:disabled:not(.right):not(.wrong) { opacity: 0.62; }
.qlet { font: 600 0.85rem/1.65 'JetBrains Mono', ui-monospace, monospace; color: var(--muted); min-width: 1.1rem; }
.qopt.right { border-color: #2f9e44; background: #e7f5e4; }
.qopt.right .qlet { color: #2f9e44; }
.qopt.wrong { border-color: #e03131; background: #fdecec; }
.qopt.wrong .qlet { color: #e03131; }
.qwhy { font-size: 1.14rem; line-height: 1.5; color: var(--soft); margin: 0.75rem 0 0; }
.qverdict { font-weight: 700; color: var(--ink); }
.qreveal { margin: 0.55rem 0 0; font-size: 1rem; }
.qshow, .qclear { font: inherit; font-size: 1rem; color: var(--link); background: none; border: none; padding: 0;
  cursor: pointer; border-bottom: 1px solid rgba(28, 93, 153, 0.25); }
.qfoot { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 1.05rem;
  color: var(--soft); margin: 0.4rem 0 0; }
.qkey { margin-top: 1.2rem; }
.qkeyhead { font-variant: small-caps; letter-spacing: 0.08em; margin-bottom: 0.3rem; }

/* interactive figures */
.body > figure.widget { clear: right; }
.body > figure.widget.wide { max-width: calc(var(--col) + var(--gut) + var(--note)); }
.wmount { font-family: et-book, Palatino, Georgia, serif; }

@media (max-width: 1040px) {
  details.real[open], .body > figure.widget.wide { max-width: var(--col); }
  .rbody > figure.wide, .rbody > figure.listing, .rbody > .output, .rbody > figure.widget { max-width: 100%; }
}
@media print {
  details.real, details.real[open] { max-width: 100% !important; margin: 1.2rem 0 1.4rem; }
  details.real > summary { background: none; border: none; padding: 0; display: block; }
  details.real > summary::before { content: none; }
  .rtag { margin-right: 0.5rem; }
  .rbody { margin-left: 0; padding-left: 0.9rem; }
  .rbody > *, .rbody > figure.wide, .rbody > figure.listing { max-width: 100% !important; }
  .qopts { list-style: upper-alpha; padding-left: 1.4rem; display: block; }
  .qopts > li { margin: 0.15rem 0; }
  .quiz .qlist > li.q { break-inside: avoid; margin-bottom: 1rem; }
}

/* the tuning board (Chapter 5) */
.tn { border: 1px solid var(--rule); border-radius: 8px; background: #fdfcf6; padding: 1rem 1.1rem 1.1rem; }
.tn-hint { font-size: 1.05rem; color: var(--muted); margin: 0 0 0.5rem; }
.tn-presets { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.9rem; }
.tn-preset, .tn-nb { font: inherit; font-size: 0.98rem; line-height: 1.2; color: var(--ink); background: #f3efe1;
  border: 1px solid var(--rule); border-radius: 999px; padding: 0.32rem 0.75rem; cursor: pointer; }
.tn-preset:hover, .tn-nb:hover { border-color: #b9b39c; }
.tn-nb.on { background: #e8590c; border-color: #e8590c; color: #fff; }
.tn-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 1rem; align-items: start; }
.tn-sliders { display: grid; gap: 0.55rem; }
.tn-row { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr) 2.6rem; align-items: center; gap: 0.6rem; }
.tn-row label, .tn-lab { font-size: 1.02rem; color: var(--soft); }
.tn-row select { grid-column: 2 / 4; font: inherit; font-size: 1rem; padding: 0.2rem 0.3rem; border: 1px solid var(--rule);
  border-radius: 4px; background: #fff; }
.tn-row .tn-n { grid-column: 2 / 4; display: flex; gap: 0.4rem; }
.tn-row input[type=range] { width: 100%; accent-color: #e8590c; }
.tn-val { font: 600 1rem/1 'JetBrains Mono', ui-monospace, monospace; text-align: right; }
.tn-draw { min-width: 0; }
.tn-svg { width: 100%; height: auto; display: block; }
.tn-svg .tn-tile { fill: #f3d9fa; stroke: #9c36b5; stroke-width: 1.6; }
.tn-svg .tn-as, .tn-svg .tn-bs { fill: #fff3bf; stroke: #f08c00; stroke-width: 1.4; }
.tn-svg .tn-warp { fill: none; stroke: #e8590c; stroke-width: 1.2; stroke-dasharray: 4 3; }
.tn-svg .tn-warp0 { fill: #ffe8cc; stroke: #e8590c; stroke-width: 2; }
.tn-svg .tn-grid { stroke: #e8590c; stroke-width: 0.6; stroke-opacity: 0.35; }
.tn-svg .tn-patch { fill: #ffc078; stroke: #e8590c; stroke-width: 1.4; }
.tn-svg .tn-t, .tn-sms .tn-t { font: 15px 'JetBrains Mono', ui-monospace, monospace; fill: #495057; }
.tn-svg .tn-ty { fill: #b35c00; }
.tn-sms .tn-small { font-size: 12px; }
.tn-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: 0.5rem; margin-top: 0.9rem; }
.tn-card { border: 1px solid var(--rule); border-radius: 6px; background: #fff; padding: 0.5rem 0.65rem 0.55rem; }
.tn-card.bad { border-color: #e03131; background: #fdecec; }
.tn-k { font-size: 0.95rem; color: var(--muted); line-height: 1.25; }
.tn-v { font: 600 1.35rem/1.3 'JetBrains Mono', ui-monospace, monospace; color: var(--ink); }
.tn-card.bad .tn-v { color: #c92a2a; }
.tn-note { font-size: 0.92rem; color: var(--soft); line-height: 1.3; }
.tn-smwrap { margin-top: 0.8rem; }
.tn-sms { width: 100%; max-width: 440px; height: auto; display: block; }
.tn-sms .tn-sm { fill: #f1f3f5; stroke: #adb5bd; stroke-width: 0.8; }
.tn-sms .tn-sm.on { fill: #ffc078; stroke: #e8590c; }
.tn-measured { margin-top: 0.9rem; border-top: 1px solid var(--rule); padding-top: 0.6rem; }
.tn-measured > summary { cursor: pointer; font-size: 1.05rem; color: var(--ink); list-style: none; }
.tn-measured > summary::-webkit-details-marker { display: none; }
.tn-measured .rtag { margin-right: 0.4rem; }
.tn-meas-body p { font-size: 1.08rem; margin: 0.55rem 0; max-width: none; }
.tn-meas-body .tn-small { font-size: 0.95rem; color: var(--muted); }
@media (max-width: 1040px) {
  .tn-main { grid-template-columns: 1fr; }
  .tn-draw { max-width: 30rem; margin: 0 auto; width: 100%; }
}
@media (max-width: 600px) {
  .tn-row { grid-template-columns: 9.5rem minmax(0, 1fr) 2.4rem; }
}

/* Chapter 6: the fragment map, the bank counter and the tile board */
.fm, .bb { border: 1px solid var(--rule); border-radius: 8px; background: #fdfcf6; padding: 1rem 1.1rem 1.1rem; }
.fm-hint { font-size: 1.05rem; color: var(--muted); margin: 0 0 0.5rem; }
.fm-presets { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.8rem; }
.fm-preset { font: inherit; font-size: 0.98rem; line-height: 1.2; color: var(--ink); background: #f3efe1;
  border: 1px solid var(--rule); border-radius: 999px; padding: 0.32rem 0.75rem; cursor: pointer; }
.fm-preset:hover { border-color: #b9b39c; }
.fm-main { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.fm-svg { width: 100%; height: auto; display: block; }
.fm-cell { cursor: pointer; }
.fm-cell rect { stroke-width: 0.8; }
.fm-A .fm-cell rect, .fm-B .fm-cell rect { fill: #e7f5ff; stroke: #74c0fc; }
.fm-C .fm-cell rect { fill: #f8f0fc; stroke: #e599f7; }
.fm-cell text { font: 13px 'JetBrains Mono', ui-monospace, monospace; fill: #495057; pointer-events: none; }
.fm-cell.on rect { fill: #ffd8a8; stroke: #e8590c; stroke-width: 1.2; }
.fm-cell.on text { fill: #a33f00; font-weight: 700; }
.fm-cell.hot rect { fill: #e8590c; stroke: #a33f00; }
.fm-cell.hot text { fill: #fff; }
.fm-cell:focus-visible rect { stroke: #1c5d99; stroke-width: 2; }
.fm-lab { font: 12px 'JetBrains Mono', ui-monospace, monospace; fill: #868e96; }
.fm-head { font: italic 17px et-book, Palatino, Georgia, serif; fill: #495057; }
.fm-k, .bb-k, .tb-k { font-size: 0.98rem; color: var(--muted); margin: 0 0 0.35rem; }
.fm-lanes { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0.25rem; margin-bottom: 0.8rem; }
.fm-lane { font: 600 0.85rem/1.6 'JetBrains Mono', ui-monospace, monospace; color: var(--soft); background: #fff;
  border: 1px solid var(--rule); border-radius: 4px; cursor: pointer; padding: 0; }
.fm-lane.on { background: #ffd8a8; border-color: #e8590c; color: #a33f00; }
.fm-lane.main { background: #e8590c; border-color: #a33f00; color: #fff; }
.fm-info p { font-size: 1.08rem; line-height: 1.45; margin: 0.4rem 0; max-width: none; }
.fm-reggrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.3rem; }
.fm-reg { display: flex; gap: 0.5rem; align-items: baseline; border: 1px solid var(--rule); border-radius: 4px;
  background: #fff; padding: 0.2rem 0.45rem; }
.fm-reg.fm-rA, .fm-reg.fm-rB { border-left: 3px solid #74c0fc; }
.fm-reg.fm-rC { border-left: 3px solid #e599f7; }
.fm-rn { font: 700 0.9rem 'JetBrains Mono', ui-monospace, monospace; color: var(--ink); min-width: 1.6rem; }
.fm-rv { font: 0.9rem 'JetBrains Mono', ui-monospace, monospace; color: var(--soft); }
.bb-ctl, .tb-ctl { display: grid; gap: 0.5rem; margin-bottom: 0.8rem; }
.bb-line, .tb-row { display: grid; grid-template-columns: 11rem minmax(0, 1fr); align-items: center; gap: 0.6rem; }
.bb-line .bb-k, .tb-row .tb-k { margin: 0; }
.bb-row, .tb-opts { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.bb-btn { font: inherit; font-size: 0.95rem; line-height: 1.2; color: var(--ink); background: #f3efe1;
  border: 1px solid var(--rule); border-radius: 999px; padding: 0.3rem 0.7rem; cursor: pointer; }
.bb-btn:hover:not(:disabled) { border-color: #b9b39c; }
.bb-btn.on { background: #e8590c; border-color: #e8590c; color: #fff; }
.bb-btn:disabled { opacity: 0.4; cursor: default; }
.bb-slide { display: flex; align-items: center; gap: 0.6rem; }
.bb-slide input[type=range] { flex: 1 1 auto; accent-color: #e8590c; max-width: 16rem; }
.bb-val { font: 600 0.95rem 'JetBrains Mono', ui-monospace, monospace; }
.bb-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.5rem; margin-bottom: 0.8rem; }
.bb-svg { width: 100%; height: auto; display: block; }
.bb-t { font: 11px 'JetBrains Mono', ui-monospace, monospace; fill: #868e96; }
.bb-small { font-size: 10.5px; }
.bb-pn { font-size: 9.5px; fill: #868e96; }
.bb-pn.on { fill: #7a2e00; font-weight: 700; }
.bb-w { stroke: #fffff8; stroke-width: 0.6; }
.bb-w.r0 { fill: #eef1f4; }
.bb-w.r1 { fill: #e2e6ea; }
.bb-w.pad { fill: #f8f9fa; stroke: #adb5bd; stroke-dasharray: 2 2; }
.bb-w.read { fill: #ffc078; }
.bb-w.read.ours { fill: #e8590c; }
.bb-bar { fill: #ffe066; stroke: #f08c00; stroke-width: 0.8; }
.bb-bar.worst { fill: #ffa8a8; stroke: #e03131; }
.bb-measured { margin-top: 0.9rem; border-top: 1px solid var(--rule); padding-top: 0.6rem; }
.bb-measured > summary { cursor: pointer; font-size: 1.05rem; color: var(--ink); list-style: none; }
.bb-measured > summary::-webkit-details-marker { display: none; }
.bb-measured .rtag { margin-right: 0.4rem; }
.bb-meas-body p { font-size: 1.08rem; margin: 0.55rem 0; max-width: none; }
.bb-small2 { font-size: 0.95rem !important; color: var(--muted); }
.tb-main { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.tb-svg { width: 100%; height: auto; display: block; }
@media (max-width: 1040px) {
  .fm-main, .tb-main { grid-template-columns: 1fr; }
  .fm-draw { max-width: 30rem; margin: 0 auto; width: 100%; }
}
@media (max-width: 600px) {
  .bb-line, .tb-row { grid-template-columns: 1fr; gap: 0.25rem; }
}
.tb-svg .tb-small { font-size: 12.5px; }
/* Chapter 6: the tall tiles-within-tiles figure gets most of a page on paper, so its labels stay readable */
@media print { #fig-hierarchy img { max-height: 215mm; } }