/* Figure 5. What would break it. Every class is prefixed an5- and every token is scoped to the figure.
   Ink: measured values with their errors, to scale. Green: what the proved statement requires (the square: 0; the square: 1/2).
   Red: a value moved by hand that would break a statement, and the paradoxes that use it. */
.an5 {
  --an-paper: #faf8f3; --an-ink: #1d1d1b; --an-body: #2a2926; --an-soft: #3c3a36; --an-hair: #8a8a8a;
  --an-rule: color-mix(in srgb, var(--an-ink) 16%, var(--an-paper));
  --an-proved: #0b7a3e; --an-owed: #c8401f; --an-on-owed: #ffffff; --an-c: #009fe3; --an-m: #e6007e;
  --an-text: "InterVariable", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --an-display: "Inter Display", "InterVariable", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --an-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  margin: 0; padding: clamp(1rem, 2.4vw, 1.5rem); background: var(--an-paper); color: var(--an-body);
  border: 1px solid var(--an-ink); font-family: var(--an-text); font-weight: 420; line-height: 1.42;
  font-optical-sizing: auto; box-sizing: border-box;
}
@media screen and (prefers-color-scheme: dark) {
  .an5:not(.an5-printing) { --an-paper: #141413; --an-ink: #faf8f3; --an-body: #e9e6df; --an-soft: #c9c5bc; --an-proved: #3fb871; --an-owed: #ff6a3d; --an-on-owed: #141413;
    --an-c: #2bb3f0; --an-m: #ff3d9e; }
}
.an5 *, .an5 *::before, .an5 *::after { box-sizing: border-box; }
.an5 p { margin: 0; }
.an5-head { padding-bottom: .6rem; border-bottom: 1px solid var(--an-rule); margin-bottom: .8rem; }
.an5-label { font: 700 .72rem/1.3 var(--an-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--an-soft); }
.an5-shared { font-size: 1rem; font-weight: 450; line-height: 1.35; color: var(--an-ink); max-width: 44rem; }
.an5-card { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--an-ink); }
.an5-k { font: 700 .64rem/1.3 var(--an-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--an-soft); }
.an5-t { margin: .15rem 0 .3rem; font-family: var(--an-display); font-weight: 780; font-size: 1.2rem; line-height: 1.1; letter-spacing: -.02em; color: var(--an-ink); }
.an5-paper { font-size: .95rem; line-height: 1.4; color: var(--an-ink); max-width: 44rem; }
.an5-ideal { margin-top: .35rem !important; font-size: .86rem; line-height: 1.4; color: var(--an-body); max-width: 44rem; }
.an5-plot { margin-top: .6rem; }
.an5-svg { display: block; overflow: visible; }
.an5-svg .an5-tl { font: 700 10.5px var(--an-mono); fill: var(--an-ink); }
.an5-svg .an5-tx { font: 400 10px var(--an-mono); fill: var(--an-soft); }
.an5-ctl { display: grid; gap: .2rem; margin-top: .5rem; font: 700 .66rem/1.3 var(--an-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--an-soft); }
.an5-range { width: 100%; max-width: 32rem; min-height: 32px; margin: 0; accent-color: var(--an-ink); }
.an5-range:focus-visible { outline: 3px solid var(--an-ink); outline-offset: 2px; }
.an5-status { margin-top: .45rem !important; font-size: .92rem; line-height: 1.4; color: var(--an-body); max-width: 44rem; }
.an5-status b { color: var(--an-ink); font-weight: 680; }
.an5-falls .an5-status b { color: var(--an-owed); }
.an5-used { margin-top: .55rem; }
.an5-ul { font-size: .8rem; line-height: 1.35; color: var(--an-soft); margin-top: .35rem !important; max-width: 44rem; }
.an5-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin: .3rem 0 0; padding: 0; list-style: none; }
.an5-chips li { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .45rem .18rem .2rem; border: 1px solid var(--an-hair);
  font: 600 .74rem/1.2 var(--an-text); color: var(--an-ink); }
.an5-cn { display: inline-flex; align-items: center; justify-content: center; min-width: 1.15rem; height: 1.15rem; font: 700 .62rem/1 var(--an-mono);
  border: 1px solid var(--an-hair); color: var(--an-soft); }
.an5-chips li.on { border-color: var(--an-owed); }
.an5-chips li.on .an5-cn { background: var(--an-owed); border-color: var(--an-owed); color: var(--an-on-owed); }
@media (forced-colors: active) {
  .an5-chips li.on { border-width: 2px; }
  .an5-chips li.on .an5-cn { forced-color-adjust: none; background: CanvasText; color: Canvas; }
}
@media print {
  .an5 { --an-paper: #fff; --an-ink: #000; --an-body: #111; --an-soft: #333; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .an5-svg { max-width: 100%; height: auto; }   /* never wider than the paper: a wider plot would shrink the whole page */
}
/* while printing (the script sets the class from beforeprint to afterprint): the print colours, read by the drawings */
.an5.an5-printing { --an-paper: #fff; --an-ink: #000; --an-body: #111; --an-soft: #333; }