/* Figure 1. The correlation test, running: rounds drawn from the computed weights of one state of the cube.
   Every class is prefixed tb1- and every token is scoped to the figure. */
.tb1 {
  --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-c: #009fe3; --tb-m: #e6007e; --tb-c-text: #0072b5; --tb-m-text: #c4006b; --tb-lost: #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) {
  .tb1 { --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-lost: #ff6a3d; }
}
.tb1 *, .tb1 *::before, .tb1 *::after { box-sizing: border-box; }
.tb1-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.tb1-hide { display: none !important; }
.tb1-label { margin: 0; font: 700 .72rem/1.3 var(--tb-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tb-soft); }
.tb1-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); }
.tb1-live { color: var(--tb-ink); }
.tb1-live::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .45rem; background: var(--tb-m); vertical-align: .05rem; }
.tb1-lede { margin: .8rem 0 0; max-width: 46rem; font-size: 1.08rem; font-weight: 450; line-height: 1.32; color: var(--tb-ink); }
.tb1-view { display: block; width: 100%; height: auto; margin-top: .6rem; overflow: visible; }
.tb1-view text, .tb1-line text, .tb1-zoom text { font-family: var(--tb-mono); font-weight: 700; letter-spacing: .08em; fill: var(--tb-soft);
  paint-order: stroke; stroke: var(--tb-paper); stroke-width: 4px; stroke-linejoin: round; }
.tb1 .tb1-t-ink { fill: var(--tb-ink); }
.tb1 .tb1-t-c { fill: var(--tb-c-text); }
.tb1 .tb1-t-num { font-family: var(--tb-text); font-weight: 650; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.tb1-hair { stroke: var(--tb-hair); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.tb1-rule { stroke: var(--tb-hair); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.tb1-ink { stroke: var(--tb-ink); fill: none; }
.tb1-cy { stroke: var(--tb-c); fill: none; }
.tb1-fill-ink { fill: var(--tb-ink); stroke: none; }
.tb1-dot { fill: var(--tb-paper); stroke: var(--tb-c); stroke-width: 2.5px; vector-effect: non-scaling-stroke; }
.tb1-lostline { stroke: var(--tb-lost); fill: none; stroke-dasharray: 5 4; }
.tb1-lamp { fill: var(--tb-paper); stroke: var(--tb-ink); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.tb1-lamp--on { fill: var(--tb-ink); }
.tb1-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .9fr) minmax(0, 1.25fr); gap: clamp(1rem, 2.5vw, 2rem); margin-top: .9rem; }
.tb1-read { min-width: 0; padding-top: .6rem; border-top: 1px solid var(--tb-rule); }
.tb1-read--main { border-top: 3px solid var(--tb-ink); }
.tb1-num { margin: .2rem 0 0; font-family: var(--tb-display); font-weight: 860; letter-spacing: -.05em; line-height: .9;
  font-size: clamp(2.1rem, 3.5vw, 3.1rem); color: var(--tb-ink); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.tb1-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-c-text); font-variant-numeric: tabular-nums lining-nums; }
.tb1-sub { margin: .4rem 0 0; font: 400 .78rem/1.4 var(--tb-mono); color: var(--tb-soft); font-variant-numeric: tabular-nums; }
.tb1-table { border-collapse: collapse; margin-top: .4rem; width: 100%; font: 400 .78rem/1.2 var(--tb-mono); font-variant-numeric: tabular-nums; }
.tb1-table th, .tb1-table td { padding: .32rem .4rem; text-align: right; border-bottom: 1px solid var(--tb-rule); color: var(--tb-ink); white-space: nowrap; }
.tb1-table thead th { font: 700 .6rem/1.2 var(--tb-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tb-soft); }
.tb1-table th[scope="row"], .tb1-table thead th:first-child { text-align: left; font-weight: 700; }
.tb1-ctl { display: flex; flex-wrap: wrap; align-items: end; gap: .6rem 1rem; margin-top: 1rem; }
.tb1-slider { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem .8rem; align-items: center; flex: 1 1 22rem; max-width: 34rem; }
.tb1-slider .tb1-label { grid-column: 1 / -1; color: var(--tb-ink); }
.tb1-slider input { width: 100%; min-height: 32px; accent-color: var(--tb-ink); }
.tb1-slider output { font: 700 .95rem/1 var(--tb-mono); color: var(--tb-ink); min-width: 3.2rem; text-align: right; font-variant-numeric: tabular-nums; }
.tb1-ctl button { appearance: none; border: 1px solid var(--tb-ink); border-radius: 0; background: transparent; color: var(--tb-ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; min-width: 44px; padding: 0 .8rem;
  font: 700 .66rem/1 var(--tb-mono); letter-spacing: .12em; text-transform: uppercase; }
.tb1-ctl button:hover { background: color-mix(in srgb, var(--tb-ink) 8%, transparent); }
.tb1-ctl button:focus-visible, .tb1-slider input:focus-visible { outline: 2px solid var(--tb-ink); outline-offset: 2px; }
.tb1-ceil { margin-top: 1.1rem; padding-top: .6rem; border-top: 1px solid var(--tb-rule); display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(15rem, 1fr);
  gap: .4rem clamp(1rem, 2.5vw, 2rem); align-items: start; }
.tb1-ceil > .tb1-label { grid-column: 1 / -1; }
.tb1-line, .tb1-zoom { display: block; width: 100%; height: auto; overflow: visible; }
.tb1-cap { margin: 1rem 0 0; max-width: 52rem; font-size: .92rem; line-height: 1.42; color: var(--tb-body); }
.tb1-words { margin: .9rem 0 0; padding-top: .8rem; border-top: 1px solid var(--tb-rule); font-size: 1rem; line-height: 1.4; color: var(--tb-ink);
  font-variant-numeric: tabular-nums; min-height: 2.8em; }
@media (max-width: 900px) {
  .tb1-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tb1-tally { grid-column: 1 / -1; }
  .tb1-ceil { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .tb1-row { grid-template-columns: minmax(0, 1fr); }
  .tb1-table th, .tb1-table td { padding: .3rem .25rem; font-size: .72rem; }
}
@media (forced-colors: active) {
  .tb1 { border-color: CanvasText; }
  .tb1-live::before { background: CanvasText; forced-color-adjust: none; }
  .tb1-ink, .tb1-cy, .tb1-lostline, .tb1-lamp, .tb1-dot { stroke: CanvasText; }
  .tb1-fill-ink, .tb1-lamp--on { fill: CanvasText; }
  .tb1-lamp, .tb1-dot { fill: Canvas; }
  .tb1-lamp--on { fill: CanvasText; }
  .tb1 .tb1-view text, .tb1 .tb1-line text, .tb1 .tb1-zoom text { fill: CanvasText !important; stroke: Canvas; }
}
@media print { .tb1 { background: none; } .tb1-ctl { display: none; } }
.tb1-table td.tb1-c { color: var(--tb-c-text); }
.tb1-key { margin-top: .3rem; }
.tb1-src { fill: var(--tb-paper); stroke: var(--tb-ink); }
.tb1-src--on { fill: var(--tb-ink); }
@media (forced-colors: active) { .tb1-src { stroke: CanvasText; fill: Canvas; } .tb1-src--on { fill: CanvasText; } }
.tb1 .tb1-lampnum { font-family: var(--tb-text); font-weight: 700; letter-spacing: 0; fill: var(--tb-ink); stroke: none; paint-order: normal; font-variant-numeric: tabular-nums; }
.tb1 .tb1-lampnum--on { fill: var(--tb-paper); }
/* forced colours: Chrome forces SVG text to CanvasText over a Canvas backplate, so a lit lamp's number vanished into its
   CanvasText disc (author note 015); the lamps and their numbers keep their own system colours */
@media (forced-colors: active) {
  .tb1 .tb1-lamp, .tb1 .tb1-lampnum { forced-color-adjust: none; }
  .tb1 .tb1-lamp { fill: Canvas; stroke: CanvasText; }
  .tb1 .tb1-lamp--on { fill: CanvasText; }
  .tb1 .tb1-view text.tb1-lampnum { fill: CanvasText !important; stroke: none; }       /* above ".tb1 .tb1-view text" */
  .tb1 .tb1-view text.tb1-lampnum--on { fill: Canvas !important; }
}
@media print {
  .tb1-read, .tb1-table, .tb1-ceil, .tb1-view, .tb1-cap, .tb1-words { break-inside: avoid; }
  .tb1-row { display: block; } .tb1-row > .tb1-read { margin-bottom: .8rem; }
}

/* print: a head or label stays with what follows it (grids that hold labels print as blocks) */
@media print { .tb1-head, p.tb1-label { break-inside: avoid; break-after: avoid; } }

/* a small phone (320 px): the four columns of the tally fit inside the figure */
@media (max-width: 360px) { .tb1 .tb1-read--main .tb1-num { font-size: 1.8rem; } .tb1-table th, .tb1-table td { padding: .3rem .12rem; } .tb1-table td { font-size: .7rem; } .tb1-table thead th { letter-spacing: .03em; } }

/* Figure 2. The diagonal: two arrows of length one, the lengths of their sum and difference, and their total against 2√2.
   Every class is prefixed tb1d- and every token is scoped to the figure. */
.tb1d {
  --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-lost: #c8401f;
  --tb-grey: color-mix(in srgb, var(--tb-ink) 12%, 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) {
  .tb1d { --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-lost: #ff6a3d; }
}
.tb1d *, .tb1d *::before, .tb1d *::after { box-sizing: border-box; }
.tb1d-label { margin: 0; font: 700 .72rem/1.3 var(--tb-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tb-soft); }
.tb1d-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); }
.tb1d-live { color: var(--tb-ink); }
.tb1d-live::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .45rem; background: var(--tb-m); vertical-align: .05rem; }
.tb1d-stage { min-width: 0; padding-top: 1rem; }
.tb1d-reads { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1rem, 2.5vw, 2rem); margin-top: 1rem; }
.tb1d-more { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(1rem, 2.5vw, 2rem); margin-top: 1.25rem; }
.tb1d-view { display: block; width: 100%; height: auto; touch-action: pan-y pinch-zoom; overflow: visible; }
.tb1d-view text { font-family: var(--tb-mono); font-weight: 700; letter-spacing: .08em; fill: var(--tb-soft);
  paint-order: stroke; stroke: var(--tb-paper); stroke-width: 4px; stroke-linejoin: round; }
.tb1d-view .tb1d-t-ink { fill: var(--tb-ink); }
.tb1d-view .tb1d-t-c { fill: var(--tb-c-text); }
.tb1d-view .tb1d-t-m { fill: var(--tb-m-text); }
.tb1d-view .tb1d-t-num { font-family: var(--tb-text); font-weight: 650; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.tb1d-hair { stroke: var(--tb-hair); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.tb1d-rule { stroke: var(--tb-rule); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.tb1d-ink { stroke: var(--tb-ink); fill: none; }
.tb1d-cy { stroke: var(--tb-c); fill: none; }
.tb1d-mg { stroke: var(--tb-m); fill: none; }
.tb1d-fill-ink { fill: var(--tb-ink); stroke: none; }
.tb1d-fill-c { fill: var(--tb-c); stroke: none; }
.tb1d-fill-m { fill: var(--tb-m); stroke: none; }
.tb1d-fill-paper { fill: var(--tb-paper); }
.tb1d-lostline { stroke: var(--tb-lost); fill: none; stroke-dasharray: 5 4; }
.tb1d-handle { cursor: grab; touch-action: none; outline: none; }
.tb1d-handle:active { cursor: grabbing; }
.tb1d-handle .tb1d-hit { fill: transparent; stroke: none; }
.tb1d-handle .tb1d-ring { fill: var(--tb-paper); stroke: var(--tb-ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.tb1d-handle:hover .tb1d-ring { stroke-width: 3; }
.tb1d-handle:focus-visible .tb1d-focus { stroke: var(--tb-ink); stroke-width: 2; stroke-dasharray: 3 3; fill: none; vector-effect: non-scaling-stroke; }
.tb1d-handle .tb1d-focus { stroke: none; fill: none; }
.tb1d-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; margin-top: .6rem; }
.tb1d-ctl button { appearance: none; border: 1px solid var(--tb-ink); border-radius: 0; background: transparent; color: var(--tb-ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; min-height: 36px; min-width: 44px; padding: 0 .7rem;
  font: 700 .66rem/1 var(--tb-mono); letter-spacing: .12em; text-transform: uppercase; }
.tb1d-ctl button:hover { background: color-mix(in srgb, var(--tb-ink) 8%, transparent); }
.tb1d-ctl button:focus-visible { outline: 2px solid var(--tb-ink); outline-offset: 2px; }
.tb1d-ctl .tb1d-angle { margin-left: auto; font: 700 .7rem/1.3 var(--tb-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tb-ink);
  font-variant-numeric: tabular-nums; }
.tb1d-curve { display: block; width: 100%; height: auto; overflow: visible; margin-top: .4rem; }
.tb1d-curve text { font-family: var(--tb-mono); font-weight: 700; letter-spacing: .06em; fill: var(--tb-soft); }
.tb1d-read { min-width: 0; padding-top: .6rem; border-top: 1px solid var(--tb-rule); }
.tb1d-read--main { border-top: 3px solid var(--tb-ink); }
.tb1d-num { margin: .2rem 0 0; font-family: var(--tb-display); font-weight: 860; letter-spacing: -.05em; line-height: .9;
  font-size: clamp(2.1rem, 3.5vw, 3.1rem); color: var(--tb-ink); white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.tb1d-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; }
.tb1d-sub { margin: .35rem 0 0; font: 400 .78rem/1.35 var(--tb-mono); color: var(--tb-soft); font-variant-numeric: tabular-nums; }
.tb1d-sub .tb1d-c { color: var(--tb-c-text); font-weight: 700; }
.tb1d-sub .tb1d-m { color: var(--tb-m-text); font-weight: 700; }
.tb1d-src { margin: .3rem 0 0; font-size: .82rem; line-height: 1.35; color: var(--tb-soft); }
.tb1d-zoom { display: block; width: 100%; height: auto; margin-top: .5rem; overflow: visible; }
.tb1d-zoom text { font-family: var(--tb-mono); font-weight: 700; letter-spacing: .06em; fill: var(--tb-soft); }
.tb1d-table { border-collapse: collapse; margin-top: .55rem; font: 400 .78rem/1 var(--tb-mono); font-variant-numeric: tabular-nums; }
.tb1d-table th { font: 700 .62rem/1.2 var(--tb-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tb-soft); padding: .2rem .3rem; text-align: center; }
.tb1d-table td { width: 2.35rem; height: 1.9rem; text-align: center; color: var(--tb-ink); border: 1px solid var(--tb-rule); }
.tb1d-table td.tb1d-b-l { border-left: 2px solid var(--tb-ink); }
.tb1d-table td.tb1d-b-t { border-top: 2px solid var(--tb-ink); }
.tb1d-table td.tb1d-b-r { border-right: 2px solid var(--tb-ink); }
.tb1d-table td.tb1d-b-b { border-bottom: 2px solid var(--tb-ink); }
.tb1d-table td.tb1d-grey { background: var(--tb-grey); color: var(--tb-soft); }
.tb1d-table td.tb1d-half { font-weight: 700; }
.tb1d-what { margin: .7rem 0 0; font-size: .92rem; line-height: 1.4; color: var(--tb-body); max-width: 50rem; }
.tb1d-note { margin: .45rem 0 0; font-size: .82rem; line-height: 1.38; color: var(--tb-soft); max-width: 24rem; }
.tb1d-words { margin: 1rem 0 0; padding-top: .8rem; border-top: 1px solid var(--tb-rule); font-size: 1rem; line-height: 1.4; color: var(--tb-ink);
  font-variant-numeric: tabular-nums; min-height: 2.8em; }
.tb1d-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 900px) {
  .tb1d-reads { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tb1d-read--main { grid-column: 1 / -1; }
  .tb1d-more { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .tb1d-reads { grid-template-columns: minmax(0, 1fr); }
  .tb1d-ctl .tb1d-angle { margin-left: 0; width: 100%; }
}
@media (forced-colors: active) {
  .tb1d { border-color: CanvasText; }
  .tb1d-live::before { background: CanvasText; forced-color-adjust: none; }
  .tb1d-ink, .tb1d-cy, .tb1d-mg, .tb1d-lostline { stroke: CanvasText; }
  .tb1d-mg { stroke-dasharray: 7 4; }
  .tb1d-fill-ink, .tb1d-fill-c { fill: CanvasText; }
  .tb1d-fill-m { fill: Canvas; stroke: CanvasText; stroke-width: 1.5px; }
  .tb1d .tb1d-view text, .tb1d .tb1d-curve text, .tb1d .tb1d-zoom text { fill: CanvasText !important; stroke: Canvas; paint-order: stroke; }
  .tb1d-sub .tb1d-c, .tb1d-sub .tb1d-m { color: CanvasText; }
  .tb1d-sub .tb1d-m { text-decoration: underline dashed; }
  .tb1d-handle .tb1d-ring { stroke: CanvasText; fill: Canvas; }
  .tb1d-handle:focus-visible .tb1d-focus { stroke: Highlight; }
  .tb1d-table td.tb1d-grey { background: Canvas; background-image: none; color: GrayText; }
}
@media print {
  .tb1d { background: none; }
  .tb1d-ctl { display: none; }
  .tb1d-table td.tb1d-grey { -webkit-print-color-adjust: exact; print-color-adjust: exact; }   /* the grey quarter the note names */
  .tb1d-head { break-inside: avoid; break-after: avoid; }   /* the head row stays with the drawing */
}
.tb1d-hide { display: none !important; }
@media print {
  .tb1d-read, .tb1d-view, .tb1d-curve, .tb1d-table, .tb1d-what { break-inside: avoid; }
}

/* print: a head or label stays with what follows it (grids that hold labels print as blocks) */
@media print { .tb1d-head, p.tb1d-label { break-inside: avoid; break-after: avoid; } }

/* Figure 1 frame: the run (tb1-) above the diagonal (tb1d-), in one bordered module. */
.tb1-combo {
  --tb-paper: #faf8f3; --tb-ink: #1d1d1b; --tb-rule: color-mix(in srgb, var(--tb-ink) 16%, var(--tb-paper));
  margin: 0; padding: clamp(1rem, 2.4vw, 1.75rem); background: var(--tb-paper); border: 1px solid var(--tb-ink); box-sizing: border-box;
}
@media (prefers-color-scheme: dark) { .tb1-combo { --tb-paper: #141413; --tb-ink: #faf8f3; } }
.tb1-combo > .tb1, .tb1-combo > .tb1d { border: 0; padding: 0; background: none; }
.tb1-combo > .tb1d { margin-top: 1.4rem; padding-top: 1rem; border-top: 3px solid var(--tb-ink); }
.tb1-hint { font-size: .9rem; line-height: 1.35; color: var(--tb-body); max-width: 34rem; }
@media (min-width: 901px) { .tb1d-reads--two { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.tb1d-more--one { grid-template-columns: minmax(0, 1fr); }
@media (forced-colors: active) { .tb1-combo { border-color: CanvasText; } .tb1-combo > .tb1d { border-top-color: CanvasText; } }
.tb1d-ctl button[hidden] { display: none; }
.tb1-combo .tb1-row { grid-template-columns: minmax(0, 1.55fr) minmax(0, .85fr) minmax(0, 1.2fr); }
.tb1-combo .tb1-num { font-size: clamp(1.9rem, 3vw, 2.7rem); }
@media (max-width: 900px) { .tb1-combo .tb1-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 560px) { .tb1-combo .tb1-row { grid-template-columns: minmax(0, 1fr); } }