/* Figure 2. One cube reaches it: Theorem 28 on a cube of four axes, in exact arithmetic.
   Every class is prefixed tb2- and every token is scoped to the figure. */
.tb2 {
  --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-tint: color-mix(in srgb, var(--tb-ink) 5%, var(--tb-paper));
  --tb-c: #009fe3; --tb-m: #e6007e; --tb-c-text: #0072b5; --tb-m-text: #c4006b; --tb-ok: #0b7a3e; --tb-bad: #c8401f;
  --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) {
  .tb2 { --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-bad: #ff6a3d; }
}
.tb2 *, .tb2 *::before, .tb2 *::after { box-sizing: border-box; }
.tb2-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.tb2-label { margin: 0; font: 700 .72rem/1.3 var(--tb-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tb-soft); }
.tb2-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); }
.tb2-live { color: var(--tb-ink); }
.tb2-live::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .45rem; background: var(--tb-m); vertical-align: .05rem; }
.tb2-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(1rem, 3vw, 2.5rem); padding-top: 1rem; }
.tb2-block { min-width: 0; }
.tb2-note, .tb2-legend { margin: .5rem 0 0; font-size: .85rem; line-height: 1.38; color: var(--tb-soft); max-width: 26rem; }
.tb2-grid { border-collapse: collapse; margin-top: .45rem; font: 400 .8rem/1 var(--tb-mono); font-variant-numeric: tabular-nums; }
.tb2-cap { caption-side: top; text-align: left; padding-bottom: .35rem; font: 700 .66rem/1.3 var(--tb-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tb-ink); }
.tb2-grid th { font: 700 .62rem/1 var(--tb-mono); letter-spacing: .06em; color: var(--tb-soft); padding: .25rem .35rem; text-align: center; }
.tb2-grid td { min-width: 3.4rem; height: 2.1rem; padding: 0 .3rem; text-align: center; border: 1px solid var(--tb-rule); color: var(--tb-ink); }
.tb2-grid td.tb2-z { color: color-mix(in srgb, var(--tb-ink) 68%, var(--tb-paper)); }   /* a zero: text, so its own grey (5.6:1 light, 8.5:1 dark), not the hairline */
.tb2-grid td.tb2-neg { color: var(--tb-m-text); font-weight: 700; }
.tb2-grid td.tb2-pos { color: var(--tb-c-text); font-weight: 700; }
.tb2-grid--psi td.tb2-pos { color: var(--tb-ink); }
.tb2-grid td.tb2-hit { outline: 2px solid var(--tb-ink); outline-offset: -2px; }
.tb2-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; margin-top: .5rem; max-width: 30rem; }
.tb2-pick button { appearance: none; border: 1px solid var(--tb-ink); border-radius: 0; background: transparent; color: var(--tb-ink); cursor: pointer;
  display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; min-height: 44px; padding: .55rem .7rem;
  font: 700 .72rem/1 var(--tb-mono); letter-spacing: .12em; text-transform: uppercase; text-align: left; }
.tb2-pick button:hover { background: color-mix(in srgb, var(--tb-ink) 8%, transparent); }
.tb2-pick button[aria-pressed="true"] { background: var(--tb-ink); color: var(--tb-paper); }
.tb2-pick button:focus-visible { outline: 2px solid var(--tb-ink); outline-offset: 2px; }
.tb2-pe { font: 400 .78rem/1 var(--tb-mono); letter-spacing: 0; text-transform: none; }
.tb2-sum { margin-top: 1rem; padding-top: .6rem; border-top: 3px solid var(--tb-ink); }
.tb2-num { margin: .25rem 0 0; font-family: var(--tb-display); font-weight: 860; letter-spacing: -.05em; line-height: .9;
  font-size: clamp(2.1rem, 3.6vw, 3rem); color: var(--tb-ink); font-variant-numeric: tabular-nums lining-nums; }
.tb2-sub { margin: .45rem 0 0; font: 400 .8rem/1.4 var(--tb-mono); color: var(--tb-soft); font-variant-numeric: tabular-nums; }
.tb2-work { margin-top: 1.25rem; padding-top: .8rem; border-top: 1px solid var(--tb-rule); }
.tb2-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: .4rem; }
.tb2-op { margin: 1.4rem 0 0; font: 400 1.4rem/1 var(--tb-text); color: var(--tb-soft); text-align: center; }
.tb2-opword { display: block; max-width: 4.6rem; margin-top: .35rem; font: 700 .6rem/1.25 var(--tb-mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--tb-soft); }
.tb2-e { margin: .7rem 0 0; font: 400 .85rem/1.5 var(--tb-mono); color: var(--tb-ink); font-variant-numeric: tabular-nums; }
.tb2-e .tb2-label { display: block; }
.tb2-e b { font-weight: 700; }
.tb2-acts { margin-top: 1.4rem; padding-top: .8rem; border-top: 1px solid var(--tb-rule); }
.tb2-act { border-top: 1px solid var(--tb-rule); padding: .55rem 0; }
.tb2-act:first-of-type { margin-top: .5rem; }
.tb2-act summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline; min-height: 32px; }
.tb2-act summary:focus-visible { outline: 2px solid var(--tb-ink); outline-offset: 2px; }
.tb2-actname { font: 700 .95rem/1.3 var(--tb-mono); color: var(--tb-ink); }
.tb2-actopen { font: 700 .64rem/1.3 var(--tb-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tb-soft); }
.tb2-actwhat { margin: .4rem 0 .5rem; font-size: .9rem; color: var(--tb-body); max-width: 40rem; }
.tb2-mat { border-collapse: collapse; font: 700 .62rem/1 var(--tb-mono); }
.tb2-mat td { width: 1.15rem; height: 1.15rem; padding: 0; text-align: center; border: 1px solid var(--tb-rule); }
.tb2-mat td.tb2-pos { color: var(--tb-c-text); }
.tb2-mat td.tb2-neg { color: var(--tb-m-text); }
.tb2-checks { list-style: none; margin: .55rem 0 0; padding: 0; font-size: .88rem; }
.tb2-checks li::before { content: ""; display: inline-block; width: .55rem; height: .55rem; margin-right: .5rem; vertical-align: .05rem; }
.tb2-checks li.tb2-ok::before { background: var(--tb-ok); }
.tb2-checks li.tb2-bad::before { background: var(--tb-bad); }
@media (max-width: 760px) {
  .tb2-top { grid-template-columns: minmax(0, 1fr); }
  .tb2-grid td { min-width: 2.6rem; font-size: .72rem; }
  .tb2-mat td { width: .95rem; height: .95rem; font-size: .55rem; }
}
@media (max-width: 420px) {
  .tb2-grid td { min-width: 2.3rem; height: 1.9rem; padding: 0 .15rem; font-size: .66rem; }
  .tb2-op { margin: 0; }
  .tb2-mat td { width: .8rem; height: .8rem; font-size: .5rem; }
}
@media (forced-colors: active) {
  .tb2 { border-color: CanvasText; }
  .tb2-live::before, .tb2-checks li::before { forced-color-adjust: none; background: CanvasText !important; }
  .tb2-grid td.tb2-neg, .tb2-mat td.tb2-neg { text-decoration: underline; }
  .tb2-pick button[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}
.tb2-nocase { text-transform: none; }
@media print { .tb2 { background: none; } .tb2-grid, .tb2-row, .tb2-sum, .tb2-act, .tb2-e { break-inside: avoid; }
  .tb2-pick button[aria-pressed="true"], .tb2-checks li::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tb2-acts > .tb2-label { break-inside: avoid; break-after: avoid; } }

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