/* Figure 2. Two paths, one screen. Every class is prefixed an2- and every token is scoped to the figure.
   Cyan: values that add (nothing tells the paths apart). Ink: the apparatus, the mark held in a second register, the reads
   that then add, and what lands, one dot per landing. */
.an2 {
  --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-c: #009fe3; --an-m: #e6007e; --an-c-text: #0072b5; --an-m-text: #c4006b; --an-on-m: #ffffff;
  --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.75rem); 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) {
  .an2:not(.an2-printing) { --an-paper: #141413; --an-ink: #faf8f3; --an-body: #e9e6df; --an-soft: #c9c5bc;
    --an-c: #2bb3f0; --an-m: #ff3d9e; --an-c-text: #2bb3f0; --an-m-text: #ff6fb6; --an-on-m: #141413; }
}
.an2 *, .an2 *::before, .an2 *::after { box-sizing: border-box; }
.an2 p { margin: 0; }
.an2-head { padding-bottom: .75rem; border-bottom: 1px solid var(--an-rule); margin-bottom: .9rem; }
.an2-label { font: 700 .72rem/1.3 var(--an-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--an-soft); }
.an2-live { color: var(--an-ink); margin-right: .6rem; }
.an2-live::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .45rem; background: var(--an-m); vertical-align: .05rem; }
.an2-controls { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; margin-bottom: .8rem; }
.an2-switch { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--an-ink); }
.an2 button { appearance: none; border: 0; border-radius: 0; background: transparent; color: var(--an-ink); cursor: pointer;
  min-height: 40px; padding: .55rem .8rem; font: 700 .66rem/1.25 var(--an-mono); letter-spacing: .1em; text-transform: uppercase; text-align: left; }
.an2-switch button + button { border-left: 1px solid var(--an-ink); }
.an2-switch button[aria-checked="true"][data-mode="add"] { background: var(--an-c); color: #141413; }
.an2-switch button[aria-checked="true"][data-mode="count"] { background: var(--an-ink); color: var(--an-paper); }
.an2-pause { border: 1px solid var(--an-ink) !important; }
.an2 button:hover { background: color-mix(in srgb, var(--an-ink) 8%, transparent); }
.an2 button:focus-visible { outline: 3px solid var(--an-ink); outline-offset: 2px; }
.an2-stage { position: relative; }
.an2-view { display: block; width: 100%; height: 340px; }
.an2-read { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem 1.4rem; align-items: start; margin-top: .8rem;
  padding-top: .8rem; border-top: 1px solid var(--an-ink); }
.an2-say { font-size: 1.02rem; font-weight: 450; line-height: 1.34; color: var(--an-ink); max-width: 40rem; }
.an2-nums { display: flex; gap: 1.4rem; margin: 0; }
.an2-nums div { display: flex; flex-direction: column-reverse; gap: .2rem; }
.an2-nums dt { font: 700 .62rem/1.3 var(--an-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--an-soft); }
.an2-nums dt i { text-transform: none; }
.an2-nums dd { margin: 0; font-family: var(--an-display); font-weight: 860; font-size: 2rem; line-height: .9; letter-spacing: -.04em;
  color: var(--an-ink); font-variant-numeric: tabular-nums lining-nums; min-width: 4.2ch; }
.an2-note { margin-top: .7rem !important; font: 400 .84rem/1.45 var(--an-text); color: var(--an-body); max-width: 46rem; }
.an2 i { font-style: italic; }
.an2-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 620px) {
  .an2-read { grid-template-columns: minmax(0, 1fr); }
  .an2-switch { display: flex; width: 100%; }
  .an2-switch button { flex: 1 1 50%; }
}
@media (forced-colors: active) {
  .an2-switch button[aria-checked="true"] { background: Highlight !important; color: HighlightText !important; forced-color-adjust: none; }
}
@media print {
  .an2 { --an-paper: #fff; --an-ink: #000; --an-body: #111; --an-soft: #333; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .an2-view { height: auto !important; }   /* keeps its drawn proportions at the paper's width */
  .an2-controls { display: none; }
}
/* while printing (the script sets the class from beforeprint to afterprint): the print colours, read by the drawings */
.an2.an2-printing { --an-paper: #fff; --an-ink: #000; --an-body: #111; --an-soft: #333; }