/* The lockstep note (notes/lockstep/). In a file because the site's CSP allows no inline style. */
/* One reading column, 640px of 20px serif (about 65 characters), the same for every block so the headline, the lead
   and the text share one left edge; code and the figure step out to 768px. Sizes from the site's two scales
   (site.css). Square corners, like the canvas. */
.note { padding: 32px max(var(--gutter), env(safe-area-inset-left)) 96px; }
.note > * { max-width: 640px; margin-inline: auto; }
.note > :is(pre, figure) { max-width: 768px; }
.note { font: 20px/1.65 var(--serif); font-optical-sizing: auto; }
.note p + p { margin-top: 16px; }

.kicker { font: 500 14px/1.4 var(--sans); color: var(--quiet); }
.note h1 { margin-top: 12px; font-size: 30px; line-height: 1.15; }
.lead { margin-top: 24px; font-size: 20px; line-height: 1.55; color: var(--quiet); }
.lead + p { margin-top: 32px; }
.note h2 { margin-top: 64px; margin-bottom: 16px; font-size: 24px; line-height: 1.25; }
@media (min-width: 720px) {
  .note { padding-top: 64px; }
  .note h1 { font-size: 48px; }
  .lead { font-size: 24px; }
}

.note code, .note pre { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.note :not(pre) > code { font-size: 15px; padding: 1px 4px; background: var(--well); }
.note pre {
  margin-block: 24px; padding: 16px 24px; overflow-x: auto;
  font-size: 14px; line-height: 1.6; background: var(--well); border-left: 2px solid var(--hairline);
}
.note a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
:root { --well: rgba(23, 22, 21, 0.05); }
@media (prefers-color-scheme: dark) { :root { --well: rgba(237, 233, 225, 0.07); } }

/* The figure: two copies of the engine, hung side by side like the canvas is in the app. */
.twins { margin-block: 48px; }
.twins .pair { display: flex; justify-content: center; gap: 24px; }
.twin { flex: 0 1 240px; margin: 0; min-width: 0; }
.twin canvas {
  display: block; width: 100%; aspect-ratio: 34 / 54; box-shadow: var(--hung);
  touch-action: none; cursor: crosshair; background: #D7D0C2;
}
.twin figcaption { margin-top: 16px; font: 400 14px/1.5 var(--sans); }
.twin .rate { font-weight: 600; }
.twin .read { display: block; color: var(--quiet); font: 12px/1.6 ui-monospace, "SF Mono", Menlo, monospace; font-variant-numeric: tabular-nums; }
.twins .verdict { margin-top: 24px; text-align: center; font: 400 14px/1.5 var(--sans); color: var(--quiet); }
.twins .verdict b { color: var(--ink); font-weight: 600; }
.twins .verdict code { font-size: 13px; background: none; padding: 0; }
.twins .controls { margin-top: 16px; display: flex; justify-content: center; gap: 8px; }
.twins button {
  min-height: 44px; padding: 0 16px; border: 1px solid var(--hairline); background: none; cursor: pointer;
  font: 500 14px/1 var(--sans); transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.twins button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .twins button:hover { background: var(--well); } }