/* The posts' figures, side notes and the variants boxes, as in the v1 blog: its palette and DM Sans/DM Mono,
   scoped to Ben's article body, which sets everything else. Generated from v1's stylesheets. */
.dm-a-body { position: relative; }
/* The LSA post (main.v1-type) keeps the v1 font it was tuned with in its figures (DM Sans); other posts use the site sans there. Titles and section heads are the site serif in every post. */
.dm-article { --fig-sans: var(--sans); }
.dm-article.v1-type { --fig-sans: "DM Sans", system-ui, sans-serif; }
.dm-a-body :is(figure, .sidenote, .variants) { font: 400 18px/1.65 var(--fig-sans); font-optical-sizing: auto; color: var(--ink); letter-spacing: normal; }
.dm-a-body :is(figure, .sidenote) p { margin: 0 0 .85em; }
.dm-a-body figure figcaption { padding-top: 0; letter-spacing: normal; line-height: 1.65; }
/* Undo Ben's body rules for tables, legends, links, notes and buttons inside the figures */
.dm-a-body :is(figure, .sidenote) :is(.legend, table, th, td) { font-family: inherit; letter-spacing: normal; text-transform: none; }
.dm-a-body :is(figure, .sidenote) :is(table, td) { color: inherit; }
.dm-a-body :is(figure, .sidenote) tr.ours td { background: none; }
.dm-a-body :is(figure, .sidenote) :is(.tabs, table) { margin-top: 0; }
.dm-a-body :is(figure, .sidenote) p.note { border-top: 0; padding-top: 0; }
.dm-a-body :is(figure, .sidenote) a:not(.pill) { color: inherit; text-decoration-thickness: auto; text-underline-offset: auto; }
.dm-a-body :is(figure, .sidenote) button { letter-spacing: normal; text-align: center; }
.dm-a-body .step-arrow { padding: 1px 6px; }

.dm-a-body {
  --bg: #ffffff;
  --ink: #1f1d1a;
  --muted: #6e675d;
  --line: #e7dfd2;
  --tint: #f5f5f5;
  --accent: #b8432a;
  --lsa: #2a7148;        
  --lsa-light: #7bae7f;  
  --radius: 28px;
  --wide: 1280px;
  --text: 720px; }
.dm-a-body .icon { width: 1.15em; height: 1.15em; flex: none; }
.dm-a-body .lsa { margin: 1.2em -140px 1.4em; border: 1px solid var(--line); border-radius: 22px; background: #ffffff; overflow: hidden; }
.dm-a-body .lsa-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 14px 0 16px; }
.dm-a-body .tabs { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--tint); }
.dm-a-body .tabs button {
  border: 0; background: transparent; padding: 8px 15px; border-radius: 999px; cursor: pointer;
  font: 500 14px/1 var(--fig-sans); color: var(--muted); transition: background .2s, color .2s; }
.dm-a-body .tabs button:hover { color: var(--ink); }
.dm-a-body .tabs button[aria-selected="true"] { background: #ffffff; color: var(--ink); box-shadow: 0 1px 2px rgba(60, 40, 20, .14); }
.dm-a-body .lsa-status { margin-left: auto; font: 400 12.5px/1.3 "DM Mono", ui-monospace, monospace; color: var(--muted); }
.dm-a-body .lsa-controls { display: flex; gap: 6px; }
.dm-a-body .lsa-controls button {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid #d9cfbf;
  background: #ffffff; color: var(--ink); cursor: pointer; transition: background .2s; }
.dm-a-body .lsa-controls button:hover { background: var(--tint); }
.dm-a-body .lsa-controls .icon { width: 14px; height: 14px; }
.dm-a-body .lsa-controls [aria-pressed="true"] .pause, .dm-a-body .lsa-controls [aria-pressed="false"] .play { display: none; }
.dm-a-body .lsa canvas { display: block; width: 100%; height: 320px; }
.dm-a-body .lsa canvas[hidden] { display: none; }
.dm-a-body .lsa figcaption { padding: 0 32px 22px; text-align: center; font-size: 14px; line-height: 1.5; color: var(--muted); }
@media (max-width: 1000px) {
.dm-a-body .lsa { margin: 1.2em 0 1.4em; }
}
@media (max-width: 640px) {
.dm-a-body .lsa-status { order: 3; width: 100%; margin-left: 0; }
.dm-a-body .lsa-controls { margin-left: auto; }
.dm-a-body .lsa canvas { height: 340px; }
.dm-a-body .lsa figcaption { padding: 0 18px 18px; }
}
.dm-a-body .steps-nav { display: flex; flex-wrap: wrap; gap: 4px; }
.dm-a-body .steps-nav button {
  position: relative;
  border: 1px solid var(--line); background: #ffffff; color: var(--muted); padding: 6px 11px; border-radius: 999px;
  font: 500 13px/1 var(--fig-sans); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.dm-a-body .steps-nav button:hover { color: var(--ink); border-color: #d9cfbf; }
.dm-a-body .steps-nav button[aria-current="true"] { border-color: var(--muted); color: var(--ink); }
.dm-a-body .steps-nav button::after {
  content: attr(data-label); position: absolute; inset: -1px; display: grid; place-items: center; white-space: nowrap;
  border-radius: inherit; background: var(--muted); color: #fbf8f3; pointer-events: none;
  clip-path: inset(0 calc(100% - var(--fill, 0) * 100%) 0 0); opacity: 0; transition: opacity .35s ease; }
.dm-a-body .steps-nav button[aria-current="true"]::after { opacity: 1; }
.dm-a-body .lsa-bar { justify-content: space-between; padding-bottom: 6px; }
.dm-a-body .lsa figcaption[data-caption] { text-align: left; padding: 6px 22px 20px; min-height: 3.2em; color: #48433c; }
.dm-a-body .lsa figcaption strong { color: var(--ink); font-weight: 500; }
.dm-a-body var { font-style: italic; font-family: inherit; }
.dm-a-body .chart, .dm-a-body .results { margin: 1.2em -140px 1.4em; padding: 22px 26px 24px; border: 1px solid var(--line); border-radius: 22px; background: #ffffff; }
.dm-a-body .chart-title { margin: 0 0 14px !important; font-size: 14px; color: var(--muted); }
.dm-a-body .bar { display: flex; height: 44px; border-radius: 12px; overflow: hidden; background: var(--tint); }
.dm-a-body .bar .seg { width: var(--w); display: flex; align-items: center; padding: 0 14px; font-size: 14px; color: #fbf8f3; white-space: nowrap; }
.dm-a-body .bar .seg.indexer { background: var(--ink); }
.dm-a-body .bar .seg.attention { background: var(--accent); padding: 0; }
.dm-a-body .bar .seg b { font-weight: 500; margin-right: 8px; }
.dm-a-body .bar-legend { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 10px 0 0 !important; font-size: 13px; color: var(--muted); }
.dm-a-body .key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; }
.dm-a-body .key.indexer { background: var(--ink); }
.dm-a-body .key.attention { background: var(--accent); }
.dm-a-body .results .tabs { margin-bottom: 16px; }
.dm-a-body .results .note { margin: 16px 0 0 !important; font-size: 14px; color: var(--muted); }
.dm-a-body .variants { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 1.2em 0; }
.dm-a-body .variants div { background: var(--tint); border-radius: 18px; padding: 20px 22px; }
.dm-a-body .variants dt { font-size: 22px; font-weight: 500; letter-spacing: -0.015em; margin-bottom: 6px; }
.dm-a-body .variants dd { margin: 0; font-size: 16px; line-height: 1.55; color: #48433c; }
@media (max-width: 1000px) {
.dm-a-body .chart, .dm-a-body .results { margin: 1.2em 0 1.4em; }
}
@media (max-width: 640px) {
.dm-a-body .variants { grid-template-columns: minmax(0, 1fr); }
.dm-a-body .chart, .dm-a-body .results { padding: 18px; }
.dm-a-body .steps-nav button { padding: 6px 9px; font-size: 12px; }
}
.dm-a-body .share { margin: 0; padding: 26px 28px 20px; border-radius: 22px; background: var(--tint); }
.dm-a-body .share { --lead: 140px; }
.dm-a-body .share-head { display: grid; grid-template-columns: calc(var(--lead) - 22px) minmax(0, 1fr); align-items: center; column-gap: 22px; }
.dm-a-body .share-number { margin: 0 !important; font-size: 64px; font-weight: 500; letter-spacing: -0.04em; line-height: 1; color: var(--ink); }
.dm-a-body .share-text { margin: 0 !important; font-size: 18px; line-height: 1.4; color: #48433c; padding-top: 4px; }
.dm-a-body .share-compare { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 28px; margin-top: 6px; }
.dm-a-body .share-rows { display: grid; gap: 12px; }
.dm-a-body .share-row { display: grid; grid-template-columns: calc(var(--lead) - 12px) minmax(0, 1fr) 52px; align-items: center; gap: 12px; }
.dm-a-body .share-label { font-size: 14px; font-weight: 500; color: var(--ink); }
.dm-a-body .share-row.ours .share-label { color: var(--lsa); }
.dm-a-body .share-track { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: rgba(31, 29, 26, .07); }
.dm-a-body .share-track i { display: block; height: 100%; }
.dm-a-body .share-row .share-indexer { background: var(--ink); }
.dm-a-body .share-row .share-attention { background: var(--accent); }
.dm-a-body .share-time { font-size: 13px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dm-a-body .share-gain { padding-left: 26px; border-left: 1px solid rgba(31, 29, 26, .1); }
.dm-a-body .share-gain .share-number { font-size: 56px; color: var(--lsa); }
.dm-a-body .share-gain-text { margin: 4px 0 0 !important; font-size: 16px; color: #48433c; }
.dm-a-body .share-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 12px; font-size: 13px; color: var(--muted); }
.dm-a-body .share-foot figcaption { margin: 0 0 0 auto; font-size: 13px; color: var(--muted); }
@media (max-width: 640px) {
.dm-a-body .share { padding: 20px; }
.dm-a-body .share-number { font-size: 52px; }
.dm-a-body .share-head { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
.dm-a-body .share-compare { grid-template-columns: minmax(0, 1fr); }
.dm-a-body .share-gain { padding: 18px 0 0; margin-top: 18px; border-left: 0; border-top: 1px solid rgba(31, 29, 26, .1); }
.dm-a-body .share-row { grid-template-columns: minmax(0, 1fr) 52px; gap: 4px 10px; }
.dm-a-body .share-label { grid-column: 1 / -1; }
.dm-a-body .share-gain .share-number { font-size: 48px; }
}
.dm-a-body.dm-a-body figure.share, .dm-a-body.dm-a-body figure.lsa, .dm-a-body.dm-a-body figure.results, .dm-a-body.dm-a-body figure.chart { margin-top: 2em; margin-bottom: 2em; }
.dm-a-body .lsa.stepper { padding: 14px 14px 0; outline: none; }
.dm-a-body .lsa.stepper:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.dm-a-body .lsa.stepper .steps-nav { padding: 0 2px 8px; }
.dm-a-body .lsa.stepper .steps-nav button.done { color: var(--ink); background: var(--tint); }
.dm-a-body .lsa.stepper canvas { height: 540px; }
.dm-a-body .stepper-bar { display: flex; align-items: center; gap: 14px; padding: 12px 4px 14px; border-top: 1px solid var(--line); }
.dm-a-body .stepper-bar figcaption[data-caption] { flex: 1; margin: 0; padding: 0; text-align: left; min-height: 4.5em; font-size: 15px; line-height: 1.5; color: #48433c; }
.dm-a-body .stepper-bar figcaption strong, .dm-a-body .stepper-bar figcaption b { color: var(--ink); font-weight: 500; }
.dm-a-body .step-count { font: 400 12.5px/1 "DM Mono", ui-monospace, monospace; color: var(--muted); white-space: nowrap; }
.dm-a-body .step-arrow {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid #d9cfbf;
  background: #ffffff; color: var(--ink); cursor: pointer; transition: background .2s, transform .2s, opacity .2s; }
.dm-a-body .step-arrow .icon { width: 18px; height: 18px; }
.dm-a-body .step-arrow:hover:not(:disabled) { background: var(--tint); }
.dm-a-body .step-arrow:disabled { opacity: .35; cursor: default; }
.dm-a-body .step-arrow.next { background: var(--accent); border-color: var(--accent); color: #ffffff; }
.dm-a-body .step-arrow.next:hover:not(:disabled) { background: #a33a24; }
.dm-a-body .step-arrow.next:disabled { background: #ffffff; border-color: #d9cfbf; color: var(--ink); }
.dm-a-body .step-arrow.pulse { animation: nudge 1.8s ease-in-out infinite; }
.dm-a-body .step-arrow.next { position: relative; }
.dm-a-body .step-arrow.next.auto::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%; pointer-events: none; opacity: .45;
  background: conic-gradient(var(--muted) calc(var(--auto, 0) * 360deg), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px)); }
@keyframes nudge { 0%, 100% { box-shadow: 0 0 0 0 rgba(184, 67, 42, .35); } 50% { box-shadow: 0 0 0 8px rgba(184, 67, 42, 0); } }
@media (prefers-reduced-motion: reduce) {
.dm-a-body .step-arrow.pulse { animation: none; }
}
@media (max-width: 640px) {
.dm-a-body .lsa.stepper canvas { height: 480px; }
.dm-a-body .lsa.stepper .steps-nav { display: none; }
.dm-a-body .lsa.stepper { padding-top: 6px; }
.dm-a-body .stepper-bar { padding-top: 8px; gap: 10px; }
.dm-a-body .stepper-bar figcaption[data-caption] { font-size: 14px; min-height: 0; }
.dm-a-body .stepper-bar { flex-wrap: wrap; }
.dm-a-body .stepper-bar figcaption[data-caption] { order: 3; flex-basis: 100%; }
}
.dm-a-body .results .halves { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.dm-a-body .results.native .halves { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.dm-a-body .half-title { margin: 0 0 10px !important; font-size: 13px; font-weight: 500; color: var(--ink); letter-spacing: .01em; }
.dm-a-body .nums { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.dm-a-body .nums th, .dm-a-body .nums td { padding: 6px 8px; text-align: center; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dm-a-body .nums th:first-child { text-align: left; padding-left: 0; font-weight: 400; color: #48433c; }
.dm-a-body .nums thead th { font-size: 12.5px; font-weight: 500; color: var(--muted); border-bottom: 1px solid #d9cfbf; }
.dm-a-body .nums thead tr.sub th { font-weight: 400; }
.dm-a-body .nums tr.group th { padding-top: 12px; font-size: 12px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.dm-a-body .nums td.hi { color: var(--ink); font-weight: 700; }
.dm-a-body .nums tr.ours th, .dm-a-body .nums tr.ours td { color: var(--lsa); font-weight: 500; }
.dm-a-body .nums.wide { font-size: 12.5px; }
.dm-a-body .nums.wide th, .dm-a-body .nums.wide td { padding: 6px 4px; }
.dm-a-body .nums.wide thead th { font-size: 11.5px; }
.dm-a-body .scroll { overflow-x: auto; }
.dm-a-body .results .note { margin: 12px 0 0 !important; font-size: 13px; line-height: 1.45; }
.dm-a-body .chart-svg { display: block; width: 100%; height: auto; overflow: hidden; }
.dm-a-body .chart-svg text { font: 400 11px var(--fig-sans); fill: var(--muted); }
.dm-a-body .nums.wide thead tr:first-child th { text-align: center; }
.dm-a-body .chart-svg text.axis { font-size: 12px; }
.dm-a-body .chart-svg .grid { stroke: var(--line); stroke-width: 1; }
.dm-a-body .results .legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0 !important; font-size: 12.5px; color: var(--muted); }
.dm-a-body .results .legend i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: 3px; }
.dm-a-body .results .legend b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
.dm-a-body .results .halves, .dm-a-body .results.native .halves { grid-template-columns: minmax(0, 1fr); }
}
.dm-a-body .half-title.second { margin-top: 18px !important; }
.dm-a-body .nums th:first-child { width: 1%; }
.dm-a-body .results[data-results] .halves > div:first-child { display: flex; flex-direction: column; }
.dm-a-body .results[data-results] .nums td, .dm-a-body .results[data-results] .nums th { padding-top: 5px; padding-bottom: 5px; }
.dm-a-body .results .setting { margin-top: auto; padding: 14px 16px; border-radius: 14px; background: var(--tint); }
.dm-a-body .results .setting-title { margin: 0 0 4px !important; font-size: 14px; font-weight: 500; color: var(--ink); }
.dm-a-body .results .setting p:last-child { margin: 0 !important; font-size: 13.5px; line-height: 1.5; color: #48433c; }
@media (max-width: 760px) {
.dm-a-body .results .setting { margin-top: 16px; }
}
.dm-a-body .results[data-results] .halves > div:last-child .nums td, .dm-a-body .results[data-results] .halves > div:last-child .nums th { padding-top: 5px; padding-bottom: 5px; }
.dm-a-body .results[data-results] .half-title.second { margin-top: 12px !important; }
.dm-a-body .results.native .nums td, .dm-a-body .results.native .nums th { padding-top: 5px; padding-bottom: 5px; }
.dm-a-body .results.native .halves > div:first-child { display: flex; flex-direction: column; }
.dm-a-body .results.native .legend { margin-bottom: 14px !important; }
.dm-a-body .results.papertrail .legend { margin-top: 12px !important; }
.dm-a-body .results .legend-note { margin-left: auto; }
@media (max-width: 760px) {
.dm-a-body .results .legend-note { margin-left: 0; }
}
@media (max-width: 640px) {
.dm-a-body .results { padding: 16px 14px 18px; }
.dm-a-body .nums { font-size: 12.5px; }
.dm-a-body .nums th, .dm-a-body .nums td, .dm-a-body .results[data-results] .nums td, .dm-a-body .results[data-results] .nums th, .dm-a-body .results.native .nums td, .dm-a-body .results.native .nums th { padding: 5px 3px; }
.dm-a-body .nums thead th { font-size: 11px; }
.dm-a-body .nums th:first-child { white-space: normal; width: auto; min-width: 72px; }
.dm-a-body .results.native .nums { font-size: 11.5px; }
}
.dm-a-body svg, .dm-a-body canvas, .dm-a-body video, .dm-a-body table { max-width: 100%; }
.dm-a-body .pt-strip { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 5px; align-items: end; padding: 22px 0 4px; }
.dm-a-body .pt-page {
  position: relative; aspect-ratio: 3 / 4; border-radius: 2px 6px 2px 2px; border: 1px solid #d6ccbc; background: #f5f5f5;
  transition: opacity .25s, box-shadow .25s, transform .25s; }
.dm-a-body .pt-page::after { content: ""; position: absolute; left: 22%; right: 22%; top: 30%; height: 2px; border-radius: 1px; background: currentColor; opacity: .18; box-shadow: 0 5px 0 currentColor, 0 10px 0 currentColor; }
.dm-a-body .pt-page.bg { color: #b9ae9d; }
.dm-a-body .pt-page.host { background: #ffffff; border-color: #9f968a; color: #6e675d; }
.dm-a-body .pt-page.stale { background: #ffffff; border-color: var(--accent); color: var(--accent); }
.dm-a-body .pt-page.fab { background: #f7d9c7; border-color: var(--accent); color: var(--accent); }
.dm-a-body .pt-page b { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.dm-a-body .pt-strip.focus .pt-page { opacity: .3; }
.dm-a-body .pt-strip.focus .pt-page.on { opacity: 1; box-shadow: 0 0 0 2px var(--ink); transform: translateY(-3px); }
.dm-a-body .pt-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 10px 0 0 !important; font-size: 12.5px; color: var(--muted); }
.dm-a-body .pt-key { display: inline-block; width: 9px; height: 12px; border-radius: 1px 3px 1px 1px; margin-right: 6px; vertical-align: -1px; border: 1px solid; }
.dm-a-body .pt-key.fab { background: #f7d9c7; border-color: var(--accent); }
.dm-a-body .pt-key.host { background: #ffffff; border-color: #9f968a; }
.dm-a-body .pt-key.stale { background: #ffffff; border-color: var(--accent); }
.dm-a-body .pt-key.bg { background: #f5f5f5; border-color: #d6ccbc; }
.dm-a-body .pt-story { margin: 12px 0 16px !important; font-size: 14px; line-height: 1.5; color: #48433c; }
.dm-a-body .pt-tabs { display: flex; flex-wrap: wrap; margin-bottom: 10px; }
.dm-a-body .pt-tabs button { padding: 7px 12px; font-size: 13px; }
.dm-a-body .pt-card { padding: 14px 16px; border-radius: 14px; background: var(--tint); }
.dm-a-body .pt-hint { margin: 0 0 4px !important; font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.dm-a-body .pt-q { margin: 0 !important; font-size: 15px; line-height: 1.5; color: var(--ink); }
.dm-a-body .pt-a { margin: 10px 0 0 !important; font: 500 15px/1.4 "DM Mono", ui-monospace, monospace; color: var(--accent); }
.dm-a-body .pt-a span { margin-right: 6px; font: 500 12px/1 var(--fig-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 640px) {
.dm-a-body .pt-strip { gap: 3px; }
.dm-a-body .pt-page b { font-size: 10px; }
}
.dm-a-body .note-ref {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  text-decoration: underline dotted; text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
  text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: color .15s, text-decoration-color .15s; }
.dm-a-body .note-ref:hover, .dm-a-body .note-ref[aria-expanded="true"] { color: var(--accent); text-decoration-color: var(--accent); }
.dm-a-body .note-ref:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.dm-a-body .sidenote {
  position: relative; margin: -.2em 0 1.4em; padding: 16px 18px 14px; border-radius: 16px; background: var(--tint);
  font-size: 14px; line-height: 1.5; color: var(--ink); }
.dm-a-body .sidenote[hidden] { display: none; }
.dm-a-body .sidenote.open { animation: note-in .24s cubic-bezier(.2, .7, .3, 1) both; }
.dm-a-body .sidenote.closing { animation: note-out .16s ease-in both; }
@keyframes note-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes note-out { to { opacity: 0; transform: translateY(4px); } }
.dm-a-body.dm-a-body .sidenote p { margin: 0 0 .7em; }
.dm-a-body.dm-a-body .sidenote .sidenote-label { margin: 0 28px .35em 0; font-weight: 500; font-size: 15px; }
.dm-a-body.dm-a-body .sidenote .sidenote-caption { margin: 1.1em 0 .2em; font-size: 12.5px; font-weight: 500; color: var(--ink); text-align: center; }
.dm-a-body.dm-a-body .sidenote .sidenote-source { margin: 1.2em 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.45; color: var(--muted); }
.dm-a-body .sidenote-source span { display: block; margin-bottom: 2px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.dm-a-body .sidenote .chart-svg text.title { font-size: 11px; letter-spacing: .02em; }
.dm-a-body .sidenote .chart-svg { margin: 4px 0 0; }
.dm-a-body .sidenote .legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.dm-a-body .sidenote .legend i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: 3px; }
.dm-a-body .sidenote .chart-svg text.end { font-weight: 500; }
.dm-a-body .sidenote-close {
  position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border: 0; border-radius: 50%; padding: 0;
  background: none; color: var(--muted); font: 400 20px/1 var(--fig-sans); cursor: pointer; }
.dm-a-body .sidenote-close:hover { background: var(--line); color: var(--ink); }
.dm-a-body .sidenote-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (min-width: 1380px) {
.dm-a-body .sidenote { position: absolute; left: calc(100% - 12px); top: var(--note-top, 0); width: 280px; margin: 0; }
@keyframes note-in { from { opacity: 0; transform: translateX(-8px); } }
@keyframes note-out { to { opacity: 0; transform: translateX(-6px); } }
}
@media (prefers-reduced-motion: reduce) {
.dm-a-body .sidenote.open, .dm-a-body .sidenote.closing { animation: none; }
}
.dm-a-body .sidenote .chart-svg text { font-size: 12px; }
.dm-a-body .sidenote-facts { display: grid; gap: 4px; margin: 0 0 .9em; padding: 10px 0 0; border-top: 1px solid var(--line); }
.dm-a-body .sidenote-facts div { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 8px; }
.dm-a-body .sidenote-facts dt { font-size: 11px; line-height: 21px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.dm-a-body .sidenote-facts dd { margin: 0; font-size: 13px; line-height: 21px; }
.dm-a-body .sidenote-facts b { font-weight: 500; color: var(--accent); font-variant-numeric: tabular-nums; }
.dm-a-body .sidenote .chart-svg .lead { stroke: var(--accent); stroke-width: 1; stroke-linejoin: round; }
.dm-a-body .sidenote .chart-svg text.gain { fill: var(--accent); font-weight: 500; font-variant-numeric: tabular-nums; }
.dm-a-body .attention-anim .cell { fill: var(--line); }
.dm-a-body .attention-anim .mask { fill: none; stroke: var(--line); stroke-width: .6; stroke-dasharray: 1.5 1.5; }
.dm-a-body .attention-anim .cell.on { fill: var(--muted); }
.dm-a-body .attention-anim .cell.scored { fill: color-mix(in srgb, var(--accent) 22%, var(--line)); }
.dm-a-body .attention-anim [data-panel="sparse"].cell.on { fill: var(--accent); }
.dm-a-body .attention-anim .track { fill: var(--line); }
.dm-a-body .attention-anim .time { fill: var(--muted); transform: scaleX(0); }
.dm-a-body .attention-anim .time[data-panel="sparse"] { fill: var(--accent); }
.dm-a-body .attention-anim .done { opacity: 0; font-weight: 500; transition: opacity .2s; }
.dm-a-body .attention-anim .done[data-panel="sparse"] { fill: var(--accent); }
.dm-a-body .attention-anim .done.show { opacity: 1; }
.dm-a-body .attention-anim .indexer rect { fill: var(--bg); stroke: var(--accent); stroke-width: 1; }
.dm-a-body .attention-anim .indexer text { fill: var(--accent); font-size: 10.5px; font-weight: 500; }
.dm-a-body .attention-anim .bolt { fill: var(--accent); transform-box: fill-box; transform-origin: center; }
.dm-a-body .attention-anim .indexer.zap .bolt { animation: attn-zap .22s ease-out; }
@keyframes attn-zap { 0% { transform: scale(1.4); fill: #e89a3c; } 100% { transform: scale(1); } }
.dm-a-body .attention-anim text.title { font-size: 11.5px; font-weight: 500; fill: var(--ink); }
.dm-a-body .attention-anim text.axis-q { font-size: 9.5px; letter-spacing: .03em; }
.dm-a-body.dm-a-body .sidenote .sidenote-aside { margin: -.2em 0 .6em; font-size: 13px; color: var(--muted); }
@media (max-width: 640px) {
.dm-a-body .share-foot figcaption { margin-left: 0; flex-basis: 100%; }
}
.dm-a-body .results .half-title:has(+ .half-sub) { margin-bottom: 2px !important; }
.dm-a-body .results .half-sub { margin: 0 0 10px !important; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.dm-a-body .results .chart-svg .bracket { stroke: var(--lsa); stroke-width: 1; stroke-linejoin: round; opacity: .5; }
.dm-a-body .results .chart-svg text.gain { fill: var(--lsa); font-size: 12px; font-weight: 500; }
.dm-a-body .chart-svg text.note-text { font-size: 10.5px; fill: var(--muted); opacity: .7; }
.dm-a-body .chart-svg text.note-text.who { font-weight: 500; fill: var(--ink); }
.dm-a-body .chart-svg text.note-text.who.ours { fill: var(--lsa); }
.dm-a-body .skip-anim .block { fill: var(--line); stroke: none; transition: fill .18s, stroke .18s; }
.dm-a-body .skip-anim .block.scan { fill: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.dm-a-body .skip-anim .block.done { fill: var(--accent); }
.dm-a-body .skip-anim .block.skipped { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2.5 2; }
.dm-a-body .skip-anim text.axis-q { font-size: 9.5px; letter-spacing: .03em; fill: var(--muted); }
.dm-a-body .skip-anim text.share { font-size: 17px; font-weight: 500; fill: var(--accent); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
.dm-a-body .skip-anim .block { transition: none; }
}
.dm-a-body .nums th.delta, .dm-a-body .nums td.delta { padding-left: 6px; font-size: 12px; font-variant-numeric: tabular-nums; }
.dm-a-body .nums th.delta { color: var(--muted); font-weight: 400; }
.dm-a-body .nums td.delta.up { color: var(--lsa); }
.dm-a-body .nums td.delta.down { color: #b4553f; }
.dm-a-body .nums td.delta.same { color: var(--muted); }
.dm-a-body .distill-bars .dbar { fill: var(--line); }
.dm-a-body .distill-bars .dbar.ours { fill: var(--lsa); }
.dm-a-body .distill-bars text { font-size: 10px; fill: var(--muted); }
.dm-a-body .distill-bars text.val { font-size: 9.5px; font-variant-numeric: tabular-nums; }
.dm-a-body .results .halves, .dm-a-body .results.native .halves { column-gap: 0; }
.dm-a-body .results .halves > div:first-child { padding-right: 28px; }
.dm-a-body .results .halves > div:last-child { padding-left: 28px; border-left: 1px solid var(--line); }
@media (max-width: 760px) {
.dm-a-body .results .halves, .dm-a-body .results.native .halves { row-gap: 24px; }
.dm-a-body .results .halves > div:first-child { padding-right: 0; }
.dm-a-body .results .halves > div:last-child { padding-left: 0; border-left: 0; }
}
.dm-a-body .results .setting-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.dm-a-body .results .setting-split > div:first-child { padding-right: 12px; }
.dm-a-body .results .setting-split > div:last-child { padding-left: 12px; border-left: 1px solid var(--line); }
.dm-a-body .results .setting-sub { margin: 0 0 2px !important; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 1000px) {
.dm-a-body .results .setting-split { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
.dm-a-body .results .setting-split > div:first-child { padding-right: 0; }
.dm-a-body .results .setting-split > div:last-child { padding: 10px 0 0; border-left: 0; border-top: 1px solid var(--line); }
}
.dm-a-body .results .setting-facts { display: grid; gap: 1px; margin: 4px 0 0; }
.dm-a-body .results .setting-facts div { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 4px; }
.dm-a-body .results .setting-facts dt { font-size: 10px; line-height: 18px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.dm-a-body .results .setting-facts dd { margin: 0; font-size: 12.5px; line-height: 18px; color: #48433c; }
.dm-a-body .results[data-results] .nums:has(+ .setting) { margin-bottom: 16px; }
.dm-a-body .results[data-results] .halves > div:first-child .nums { table-layout: fixed; }
.dm-a-body .results[data-results] .halves > div:first-child .nums th:first-child { width: 40%; }
.dm-a-body.dm-a-body .sidenote .facts-head { margin: 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.dm-a-body .sidenote .facts-head + .sidenote-facts { padding-top: 4px; border-top: 0; }
.dm-a-body.dm-a-body p span.para { display: block; margin-top: .85em; }
.dm-a-body .results .note:has(+ .setting) { margin: 0 0 14px !important; }
@media (min-width: 761px) {
.dm-a-body .results .halves > div:last-child:has(> .half-title.second) { display: flex; flex-direction: column; }
.dm-a-body .results .halves > div:last-child > :has(+ .half-title.second) { margin-bottom: auto !important; }
}
.dm-a-body .results .note.footnote { font-size: 11.5px; line-height: 1.4; }
.dm-a-body .results[data-results] { display: grid; grid-template-columns: minmax(0, 1fr); }
.dm-a-body .results[data-results] > .tabs { justify-self: start; }
.dm-a-body .results[data-results] > .panel { grid-row: 2; grid-column: 1; display: flex; flex-direction: column; }
.dm-a-body .results[data-results] > .panel[hidden] { display: flex; visibility: hidden; }
.dm-a-body .results[data-results] > .panel > .halves { flex: 1; }

/* Wide figures at v1's widths (1000px, the leaderboard 904px), centred on Ben's column - their tables and charts
   were laid out for that room */
.dm-a-body figure:is(.lsa, .chart, .results) { width: min(1000px, 90vw); margin-left: calc((624px - min(1000px, 90vw)) / 2); margin-right: 0; }
.dm-a-body .lb-embed { width: min(904px, 90vw); margin-left: calc((624px - min(904px, 90vw)) / 2); margin-right: 0; }
@media (width <= 700px) { .dm-a-body figure:is(.lsa, .chart, .results), .dm-a-body .lb-embed { width: 100%; margin-left: 0; } }
/* Results boxes: the accuracy half's second table follows its chart instead of dropping to the box's foot, so no
   gap opens under the RULER chart when the speedup half is the taller */
.dm-a-body.dm-a-body .results .halves > div:last-child > :has(+ .half-title.second) { margin-bottom: 0 !important; }
.dm-a-body.dm-a-body .results .halves > div:last-child > .half-title.second { margin-top: 28px !important; }
/* The cover whole, at its own 16:9, not cropped to a wider frame */
.dm-article .dm-a-hero .pic { aspect-ratio: 16 / 9; }
/* The header's buttons, as in v1: the paper solid, code outlined, copy link quiet - one height, even padding */
.dm-article .dm-a-btns { gap: 10px; }
.dm-article .dm-a-btns .pill { height: 44px; padding: 0 20px; gap: 9px; border: 1px solid rgba(17, 17, 17, .2); background: #fff; color: #111;
  font-size: 16px; line-height: 1; letter-spacing: .005em; transition: background .2s, border-color .2s; }
.dm-article .dm-a-btns .pill.solid { background: #111; border-color: #111; color: #fff; }
.dm-article .dm-a-btns .pill.ghost { border-color: transparent; background: none; }
.dm-article .dm-a-btns .pill:hover { background: rgba(17, 17, 17, .06) !important; color: #111 !important; }
.dm-article .dm-a-btns .pill.solid:hover { background: #333 !important; border-color: #333; color: #fff !important; }
.dm-article .dm-a-btns .pill svg { width: 18px; height: 18px; flex: none; }
.dm-article .dm-a-btns .pill:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
/* Paper and code - v1's two cards side by side, an icon, the name and what it is, in Ben's greys */
.dm-a-body .res { list-style: none; padding: 0; margin: 2.4em 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dm-a-body .res li { margin: 0; }
.dm-a-body .res a { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: 16px; background: rgba(17, 17, 17, .04);
  color: #111; text-decoration: none; transition: background .2s; }
.dm-a-body .res a:hover { background: rgba(17, 17, 17, .08); }
.dm-a-body .res a:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
.dm-a-body .res svg { width: 28px; height: 28px; flex: none; }
.dm-a-body .res span { display: flex; flex-direction: column; line-height: 1.3; }
.dm-a-body .res strong { font-weight: 500; font-size: 17.5px; }
.dm-a-body .res small { font-size: 14px; color: rgba(17, 17, 17, .6); }
@media (width <= 560px) { .dm-a-body .res { grid-template-columns: minmax(0, 1fr); } }
/* A paragraph break inside one paragraph (so its side notes open level with its start) - Ben's paragraph spacing */
.dm-a-body.dm-a-body p span.para { margin-top: 1.15em; }
/* Side notes open in the right margin, just clear of the column */
@media (min-width: 1380px) { .dm-a-body .sidenote { left: calc(100% + 28px); } }