/* The Digital Textbook: the contents page and the chapter pages built by
   scripts/textbook/build.py from OpenStax's source. The first part is the
   site's own tokens and masthead, the same block every page carries inline,
   here once for twenty-one pages; the rest is the book's own dress. */
@font-face{
  font-family:'Flux';
  src:url('../fonts/Flux-Regular.woff2') format('woff2');
  font-weight:400 700; font-display:swap;
}

:root{
  --paper:#FFFFFF;
  --ink:#111111;
  --ink-60:#5A5A5A;
  --ink-35:#A9A9A9;
  --hair:#111111;
  --quiet:#8A8A8A;

  --font-brand:'Flux','Afacad Flux',sans-serif;
  --font-serif:'Newsreader',Georgia,serif;
  --font-display:'Prata',Georgia,serif;

  --wrap:1880px;
  --gap:14px;


}
:root[data-theme="dark"]{
  --paper:#111111;
  --ink:#FFFFFF;
  --ink-60:#A9A9A9;
  --ink-35:#5A5A5A;
  --hair:#FFFFFF;
  --quiet:#8A8A8A;


}

*{ box-sizing:border-box; margin:0; padding:0; }
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--font-serif); font-size:1rem; line-height:1.62;
  font-optical-sizing:auto; -webkit-font-smoothing:antialiased;
  margin:0 0 3rem;
}
::selection{ background:var(--ink); color:var(--paper); }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
a{ color:var(--ink); }
svg{ display:block; }
button{ font:inherit; color:inherit; }

.wrap{ max-width:var(--wrap); margin:0 auto;
  padding-left:clamp(14px,2.5vw,48px); padding-right:clamp(14px,2.5vw,48px); }

/* masthead, shared with the rest of the site */
.masthead{ text-align:center; padding:clamp(26px,4vw,44px) 0 0; }
.masthead .brand{ font-size:clamp(1.55rem,4.6vw,2.8rem); }
.brand{
  display:inline-flex; align-items:baseline; gap:.36em;
  font-family:var(--font-brand); font-weight:500;
  line-height:1; letter-spacing:.01em; color:var(--ink); text-decoration:none;
}
@media (hover: hover){ .brand:hover{ text-decoration:none; } }
.brand .mark{ width:1em; height:1em; flex:none; }
.nav-row{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:.3rem clamp(1rem,2.6vw,2rem);
  padding:clamp(16px,2.6vw,26px) 0 clamp(14px,2.2vw,20px);
}
.nav-row a{
  font-family:var(--font-brand); font-weight:500; font-size:.74rem;
  letter-spacing:.3em; text-transform:uppercase; color:var(--ink); text-decoration:none;
}
@media (hover: hover){ .nav-row a:hover{ text-decoration:underline; text-underline-offset:3px; } }
.nav-row a[aria-current]{ border-bottom:2px solid var(--ink); padding-bottom:2px; }
.theme-toggle{
  font-family:var(--font-brand); font-weight:500; font-size:.66rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink);
  background:none; border:1px solid var(--hair); cursor:pointer;
  padding:.28rem .6rem; display:inline-flex; align-items:center; gap:.42rem;
}
@media (hover: hover){ .theme-toggle:hover{ background:var(--ink); color:var(--paper); } }
.theme-toggle .th-dot{
  width:.66rem; height:.66rem; border:1px solid currentColor; border-radius:50%;
  background:linear-gradient(90deg, currentColor 0 50%, transparent 50% 100%);
}

.title-strip{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:.5rem 1.3rem; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
  padding:.8rem 1rem; margin-bottom:var(--gap); text-align:center;
}
.title-strip .name{
  font-family:var(--font-display); font-size:1.35rem;
  font-weight:400; line-height:1.05; letter-spacing:.02em; margin:0;
}
.title-strip .anno{
  font-family:var(--font-serif); font-style:italic;
  font-size:.88rem; color:var(--ink-60);
}

.lede{
  font-family:var(--font-serif); font-size:1.02rem; line-height:1.6;
  margin:0 0 calc(var(--gap) * 1.6);
}


/* ── the book ── */
/* the book stands well in from the edges of the window: about a twelfth
   of the width each side on a desk, a thumb's width on a phone */
.tb{ padding:0 clamp(1.5rem, 8vw, 10rem) 3rem; }
@media (max-width:760px){ .tb{ padding-left:1rem; padding-right:1rem; } }
.tb .title-strip{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center;
  gap:.5rem 1.3rem; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); padding:.8rem 1rem;
  margin-bottom:var(--gap); text-align:center;
}
.tb .title-strip .name{ font-family:var(--font-display); font-size:1.35rem; font-weight:400; line-height:1.15; letter-spacing:.02em; margin:0; }
.tb .title-strip .anno{ font-family:var(--font-serif); font-style:italic; font-size:.88rem; color:var(--ink-60); }
.tb .lede{ font-family:var(--font-serif); font-size:1.02rem; line-height:1.6; margin:0 0 calc(var(--gap) * 1.4); }
.tb .ck{
  display:block; font-family:var(--font-brand); font-weight:500; font-size:.52rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ink-60);
}
.tb-tools{ display:flex; align-items:center; gap:.6rem; margin:0 0 var(--gap); }
.tb-spacer{ flex:1; }
.tb-btn, .tb-back{
  font-family:var(--font-brand); font-weight:500; font-size:.62rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink); background:none; border:1px solid var(--hair);
  padding:.32rem .6rem; cursor:pointer; text-decoration:none;
}
@media (hover: hover){ .tb-btn:hover, .tb-back:hover{ background:var(--ink); color:var(--paper); } }

/* ── the contents ── */
.tb-toc{ margin:0; }
.tb-ch{ border:1px solid var(--hair); margin-bottom:8px; background:var(--paper); }
.tb-ch > summary{
  display:grid; grid-template-columns:2.4rem minmax(0,1fr) auto; align-items:baseline; gap:.6rem;
  padding:.7rem .9rem; cursor:pointer; list-style:none;
}
.tb-ch > summary::-webkit-details-marker{ display:none; }
.tb-chn{ font-family:var(--font-brand); font-weight:500; font-size:.9rem; letter-spacing:.06em; color:var(--ink-60); }
.tb-cht{ font-family:var(--font-display); font-size:1.08rem; line-height:1.2; }
.tb-chc{ font-family:var(--font-brand); font-weight:500; font-size:.52rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-60); }
.tb-chc::after{ content:" +"; }
.tb-ch[open] .tb-chc::after{ content:" \2212"; }
@media (hover: hover){ .tb-ch > summary:hover .tb-cht{ text-decoration:underline; text-underline-offset:3px; } }
.tb-ch-body{ padding:0 clamp(.7rem, 2.5vw, 2.4rem) 1rem; }
.tb-blurb{ font-family:var(--font-serif); font-style:italic; font-size:.9rem; color:var(--ink-60); margin:0 0 .6rem; }
.tb-secs{ list-style:none; margin:0; padding:0; }
.tb-secs li{ border-top:1px solid var(--ink-35); }
.tb-secs a{ display:grid; grid-template-columns:3.2rem 1fr; gap:.5rem; padding:.42rem 0; font-family:var(--font-serif); font-size:.98rem; text-decoration:none; color:var(--ink); }
@media (hover: hover){ .tb-secs a:hover{ text-decoration:underline; text-underline-offset:3px; } }
.tb-num{ font-family:var(--font-brand); font-weight:500; font-size:.72rem; letter-spacing:.08em; color:var(--ink-60); }
.tb-open{ display:inline-block; margin-top:.7rem; font-family:var(--font-brand); font-weight:500; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--ink); }

/* ── a chapter ── */
.tb-sec{ border:1px solid var(--hair); margin:0 0 8px; background:var(--paper); }
.tb-sec > summary{
  display:grid; grid-template-columns:3.4rem minmax(0,1fr) auto; align-items:baseline; gap:.6rem;
  padding:.7rem .9rem; cursor:pointer; list-style:none;
}
.tb-sec > summary::-webkit-details-marker{ display:none; }
.tb-sec > summary::after{ content:"+"; font-family:var(--font-brand); font-size:.9rem; color:var(--ink-60); }
.tb-sec[open] > summary::after{ content:"\2212"; }
.tb-sec-title{ font-family:var(--font-display); font-size:1.08rem; line-height:1.2; }
@media (hover: hover){ .tb-sec > summary:hover .tb-sec-title{ text-decoration:underline; text-underline-offset:3px; } }
.tb-body{ padding:.2rem clamp(1rem, 3vw, 3.5rem) 1.4rem; font-family:var(--font-serif); font-size:1.04rem; line-height:1.64; }
.tb-loose .tb-chn{ min-width:0; }
.tb-body p{ margin:0 0 .9rem; }
.tb-body h3{ font-family:var(--font-display); font-weight:400; font-size:1.2rem; line-height:1.2; margin:1.6rem 0 .6rem; }
.tb-body h4{ font-family:var(--font-display); font-weight:400; font-size:1.05rem; line-height:1.25; margin:1.3rem 0 .5rem; }
.tb-body h5{ font-family:var(--font-brand); font-weight:500; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-60); margin:1.1rem 0 .4rem; }
.tb-body ul, .tb-body ol{ margin:0 0 .9rem; padding-left:1.4rem; }
.tb-body li{ margin:.2rem 0; }
.tb-body a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--ink-35); }
@media (hover: hover){ .tb-body a:hover{ text-decoration-color:var(--ink); } }
.tb-term{ font-weight:600; }
.tb-body blockquote{ margin:1rem 0 1rem 1rem; padding-left:1rem; border-left:2px solid var(--ink-35); font-style:italic; }
.tb-body math{ font-size:1.05em; }
/* learning objectives, summaries, key terms, references, practice */
.tb-lo{ border:1px solid var(--ink-35); padding:.7rem .9rem .4rem; margin:.9rem 0 1.2rem; }
.tb-lo p{ margin-bottom:.4rem; }
.tb-lo ul{ margin-bottom:.4rem; }
.tb-summary, .tb-terms{ border-top:1px solid var(--ink-35); margin-top:1.6rem; padding-top:.2rem; }
.tb-inline{ line-height:1.9; }
.tb-inline > span{ display:inline-block; border:1px solid var(--ink-35); padding:0 .45rem; margin:0 .25rem .3rem 0; font-size:.88rem; }
.tb-refs{ border-top:1px solid var(--ink-35); margin-top:1.4rem; padding-top:.5rem; }
.tb-refs > summary{ cursor:pointer; list-style:none; font-family:var(--font-brand); font-weight:500; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-60); }
.tb-refs > summary::-webkit-details-marker{ display:none; }
.tb-refs > summary::after{ content:" +"; }
.tb-refs[open] > summary::after{ content:" \2212"; }
.tb-refs-body{ margin-top:.6rem; font-size:.88rem; line-height:1.5; color:var(--ink-60); overflow-wrap:anywhere; }
.tb-refs-body p{ margin-bottom:.55rem; }
.tb-refs-body p:target, .tb-refs-body p.lit{ color:var(--ink); }
/* a citation, and the entry it opens under the line */
.tb-cite{
  font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer;
  text-decoration:underline dotted; text-decoration-color:var(--ink-35); text-underline-offset:3px;
}
@media (hover: hover){ .tb-cite:hover{ text-decoration-style:solid; text-decoration-color:var(--ink); } }
.tb-cite[aria-expanded="true"]{ text-decoration-style:solid; text-decoration-color:var(--ink); }
.tb-cite-pop{
  display:block; position:relative; margin:.5rem 0 .8rem; padding:.5rem 2rem .55rem .8rem;
  border:1px solid var(--ink-35); font-size:.86rem; line-height:1.5; color:var(--ink-60); overflow-wrap:anywhere;
}
.tb-cite-pop a{ color:inherit; }
.tb-cite-x{
  position:absolute; top:.2rem; right:.4rem; font:inherit; font-size:1rem; line-height:1;
  color:var(--ink-60); background:none; border:0; padding:.2rem .3rem; cursor:pointer;
}
@media (hover: hover){ .tb-cite-x:hover{ color:var(--ink); } }
.tb-practice{ border:1px dashed var(--ink-35); padding:.6rem .9rem; margin-top:1.2rem; font-size:.92rem; }
.tb-video{ border:1px solid var(--ink-35); margin:.6rem 0 1.2rem; }
.tb-video > summary{
  cursor:pointer; list-style:none; padding:.55rem .9rem;
  font-family:var(--font-brand); font-weight:500; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-60);
}
.tb-video > summary::-webkit-details-marker{ display:none; }
.tb-video > summary::before{ content:"\25B6\00a0\00a0"; font-size:.7rem; }
.tb-video[open] > summary::before{ content:"\25BC\00a0\00a0"; }
@media (hover: hover){ .tb-video > summary:hover{ color:var(--ink); } }
.tb-video-box{ aspect-ratio:16 / 9; max-width:960px; margin:0 .9rem; background:#000; }
.tb-video-box iframe{ display:block; width:100%; height:100%; border:0; }
.tb-video-note{ font-size:.82rem; color:var(--ink-60); padding:.5rem .9rem .7rem; margin:0 !important; }
/* figures, notes and tables */
.tb-fig{ margin:1.2rem 0 1.4rem; }
.tb-fig img{ display:block; width:100%; max-width:1100px; height:auto; border:1px solid var(--ink-35); background:#fff; }
.tb-fig figcaption{ font-size:.88rem; line-height:1.5; color:var(--ink-60); margin-top:.5rem; }
.tb-fig figcaption b{ color:var(--ink); font-weight:600; }
.tb-splash{ margin:.4rem 0 1.4rem; }
.tb-splash img{ border:none; }
.tb-note{ border:1px solid var(--hair); padding:.8rem 1rem .3rem; margin:1.2rem 0 1.4rem; background:color-mix(in srgb, var(--ink) 4%, transparent); }
.tb-note h4{ margin:.15rem 0 .6rem; }
.tb-table{ overflow-x:auto; margin:1.2rem 0 1.4rem; }
.tb-table table{ border-collapse:collapse; width:100%; font-size:.92rem; }
.tb-table caption{ text-align:left; font-size:.88rem; color:var(--ink-60); padding:0 0 .4rem; caption-side:top; }
.tb-table th, .tb-table td{ border:1px solid var(--ink-35); padding:.4rem .6rem; text-align:left; vertical-align:top; }
.tb-table th{ font-family:var(--font-brand); font-weight:500; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; }
/* previous and next */
.tb-pn{ display:flex; justify-content:space-between; gap:var(--gap); margin:calc(var(--gap) * 1.4) 0 0; }
.tb-pn a{ flex:1; border:1px solid var(--hair); padding:.7rem .9rem; text-decoration:none; color:var(--ink); font-family:var(--font-display); font-size:1rem; line-height:1.2; }
.tb-pn a.tb-next{ text-align:right; }
@media (hover: hover){ .tb-pn a:hover{ background:var(--ink); color:var(--paper); } .tb-pn a:hover .ck{ color:var(--paper); opacity:.7; } }
.tb-attrib{
  font-family:var(--font-serif); font-style:italic; font-size:.85rem; color:var(--ink-60);
  border-top:1px solid var(--ink-35); padding-top:1rem; margin:2rem 0 0;
}
.tb-attrib a{ color:inherit; }
/* the target of a link lights up briefly so the eye finds it */
.tb :target{ animation:tb-flash 1.6s ease-out 1; }
@keyframes tb-flash{ from{ background:color-mix(in srgb, var(--ink) 14%, transparent); } to{ background:transparent; } }
@media (max-width:760px){
  .tb-body{ padding:.2rem .8rem 1rem; font-size:.98rem; }
  .tb-sec > summary, .tb-ch > summary{ padding:.6rem .7rem; grid-template-columns:2.6rem minmax(0,1fr) auto; }
  .tb-ch-body{ padding-left:.6rem; padding-right:.6rem; }
  .tb-secs a{ grid-template-columns:2.8rem 1fr; }
  .tb-pn{ flex-direction:column; }
  .tb-pn a.tb-next{ text-align:left; }
}
@media (prefers-reduced-motion:reduce){ .tb :target{ animation:none; } }

/* a wide table scrolls inside its column rather than pushing the page out sideways */
.tb .tb-body table{ display:block; max-width:100%; overflow-x:auto; }
/* a long address in a caption or a reference breaks rather than widening the page on a phone */
.tb .tb-body, .tb-fig figcaption, .tb-refs-body{ overflow-wrap:anywhere; }

/* ── the central dogma, drawn in code (scripts/textbook/figures) ────────
   The drawing on the left, the book's four notes on the right; a note or a
   part of the drawing lights its step and dims the rest. Every ink is the
   page's own, so the figure follows the theme. */
.tb-dogma{
  position:relative;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,300px); gap:var(--gap);
  align-items:start; border:1px solid var(--ink-35); padding:var(--gap); background:var(--paper);
}
.tb-dogma-svg{ width:100%; height:auto; display:block; }
.tb-dogma-notes{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.tb-dogma-note{
  display:grid; grid-template-columns:1.6rem 1fr; gap:.6rem; align-items:start; width:100%; text-align:left;
  background:none; border:1px solid var(--ink-35); padding:.55rem .65rem; color:var(--ink);
  font-family:var(--font-serif); font-size:.93rem; line-height:1.45; cursor:pointer;
  transition:border-color .15s, background .15s;
}
.tb-dogma-note .n{
  font-family:var(--font-brand); font-weight:600; font-size:.72rem; width:1.6rem; height:1.6rem;
  border:1px solid var(--ink); border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
}
.tb-dogma-note b{ font-weight:600; color:var(--ink); }
.tb-dogma-note.lit, .tb-dogma-note:hover{ border-color:var(--ink); background:color-mix(in srgb, var(--ink) 7%, transparent); }
.tb-dogma-credit{ grid-column:1 / -1; font-family:var(--font-serif); font-style:italic; font-size:.82rem; color:var(--ink-60); margin:0; }
@media (max-width:760px){ .tb-dogma{ grid-template-columns:minmax(0,1fr); } }
.tb-dogma .dg-cell{ fill:color-mix(in srgb, var(--ink) 4%, transparent); stroke:var(--ink-35); stroke-width:1.2; }
.tb-dogma .dg-er path{ fill:none; stroke:var(--ink-35); stroke-width:6; stroke-linecap:round; opacity:.45; }
.tb-dogma .dg-nucleus{ fill:color-mix(in srgb, var(--ink) 7%, transparent); }
.tb-dogma .dg-envelope{ fill:none; stroke:var(--ink-60); stroke-width:2.2; }
.tb-dogma .dg-pores{ stroke-dasharray:18 7; stroke-width:1.6; }
.tb-dogma .dg-tag{ font-family:var(--font-serif); font-style:italic; font-size:15px; fill:var(--ink-60); }
.tb-dogma .dg-label{ font-family:var(--font-brand); font-weight:600; font-size:20px; letter-spacing:.04em; fill:var(--ink); }
.tb-dogma .dg-verb{ font-family:var(--font-brand); font-weight:500; font-size:17px; fill:var(--ink-60); }
.tb-dogma .dg-end{ font-family:var(--font-brand); font-size:11px; fill:var(--ink-60); }
.tb-dogma .dg-strand text{ font-family:var(--font-brand); font-weight:600; font-size:13px; fill:#FFFFFF; text-anchor:middle; }
.tb-dogma .b-A rect{ fill:#3E9E4F; }
.tb-dogma .b-T rect{ fill:#D9486E; }
.tb-dogma .b-G rect{ fill:#E0912A; }
.tb-dogma .b-C rect{ fill:#3B7DD8; }
.tb-dogma .b-U rect{ fill:#8B5BC9; }
.tb-dogma .dg-rungs path{ stroke:var(--ink-35); stroke-width:1.5; }
.tb-dogma .dg-flow{ fill:none; stroke:var(--ink); stroke-width:2.6; }
.tb-dogma .dg-arrowhead{ fill:var(--ink); }
.tb-dogma .dg-chain{ stroke:var(--ink-60); stroke-width:3; }
.tb-dogma .dg-aa circle{ fill:var(--paper); stroke:var(--ink); stroke-width:1.6; }
.tb-dogma .dg-aa text{ font-family:var(--font-brand); font-weight:500; font-size:14px; fill:var(--ink); text-anchor:middle; }
.tb-dogma .dg-note{ font-family:var(--font-serif); font-style:italic; font-size:17px; fill:var(--ink-60); }
.tb-dogma .dg-free circle{ fill:var(--ink-60); opacity:.7; }
.tb-dogma .dg-fold{ stroke:none; opacity:.92; }
.tb-dogma .dg-fold-1{ fill:#7DB44B; }
.tb-dogma .dg-fold-2{ fill:#8A4FA8; }
.tb-dogma .dg-fold-3{ fill:#4C7FC2; }
.tb-dogma .dg-step{ transition:opacity .2s; cursor:pointer; }
.tb-dogma:not([data-lit=""]) .dg-step{ opacity:.28; }
.tb-dogma[data-lit="1"] [data-step="1"], .tb-dogma[data-lit="2"] [data-step="2"],
.tb-dogma[data-lit="3"] [data-step="3"], .tb-dogma[data-lit="4"] [data-step="4"]{ opacity:1; }
/* the label that follows the pointer over a drawn figure: what the thing
   under it is called and, where there is one, a line on what it does */
.tb-tip{
  position:absolute; z-index:5; pointer-events:none; max-width:270px;
  padding:.5rem .7rem .55rem; background:var(--paper); color:var(--ink);
  border:1px solid var(--ink); box-shadow:0 10px 28px rgba(0,0,0,.28);
  font-family:var(--font-display); font-size:1rem; line-height:1.2;
}
.tb-tip[hidden]{ display:none; }
.tb-tip b{ display:block; font-family:var(--font-display); font-weight:400; font-size:1rem; line-height:1.2; margin-bottom:.25rem; }
.tb-tip span{ display:block; font-family:var(--font-serif); font-size:.86rem; line-height:1.42; color:var(--ink-60); }
.tb-dogma [data-name], .tb-dogma .dg-strand > g{ cursor:help; }
.tb-dogma .dg-hot{ filter:drop-shadow(0 0 3px var(--ink)); }
.tb-dogma .dg-hot rect, .tb-dogma .dg-hot circle{ stroke:var(--ink); stroke-width:1.5; }

/* ── a typical eukaryotic cell, drawn in code (scripts/textbook/figures) ──
   The drawing on the left, a panel on the right. Hovering a part names it
   in a label; a click, or a name in the list, puts its subtitle and
   description in the panel and lights every copy of that part. */
.tb-cell{
  position:relative;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,270px); gap:var(--gap);
  align-items:start; border:1px solid var(--ink-35); padding:var(--gap); background:var(--paper);
}
.tb-cell-fig{ min-width:0; }
.tb-cell-svg{ width:100%; height:auto; display:block; }
.tb-cell-tools{ display:flex; justify-content:flex-end; padding:.5rem 0 0; }
/* the switch: a track and a knob in the page's ink, its box hidden but still focusable */
.tb-switch{ position:relative; display:inline-flex; align-items:center; gap:.55rem; cursor:pointer; user-select:none;
  font-family:var(--font-brand); font-weight:500; font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-60); }
.tb-switch input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; }
.tb-switch-track{ position:relative; flex:none; width:2rem; height:1.1rem; border:1px solid var(--ink-35); border-radius:1rem; transition:background .2s, border-color .2s; }
.tb-switch-track::after{ content:""; position:absolute; top:2px; left:2px; width:calc(1.1rem - 6px); height:calc(1.1rem - 6px); border-radius:50%; background:var(--ink-60); transition:transform .2s, background .2s; }
.tb-switch input:checked + .tb-switch-track{ background:var(--ink); border-color:var(--ink); }
.tb-switch input:checked + .tb-switch-track::after{ transform:translateX(.9rem); background:var(--paper); }
.tb-switch input:focus-visible + .tb-switch-track{ outline:2px solid var(--ink); outline-offset:2px; }
.tb-switch input:checked ~ .tb-switch-text{ color:var(--ink); }
.tb-cell-side{ min-width:0; }
.tb-cell-kicker{ font-family:var(--font-brand); font-weight:500; font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-60); margin:0 0 .35rem; }
.tb-cell-name{ font-family:var(--font-display); font-weight:400; font-size:1.3rem; line-height:1.15; margin:0 0 .3rem; }
.tb-cell-sub{ font-family:var(--font-serif); font-style:italic; font-size:.92rem; color:var(--ink-60); margin:0 0 .6rem; }
.tb-cell-desc{ font-family:var(--font-serif); font-size:.93rem; line-height:1.5; margin:0 0 .9rem; }
.tb-cell-parts{ list-style:none; margin:0; padding:.7rem 0 0; border-top:1px solid var(--ink-35); display:flex; flex-wrap:wrap; gap:.3rem .35rem; }
.tb-cell-parts button{
  font-family:var(--font-brand); font-weight:500; font-size:.56rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); background:none; border:1px solid var(--ink-35); padding:.32rem .5rem; cursor:pointer;
}
.tb-cell-parts button:hover, .tb-cell-parts button.sel{ border-color:var(--ink); background:color-mix(in srgb, var(--ink) 8%, transparent); }
.tb-cell-parts button.sel{ background:var(--ink); color:var(--paper); }
.tb-cell-credit{ grid-column:1 / -1; font-family:var(--font-serif); font-style:italic; font-size:.82rem; color:var(--ink-60); margin:0; }
@media (max-width:760px){ .tb-cell{ grid-template-columns:minmax(0,1fr); } }
.tb-cell [data-part]{ cursor:pointer; transition:opacity .2s; }
/* The drawing is the book's figure, traced, with its colours inline; the labels and their
   leader lines are set here, in the page's ink outside the cell and dark inside it, and stay
   hidden until the switch under the drawing turns them on. */
.tb-cell .c-labels{ opacity:0; pointer-events:none; transition:opacity .25s; }
.tb-cell.show-labels .c-labels{ opacity:1; pointer-events:auto; }
.tb-cell .c-label path{ fill:none; stroke:var(--ink); stroke-width:1.6; }
.tb-cell .c-label .c-lead-in{ stroke:#3B3452; stroke-width:2; }
.tb-cell .c-label circle{ fill:#3B3452; }
.tb-cell .c-label text{ font-family:var(--font-serif); font-size:27px; fill:var(--ink); }
.tb-cell .hot{ filter:drop-shadow(0 0 3px var(--ink)); }
.tb-cell.has-sel [data-part]:not(.sel):not(.c-cyto):not(.c-mem){ opacity:.35; }
.tb-cell .sel{ filter:drop-shadow(0 0 4px var(--ink)) drop-shadow(0 0 10px var(--ink)); }