/* ANOVA table practice: a statistics printout. Warm off-white paper, near-black ink, one rust accent. Tables are ruled
   like a journal table (heavy rule above and below, a thin one under the header, no boxes), headings in a book serif,
   every figure in tabular mono. */
:root {
  --bg: #f6f3ec; --paper: #fffdf8; --ink: #211e1a; --muted: #4f4941; --line: #d9d2c4; --line2: #8a8273;
  --accent: #a2401c; --accent-ink: #ffffff; --accent-soft: #f6e4da;
  --insert: #efeadf;
  --ok: #1d6a39; --ok-soft: #e1f1e6; --bad: #a3261b; --bad-soft: #fbe4e1; --warn: #765000; --warn-soft: #f8edd1;
  --head: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --r: 3px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171512; --paper: #201d19; --ink: #ece6dc; --muted: #b9b0a2; --line: #3a352e; --line2: #6f675b;
    --accent: #f0956a; --accent-ink: #26130a; --accent-soft: #3d2418;
    --insert: #2a2621;
    --ok: #82d39f; --ok-soft: #173020; --bad: #ff9b8f; --bad-soft: #3d1f1b; --warn: #efc46a; --warn-soft: #382e15;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.55 var(--sans); }
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 16px; }
a { color: var(--accent); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--paper); padding: 8px 12px; z-index: 9; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--head); line-height: 1.15; font-weight: 700; }

/* hero */
.hero { padding: 22px 0 4px; }
.hero h1 { font-size: clamp(1.75rem, 5vw, 2.6rem); margin: 0 0 8px; letter-spacing: -0.01em; }
.lede { margin: 4px 0 0; max-width: 62ch; color: var(--muted); }
.crumbs { margin: 14px 0 0; }
.crumbs a { font-weight: 600; }

/* setup */
.setup { margin: 14px 0 10px; display: grid; gap: 10px; }
.setup fieldset, .rules .names { border: 0; margin: 0; padding: 0; min-width: 0; }
.setup legend, .rules .names legend { font-weight: 700; margin-bottom: 4px; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: flex; align-items: center; min-height: 44px; padding: 6px 14px; border: 1px solid var(--line2); background: var(--paper); border-radius: var(--r); white-space: nowrap; }
.chip input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: inset 0 -3px 0 var(--accent); }
.chip input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.setgrid { display: grid; gap: 10px 28px; }
@media (min-width: 900px) { .setgrid { grid-template-columns: auto auto; justify-content: start; } }
.setrow { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.inline { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; }
select, input { font: inherit; font-size: 16px; color: var(--ink); background: var(--paper); border: 1px solid var(--line2); border-radius: var(--r); }
select { min-height: 44px; padding: 6px 10px; max-width: 100%; }
.btn { font: inherit; min-height: 44px; padding: 8px 16px; border-radius: var(--r); border: 1px solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; font-weight: 600; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.small { padding: 6px 14px; }
.btn:hover { filter: brightness(0.96); }
.link { font: inherit; background: none; border: 0; color: var(--accent); text-decoration: underline; cursor: pointer; padding: 10px 4px; min-height: 44px; }
.note { margin: 8px 0; padding: 10px 12px; background: var(--warn-soft); border-radius: var(--r); }
#store-note { overflow-wrap: anywhere; }
.note.info { background: var(--paper); border: 1px solid var(--line); }
@media (max-width: 600px) {
  .hero { padding-top: 12px; }
  .lede { display: none; }
    .setup { gap: 6px; margin-top: 8px; }
  .chips { gap: 4px; }
  #levels, #names { display: grid; grid-template-columns: 1fr 1fr; }
  .chip span { padding: 6px 8px; white-space: normal; line-height: 1.2; }
  .sheet { padding: 12px 12px 14px; }
}

/* the sheet */
.sheet { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 18px 16px; margin: 10px 0 18px; }
.sheet:focus { outline: none; }
.sheet-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
.sheet-head h2 { margin: 0; font-size: 1.35rem; }
.code { font-family: var(--mono); letter-spacing: 0.08em; color: var(--accent); }
.lvname { font-family: var(--sans); font-size: 1rem; font-weight: 400; color: var(--muted); }
.score { margin: 0; color: var(--muted); }
.rules { margin: 6px 0 2px; }
.rules summary, .work summary, .recent summary, .faq summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; font-weight: 600; list-style: none; }
.rules summary::-webkit-details-marker, .work summary::-webkit-details-marker, .recent summary::-webkit-details-marker, .faq summary::-webkit-details-marker { display: none; }
.rules summary::before, .work summary::before, .recent summary::before, .faq summary::before { content: ""; flex: none; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; }
.rules[open] > summary::before, .work[open] > summary::before, .recent[open] > summary::before, .faq[open] > summary::before { transform: rotate(90deg); }
.rules ul { margin: 4px 0 8px; padding-left: 20px; max-width: 80ch; }
.rules li { margin: 0 0 4px; }
.rules .names { margin: 4px 0 12px; }
.qs { list-style: none; margin: 0; padding: 0; }
.q { padding: 16px 0 6px; border-top: 2px solid var(--ink); margin-top: 12px; }
.q:first-child { margin-top: 6px; }
.qhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; margin: 0 0 6px; }
.qhead .see { font-weight: 600; }
.q h3 { margin: 0; font-size: 1.25rem; display: flex; gap: 10px; align-items: baseline; }
.qn { font-family: var(--mono); color: var(--accent-ink); background: var(--accent); border-radius: 2px; padding: 0 7px; font-size: 1rem; }
.scen { margin: 0 0 12px; max-width: 75ch; }

/* tables: ruled like a printed results table */
.twrap { max-width: 100%; margin: 0 0 12px; }
table.dt { border-collapse: collapse; font-variant-numeric: tabular-nums; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.dt caption { text-align: left; font-family: var(--head); font-weight: 700; font-size: 1.05rem; padding: 0 0 4px; }
.dt th, .dt td { padding: 6px 10px; text-align: left; vertical-align: middle; font-weight: 400; }
.dt thead th { font-weight: 700; border-bottom: 1px solid var(--ink); vertical-align: bottom; }
.dt .num { text-align: right; font-family: var(--mono); white-space: nowrap; }
.dt thead th.num { font-family: var(--sans); }
.dt tbody th[scope="row"] { font-weight: 600; white-space: nowrap; }
.dt tr.tot th, .dt tr.tot td { border-top: 1px solid var(--line2); }
.dt td.in { padding: 4px 6px; }
.dt td.na { background: none; }
.dt td.kc { font-weight: 700; }
/* the table and the extract side by side when both fit at full width, otherwise the extract goes below */
.pair { display: flex; flex-wrap: wrap; gap: 4px 28px; align-items: flex-start; }
.pair > * { min-width: 0; flex: 0 1 auto; }
@media (max-width: 360px) { table.ft th, table.ft td { padding: 3px 6px; } }

/* the F table extract: an insert from the back of the book */
.xwrap { margin: 0 0 12px; max-width: 100%; }
table.ft { border-collapse: collapse; background: var(--insert); font-variant-numeric: tabular-nums; }
.ft caption { text-align: left; font-family: var(--head); font-weight: 700; font-size: 1.05rem; padding: 0 0 4px; caption-side: top; }
.ft th, .ft td { padding: 3px 8px; text-align: right; }
.ft td { font-family: var(--mono); }
.ft thead th { font-weight: 700; border-bottom: 1px solid var(--line2); }
.ft thead th.d1 { text-align: center; font-weight: 600; color: var(--muted); border-bottom: 0; padding-top: 6px; }
.ft th.al { text-align: left; font-weight: 600; font-family: var(--mono); }
.ft thead th.al { font-family: var(--sans); vertical-align: bottom; }
.ft tr.g th { text-align: left; font-weight: 700; padding-top: 6px; border-top: 1px solid var(--line2); }
.ft tbody:first-of-type tr.g th { border-top: 0; }

input.cell { min-height: 44px; padding: 6px 8px; text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; max-width: 100%; }
input.cell { width: calc(var(--w, 8) * 1ch + 22px); }
select.cell { max-width: min(100%, 30em); }
select.cell.long { width: min(100%, 42em); }
.cell.is-right { border-color: var(--ok); background: var(--ok-soft); box-shadow: inset 0 0 0 1px var(--ok); }
.cell.is-wrong, .cell.is-unread { border-color: var(--bad); background: var(--bad-soft); box-shadow: inset 0 0 0 1px var(--bad); }
.cell.is-close { border-color: var(--warn); background: var(--warn-soft); box-shadow: inset 0 0 0 1px var(--warn); }
.cell.is-own { border-color: var(--warn); border-style: dashed; box-shadow: inset 0 0 0 1px var(--warn); }

/* answers under the table */
.answers { display: grid; gap: 4px; max-width: 880px; }
.arow { display: grid; grid-template-columns: minmax(0, 17em) minmax(0, 1fr); align-items: center; justify-content: start; gap: 4px 16px; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.alab { font-weight: 600; }
.aval { display: inline-flex; align-items: center; gap: 6px; justify-self: start; min-width: 0; max-width: 100%; }
.arow.acon { grid-template-columns: minmax(0, 1fr); }
.asel .aval { display: flex; width: 100%; }
/* a choice: radio buttons with sentences that wrap */
.cwopts { display: flex; align-items: flex-start; gap: 6px; width: 100%; }
.cwopts .mk { align-self: flex-start; margin-top: 12px; }
.opts { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.opts.long { flex-direction: column; }
.opt { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 9px 12px; border: 1px solid var(--line2); border-radius: var(--r); background: var(--paper); cursor: pointer; min-width: 0; }
.opt input.cell { flex: none; width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; padding: 0; border: 0; background: none; box-shadow: none; accent-color: var(--ink); cursor: pointer; }
.opt span { min-width: 0; overflow-wrap: anywhere; }
.opt:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.opts.is-right .opt:has(input:checked) { border-color: var(--ok); background: var(--ok-soft); box-shadow: inset 0 0 0 1px var(--ok); }
.opts.is-wrong .opt:has(input:checked), .opts.is-unread .opt:has(input:checked) { border-color: var(--bad); background: var(--bad-soft); box-shadow: inset 0 0 0 1px var(--bad); }
.opts.is-own .opt:has(input:checked) { border-color: var(--warn); border-style: dashed; }
.opts.is-close .opt:has(input:checked) { border-color: var(--warn); background: var(--warn-soft); box-shadow: inset 0 0 0 1px var(--warn); }
@media (max-width: 640px) { .arow { grid-template-columns: minmax(0, 1fr); } }
.kv { font-family: var(--mono); font-weight: 700; }
.acon .kv { font-family: var(--sans); }

/* tables that do not fit (fit.js measures them; screen only): each row becomes a block, each value labelled with its column */
@media screen {
  .twrap.rows { width: 100%; flex: 1 1 100%; }
  .twrap.rows table, .twrap.rows tbody { display: block; width: 100%; }
  .twrap.rows table.dt { border-bottom: 0; }
  .twrap.rows caption { display: block; }
  .twrap.rows thead { display: none; }
  .twrap.rows tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5em, 1fr)); gap: 4px 16px; padding: 8px 0; border-bottom: 1px solid var(--line2); }
  .twrap.rows tr.tot th, .twrap.rows tr.tot td { border-top: 0; }
  .twrap.rows tbody th[scope="row"] { grid-column: 1 / -1; }
  .twrap.rows th, .twrap.rows td { border: 0; padding: 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; min-width: 0; }
  .twrap.rows th { justify-content: flex-start; font-weight: 700; color: var(--ink); }
  .twrap.rows td::before { content: attr(data-l); font: 600 1rem var(--sans); color: var(--muted); }
  .twrap.rows td.na { display: none; }
  .twrap.rows td.in { flex-wrap: nowrap; }
  .twrap.rows td.in .cw { margin-left: auto; }
}

/* the formula tables in the page text are stacked on narrow screens by CSS alone, so the page never paints wider than
   the screen before fit.js runs or with JavaScript off */
@media screen and (max-width: 560px) {
  .content .twrap { width: 100%; flex: 1 1 100%; }
  .content .twrap table, .content .twrap tbody { display: block; width: 100%; }
  .content .twrap table.dt { border-bottom: 0; }
  .content .twrap caption { display: block; }
  .content .twrap thead { display: none; }
  .content .twrap tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5em, 1fr)); gap: 4px 16px; padding: 8px 0; border-bottom: 1px solid var(--line2); }
  .content .twrap tr.tot th, .content .twrap tr.tot td { border-top: 0; }
  .content .twrap tbody th[scope="row"] { grid-column: 1 / -1; }
  .content .twrap th, .content .twrap td { border: 0; padding: 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; min-width: 0; }
  .content .twrap th { justify-content: flex-start; font-weight: 700; color: var(--ink); }
  .content .twrap td::before { content: attr(data-l); font: 600 1rem var(--sans); color: var(--muted); }
  .content .twrap td.na { display: none; }
  .content .twrap td.in { flex-wrap: nowrap; }
  .content .twrap td.in .cw { margin-left: auto; }
}

/* on wide screens the headers and the given numbers line up with the right edge of the boxes, not of the marks */
@media screen {
  .qs .twrap:not(.rows) .dt.anova td.in .mk { width: 2em; min-width: 0; }
  .qs .twrap:not(.rows) .dt.anova thead th.num, .qs .twrap:not(.rows) .dt.anova td.num:not(.in) { padding-right: calc(10px + 2.2rem); }
}

/* feedback */
.fbwrap { margin: 6px 0; }
.fbl { margin: 4px 0; padding: 0 0 0 2.2em; max-width: 78ch; }
.fb { margin: 4px 0; padding: 6px 10px; border-radius: var(--r); background: var(--bad-soft); max-width: 78ch; }
.fbl .fb::marker { font-weight: 700; }
.fb.right { background: var(--ok-soft); }
.fb.close { background: var(--warn-soft); }
.fb.own { background: var(--paper); border: 1px dashed var(--warn); }
.fb.empty { background: var(--paper); border: 1px solid var(--line); }
.cw { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0; }
.cw > .cell { flex: none; }
.cw > select.cell { flex: 0 1 auto; min-width: 0; }
.dt td.in .cw { display: flex; justify-content: flex-end; }
.mk { flex: none; min-width: 1.5em; font-weight: 700; font-size: 1.1rem; line-height: 1; white-space: nowrap; }
.mn { font-size: 1rem; font-family: var(--mono); }
.mk-right { color: var(--ok); }
.mk-close, .mk-own { color: var(--warn); }
.mk-wrong, .mk-unread { color: var(--bad); }
.qfoot { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 6px 0; }
.work { margin: 4px 0 8px; }
.keyfig { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.kpart { min-width: 0; }
.kh { margin: 8px 0 2px; font-weight: 700; }
.kq { display: none; }
.lcol { min-width: 0; }
.pair > .lcol:has(.twrap.rows) { flex: 1 1 100%; }
.steps { margin: 4px 0 8px; padding-left: 2.6em; font-family: var(--mono); font-size: 1rem; max-width: 86ch; }
.steps li { margin: 3px 0; overflow-wrap: anywhere; }

.sheet-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; padding-top: 10px; border-top: 2px solid var(--ink); }
.confirm { flex-basis: 100%; margin: 0; padding: 10px; background: var(--warn-soft); border-radius: var(--r); }
.save-hint { flex-basis: 100%; margin: 0; color: var(--muted); }

/* print and share */
.share { margin: 0 0 24px; }
.print-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.print-row label { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; flex-wrap: wrap; }
.share-out label { display: grid; gap: 4px; font-weight: 600; }
.share-out input { width: 100%; min-height: 44px; padding: 6px 10px; font-family: var(--mono); }
.recent { margin-top: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 4px 12px; }
.recent ul { list-style: none; margin: 0; padding: 0; }
.recent li { display: flex; justify-content: space-between; gap: 10px; align-items: center; border-top: 1px solid var(--line); padding: 6px 0; }
.recent .when { display: block; color: var(--muted); }
.hint { color: var(--muted); }

/* content */
.content { max-width: 75ch; padding-bottom: 20px; }
.content h2 { font-size: 1.5rem; margin: 28px 0 8px; }
.content .dt { margin: 6px 0 10px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details p { margin: 0 0 12px; }
.sources { color: var(--muted); overflow-wrap: anywhere; }
footer { border-top: 2px solid var(--ink); padding: 18px 0 30px; color: var(--muted); }
.indep, .also { margin: 0 0 10px; }
.sb-footer p { margin: 6px 0; }
.sb-more { line-height: 1.8; }
.sb-more a { color: var(--muted); }
.sb-credit a { color: var(--accent); }

.toast { position: fixed; left: 50%; bottom: 16px; transform: translate(-50%, 140%); background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: var(--r); max-width: min(92vw, 560px); z-index: 20; pointer-events: none; transition: transform 0.2s; }
.toast.on { transform: translate(-50%, 0); }
.toast.top { top: 16px; bottom: auto; transform: translate(-50%, -140%); }
.toast.top.on { transform: translate(-50%, 0); }
@media (max-width: 600px) {
  .toast { left: 8px; right: 8px; bottom: 8px; max-width: none; text-align: center; transform: translateY(140%); }
  .toast.top { top: 8px; bottom: auto; transform: translateY(-140%); }
  .toast.on, .toast.top.on { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }
[hidden] { display: none !important; }
.print-root { display: none; }

/* ---------- print ---------- */
@page { margin: 12mm; }
@media print {
  :root { --ink: #000; --muted: #333; --line: #888; --line2: #444; --paper: #fff; --bg: #fff; --accent: #000; --insert: #fff; }
  body { background: #fff; color: #000; font: 10.5pt/1.35 var(--sans); }
  main, footer, .skip, .toast { display: none !important; }
  .print-root { display: block; }
  .psheet, .pkey { break-after: page; }
  .pkey:last-child, .psheet:last-child { break-after: auto; }
  table.pt { width: 100%; border-collapse: collapse; }
  .pt > thead .prun { font-size: 10pt; color: #333; padding-bottom: 4px; border-bottom: 0.5pt solid #888; }
  .ph { display: flex; justify-content: space-between; align-items: baseline; gap: 6pt 12pt; flex-wrap: wrap; margin-bottom: 4pt; }
  .ph h2 { margin: 4px 0 0; font-size: 15pt; }
  .pmeta { display: flex; gap: 14pt; margin: 0; }
  .prules { margin: 4px 0 6px; padding-left: 14pt; font-size: 10pt; columns: 2; column-gap: 18pt; }
  .prules li { margin: 0 0 2px; break-inside: avoid; }
  .pq, .pk { list-style: none; margin: 0; padding: 0; }
  .pq > li { margin: 0 0 10pt; padding-top: 6pt; border-top: 1.2pt solid #000; break-inside: avoid; }
  .pk > li { margin: 0 0 8pt; padding-top: 4pt; border-top: 1pt solid #000; }
  .kpart { break-inside: avoid; }
  .pk > li:last-child, .pq > li:last-child { margin-bottom: 0; }
  /* the key on paper: the critical values, regions and decisions are in "The test" lines already; only the
     conclusion is listed again */
  .pkey .kpart .answers .arow:not(.acon) { display: none; }
  .pkey .dt th, .pkey .dt td { padding-top: 1pt; padding-bottom: 1pt; }
  .pq h3, .pk h3 { font-size: 12pt; margin: 0 0 3pt; break-after: avoid; }
  .scen { margin: 0 0 5pt; max-width: none; }
  .twrap, .xwrap { break-inside: avoid; margin: 0 0 5pt; }
  .pair { display: flex; flex-wrap: nowrap; gap: 12pt; align-items: flex-start; }
  .pair > .twrap, .pair > .lcol { flex: 0 1 auto; min-width: 0; }
  .pair > .xwrap { flex: none; }
  table.dt { font-size: 10pt; border-top: 1.2pt solid #000; border-bottom: 1.2pt solid #000; }
  .dt caption, .ft caption { font-size: 10pt; padding-bottom: 2pt; }
  .dt th, .dt td { padding: 2pt 7pt; }
  .dt thead th { border-bottom: 0.75pt solid #000; }
  .dt td.in { min-width: 4.5em; height: 22pt; }
  .pblank { display: inline-block; border: 0.75pt solid #000; height: 18pt; vertical-align: middle; }
  table.ft { font-size: 10pt; border: 0.75pt solid #000; }
  .ft th, .ft td { padding: 0.5pt 6pt; }
  .ft tr.g th { border-top: 0.5pt solid #666; padding-top: 2pt; }
  .answers { gap: 0; max-width: none; }
  .arow { display: flex; border-bottom: 0; padding: 0; min-height: 20pt; align-items: flex-end; gap: 8pt; grid-template-columns: none; }
  .arow .aval { margin-left: 0; }
  .arow.asel { display: block; padding-top: 3pt; }
  .psheet .arow.asel .alab::after { content: " (circle one)"; font-weight: 400; color: #333; }
  .popts { margin: 1pt 0 0; padding-left: 16pt; list-style: upper-alpha; columns: 2; column-gap: 14pt; }
  .acon .popts { columns: 1; }
  /* a two-way choice (reject or not) fits on its label's line */
  .arow.asel:has(.popts > li:nth-child(2):last-child) { display: flex; align-items: baseline; gap: 6pt 14pt; flex-wrap: wrap; }
  .popts:has(> li:nth-child(2):last-child) { display: flex; gap: 4pt 22pt; columns: auto; margin: 0; padding-left: 0; list-style-position: inside; }
  .popts li { margin: 0 0 1pt; break-inside: avoid; }
  .keyfig { display: block; }
  .kpart + .kpart { margin-top: 3pt; }
  .kh { margin: 2pt 0 1pt; font-size: 10pt; }
  .steps { font-size: 10pt; margin: 0; padding-left: 26pt; max-width: none; }
  .kq { display: inline; }
  .steps li { margin: 0.5pt 0; }
  .kpart .answers .arow { min-height: 0; display: block; padding: 1pt 0; }
  .kpart .alab::after { content: ":\00a0"; }
  .kpart .aval { display: inline; }
  * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}