.scenario { padding: var(--s-16) var(--gutter); border-bottom: 1px solid var(--line); }
.scenario > h2 { font-size: var(--t-title); line-height: 1.2; letter-spacing: -.02em; }
.writeup { margin-top: var(--s-4); }
.writeup p { color: var(--ink-2); }
.writeup p + p { margin-top: var(--s-3); }
.writeup strong { color: var(--ink); font-weight: 500; }
.scenario > .table-wrap { margin-top: var(--s-6); }
.read-note { margin-top: var(--s-4); }

.case { margin-top: var(--s-10); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.rowcount { margin-left: var(--s-2); color: var(--ink-3); font-weight: 400; letter-spacing: 0; }
.meters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8); margin-top: var(--s-6); }
.meters .meter + .meter { margin-top: 0; }
.meters figcaption { font-size: var(--t-small); }

.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); margin-top: var(--s-6); }
.pair h4 { margin-bottom: var(--s-2); color: var(--ink-2); font: 400 var(--t-label)/1.4 var(--mono); }
.pair pre { max-height: 26rem; }
.plan .rows { color: var(--ink-3); }
.plan-link { display: inline-block; margin-top: var(--s-2); color: var(--ink-2); font: 400 var(--t-label)/1.4 var(--mono); overflow-wrap: anywhere; }

details { margin-top: var(--s-8); }
summary { min-height: 44px; font-size: var(--t-small); font-weight: 500; cursor: pointer; }

@media (max-width: 64rem) {
  .meters, .pair { grid-template-columns: minmax(0, 1fr); }
}