/* Figure 3. Break it: keep only "no signalling". The table tested cell by cell, S up to 4, and the largest value one state
   and commuting acts give. Every class is prefixed tb3- and every token is scoped to the figure. */
.tb3 {
  --tb-paper: #faf8f3; --tb-ink: #1d1d1b; --tb-body: #2a2926; --tb-soft: #3c3a36; --tb-hair: #8a8a8a;
  --tb-rule: color-mix(in srgb, var(--tb-ink) 16%, var(--tb-paper));
  --tb-grey: color-mix(in srgb, var(--tb-ink) 10%, var(--tb-paper));
  --tb-c: #009fe3; --tb-m: #e6007e; --tb-c-text: #0072b5; --tb-m-text: #c4006b; --tb-ok: #0b7a3e; --tb-lost: #c8401f;
  --tb-c-tint: color-mix(in srgb, #009fe3 18%, var(--tb-paper)); --tb-m-tint: color-mix(in srgb, #e6007e 16%, var(--tb-paper));
  --tb-text: "InterVariable", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --tb-display: "Inter Display", "InterVariable", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --tb-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  margin: 0; padding: clamp(1rem, 2.4vw, 1.75rem); background: var(--tb-paper); color: var(--tb-body);
  border: 1px solid var(--tb-ink); font-family: var(--tb-text); font-weight: 420; line-height: 1.42;
  font-optical-sizing: auto; box-sizing: border-box;
}
@media (prefers-color-scheme: dark) {
  .tb3 { --tb-paper: #141413; --tb-ink: #faf8f3; --tb-body: #e9e6df; --tb-soft: #c9c5bc; --tb-hair: #8a8a8a;
    --tb-c: #2bb3f0; --tb-m: #ff3d9e; --tb-c-text: #2bb3f0; --tb-m-text: #ff6fb6; --tb-ok: #3fb871; --tb-lost: #ff6a3d;
    --tb-c-tint: color-mix(in srgb, #2bb3f0 26%, var(--tb-paper)); --tb-m-tint: color-mix(in srgb, #ff3d9e 24%, var(--tb-paper)); }
}
.tb3 *, .tb3 *::before, .tb3 *::after { box-sizing: border-box; }
.tb3-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.tb3-hide { display: none !important; }
.tb3-label { margin: 0; font: 700 .72rem/1.3 var(--tb-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tb-soft); }
.tb3-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; align-items: baseline; padding-bottom: .75rem; border-bottom: 1px solid var(--tb-rule); }
.tb3-live { color: var(--tb-ink); }
.tb3-live::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .45rem; background: var(--tb-m); vertical-align: .05rem; }
.tb3-lede { margin: .8rem 0 0; max-width: 46rem; font-size: 1.08rem; font-weight: 450; line-height: 1.32; color: var(--tb-ink); }
.tb3-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(1rem, 3vw, 2.5rem); padding-top: 1rem; }
.tb3-col { min-width: 0; }
.tb3-table { border-collapse: collapse; margin-top: .5rem; font: 400 .85rem/1 var(--tb-mono); font-variant-numeric: tabular-nums; }
.tb3-table th { font: 700 .62rem/1.2 var(--tb-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tb-soft); padding: .25rem .35rem; text-align: center; }
.tb3-table td { min-width: 3.6rem; height: 2.2rem; padding: 0 .3rem; text-align: center; color: var(--tb-ink); border: 1px solid var(--tb-rule); transition: background-color .2s; }
.tb3-table td.tb3-b-l { border-left: 2px solid var(--tb-ink); }
.tb3-table td.tb3-b-t { border-top: 2px solid var(--tb-ink); }
.tb3-table td.tb3-b-r { border-right: 2px solid var(--tb-ink); }
.tb3-table td.tb3-b-b { border-bottom: 2px solid var(--tb-ink); }
.tb3-table td.tb3-on0 { background: var(--tb-c-tint); font-weight: 700; }
.tb3-table td.tb3-on1 { background: var(--tb-m-tint); font-weight: 700; }
.tb3-table--q td { min-width: 3.2rem; height: 1.9rem; font-size: .76rem; }
.tb3-slider { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem .8rem; align-items: center; margin-top: 1rem; max-width: 26rem; }
.tb3-slider .tb3-label { grid-column: 1 / -1; color: var(--tb-ink); }
.tb3-slider input { width: 100%; min-height: 32px; accent-color: var(--tb-ink); }
.tb3-slider input:focus-visible { outline: 2px solid var(--tb-ink); outline-offset: 2px; }
.tb3-slider output { font: 700 .95rem/1 var(--tb-mono); color: var(--tb-ink); min-width: 3rem; text-align: right; font-variant-numeric: tabular-nums; }
.tb3-sum { margin: .8rem 0 0; font: 400 .85rem/1.5 var(--tb-mono); color: var(--tb-ink); font-variant-numeric: tabular-nums; }
.tb3-sum .tb3-label { display: block; }
.tb3-sum b { font-weight: 700; font-size: 1.1rem; }
.tb3-checks { list-style: none; margin: .5rem 0 0; padding: 0; font: 400 .8rem/1.35 var(--tb-mono); font-variant-numeric: tabular-nums; }
.tb3-checks li { padding: .38rem .45rem; border-top: 1px solid var(--tb-rule); color: var(--tb-body); }
.tb3-checks li.tb3-now { outline: 2px solid var(--tb-ink); outline-offset: -2px; }
.tb3-checks .tb3-who { display: block; font-weight: 700; color: var(--tb-ink); }
.tb3-checks li.tb3-ok b { color: var(--tb-ok); }
.tb3-checks li.tb3-bad b { color: var(--tb-lost); }
.tb3-verdict { margin: .7rem 0 0; font-size: .95rem; line-height: 1.4; color: var(--tb-ink); }
.tb3-verdict--big { font-family: var(--tb-display); font-weight: 780; letter-spacing: -.01em; font-size: clamp(1.05rem, 1.7vw, 1.3rem); }
.tb3-verdict.tb3-over { color: var(--tb-lost); }
.tb3-state { margin-top: 1.4rem; padding-top: .8rem; border-top: 3px solid var(--tb-ink); }
.tb3-ruler { position: relative; height: 4.2rem; margin: .8rem .5rem 0; border-bottom: 1px solid var(--tb-hair); }
.tb3-ruler > span { position: absolute; bottom: -1px; }
.tb3-ruler i { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: .35rem; font: 650 .8rem/1 var(--tb-text); font-style: normal; color: var(--tb-soft); white-space: nowrap; }
.tb3-tick { width: 1px; height: .45rem; background: var(--tb-hair); }
.tb3-zone { top: 1rem; height: calc(100% - 1rem); background: var(--tb-grey); border-left: 2px solid var(--tb-ink); }
.tb3-ceil { width: 2px; height: 3rem; background: var(--tb-ink); margin-left: -1px; }
.tb3-ceil i { color: var(--tb-ink); }
.tb3-four { width: 0; height: 3rem; border-left: 2px dashed var(--tb-lost); }
.tb3-mark { width: 0; height: 0; bottom: 1.05rem !important; }
.tb3-mark::before { content: ""; position: absolute; left: -.5rem; top: -1rem; border: .5rem solid transparent; border-top: .75rem solid var(--tb-m); }
.tb3-mark i { top: auto; bottom: 2.2rem; margin: 0; color: var(--tb-m-text); font-weight: 700; white-space: nowrap; }   /* in the ruler's top band, above every line */
.tb3-mark--end i { transform: translateX(calc(-100% + .6rem)); }
.tb3-mark--start i { transform: translateX(-.6rem); }
.tb3-key { margin: 2rem 0 0; font: 400 .78rem/1.35 var(--tb-mono); color: var(--tb-soft); }
.tb3-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.5rem); margin-top: 1rem; }
.tb3-num { margin: .25rem 0 0; font-family: var(--tb-display); font-weight: 860; letter-spacing: -.05em; line-height: .9;
  font-size: clamp(2rem, 3.4vw, 2.8rem); color: var(--tb-ink); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.tb3-sub { margin: .45rem 0 0; font: 400 .8rem/1.4 var(--tb-mono); color: var(--tb-soft); }
.tb3-num2 { margin: .25rem 0 0; font-family: var(--tb-display); font-weight: 820; letter-spacing: -.035em; line-height: 1;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem); color: var(--tb-ink); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.tb3-hkey { margin: .5rem 0 0; max-width: 26rem; font: 400 .74rem/1.45 var(--tb-mono); color: var(--tb-soft); }
.tb3-sw { display: inline-block; width: .95em; height: .95em; margin: 0 .4em 0 0; vertical-align: -.12em; border: 1px solid var(--tb-hair); }
.tb3-sw0 { background: var(--tb-c-tint); }
.tb3-sw1 { background: var(--tb-m-tint); }
.tb3-sw1 { margin-left: .2em; }
@media (prefers-reduced-motion: reduce) { .tb3-hkey { display: none; } }
.tb3-cap { margin: 1rem 0 0; max-width: 52rem; font-size: .92rem; line-height: 1.42; color: var(--tb-body); }
@media (max-width: 820px) {
  .tb3-grid, .tb3-pair { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .tb3-table td { min-width: 2.7rem; font-size: .74rem; }
}
@media (prefers-reduced-motion: reduce) { .tb3-table td { transition: none; } }
@media (forced-colors: active) {
  .tb3 { border-color: CanvasText; }
  .tb3-live::before { background: CanvasText; forced-color-adjust: none; }
  .tb3-table td.tb3-on0, .tb3-table td.tb3-on1 { outline: 2px solid Highlight; outline-offset: -3px; }
  .tb3-table td.tb3-on1 { outline-style: dashed; }
  .tb3-sw0, .tb3-sw1 { forced-color-adjust: none; background: Canvas; outline: 2px solid Highlight; outline-offset: -3px; }
  .tb3-sw1 { outline-style: dashed; }
  .tb3-zone { forced-color-adjust: none; background: Canvas; border-left-color: CanvasText;   /* "Shaded: above 2√2" must stay true: a hatch */
    background-image: repeating-linear-gradient(135deg, CanvasText 0 1px, transparent 1px 7px); }
  .tb3-ceil, .tb3-tick { forced-color-adjust: none; background: CanvasText; }
  .tb3-mark::before { forced-color-adjust: none; border-top-color: CanvasText; }
}
@media print { .tb3 { background: none; } .tb3-table, .tb3-checks li, .tb3-pair > div, .tb3-ruler, .tb3-verdict, .tb3-sum { break-inside: avoid; }
  .tb3-tick, .tb3-zone, .tb3-ceil, .tb3-table td.tb3-on0, .tb3-table td.tb3-on1, .tb3-sw { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tb3-grid { display: block; } .tb3-col + .tb3-col { margin-top: 1.5rem; }
  .tb3-col > .tb3-label, .tb3-state > .tb3-label { break-inside: avoid; break-after: avoid; } .tb3-slider { break-inside: avoid; } }

/* print: a head or label stays with what follows it (grids that hold labels print as blocks) */
@media print { .tb3-head, p.tb3-label { break-inside: avoid; break-after: avoid; } .tb3-pair { display: block; } .tb3-pair > * + * { margin-top: 1rem; } }