/* Figure 2. Exchange and exclusion: two records, the sign under exchange, and the pair state computed entry by entry.
   Every class is prefixed ss2- and every token is scoped to the figure. */
.ss2 {
  --ss-paper: #faf8f3; --ss-ink: #1d1d1b; --ss-body: #2a2926; --ss-soft: #3c3a36; --ss-hair: #8a8a8a;
  --ss-rule: color-mix(in srgb, var(--ss-ink) 16%, var(--ss-paper));
  --ss-faint: color-mix(in srgb, var(--ss-ink) 40%, var(--ss-paper));
  --ss-m: #e6007e; --ss-m-text: #c4006b; --ss-c: #009fe3; --ss-c-text: #0072b5;
  --ss-proved: #0b7a3e; --ss-open: #c8401f;
  --ss-text: "InterVariable", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ss-display: "Inter Display", "InterVariable", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ss-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  margin: 0; padding: clamp(1rem, 2.4vw, 1.75rem); background: var(--ss-paper); color: var(--ss-body);
  border: 1px solid var(--ss-ink); font-family: var(--ss-text); font-weight: 420; line-height: 1.42;
  font-optical-sizing: auto; box-sizing: border-box; position: relative;
}
@media (prefers-color-scheme: dark) {
  .ss2 { --ss-paper: #141413; --ss-ink: #faf8f3; --ss-body: #e9e6df; --ss-soft: #c9c5bc; --ss-hair: #8a8a8a;
    --ss-m: #ff3d9e; --ss-m-text: #ff6fb6; --ss-c: #2bb3f0; --ss-c-text: #2bb3f0; --ss-proved: #3ccf7f; --ss-open: #ff6a3d; }
}
.ss2[data-frame="none"] { border: 0; padding: 0; background: transparent; }
.ss2 *, .ss2 *::before, .ss2 *::after { box-sizing: border-box; }
.ss2-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ss2-math { text-transform: none; letter-spacing: .02em; font-family: var(--ss-mono); }
.ss2-tlabel { margin-bottom: .6rem !important; }
.ss2-label { margin: 0; font: 700 .7rem/1.3 var(--ss-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ss-soft); }
.ss2-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; align-items: baseline;
  padding-bottom: .7rem; margin-bottom: 1rem; border-bottom: 1px solid var(--ss-rule); }
.ss2-title { margin: 0; font: 780 1.15rem/1.15 var(--ss-display); letter-spacing: -.02em; color: var(--ss-ink); }
.ss2[data-header="none"] .ss2-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; padding: 0; border: 0; }

.ss2-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1rem, 2.6vw, 2.4rem); align-items: start; }
.ss2-panel { min-width: 0; }

/* the two records */
.ss2-rec { margin: 0 0 .9rem; }
.ss2-rec .ss2-label { margin-bottom: .2rem; }
.ss2-strip { display: block; width: 100%; height: auto; max-width: 440px; overflow: visible; touch-action: none; user-select: none; -webkit-user-select: none; }
.ss2-strip text { font-family: var(--ss-mono); }
.ss2-axis { stroke: var(--ss-hair); stroke-width: 1; }
.ss2-bar-pos { fill: var(--ss-ink); }
.ss2-bar-neg { fill: var(--ss-m); }
.ss2-bar-pos.ss2-set, .ss2-bar-neg.ss2-set { fill-opacity: .7; }
.ss2-v { fill: var(--ss-ink); font-size: 12px; font-weight: 700; text-anchor: middle; }
.ss2-v.ss2-neg { fill: var(--ss-m-text); }
.ss2-p { fill: var(--ss-soft); font-size: 10px; text-anchor: middle; }
.ss2-coreb { stroke: var(--ss-hair); stroke-width: 1; fill: none; }
.ss2-coret { fill: var(--ss-soft); font-size: 9.5px; }
.ss2-handle { fill: transparent; cursor: ns-resize; }
.ss2-handle:focus { outline: none; }
.ss2-hfocus { fill: none; stroke: none; }
.ss2-handle:focus-visible + .ss2-hfocus, .ss2-hfocus.ss2-on { stroke: var(--ss-c-text); stroke-width: 2; }

.ss2-sw { margin: .3rem 0 0; padding: .8rem 0 0; border-top: 1px solid var(--ss-rule); }
.ss2-seg { display: inline-flex; margin-top: .45rem; border: 1px solid var(--ss-ink); }
.ss2-seg button { appearance: none; border: 0; border-radius: 0; background: transparent; color: var(--ss-ink); cursor: pointer;
  font: 700 .74rem/1 var(--ss-mono); letter-spacing: .1em; text-transform: uppercase; padding: .8rem 1rem; min-height: 44px; }
.ss2-seg button + button { border-left: 1px solid var(--ss-ink); }
.ss2-seg button[aria-checked="true"] { background: var(--ss-ink); color: var(--ss-paper); }
.ss2-seg button:focus-visible, .ss2-ctl button:focus-visible, .ss2-table:focus-visible { outline: 2px solid var(--ss-c-text); outline-offset: 2px; }
.ss2-formula { margin: .7rem 0 0; font: 400 .86rem/1.4 var(--ss-mono); color: var(--ss-ink); }
.ss2-formula .ss2-sg { color: var(--ss-m-text); font-weight: 700; }
.ss2-ctl { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; }
.ss2-ctl button { appearance: none; border: 1px solid var(--ss-ink); border-radius: 0; background: transparent; color: var(--ss-ink);
  font: 700 .7rem/1 var(--ss-mono); letter-spacing: .14em; text-transform: uppercase; padding: .78rem .95rem; min-height: 44px; cursor: pointer; }
.ss2-ctl button.ss2-primary { background: var(--ss-ink); color: var(--ss-paper); }
.ss2-ctl button:hover, .ss2-seg button:hover { background: color-mix(in srgb, var(--ss-ink) 8%, transparent); }
.ss2-ctl button.ss2-primary:hover, .ss2-seg button[aria-checked="true"]:hover { background: color-mix(in srgb, var(--ss-ink) 86%, var(--ss-paper)); }
.ss2-hint { margin: .6rem 0 0; font: 400 .72rem/1.4 var(--ss-mono); color: var(--ss-soft); }

/* the pair table */
.ss2-table { display: block; width: 100%; height: auto; max-width: 470px; overflow: visible; cursor: crosshair; touch-action: pan-y; }
.ss2-table text { font-family: var(--ss-mono); }
.ss2-cell { fill: none; stroke: var(--ss-rule); stroke-width: 1; }
.ss2-diag { fill: none; stroke: var(--ss-ink); stroke-width: 1.1; stroke-dasharray: 3 2; }
.ss2-sq-pos { fill: var(--ss-ink); }
.ss2-sq-neg { fill: var(--ss-m); }
.ss2-zero { fill: var(--ss-faint); }
.ss2-n { font-size: 10.5px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.ss2-n-pos { fill: var(--ss-paper); }
.ss2-n-neg { fill: var(--ss-paper); }
.ss2-n-out { fill: var(--ss-ink); }
.ss2-n-outneg { fill: var(--ss-m-text); }
.ss2-n-zero { fill: var(--ss-soft); font-weight: 400; }
.ss2-hd { fill: var(--ss-soft); font-size: 10px; text-anchor: middle; dominant-baseline: central; }
.ss2-axl { fill: var(--ss-soft); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; }
.ss2-cur { fill: none; stroke: var(--ss-c-text); stroke-width: 2.2; }
.ss2-pend { fill: var(--ss-paper); }

.ss2-out { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .4rem 1.4rem; margin: 1.1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--ss-rule); }
.ss2-big { margin: 0; font-family: var(--ss-display); font-weight: 860; letter-spacing: -.05em; line-height: .86; font-size: clamp(2.6rem, 4.6vw, 3.8rem);
  color: var(--ss-ink); font-variant-numeric: tabular-nums lining-nums; }
.ss2-big.ss2-empty { color: var(--ss-ink); }
.ss2-bigcap { margin: .3rem 0 0; font: 700 .68rem/1.3 var(--ss-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ss-soft); }
.ss2-verdict { margin: 0; font: 700 .78rem/1.3 var(--ss-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ss-ink); padding-bottom: .2rem; }
.ss2-verdict.ss2-empty { color: var(--ss-ink); text-decoration: underline; text-underline-offset: .25em; }
.ss2-read { margin: .7rem 0 0; font-size: .95rem; line-height: 1.38; color: var(--ss-ink); min-height: 2.7em; }
.ss2-cellread { margin: .5rem 0 0; font: 400 .8rem/1.45 var(--ss-mono); color: var(--ss-body); min-height: 2.9em; }
.ss2-status { display: flex; align-items: baseline; gap: .45rem; margin: .55rem 0 0; font-size: .86rem; line-height: 1.38; color: var(--ss-body); }
.ss2-dot { flex: none; display: inline-block; width: .6rem; height: .6rem; background: var(--ss-proved); transform: translateY(.05rem); }
.ss2-dot.ss2-dot-open { background: transparent; border: 2px solid var(--ss-open); }
.ss2-tag { font: 700 .66rem/1 var(--ss-mono); letter-spacing: .14em; text-transform: uppercase; }
.ss2-tag-open { color: var(--ss-open); }
.ss2-tag-proved { color: var(--ss-proved); }
.ss2-key { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: .5rem 0 0; padding: 0; list-style: none; font: 400 .72rem/1.35 var(--ss-mono); color: var(--ss-soft); }
.ss2-key li { display: inline-flex; align-items: center; gap: .4rem; }
.ss2-ksw { display: inline-block; width: .7rem; height: .7rem; background: var(--ss-ink); }
.ss2-ksw.ss2-ksw-neg { background: var(--ss-m); }
.ss2-ksw.ss2-ksw-diag { background: transparent; border: 1px dashed var(--ss-ink); }
.ss2-knum { font: 700 .72rem/1 var(--ss-mono); color: var(--ss-ink); min-width: 1.3rem; text-align: right; }
.ss2-knum.ss2-knum-neg { color: var(--ss-m-text); }
.ss2-knum.ss2-knum-zero { color: var(--ss-soft); font-weight: 400; }
.ss2-ksq { display: inline-block; width: .8rem; height: .8rem; background: color-mix(in srgb, var(--ss-ink) 10%, var(--ss-paper)); }
.ss2-kcur { display: inline-block; width: .8rem; height: .8rem; border: 2px solid var(--ss-c-text); }
.ss2-swnote { margin: .5rem 0 0; font-size: .86rem; line-height: 1.38; color: var(--ss-body); }

.ss2-cap { margin: 1rem 0 0; padding-top: .7rem; border-top: 1px solid var(--ss-rule); font-size: .9rem; line-height: 1.42; color: var(--ss-body); max-width: 62rem; }
.ss2[data-caption="none"] .ss2-cap { display: none; }

@media (max-width: 760px) {
  .ss2-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (forced-colors: active) {
  .ss2 { border-color: CanvasText; }
  .ss2-bar-pos, .ss2-sq-pos { fill: CanvasText; }
  .ss2-bar-neg, .ss2-sq-neg { fill: Highlight; }
  .ss2-v, .ss2-n-out, .ss2-big { fill: CanvasText; color: CanvasText; }
  .ss2-v.ss2-neg, .ss2-n-outneg { fill: Highlight; }
  .ss2-n-pos, .ss2-n-neg { fill: Canvas; }
  .ss2-cell, .ss2-axis, .ss2-coreb { stroke: GrayText; }
  .ss2-diag { stroke: CanvasText; }
  .ss2-cur { stroke: Highlight; }
  .ss2-ksw, .ss2-dot { background: CanvasText; forced-color-adjust: none; }
  .ss2-n-zero { fill: CanvasText; }
  .ss2-ksw.ss2-ksw-neg { background: Highlight; }
  .ss2-seg button[aria-checked="true"] { background: Highlight; color: HighlightText; forced-color-adjust: none; }
  .ss2-ctl button.ss2-primary { background: ButtonText; color: ButtonFace; forced-color-adjust: none; }
}
@media print {
  .ss2 { border-color: #000; background: #fff; color: #000; --ss-paper: #fff; --ss-ink: #000; --ss-body: #000; --ss-soft: #333; }
  .ss2-ctl, .ss2-hint { display: none; }
  .ss2-panel { break-inside: avoid; }   /* the table's header stays with the table */
}
@media (max-width: 600px) {
  .ss2-v { font-size: 15px; }
  .ss2-p { font-size: 13px; }
  .ss2-coret { font-size: 12.5px; }
  .ss2-n { font-size: 12px; }
  .ss2-hd { font-size: 12px; }
}