.px { margin: 0 0 2.2em; padding: 18px 16px 16px; background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: 5px 5px 0 var(--stage, var(--piece-t)); }
@media (min-width: 700px) { .px { padding: 22px 24px 20px; } }
.px-h { margin: 0 0 8px; font: 800 1.2em/1.2 var(--face); font-stretch: 106%; }
.px-lede { margin: 0 0 14px; line-height: 1.55; }
.px-take { margin: 14px 0 0; font-weight: 700; line-height: 1.5; }
.px-src { margin: 10px 0 0; color: var(--ink-soft); font-size: .84rem; line-height: 1.45; }
.px-sub { display: block; margin-top: 4px; color: var(--ink-soft); font-size: .86em; font-weight: 400; line-height: 1.4; }
.px-h3 { margin: 18px 0 6px; font-weight: 800; }
.px .kit { margin: 10px 0 0; }
.px .kit-b { width: 14px; height: 14px; margin-right: 8px; vertical-align: -1px; box-shadow: none; }
.px .kit-blocks .kit-b { width: 36px; height: 36px; margin: 0; }
.px a.px-go { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--work-ink); }
.px q { font-style: italic; }
.px code { font-size: .9em; }

.px-table { margin: 6px 0 0; }
.px-table td { vertical-align: top; }
.px-verdict { font-weight: 800; }
.px-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; color: var(--ink-soft); font-size: .84rem; }
.px-key { display: inline-flex; align-items: center; }

.px-pair { display: grid; gap: 14px; }
@media (min-width: 640px) { .px-pair { grid-template-columns: 1fr 1fr; align-items: start; } }
.px-pair--wells .wc { margin: 0; }
.px-well-t { margin: 0 0 6px; font-weight: 800; font-size: .92em; }

.px-steps, .px-rank, .px-ring, .px-doors { margin: 4px 0 0; padding: 0; list-style: none; }
.px-step, .px-rank-row { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--paper-line); }
.px-step:last-child, .px-rank-row:last-child { border-bottom: 0; }
.px-step > .kit-b, .px-rank-row > .kit-b { margin: 4px 0 0; }
.px-step-t, .px-rank-t { display: grid; gap: 3px; line-height: 1.45; min-width: 0; }
.px-step-t q { display: block; }
.px-when { grid-column: 2; color: var(--number-ink); font-weight: 700; font-size: .88em; }
@media (min-width: 700px) {
  .px-step { grid-template-columns: auto 1fr auto; }
  .px-when { grid-column: 3; text-align: right; white-space: nowrap; }
}
.px-rank { counter-reset: px-rank; }
.px-rank-row--dotted .px-rank-t b { font-weight: 600; color: var(--ink-soft); }
.px-n { color: var(--number-ink); font-size: 1.15em; }
.px-count-line { line-height: 1.5; }

.px-stop { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--paper-line); }
.px-stop:last-child { border-bottom: 0; }
.px-stop-piece { --kit-cell: 10px; justify-self: center; }
.px-stop-t { display: grid; min-width: 0; }

.px-doors { display: grid; gap: 0 18px; }
@media (min-width: 640px) { .px-doors { grid-template-columns: 1fr 1fr; } }
.px-door { padding: 4px 0; border-bottom: 1px solid var(--paper-line); }
.px-door--main a.px-go { color: var(--chosen-ink); }

.px-entry { margin: 0; }
.px-entry-q { padding: 10px 0; border-bottom: 1px solid var(--paper-line); }
.px-entry-q:last-child { border-bottom: 0; }
.px-entry dt { font-weight: 800; }
.px-entry dd { margin: 4px 0 0; line-height: 1.55; }

.px-quote { margin: 0 0 6px; padding: 10px 14px; border-left: 4px solid var(--proof); background: var(--paper); }
.px-quote p { margin: 0; line-height: 1.55; }
.px-quote footer { margin-top: 6px; color: var(--ink-soft); font-size: .86em; }
.px-grade { margin: 14px 0 0; padding: 10px 14px; background: var(--paper); border-radius: var(--radius); line-height: 1.55; }

.px-heat { margin: 14px 0 0; }
.px-heat img { display: block; width: min(100%, 200px); height: auto; border: 2px solid var(--ink); border-radius: var(--radius); }

.px-check { display: grid; gap: 14px; }
@media (min-width: 760px) { .px-check { grid-template-columns: 1fr 1fr; } }
.px-col { margin: 0; padding: 0; border: 0; min-width: 0; counter-reset: px-ticked; }
.px-col legend { padding: 0; margin: 0 0 6px; font-weight: 800; }
.px-col--never legend { color: var(--lesson-ink); }
.px-tick { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; min-height: 44px; margin: 0 0 8px; line-height: 1.35; cursor: pointer; }
.px-tick input, .px-opt input, .px-showall input {
  appearance: none; -webkit-appearance: none; box-sizing: border-box; width: 44px; height: 44px; margin: 0;
  border: 2px solid var(--ink-soft); border-radius: 3px; background: var(--paper); cursor: pointer;
}
.px-tick input:checked { counter-increment: px-ticked; }
.px-col--must input:checked { background: var(--understood); border-color: var(--understood-ink); box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .18), inset 3px 3px 0 rgba(255, 255, 255, .28); }
.px-col--never input:checked { background: var(--lesson); border-color: var(--lesson-ink); box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .18), inset 3px 3px 0 rgba(255, 255, 255, .28); }
.px-tick input:focus-visible, .px-opt input:focus-visible, .px-showall input:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.px-count { margin: 4px 0 0; font-weight: 800; color: var(--number-ink); }
.px-count::after { content: counter(px-ticked) " of " attr(data-n) " ticked"; }
.px-verdict-line { grid-column: 1 / -1; margin: 0; font-weight: 700; }
.px-check:has(.px-col--never input:checked) .px-v--clean, .px-check:not(:has(.px-col--never input:checked)) .px-v--fix { display: none; }
.px-v--fix { color: var(--lesson-ink); }
.px-reset { justify-self: start; min-height: 44px; padding: 0 16px; font: inherit; font-weight: 700; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius); cursor: pointer; }

.px-quiz { margin: 0; }
.px-showall { display: inline-grid; grid-template-columns: 44px auto; gap: 10px; align-items: center; min-height: 44px; margin: 0 0 10px; font-weight: 700; cursor: pointer; }
.px-showall input:checked { background: var(--work); border-color: var(--work-ink); }
.px-qs { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .px-qs { grid-template-columns: 1fr 1fr; } }
.px-qcard fieldset { height: 100%; box-sizing: border-box; margin: 0; padding: 12px; border: 2px solid var(--paper-line); border-radius: var(--radius); background: var(--paper); min-width: 0; }
.px-qcard legend { float: left; width: 100%; margin: 0 0 10px; padding: 0; font-weight: 800; line-height: 1.35; }
.px-qcard legend q { font-style: normal; }
.px-opts { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 480px) { .px-opts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 760px) and (max-width: 1099px) { .px-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.px-opt { position: relative; display: grid; min-height: 44px; cursor: pointer; }
.px-opt input { grid-area: 1 / 1; width: 100%; height: 44px; }
.px-opt span { grid-area: 1 / 1; display: grid; place-items: center; font-weight: 700; font-size: .9em; pointer-events: none; }
.px-opt input:checked { background: var(--found); border-color: var(--found-ink); }
.px-ans { margin-top: 10px; line-height: 1.45; }
.px-ans p { margin: 0 0 4px; }
.px-qcard:not(:has(input:checked)) .px-ans { display: none; }
.px-quiz:has(.px-showall input:checked) .px-ans { display: block; }
@supports not selector(:has(a)) { .px-qcard .px-ans { display: block; } }
.px-table tr.px-total td { border-top: 2px solid currentColor; }
.px-path { overflow-wrap: anywhere; word-break: break-word; font-size: .88em; }
.px-list { margin: 0 0 12px; padding-left: 1.2em; line-height: 1.5; }
.px-list li + li { margin-top: 4px; }
@media (max-width: 699px) {
  .px-table--dense td:not(:first-child) { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .px-table--dense td:not(:first-child)::before { flex: 1 1 auto; font-size: .78em; }
  .px-table--dense td.px-wide { display: block; }
  .px-table--dense td.px-wide::before { font-size: .8em; }
  .px-table--dense tr { padding: 8px 12px; }
}