/* Panel 3, the data: five book titles, the clean-up, the passage count, the pair counts, the mix and the two training rounds. */
.book-row { display: flex; flex-wrap: wrap; gap: 8px; } /* five titles */
.book-row li { padding: 8px 12px; border-radius: 4px 10px 10px 4px; border-left: 5px solid var(--world-tint); background: var(--world-background); font: 600 13px/1.25 var(--display); opacity: var(--r, 1); transform: translate3d(0, calc((1 - var(--r, 1)) * 16px), 0); } /* a book spine */
.clean-compare { display: grid; gap: 8px; } /* messy then clean */
.clean-before { padding: 9px 12px; border-radius: 10px; background: rgb(255 255 255 / 0.06); color: var(--paper-faint); font: 500 12.5px/1.4 var(--mono); text-decoration: line-through; opacity: calc(1 - 0.55 * var(--r, 1)); } /* what is cut out, struck through */
.clean-after { padding: 9px 12px; border-radius: 10px; background: var(--world-background); font: 600 13.5px var(--body); opacity: var(--r, 1); transform: translate3d(0, calc((1 - var(--r, 1)) * 10px), 0); } /* what is left */
.passage-block { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; padding: 14px 16px; border-radius: 12px; background: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.1) 0 18px, transparent 18px 22px), var(--world-background); } /* passages as a row of blocks */
.passage-block b { font: 700 34px/1 var(--display); letter-spacing: -0.02em; } /* the count */
.passage-block span { font: 500 13px var(--mono); } /* what it counts */
.count-bars { display: grid; gap: 7px; } /* pair counts */
.count-bars li { position: relative; } /* each row; only its bar background and its text change, nothing slides, so no number is ever cut at the edge */
.count-bar { position: relative; isolation: isolate; display: block; padding: 8px 12px; border-radius: 10px; font: 500 12px/1.3 var(--mono); color: color-mix(in srgb, var(--paper) calc(var(--r, 1) * 100%), transparent); } /* a bar: text fades in */
.count-bar::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--world-background); transform: scaleX(var(--r, 1)); transform-origin: left; } /* the bar background wipes in from the left */
.count-bar b { display: block; font: 700 20px/1.1 var(--display); } /* the number */
.count-split { display: flex; align-items: stretch; gap: 0; } /* the two branches side by side, widths as true shares of 61,650 */
.count-split .count-bar { flex: none; width: var(--w); min-width: 8px; padding: 0; } /* a branch as wide as its share */
.count-split .kept { padding: 8px 12px; border-radius: 10px 0 0 10px; } /* the training pairs hold their text */
.count-split .held { margin-left: 4px; border-radius: 3px; } /* the held-out pairs, a thin true-size bar */
.count-split .held::before { background: var(--amber); } /* amber instead of violet */
.held-label { flex: 1; min-width: 0; padding-left: 10px; font: 500 12px/1.3 var(--mono); opacity: var(--r, 1); } /* its label sits beside it */
.held-label b { display: block; color: var(--amber); font: 700 20px/1.1 var(--display); } /* its number */
.mix-streams { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } /* two streams that are mixed */
.mix-streams p { padding: 10px 12px; border-radius: 10px; background: rgb(255 255 255 / 0.08); font: 600 13px/1.3 var(--body); opacity: var(--r, 1); transform: translate3d(0, calc((1 - var(--r, 1)) * 12px), 0); } /* each rises in */
.train-steps { display: grid; gap: 8px; } /* the two rounds */
.train-steps li { padding: 10px 14px; border-radius: 12px; border: 1px solid rgb(255 255 255 / 0.2); font-size: 13.5px; line-height: 1.4; opacity: var(--r, 1); transform: translate3d(0, calc((1 - var(--r, 1)) * 14px), 0); } /* one round */
.train-steps b { display: block; color: var(--amber); font: 600 12px var(--mono); letter-spacing: 0.04em; text-transform: uppercase; } /* its name */