/* ── palette ────────────────────────────────────────────────────────
   Dark is the document's own look and the default. Light is a screen
   alternative only: the @media print block below restates every colour
   itself, so paper is identical either way. */
  :root{
    --ground:#061E17;
    --ink:#F1ECD9;    --ink-rgb:241,236,217;
    --panel:#0E3A2C;
    --mint:#7FD8BD;   --mint-rgb:127,216,189;
    --gold:#D9A93F;   --gold-rgb:217,169,63;
  }

  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:var(--ground);color:var(--ink);}
  body{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;font-size:13px;line-height:1.55;padding:26px 14px 60px;}
  .wrap{max-width:980px;margin:0 auto;}
  a{color:var(--mint);text-decoration:none}
  a:hover{text-decoration:underline}
  a:focus-visible{outline:2px solid var(--mint);outline-offset:2px}

  .masthead{border:1.6px solid rgba(var(--ink-rgb),.75);padding:22px 24px 18px;}
  .masthead h1{margin:0;font-size:30px;letter-spacing:4px;font-weight:800;}
  .masthead .sub{margin-top:6px;color:rgba(var(--ink-rgb),.75);font-size:12px;letter-spacing:2px;text-transform:uppercase;}
  .meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
  .tag{border:1px solid rgba(var(--ink-rgb),.5);padding:2px 8px;font-size:10px;letter-spacing:1.5px;color:rgba(var(--ink-rgb),.8);}
  .tag.g{border-color:var(--gold);color:var(--gold);}
  .tag.m{border-color:var(--mint);color:var(--mint);}

  .idx{margin-top:26px;border:1.3px solid rgba(var(--ink-rgb),.55);}
  .idx .cap{padding:10px 16px;border-bottom:1px solid rgba(var(--ink-rgb),.35);font-size:11px;letter-spacing:3px;color:rgba(var(--ink-rgb),.6);font-weight:700;}
  .idx table{width:100%;border-collapse:collapse;}
  .idx td{padding:6.5px 16px;border-top:1px solid rgba(var(--ink-rgb),.16);font-size:12px;}
  .idx tr:first-child td{border-top:0}
  .idx tr:hover td{background:rgba(var(--mint-rgb),.06);}
  .idx tr.grp td{background:rgba(var(--ink-rgb),.05);color:rgba(var(--ink-rgb),.6);font-size:10px;letter-spacing:3px;text-transform:uppercase;font-weight:700;padding:7.5px 16px;border-top:1px solid rgba(var(--ink-rgb),.35);}
  .idx tr.grp:hover td{background:rgba(var(--ink-rgb),.05);}
  .idx tr.grp a{color:inherit}
  /* the part row sits a level above the area row and says so with weight, not
     with a colour of its own: same band, heavier rule, its number in gold. */
  .idx tr.part td{background:rgba(var(--ink-rgb),.11);color:rgba(var(--ink-rgb),.85);font-size:11px;letter-spacing:4px;text-transform:uppercase;font-weight:800;padding:9.5px 16px;border-top:1.6px solid rgba(var(--ink-rgb),.55);}
  .idx tr.part:hover td{background:rgba(var(--ink-rgb),.11);}
  .idx tr.part a{color:inherit}
  .idx tr.part .no{color:var(--gold)}
  .idx tr.part:first-child td{border-top:0}
  /* a part with no sheets in it yet, or one carrying a standing note */
  .pnote{display:block;margin-top:3px;font-size:9.5px;letter-spacing:0;text-transform:none;font-weight:400;color:rgba(var(--ink-rgb),.45);}
  .idx .no{color:rgba(var(--ink-rgb),.5);width:46px}
  .idx .de{color:var(--gold);width:34px;font-weight:700}

  .hoja{border:1.3px solid rgba(var(--ink-rgb),.55);margin-top:26px;padding:16px 20px 20px;}
  .areaband{margin-top:30px;border-bottom:1.6px solid rgba(var(--ink-rgb),.55);padding-bottom:6px;
            font-size:12px;letter-spacing:5px;text-transform:uppercase;font-weight:800;color:var(--gold);}
  .areaband + .hoja{margin-top:14px;}
  /* A part is a framed bar rather than a rule under a word: it has to read as
     a level above the area band that follows it, and the two are adjacent. */
  .partband{margin-top:44px;padding:11px 16px;background:var(--panel);
            border:1.3px solid rgba(var(--ink-rgb),.55);
            display:flex;align-items:baseline;gap:14px;
            font-size:14px;letter-spacing:6px;text-transform:uppercase;font-weight:800;}
  .partband .pn{font-size:9.5px;letter-spacing:3px;font-weight:700;color:var(--gold);flex:none;}
  .partband + .areaband{margin-top:22px;}
  .partband + .hoja{margin-top:14px;}
  .sechead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;border-bottom:1px solid rgba(var(--ink-rgb),.3);padding-bottom:10px;margin-bottom:12px;}
  .des{background:var(--panel);border:1.3px solid var(--ink);padding:2px 9px;font-weight:800;font-size:14px;}
  .sechead h2{margin:0;font-size:16px;letter-spacing:2px;font-weight:800;}
  .aim{color:rgba(var(--ink-rgb),.55);font-size:10px;letter-spacing:2px;text-transform:uppercase;}
  .sheet{margin-left:auto;color:rgba(var(--ink-rgb),.4);font-size:10px;letter-spacing:2px;}
  .lead{margin:0 0 12px;color:rgba(var(--ink-rgb),.85);}

  ol.steps{list-style:none;margin:0;padding:0;}
  ol.steps li{display:flex;gap:10px;padding:6px 0;border-top:1px dashed rgba(var(--ink-rgb),.14);}
  ol.steps li:first-child{border-top:0}
  .id{color:var(--mint);font-weight:700;min-width:38px;}
  .itx{flex:1;color:rgba(var(--ink-rgb),.88);}
  .itx .cont,.lead .cont{display:block;margin-top:8px;}
  .itx .test{display:block;margin-top:3px;color:var(--gold);font-size:11.5px;}
  .itx .note{display:block;margin-top:2px;color:rgba(var(--ink-rgb),.55);font-size:11.5px;}
  .pad{width:13px;height:13px;border:1.4px solid var(--ink);margin-top:3px;flex:none;background:transparent;}
  .pad.done{background:var(--ink);}
  .pad.half{background:linear-gradient(90deg,var(--ink) 50%,transparent 50%);}
  .pad.optl{border-style:dashed;opacity:.75;}
  .chip{display:inline-block;border:1px solid var(--mint);color:var(--mint);font-size:9.5px;letter-spacing:1px;padding:0 5px;margin-left:6px;vertical-align:1px;}
  .chip.g{border-color:var(--gold);color:var(--gold);}
  code{color:var(--mint);background:rgba(var(--mint-rgb),.08);padding:0 4px;}

  table.simple{width:100%;border-collapse:collapse;margin-top:4px;}
  table.simple th{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:rgba(var(--ink-rgb),.55);text-align:left;padding:6px 8px;border-bottom:1px solid rgba(var(--ink-rgb),.4);}
  table.simple td{font-size:12px;color:rgba(var(--ink-rgb),.86);padding:6px 8px;border-bottom:1px solid rgba(var(--ink-rgb),.14);vertical-align:top;}
  table.simple td:first-child{color:var(--ink);font-weight:700;}

  figure{margin:16px 0 4px;}
  figure svg{width:100%;height:auto;display:block;}
  figcaption{margin-top:8px;color:rgba(var(--ink-rgb),.55);font-size:11px;letter-spacing:1px;}
  .legend{color:rgba(var(--ink-rgb),.5);font-size:10.5px;margin-top:2px}
  .legend .m{color:var(--mint)}.legend .g{color:var(--gold)}

  .hito{border:2px solid var(--gold);background:rgba(var(--gold-rgb),.07);color:var(--gold);letter-spacing:2px;font-weight:800;padding:8px 14px;margin:12px 0 4px;font-size:12.5px;}

  .cajetin{margin-top:30px;border:1.6px solid rgba(var(--ink-rgb),.75);}
  .cj{display:flex;border-top:1px solid rgba(var(--ink-rgb),.35);flex-wrap:wrap;}
  .cj:first-child{border-top:0}
  .cj>div{padding:9px 14px;font-size:11px;letter-spacing:1px;color:rgba(var(--ink-rgb),.8);
          flex:1 1 0;min-width:220px}
  .cj>div+div{border-left:1px solid rgba(var(--ink-rgb),.35);}
  .cj .big{font-size:16px;font-weight:800;letter-spacing:3px;color:var(--ink);}
  .cj .gold{color:var(--gold);font-weight:700}

  svg .blk{fill:var(--panel);stroke:var(--ink);stroke-width:1.3;}
  svg .opt{stroke-dasharray:5 4;opacity:.85;}
  svg .t{fill:var(--ink);font-size:13px;font-weight:700;text-anchor:middle;}
  svg .s{fill:rgba(var(--ink-rgb),.72);font-size:10px;text-anchor:middle;}
  svg .li{fill:rgba(var(--ink-rgb),.85);font-size:11px;}
  svg .li10{fill:rgba(var(--ink-rgb),.85);font-size:10px;}
  svg .eye{fill:rgba(var(--ink-rgb),.55);font-size:11px;letter-spacing:3px;font-weight:700;}
  svg .lbl{fill:var(--mint);font-size:9px;text-anchor:middle;}
  svg .plbl{fill:var(--gold);font-size:9px;text-anchor:middle;}
  svg .gtx{fill:var(--gold);font-size:11px;}
  svg .htx{fill:var(--gold);font-size:11px;font-weight:800;letter-spacing:1px;text-anchor:middle;}
  svg .nlbl{fill:var(--ink);font-size:11px;font-weight:700;text-anchor:middle;}
  svg .pw{stroke:var(--gold);stroke-width:3;fill:none;}
  svg .pwd{stroke:var(--gold);stroke-width:1.6;fill:none;stroke-dasharray:5 4;}
  svg .dt{stroke:var(--mint);stroke-width:2;fill:none;}
  svg .dtb{stroke:var(--mint);stroke-width:5;fill:none;}
  svg .dts{stroke:var(--mint);stroke-width:1.6;fill:none;stroke-dasharray:5 4;}
  svg .op{stroke:rgba(var(--ink-rgb),.6);stroke-width:1.6;fill:none;stroke-dasharray:5 4;}
  svg text{font-family:inherit}

  @media (max-width:560px){ .masthead h1{font-size:22px;letter-spacing:2px} .sheet{display:none} }

  /* ── print: the dark ground is dropped by the browser, so everything that
        relied on it for contrast is restated. Pure black for text and frames;
        colour is kept only where it encodes something (figure traces, chips). */

  /* ── multi-page shell ───────────────────────────────────────────────── */
  .shell{display:flex;gap:34px;max-width:1360px;margin:0 auto;align-items:flex-start;}
  .main{flex:1;min-width:0;max-width:980px;}

  /* The sidebar is navigation, not a sheet: it carries no frame and no rules
     between its rows. One hairline divides it from the document, the area
     headings supply the structure the row borders used to, and the only mark
     on a row is the rule that appears at the left of the current one. */
  .side{width:320px;flex:none;position:sticky;top:26px;padding-right:22px;
        border-right:1px solid rgba(var(--ink-rgb),.22);}
  .side .cap{padding:0 0 12px 12px;font-size:10px;letter-spacing:2.5px;color:rgba(var(--ink-rgb),.45);font-weight:700;}
  /* The list scrolls, but its scrollbar is furniture: a hairline in the ink
     colour over no track at all, so it reads as a mark on the page rather than
     as a widget bolted to the side of one. It darkens while the pointer is in
     the sidebar, which is the only time it is aimed at. */
  .side ol{list-style:none;margin:0;padding:0 15px 0 0;max-height:calc(100vh - 120px);overflow-y:auto;
           scrollbar-width:thin;scrollbar-color:rgba(var(--ink-rgb),.16) transparent;}
  .side:hover ol{scrollbar-color:rgba(var(--ink-rgb),.32) transparent;}
  .side ol::-webkit-scrollbar{width:5px}
  .side ol::-webkit-scrollbar-track{background:transparent}
  .side ol::-webkit-scrollbar-thumb{background:rgba(var(--ink-rgb),.16)}
  .side:hover ol::-webkit-scrollbar-thumb{background:rgba(var(--ink-rgb),.32)}
  .side a{display:flex;gap:9px;padding:3.5px 0 3.5px 10px;font-size:11.5px;line-height:1.4;
          color:rgba(var(--ink-rgb),.72);border-left:2px solid transparent;}
  .side a:hover{color:var(--mint);text-decoration:none;border-left-color:rgba(var(--mint-rgb),.45);}
  .side a.here{color:var(--mint);border-left-color:var(--mint);}
  .side .de{color:var(--gold);font-weight:700;flex:none;width:11px;}
  .side a.here .de{color:var(--mint)}
  .side .fg{margin-left:auto;color:rgba(var(--ink-rgb),.3);font-size:9.5px;flex:none}
  .side li.grp{margin-top:15px;padding:0 0 3px 12px;font-size:9.5px;letter-spacing:2.5px;
               text-transform:uppercase;font-weight:700;color:rgba(var(--ink-rgb),.42);}
  /* the part heading carries the rule; the area heading under it does not, so
     the two levels stay distinguishable in a list eleven pixels wide */
  .side li.part{display:flex;gap:8px;margin-top:24px;padding:0 0 5px 0;
                border-bottom:1px solid rgba(var(--ink-rgb),.25);
                font-size:10px;letter-spacing:3px;text-transform:uppercase;
                font-weight:800;color:rgba(var(--ink-rgb),.75);}
  .side .pn{color:var(--gold);font-weight:700;flex:none;width:11px;}
  .side li.part + li.grp{margin-top:9px;}
  /* an empty part is still worth a line: while sheets are being migrated into
     their parts, the empty ones are the state of the migration */
  .side li.none{padding:4px 0 0 12px;font-size:9.5px;font-style:italic;
                color:rgba(var(--ink-rgb),.3);}
  .side li:last-child{margin-top:15px;}

  .masthead h1 a{color:inherit}
  .masthead h1 a:hover{text-decoration:none;color:var(--mint)}
  .pager{display:flex;gap:14px;margin-top:24px;border-top:1px solid rgba(var(--ink-rgb),.3);padding-top:12px;font-size:11.5px;}
  .pager .nx{margin-left:auto;text-align:right}
  .pager b{display:block;color:rgba(var(--ink-rgb),.45);font-size:9.5px;letter-spacing:2px;font-weight:700;text-transform:uppercase}

  /* Narrow: the same list, laid across the top. The dividing hairline turns
     with it, and each area heading takes a full row so the run below it stays
     recognisable as a group. */
  @media (max-width:900px){
    .shell{display:block}
    .side{width:auto;position:static;margin-bottom:26px;padding:0 0 14px;
          border-right:0;border-bottom:1px solid rgba(var(--ink-rgb),.22);}
    .side .cap{padding-left:0}
    .side ol{max-height:none;display:flex;flex-wrap:wrap;column-gap:6px}
    .side li{flex:0 1 auto}
    .side li.grp{flex:1 0 100%;margin-top:12px;padding-left:0}
    .side li.part{flex:1 0 100%;margin-top:18px}
    .side li.none{flex:1 0 100%;padding-left:0}
    .side li:last-child{margin-top:0}
    .side a{padding:3.5px 8px;border-left:0;border-bottom:2px solid transparent}
    .side a:hover{border-bottom-color:rgba(var(--mint-rgb),.45)}
    .side a.here{border-bottom-color:var(--mint)}
  }

  @media print{
    .side,.pager{display:none}
    .shell{display:block}
    .main{max-width:none}
    @page{ margin:14mm; }

    /* ── the trim knobs ──────────────────────────────────────────────────
       Everything below is measured in ems off the body size and follows the
       page on its own. These six lengths do not: two measure against the
       height of the leaf, four against its width. The defaults are the A4 /
       Letter leaf a browser prints on, which is the only case that has to
       work without anyone choosing a trim.

       `tools/pdfs.js` restates them per trim, next to the `@page size` for
       that trim, and its table is where the reasoning for each value lives.
       Nothing else has to change to print on a different leaf. */
    :root{
      --cover-air:80mm;       /* the drop above the masthead on the cover  */
      --cajetin-drop:195mm;   /* the drop above the closing title block    */
      --cj-cell:220px;        /* title block: floor under every cell       */
      --tbl-head:10px;        /* table heads: size, and the tracking below */
      --tbl-head-track:2px;
      --tbl-cell:12px;        /* table cells: size, and the padding below  */
      --tbl-pad:6px 8px;
    }
    .cj>div{ min-width:var(--cj-cell); }
    table.simple th{ font-size:var(--tbl-head); letter-spacing:var(--tbl-head-track); padding:var(--tbl-pad); }
    table.simple td{ font-size:var(--tbl-cell); padding:var(--tbl-pad); }
    html,body{ background:#fff; color:#000; }
    body{ font-size:9.5pt; line-height:1.45; padding:0; }
    .wrap{ max-width:none; }

    /* text → pure black */
    a,.lead,.itx,.itx .cont,.itx .note,.aim,.sheet,.masthead .sub,.idx .cap,.idx .no,.idx td,
    figcaption,.legend,.cj>div,.cj .big,table.simple th,table.simple td,
    table.simple td:first-child{ color:#000; }
    a{ text-decoration:none; }

    /* frames → pure black */
    .masthead,.idx,.hoja,.cajetin{ border-color:#000; }
    .idx .cap,.sechead,table.simple th{ border-bottom-color:#000; }
    .idx tr.grp td{ background:transparent; color:#000; border-top-color:#000; }
    .idx tr.part td{ background:transparent; color:#000; border-top-color:#000; }
    .idx tr.part .no{ color:#6b4a00; }
    .pnote{ color:#000; }
    .areaband{ color:#000; border-bottom-color:#000; break-after:avoid; }
    .partband{ background:transparent; color:#000; border-color:#000; break-after:avoid; }
    .partband .pn{ color:#6b4a00; }
    .cj,.cj>div+div{ border-color:rgba(0,0,0,.6); }
    .idx td{ border-top-color:rgba(0,0,0,.35); }
    table.simple td{ border-bottom-color:rgba(0,0,0,.35); }
    ol.steps li{ border-top-color:rgba(0,0,0,.3); }
    .idx tr:hover td{ background:transparent; }
    .des{ background:#fff; border-color:#000; color:#000; }
    .hito{ background:transparent; border-color:#000; color:#000; }
    .tag{ border-color:#000; color:#000; }
    code{ background:transparent; }
    .pad{ border-color:#000; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    .pad.done{ background:#000; }
    .pad.half{ background:linear-gradient(90deg,#000 50%,transparent 50%); }

    /* colour that carries meaning → darkened, not flattened */
    .idx .de,.itx .test,.tag.g,.chip.g,.cj .gold,.legend .g{ color:#6b4a00; }
    .tag.g,.chip.g{ border-color:#6b4a00; }
    .id,code,.tag.m,.chip,.legend .m{ color:#004a3a; }
    .tag.m,.chip{ border-color:#004a3a; }

    /* diagrams — class-driven */
    svg text{ fill:#000; }
    svg .blk{ fill:#fff; stroke:#000; }
    svg .t,svg .s,svg .li,svg .li10,svg .eye,svg .nlbl{ fill:#000; }
    svg .lbl{ fill:#004a3a; }
    svg .plbl,svg .gtx,svg .htx{ fill:#6b4a00; }
    svg .dt,svg .dtb,svg .dts{ stroke:#004a3a; }
    svg .pw,svg .pwd{ stroke:#6b4a00; }
    svg .op{ stroke:#000; }

    /* diagrams — shapes coloured by presentation attribute */
    svg [fill="#0E3A2C"],svg [fill="rgba(217,169,63,.07)"]{ fill:#fff; }
    svg [fill="#F1ECD9"]{ fill:#000; }
    svg [fill="#7FD8BD"]{ fill:#004a3a; }
    svg [fill="#D9A93F"]{ fill:#6b4a00; }
    svg [stroke="#F1ECD9"]{ stroke:#000; }
    svg [stroke="#7FD8BD"]{ stroke:#004a3a; }
    svg [stroke="#D9A93F"]{ stroke:#6b4a00; }
    svg [stroke="rgba(241,236,217,.35)"],svg [stroke="rgba(241,236,217,.4)"]{ stroke:rgba(0,0,0,.45); }

    /* full.html prints in sections: the masthead is the cover and has the first
       page to itself, page two is left blank behind it the way a title page's
       verso is, the sheet index takes page three, and every part and every area
       opens on a fresh page. Within an area the sheets still run on — the break
       marks the document's structure, it is not one page per sheet, with the one
       exception noted below. */
    /* the cover's air is padding on the column, not a margin on the masthead:
       a margin against the top of a page box is the one browsers are entitled
       to drop */
    body.full .main{ padding-top:var(--cover-air); }
    body.full .coverback{ display:block;height:1px;break-before:page; }
    body.full .idx{ break-before:page; }
    body.full .partband{ break-before:page; }
    body.full .areaband{ break-before:page; }
    /* a part opens a page and its first area follows on the same one: a band
       alone on a leaf is a page spent on six words */
    body.full .partband + .areaband{ break-before:auto; }

    /* seven sheets ask for a page of their own on top of that rule, all for the
       same reason: none of them opens its area, so no band precedes them and
       they would otherwise run on behind the sheet before — X behind H in
       Architecture, S behind C in Power, K behind F in Memory and storage,
       G behind L in the same area, W behind U in Video + audio, Q behind P in
       Project and build, and Z2 behind Z1 in the Appendix. Full edition only;
       the paged edition gives every sheet its own screen already. */
    body.full #sec_x,body.full #sec_s,body.full #sec_k,body.full #sec_g,
    body.full #sec_w,body.full #sec_q,body.full #sec_z2{ break-before:page; }

    /* the title block closes the document on a page of its own, sitting low on
       it. The drop is a spacer block rather than a margin, because a margin
       against the top of a page box is the one browsers may drop — the same
       reason the cover's air is padding on .main. Tune the height here. */
    body.full #content::after{ content:""; display:block; break-before:page; height:var(--cajetin-drop); }
    body.full .cajetin{ break-inside:avoid; }

    /* keep rows, steps and figures from splitting across pages */
    .sechead{ break-after:avoid; }
    ol.steps li,figure,.hito,table.simple tr{ break-inside:avoid; }

    /* ── page numbers ──────────────────────────────────────────────────
       Two pieces of CSS paged media, and **no browser implements either**:
       the print path in Chrome and Firefox has neither `@page` margin boxes
       nor `target-counter()`, and drops both rules without complaint — so
       printing straight from the browser is exactly what it always was. They
       come alive when a formatter is in the loop, against the static file
       `tools/prerender.js` writes. */

    /* the running number, in the bottom margin of every page */
    @page{
      @bottom-center{
        content: counter(page);
        font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
        font-size:8pt; letter-spacing:2px; color:#000;
        vertical-align:top; padding-top:5mm;
      }
    }
    /* the cover is page 1 and does not say so — which keeps every printed
       number equal to the page number a PDF reader shows — and neither does
       the verso behind it, because a number alone on a blank leaf reads as a
       mistake rather than as a folio */
    @page:first{ @bottom-center{ content:none; } }
    @page:nth(2){ @bottom-center{ content:none; } }

    /* In the sheet index, and only there, the page a sheet opens on. **Only
       the sheet rows**: a part or an area opens on the sheet immediately
       below it, so numbering those rows would print the same number twice.
       `tr.part` and `tr.grp` are what tells them apart, and the `attr(href)`
       the counter resolves is the same in-page link full.js already writes
       for every cross-reference. */
    .idx tr:not(.part):not(.grp) td a::after{
      content:" · p. " target-counter(attr(href), page);
      color:#000; white-space:nowrap;
    }
    /* …and with dot leaders where the formatter has them. A declaration it
       cannot parse is dropped whole, so the plain form above is what
       survives rather than nothing at all. */
    .idx tr:not(.part):not(.grp) td a::after{
      content: leader('.') " " target-counter(attr(href), page);
    }
  }

  /* ── docsV3 additions ───────────────────────────────────────────────
     docsV2 carried these as inline style attributes on individual
     elements; here the markdown says nothing about spacing, so the
     rules live with the rest of the sheet. */
  .lead.sub{margin-top:16px;}
  figure + ol.steps{margin-top:14px;}
  .hito + ol.steps{margin-top:10px;}

  /* full.html — the whole document in one scroll */
  .pager .hint{color:rgba(var(--ink-rgb),.6);}
  .coverback{display:none}

  /* renderer states — never seen on a healthy page */
  .status{border:1.3px solid rgba(var(--ink-rgb),.55);margin-top:26px;padding:16px 20px;color:rgba(var(--ink-rgb),.6);letter-spacing:2px;font-size:11px;text-transform:uppercase;}
  .status.err{border-color:var(--gold);color:var(--gold);text-transform:none;letter-spacing:0;font-size:12px;line-height:1.7;}
  .status.err code{color:var(--gold);background:rgba(var(--gold-rgb),.09);}
  @media print{ .status{display:none} }

  /* ── light theme — screen only, so printing never sees it ───────────── */
  @media screen{
    :root[data-theme="light"]{
      --ground:#F5F2E6;
      --ink:#0C2E24;    --ink-rgb:12,46,36;
      --panel:#FFFFFF;
      --mint:#00614B;   --mint-rgb:0,97,75;
      --gold:#7A5400;   --gold-rgb:122,84,0;
    }
    /* diagram shapes that carry their colour as an attribute, not a class —
       the same list the print block has to restate, for the same reason */
    :root[data-theme="light"] svg [fill="#0E3A2C"]{ fill:var(--panel); }
    :root[data-theme="light"] svg [fill="rgba(217,169,63,.07)"]{ fill:rgba(var(--gold-rgb),.07); }
    :root[data-theme="light"] svg [fill="#F1ECD9"]{ fill:var(--ink); }
    :root[data-theme="light"] svg [fill="#7FD8BD"]{ fill:var(--mint); }
    :root[data-theme="light"] svg [fill="#D9A93F"]{ fill:var(--gold); }
    :root[data-theme="light"] svg [stroke="#F1ECD9"]{ stroke:var(--ink); }
    :root[data-theme="light"] svg [stroke="#7FD8BD"]{ stroke:var(--mint); }
    :root[data-theme="light"] svg [stroke="#D9A93F"]{ stroke:var(--gold); }
    :root[data-theme="light"] svg [stroke="rgba(241,236,217,.35)"],
    :root[data-theme="light"] svg [stroke="rgba(241,236,217,.4)"]{ stroke:rgba(var(--ink-rgb),.4); }
  }

  /* ── theme switch — a chip, and gone on paper ───────────────────────── */
  .tools{display:flex;justify-content:flex-end;gap:8px;margin-bottom:10px;}
  .tbtn{font:inherit;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
        color:rgba(var(--ink-rgb),.8);background:transparent;
        border:1px solid rgba(var(--ink-rgb),.5);padding:3px 9px;cursor:pointer;}
  .tbtn:hover{color:var(--mint);border-color:var(--mint);}
  .tbtn:focus-visible{outline:2px solid var(--mint);outline-offset:2px;}
  @media print{ .tools{display:none} }