/* pair: one question answered twice, without and with an instruction line, side by side. Everything
   but the words that matter is faded, so the difference shows at a glance; a handwritten line under
   each label says why. The "with" side has the orange edge of mark.line-on in the AGENTS.md card above.
   <mark> the words that matter. Stacks below 560px.
     <figure class="demo"><div class="pair">
       <section class="pair-side" data-v="without"><p class="pair-label">…</p><p class="pair-why">…</p>
         <div class="pair-body">…</div></section>
       <section class="pair-side" data-v="with">…</section></div></figure> */
.pair { --line: #d9822b; --bad: #c45a38; --good: #2f8f5b;
  --bad-soft: color-mix(in oklab, var(--bad) 14%, transparent); --good-soft: color-mix(in oklab, var(--good) 16%, transparent);
  display: grid; grid-template-columns: 1fr 1fr; border-radius: 12px; background: var(--surface); box-shadow: var(--elevation-raised); overflow: hidden; }
@media (prefers-color-scheme: dark) {
  .pair { --bad: #e0876a; --good: #6cb890; --bad-soft: color-mix(in oklab, var(--bad) 20%, transparent); --good-soft: color-mix(in oklab, var(--good) 20%, transparent); }
}
.pair-side { position: relative; padding: 14px 18px 16px 21px; }
.pair-side + .pair-side { border-left: 1px solid rgb(var(--shadow) / 0.07); }
.pair-side::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--gray-400); }
.pair-side[data-v="with"]::before { background: var(--line); }
article .pair-label { margin: 0 0 4px; font-family: var(--mono); font-size: var(--text-xs); line-height: 1.4; color: var(--gray-1000); }
article .pair-side[data-v="with"] .pair-label { color: #b8751a; }
article .pair-why { margin: 0 0 10px; font-family: 'Shantell Sans', cursive; font-size: 15px; line-height: 1.3; color: var(--bad); transform: rotate(-1.5deg); transform-origin: left; }
article .pair-side[data-v="with"] .pair-why { color: var(--good); }
.pair-body { font-size: 14.5px; line-height: 1.6; }
.pair-body p { margin: 0 0 0.65em; } .pair-body > :last-child { margin-bottom: 0; }
.pair-body :is(ul, ol) { margin: 0 0 0.65em; padding-left: 1.2em; } .pair-body li { margin: 0.2em 0; }
.pair-body :is(p, li) { color: color-mix(in oklab, var(--gray-1200) 30%, transparent); }
.pair-body li::marker { color: var(--gray-1000); }
.pair-body code { font-family: var(--mono); font-size: 0.9em; }
.pair-body mark { color: var(--gray-1200); border-radius: 3px; padding: 0 1px; background: var(--bad-soft); }
.pair-side[data-v="with"] .pair-body mark { background: var(--good-soft); }
@media (max-width: 560px) {
  .pair { grid-template-columns: 1fr; }
  .pair-side + .pair-side { border-left: 0; border-top: 1px solid rgb(var(--shadow) / 0.07); }
}