@font-face {
  font-family: Inter;
  src: url("fonts/Inter-Variable.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 100 900;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 500;
}

:root {
  color-scheme: light;
  --white: #ffffff;
  --gray-1: #cccccc;
  --gray-2: #999999;
  --gray-3: #666666;
  --gray-4: #333333;
  --black: #000000;
  --pink: #e53aa3;
  --light-pink: #ff7bcc;
  --red: #f93c31;
  --blue: #1e93ff;
  --light-blue: #88d8f1;
  --yellow: #ffdc00;
  --orange: #ff851b;
  --dark-red: #921231;
  --green: #4fcc30;
  --purple: #a356d6;
  --sans: Inter, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* {
  box-sizing: border-box;
  letter-spacing: 0;
}

html {
  min-width: 320px;
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: clip;
  background-color: var(--white);
  background-image:
    linear-gradient(var(--gray-1) 1px, transparent 1px),
    linear-gradient(90deg, var(--gray-1) 1px, transparent 1px);
  background-size: 20px 20px;
  color: var(--black);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
}

a:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

.paper-page {
  width: min(1280px, calc(100% - 48px));
  margin: 20px auto 48px;
}

.paper-header,
.paper,
.paper-footer {
  background: var(--white);
}

.paper-header {
  position: relative;
  overflow: hidden;
  padding: 0 28px 22px;
  border: 1px solid var(--black);
}

.paper-header::before {
  position: absolute;
  z-index: 0;
  inset: -48px;
  background: url("../figures/game-grid.png") left top / 960px auto repeat;
  content: "";
  image-rendering: pixelated;
  opacity: .07;
  pointer-events: none;
}

.paper-header > * {
  position: relative;
  z-index: 1;
}

.manuscript-meta {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 -28px 30px;
  padding: 0 12px;
  background: var(--black);
  color: var(--white);
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
}

.manuscript-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 820;
}

.manuscript-brand img {
  width: 22px;
  height: 22px;
  flex: none;
  image-rendering: pixelated;
}

.manuscript-date {
  color: var(--gray-1);
  font-size: 9px;
}

.status-banner {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 28px;
  padding: 11px 13px;
  border: 1px solid var(--black);
  background: var(--yellow);
  color: var(--black);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.4;
  text-transform: uppercase;
}

.status-banner strong {
  font-size: 12px;
  font-weight: 500;
}

h1 {
  width: 100%;
  max-width: 1080px;
  margin: 0;
  color: var(--black);
  font-size: 48px;
  font-weight: 860;
  line-height: 1.02;
  text-wrap: balance;
}

.paper-header-body {
  display: grid;
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr);
}

.paper-header-text {
  display: flex;
  flex-direction: column;
}

.paper-header-body h1 {
  max-width: none;
  font-size: 44px;
}

.paper-teaser {
  margin: 18px 0 0;
}

.paper-hero {
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--white);
}

.paper-hero + .paper-hero {
  border-top: 1px solid var(--black);
}

.paper-hero video {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--black);
  aspect-ratio: 16 / 9;
}


.paper-hero figcaption {
  max-width: 100%;
  padding: 11px 0 0;
  color: var(--gray-3);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.5;
  text-transform: uppercase;
}

.paper-subtitle {
  width: 100%;
  max-width: 920px;
  margin: 14px 0 0;
  color: var(--gray-3);
  font-size: 19px;
  font-weight: 450;
  line-height: 1.45;
}

.paper-byline {
  margin-top: 26px;
}

.paper-authors {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 22px;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

.paper-author {
  white-space: nowrap;
}

.paper-author a {
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: none;
}

.paper-author sup {
  margin-left: 2px;
  color: var(--blue);
  font-family: var(--mono);
  font-size: 8px;
}

.paper-affiliations {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin: 0;
  padding: 0;
  color: var(--gray-3);
  font-size: 12px;
  list-style: none;
}

.paper-author-details {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 18px;
  margin: 8px 0 0;
  color: var(--gray-3);
  font-size: 11px;
  line-height: 1.4;
}

.paper-affiliation {
  margin: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.paper-author-note {
  margin: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.paper-affiliations li::before {
  margin-right: 4px;
  color: var(--blue);
  content: attr(value);
  font-family: var(--mono);
  font-size: 8px;
  vertical-align: super;
}

.paper {
  width: 100%;
  margin-top: 18px;
  padding: 0 28px 38px;
  border: 1px solid var(--black);
}

/* one line of section links, sitting on the top rule of the paper */
.section-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  padding: 17px 0 16px;
  border-bottom: 1px solid var(--black);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}

.section-rail a {
  color: var(--gray-4);
  text-decoration: none;
}

.section-rail a:hover {
  color: var(--black);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.section-rail a span {
  margin-right: 6px;
  color: var(--gray-2);
}

.article-opening {
  padding: 34px 0 8px;
}

.article-opening .paper-section-body > p:first-child {
  max-width: none;
  margin: 0 0 18px;
  color: var(--black);
  font-size: 23px;
  font-weight: 820;
  line-height: 1.15;
}

.article-opening .paper-section-body > :last-child {
  margin-bottom: 0;
}

.paper-section {
  padding: 34px 0 8px;
}

.paper-section-heading {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 16px;
  break-after: avoid;
}

.section-number {
  display: inline-flex;
  width: 30px;
  height: 30px;
  flex: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--black);
  background: var(--black);
  color: var(--white);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
}

.paper-section:nth-of-type(4n + 2) .section-number {
  border-top: 5px solid var(--blue);
}

.paper-section:nth-of-type(4n + 3) .section-number {
  border-top: 5px solid var(--purple);
}

.paper-section:nth-of-type(4n + 4) .section-number {
  border-top: 5px solid var(--red);
}

.paper-section:nth-of-type(4n + 5) .section-number {
  border-top: 5px solid var(--green);
}

.paper-section-heading h2 {
  margin: 0;
  color: var(--black);
  font-size: 23px;
  font-weight: 820;
  line-height: 1.15;
  scroll-margin-top: 20px;
}

.paper-section-body {
  min-width: 0;
  column-count: 1;
  color: var(--gray-4);
  font-size: 15px;
  line-height: 1.65;
}

.paper-section-body > :first-child {
  margin-top: 0;
}

.paper-section-body > :last-child {
  margin-bottom: 0;
}

.paper-section-body p,
.paper-section-body ul,
.paper-section-body ol {
  margin-top: 0;
  margin-bottom: 16px;
  orphans: 3;
  widows: 3;
}

.paper-section-body h3,
.paper-section-body h4 {
  break-after: avoid;
  color: var(--black);
  font-weight: 760;
}

.paper-section-body h3 {
  margin: 27px 0 9px;
  font-size: 16px;
}

.paper-section-body h4 {
  margin: 22px 0 7px;
  font-size: 14px;
}

.replay-reader-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 25px 0 18px;
  border: 1px solid var(--black);
}

.replay-reader-guide > div {
  min-width: 0;
  padding: 14px 16px 15px;
}

.replay-reader-guide > div + div {
  border-left: 1px solid var(--black);
}

.replay-reader-guide span,
.replay-bookmarks span,
.trajectory-reading section > span,
.trajectory-reading blockquote > span {
  color: var(--blue);
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
}

.paper-section-body .replay-reader-guide p {
  max-width: none;
  margin: 5px 0 0;
  color: var(--gray-3);
  font-size: 12px;
  line-height: 1.48;
}

.replay-bookmarks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 -1px;
  border: 1px solid var(--black);
}

.replay-bookmarks button {
  min-width: 0;
  padding: 13px 15px 14px;
  border: 0;
  background: var(--white);
  color: var(--black);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.replay-bookmarks button + button {
  border-left: 1px solid var(--black);
}

.replay-bookmarks button:hover,
.replay-bookmarks button:focus-visible {
  background: #f2f2ef;
}

.replay-bookmarks button:focus-visible,
.trajectory-turns button:focus-visible {
  position: relative;
  z-index: 1;
  outline: 3px solid var(--blue);
  outline-offset: -3px;
}

.replay-bookmarks button.active {
  background: var(--black);
  color: var(--white);
}

.replay-bookmarks button.active span {
  color: var(--yellow);
}

.replay-bookmarks strong,
.replay-bookmarks small {
  display: block;
}

.replay-bookmarks strong {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.25;
}

.replay-bookmarks small {
  margin-top: 4px;
  color: var(--gray-3);
  font-family: var(--mono);
  font-size: 9px;
}

.replay-bookmarks button.active small {
  color: var(--gray-1);
}

.article-replay-figure {
  margin: 0 0 32px;
  border: 1px solid var(--black);
  background: var(--white);
}

.article-replay-heading {
  display: grid;
  grid-template-columns: minmax(220px, 0.36fr) minmax(0, 1fr) auto;
  align-items: stretch;
  border-bottom: 1px solid var(--black);
}

.article-replay-heading > span,
.article-replay-heading > a {
  display: flex;
  align-items: center;
  padding: 13px 16px;
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
}

.article-replay-heading > span {
  background: var(--black);
  color: var(--white);
}

.article-replay-heading > a {
  border-left: 1px solid var(--black);
  font-weight: 500;
  text-underline-offset: 3px;
}

.paper-section-body .article-replay-heading > p {
  max-width: none;
  margin: 0;
  padding: 12px 16px;
  color: var(--gray-3);
  font-size: 12px;
  line-height: 1.45;
}

.article-replay-shell {
  height: clamp(680px, 82svh, 820px);
  overflow: hidden;
  background: var(--black);
}

.article-replay-shell iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--white);
}

.paper-section-body .article-replay-figure figcaption {
  max-width: none;
  margin: 0;
  padding: 10px 14px;
  border-top: 1px solid var(--black);
  color: var(--gray-3);
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.45;
}

.guided-replay-figure {
  width: 100%;
  margin: 26px 0 30px;
  overflow: hidden;
  border: 1px solid var(--black);
  background: var(--black);
  column-span: all;
}

.guided-replay-frame {
  display: block;
  width: 100%;
  height: clamp(700px, 86svh, 860px);
  border: 0;
  background: var(--white);
}

.paper-section-body .guided-replay-figure figcaption {
  max-width: none;
  margin: 0;
  padding: 10px 14px;
  border-top: 1px solid var(--black);
  background: var(--white);
  color: var(--gray-3);
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.5;
}

.trajectory-reading {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 22px 0 25px;
  border: 1px solid var(--black);
}

.trajectory-reading section {
  min-width: 0;
  padding: 19px 20px 20px;
}

.trajectory-reading section:nth-child(even) {
  border-left: 1px solid var(--black);
}

.trajectory-reading section:nth-child(n + 3) {
  border-top: 1px solid var(--black);
}

.paper-section-body .trajectory-reading h4 {
  margin: 7px 0 10px;
  font-size: 17px;
  line-height: 1.22;
}

.paper-section-body .trajectory-reading p {
  max-width: none;
  margin: 0 0 12px;
  color: var(--gray-3);
  font-size: 12px;
  line-height: 1.55;
}

.trajectory-reading blockquote {
  margin: 14px 0;
  padding: 11px 12px;
  border-left: 3px solid var(--yellow);
  background: #f5f5f2;
}

.paper-section-body .trajectory-reading blockquote p {
  margin: 3px 0 0;
  color: var(--black);
  font-size: 11px;
  line-height: 1.48;
}

.trajectory-turns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.trajectory-turns button {
  min-height: 30px;
  padding: 6px 9px;
  border: 1px solid var(--black);
  background: var(--white);
  color: var(--black);
  font-family: var(--mono);
  font-size: 9px;
  cursor: pointer;
}

.trajectory-turns button:hover {
  background: var(--yellow);
}

.lf52-tutorial {
  margin: 24px 0 28px;
  border: 1px solid var(--black);
  background: var(--white);
  break-inside: avoid;
}

.lf52-tutorial-header {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
  border-bottom: 1px solid var(--black);
}

.lf52-tutorial-header > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 14px 17px;
  background: var(--black);
  color: var(--white);
}

.lf52-tutorial-header > div span,
.lf52-tutorial-world > header span,
.lf52-tutorial-agent > header span,
.lf52-tutorial-copy > span,
.lf52-tutorial-copy blockquote span,
.lf52-note-event > span,
.lf52-rulebook > header span,
.lf52-rule p span,
.lf52-coach span,
.lf52-pixel-strip p span,
.lf52-rule-unlock span {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 500;
  line-height: 1.35;
  text-transform: uppercase;
}

.lf52-tutorial-header > div span {
  margin-bottom: 5px;
  color: var(--yellow);
}

.lf52-tutorial-header > div strong {
  max-width: 280px;
  color: var(--white);
  font-size: 14px;
  line-height: 1.3;
}

.lf52-tutorial-header nav {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lf52-tutorial-header nav button {
  min-width: 0;
  min-height: 62px;
  padding: 10px 11px;
  border: 0;
  border-right: 1px solid var(--gray-1);
  background: var(--white);
  color: var(--gray-3);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 8px;
  line-height: 1.25;
  text-align: left;
  text-transform: uppercase;
}

.lf52-tutorial-header nav button:last-child {
  border-right: 0;
}

.lf52-tutorial-header nav button span {
  display: block;
  margin-bottom: 5px;
  color: var(--gray-2);
  font-size: 10px;
}

.lf52-tutorial-header nav button:hover,
.lf52-tutorial-header nav button:focus-visible {
  background: #f1f1ee;
  color: var(--black);
  outline: 0;
}

.lf52-tutorial-header nav button.active {
  box-shadow: inset 0 5px 0 var(--blue);
  color: var(--black);
  font-weight: 700;
}

.lf52-tutorial-header nav button:nth-child(2).active {
  box-shadow: inset 0 5px 0 var(--orange);
}

.lf52-tutorial-header nav button:nth-child(3).active {
  box-shadow: inset 0 5px 0 var(--purple);
}

.lf52-tutorial-header nav button:nth-child(4).active {
  box-shadow: inset 0 5px 0 var(--red);
}

.lf52-tutorial-stage {
  display: grid;
  min-height: 594px;
  grid-template-columns: minmax(500px, 1.04fr) minmax(330px, .96fr);
  border-bottom: 1px solid var(--black);
}

.lf52-tutorial-world {
  display: grid;
  min-width: 0;
  grid-template-rows: 38px minmax(0, 1fr) 84px;
  border-right: 1px solid var(--black);
  background: #111;
}

.lf52-tutorial-world > header,
.lf52-tutorial-agent > header {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 13px;
  border-bottom: 1px solid var(--black);
  background: var(--white);
}

.lf52-tutorial-world > header span,
.lf52-tutorial-agent > header span {
  color: var(--gray-3);
}

.lf52-tutorial-world > header strong,
.lf52-tutorial-agent > header strong {
  overflow: hidden;
  color: var(--black);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 500;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.lf52-tutorial-world[data-tutorial-mode="memory"] > header {
  box-shadow: inset 5px 0 0 var(--blue);
}

.lf52-tutorial-world[data-tutorial-mode="pixels"] > header {
  box-shadow: inset 5px 0 0 var(--yellow);
}

.lf52-tutorial-canvas {
  position: relative;
  width: min(100%, 472px);
  aspect-ratio: 1;
  align-self: center;
  justify-self: center;
  overflow: hidden;
  background: var(--black);
}

.lf52-tutorial-canvas > img {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  object-fit: contain;
}

.lf52-tutorial-hotspots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.lf52-hotspot {
  position: absolute;
  z-index: 3;
  border: 2px solid var(--blue);
  box-shadow: 0 0 0 2px rgb(255 255 255 / 75%);
  animation: lf52-hotspot-pulse 1.5s ease-in-out infinite;
}

.lf52-hotspot.green {
  border-color: var(--green);
}

.lf52-hotspot.yellow {
  border-color: var(--yellow);
}

.lf52-hotspot.orange {
  border-color: var(--orange);
}

.lf52-hotspot.purple {
  border-color: var(--purple);
}

.lf52-hotspot.red {
  border-color: var(--red);
}

.lf52-hotspot span {
  position: absolute;
  top: calc(100% + 4px);
  left: -2px;
  width: max-content;
  max-width: 170px;
  padding: 3px 5px;
  border: 1px solid var(--white);
  background: var(--black);
  color: var(--white);
  font-family: var(--mono);
  font-size: 5px;
  line-height: 1.3;
  text-transform: uppercase;
}

@keyframes lf52-hotspot-pulse {
  0%, 100% { opacity: .78; }
  50% { opacity: 1; }
}

.lf52-tutorial-cursor {
  position: absolute;
  z-index: 6;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.lf52-tutorial-cursor::before,
.lf52-tutorial-cursor::after {
  position: absolute;
  border: 2px solid var(--yellow);
  border-radius: 50%;
  content: "";
}

.lf52-tutorial-cursor::before {
  inset: 3px;
  background: rgb(255 255 255 / 82%);
}

.lf52-tutorial-cursor::after {
  inset: -7px;
  animation: lf52-cursor-pulse 1.1s ease-out infinite;
}

@keyframes lf52-cursor-pulse {
  from { opacity: 1; transform: scale(.35); }
  to { opacity: 0; transform: scale(1); }
}

.lf52-rule-unlock {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  width: min(76%, 330px);
  padding: 15px 17px 16px;
  border: 2px solid var(--yellow);
  background: var(--black);
  color: var(--white);
  opacity: 0;
  box-shadow: 10px 10px 0 rgb(0 0 0 / 18%);
  transform: translate(-50%, -58%) scale(.92);
  transition: opacity 180ms ease, transform 220ms ease;
}

.lf52-rule-unlock.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.lf52-rule-unlock span {
  display: block;
  margin-bottom: 3px;
  color: var(--yellow);
}

.lf52-rule-unlock strong {
  font-size: 12px;
  line-height: 1.25;
}

.lf52-evidence-dock {
  min-width: 0;
  border-top: 1px solid #4a4a4a;
  background: var(--black);
}

.lf52-coach,
.lf52-memory-strip,
.lf52-pixel-strip {
  width: 100%;
  height: 84px;
}

.lf52-coach {
  position: relative;
  display: flex;
  align-items: center;
  padding: 12px 18px 12px 50px;
  gap: 15px;
  color: var(--white);
}

.lf52-coach::before {
  position: absolute;
  top: 22px;
  left: 18px;
  width: 18px;
  height: 18px;
  border: 2px solid var(--yellow);
  content: "";
}

.lf52-coach::after {
  position: absolute;
  top: 29px;
  left: 25px;
  width: 8px;
  height: 8px;
  background: var(--yellow);
  content: "";
}

.lf52-coach span {
  width: 104px;
  flex: none;
  color: var(--yellow);
}

.paper-section-body .lf52-coach p {
  margin: 0;
  color: var(--gray-1);
  font-size: 10px;
  line-height: 1.45;
}

.lf52-memory-strip {
  display: grid;
  grid-auto-columns: minmax(56px, 1fr);
  grid-auto-flow: column;
  gap: 1px;
  overflow-x: auto;
  background: var(--blue);
  scrollbar-width: thin;
}

.lf52-memory-strip[hidden],
.lf52-pixel-strip[hidden],
.lf52-coach[hidden] {
  display: none;
}

.lf52-memory-strip button {
  position: relative;
  min-width: 56px;
  padding: 4px 4px 18px;
  border: 0;
  background: #171717;
  color: var(--gray-1);
  cursor: pointer;
}

.lf52-memory-strip button.active {
  z-index: 1;
  box-shadow: inset 0 0 0 3px var(--blue);
  background: var(--white);
  color: var(--black);
}

.lf52-memory-preview {
  position: relative;
  width: auto;
  max-width: 100%;
  height: 58px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--black);
}

.lf52-memory-preview img {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  max-width: none;
  height: auto;
  image-rendering: pixelated;
}

.lf52-memory-strip button span {
  position: absolute;
  right: 4px;
  bottom: 3px;
  left: 4px;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 7px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.lf52-pixel-strip {
  display: grid;
  grid-template-columns: minmax(160px, .72fr) minmax(0, 1fr);
  padding: 8px 12px;
  gap: 14px;
  background: #171717;
}

.lf52-pixel-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(var(--pixel-columns), minmax(3px, 1fr));
  gap: 1px;
  border: 1px solid var(--yellow);
  background: #555;
}

.lf52-pixel-grid i {
  min-width: 0;
  min-height: 5px;
}

.lf52-pixel-strip p {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  margin: 0;
}

.lf52-pixel-strip p span {
  margin-bottom: 5px;
  color: var(--yellow);
}

.lf52-pixel-strip p strong {
  color: var(--white);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  line-height: 1.4;
}

.lf52-tutorial-agent {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-rows: 38px minmax(0, 1fr);
  background: var(--white);
}

.lf52-tutorial-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  padding: 30px 32px;
}

.lf52-tutorial-copy > span {
  margin-bottom: 9px;
  color: var(--blue);
}

.paper-section-body .lf52-tutorial-copy h3 {
  margin: 0 0 14px;
  color: var(--black);
  font-size: 23px;
  line-height: 1.17;
}

.paper-section-body .lf52-tutorial-copy > p {
  margin: 0;
  color: var(--gray-3);
  font-size: 13px;
  line-height: 1.58;
}

.lf52-tutorial-copy blockquote {
  margin: 21px 0 0;
  padding: 13px 14px 14px;
  border: 1px solid var(--black);
  border-left: 5px solid var(--yellow);
  background: #f5f5f2;
}

.lf52-tutorial-copy blockquote[hidden],
.lf52-note-event[hidden] {
  display: none;
}

.lf52-tutorial-copy blockquote span {
  display: block;
  margin-bottom: 5px;
  color: var(--gray-3);
}

.paper-section-body .lf52-tutorial-copy blockquote p {
  margin: 0;
  color: var(--black);
  font-size: 12px;
  line-height: 1.5;
}

.lf52-note-event {
  margin-top: 14px;
  padding: 13px 14px 14px;
  border: 1px solid var(--black);
  box-shadow: inset 5px 0 0 var(--purple);
}

.lf52-note-event > span {
  display: block;
  color: var(--gray-3);
}

.lf52-note-event > strong {
  display: block;
  margin: 3px 0 7px;
  color: var(--black);
  font-family: var(--mono);
  font-size: 10px;
}

.paper-section-body .lf52-note-event > p {
  margin: 0;
  color: var(--gray-3);
  font-size: 10px;
  line-height: 1.5;
}

.lf52-rulebook {
  display: grid;
  grid-template-columns: minmax(170px, .74fr) repeat(4, minmax(0, 1fr));
  min-height: 100px;
  border-bottom: 1px solid var(--black);
  background: var(--black);
  gap: 1px;
}

.lf52-rulebook > header,
.lf52-rule {
  min-width: 0;
  background: var(--white);
}

.lf52-rulebook > header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px 15px;
  background: var(--black);
  color: var(--white);
}

.lf52-rulebook > header span {
  margin-bottom: 6px;
  color: var(--yellow);
}

.lf52-rulebook > header strong {
  color: var(--white);
  font-size: 12px;
  line-height: 1.3;
}

.lf52-rule {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  padding: 11px 10px;
  gap: 9px;
  opacity: .28;
  transition: opacity 180ms ease, background 180ms ease;
}

.lf52-rule.unlocked {
  opacity: 1;
  background: #f7f7f4;
}

.lf52-rule.just-unlocked {
  animation: lf52-rule-acquired 1.1s ease-in-out 2;
}

@keyframes lf52-rule-acquired {
  0%, 100% { box-shadow: inset 0 0 0 0 var(--yellow); }
  50% { box-shadow: inset 0 0 0 5px var(--yellow); }
}

.lf52-rule p {
  min-width: 0;
  margin: 0;
}

.lf52-rule p span,
.lf52-rule p strong {
  display: block;
}

.lf52-rule p span {
  margin-bottom: 4px;
  color: var(--gray-3);
}

.lf52-rule p strong {
  color: var(--black);
  font-size: 9px;
  line-height: 1.35;
}

.lf52-rule-icon {
  position: relative;
  display: block;
  width: 42px;
  height: 42px;
  border: 1px solid var(--black);
  background: var(--white);
}

.lf52-rule-icon.peg::before,
.lf52-rule-icon.red::before {
  position: absolute;
  top: 9px;
  left: 9px;
  width: 24px;
  height: 24px;
  background: var(--green);
  clip-path: polygon(25% 0, 75% 0, 75% 25%, 100% 25%, 100% 75%, 75% 75%, 75% 100%, 25% 100%, 25% 75%, 0 75%, 0 25%, 25% 25%);
  content: "";
}

.lf52-rule-icon.red::before {
  background: var(--red);
}

.lf52-rule-icon.carrier {
  background: var(--black);
}

.lf52-rule-icon.carrier::before,
.lf52-rule-icon.carrier::after {
  position: absolute;
  content: "";
}

.lf52-rule-icon.carrier::before {
  inset: 5px;
  background: var(--yellow);
}

.lf52-rule-icon.carrier::after {
  inset: 11px;
  background: var(--orange);
}

.lf52-rule-icon.post {
  background: var(--purple);
}

.lf52-rule-icon.post::before,
.lf52-rule-icon.post::after {
  position: absolute;
  background: var(--light-pink);
  content: "";
}

.lf52-rule-icon.post::before {
  top: 9px;
  left: 16px;
  width: 10px;
  height: 24px;
}

.lf52-rule-icon.post::after {
  top: 16px;
  left: 9px;
  width: 24px;
  height: 10px;
}

.lf52-tutorial-controls {
  display: grid;
  min-height: 46px;
  grid-template-columns: 86px 92px minmax(80px, 1fr) 58px 104px;
  align-items: stretch;
}

.lf52-tutorial-controls button,
.lf52-tutorial-controls > span {
  border: 0;
  border-right: 1px solid var(--black);
  background: var(--white);
  color: var(--black);
  font-family: var(--mono);
  font-size: 8px;
  text-transform: uppercase;
}

.lf52-tutorial-controls button {
  cursor: pointer;
}

.lf52-tutorial-controls button:hover:not(:disabled),
.lf52-tutorial-controls button:focus-visible:not(:disabled) {
  background: var(--yellow);
  outline: 0;
}

.lf52-tutorial-controls button:disabled {
  color: var(--gray-2);
  cursor: default;
}

.lf52-tutorial-controls button:last-child {
  border-right: 0;
  background: var(--black);
  color: var(--white);
}

.lf52-tutorial-controls > span {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lf52-tutorial-progress {
  position: relative;
  align-self: center;
  height: 4px;
  margin: 0 18px;
  overflow: hidden;
  background: var(--gray-1);
}

.lf52-tutorial-progress i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--blue);
  transition: width 160ms linear;
}

@media (prefers-reduced-motion: reduce) {
  .lf52-hotspot,
  .lf52-tutorial-cursor::after,
  .lf52-rule.just-unlocked {
    animation: none;
  }

  .lf52-rule-unlock,
  .lf52-rule,
  .lf52-tutorial-progress i {
    transition: none;
  }
}

.walkthrough-beat {
  display: grid;
  width: 100%;
  min-height: 0;
  align-items: start;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 28px;
  margin: 0;
  padding: 18px 24px 20px;
  border-bottom: 1px solid var(--black);
  background: var(--white);
}

.walkthrough-beat-index {
  padding-top: 3px;
  font-family: var(--mono);
  text-transform: uppercase;
}

.walkthrough-beat-index span,
.walkthrough-beat-index strong {
  display: block;
}

.walkthrough-beat-index span {
  margin-bottom: 9px;
  color: var(--black);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 1;
}

.walkthrough-beat-index strong {
  max-width: 150px;
  color: var(--gray-3);
  font-size: 8px;
  font-weight: 500;
  line-height: 1.45;
}

.paper-section-body .walkthrough-beat h3 {
  margin: 0 0 9px;
  font-size: 21px;
  line-height: 1.22;
}

.paper-section-body .walkthrough-beat p {
  margin: 0;
  color: var(--gray-4);
  font-size: 13px;
  line-height: 1.58;
}

.paper-section-body .walkthrough-beat p + p {
  margin-top: 8px;
}

.paper-section-body a {
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  /* The rule is a 2px design element, not a hint. Letting it break around
     every descender leaves it looking dashed. */
  text-decoration-skip-ink: none;
}

.paper-section-body a:hover {
  color: var(--red);
}

.paper-section-body strong {
  color: var(--black);
  font-weight: 720;
}

.paper-section-body ul,
.paper-section-body ol {
  padding-left: 21px;
}

.paper-section-body li {
  margin: 4px 0;
}

.paper-section-body li::marker {
  color: var(--blue);
}

.paper-section-body code {
  padding: 2px 4px;
  border: 1px solid var(--gray-1);
  background: var(--white);
  color: var(--black);
  font-family: var(--mono);
  font-size: .78em;
}

.paper-section-body pre,
.paper-section-body table,
.paper-section-body blockquote,
.paper-section-body hr,
.article-figure {
  column-span: all;
}

.paper-section-body pre {
  overflow-x: auto;
  margin: 24px 0;
  padding: 19px 21px;
  border: 1px solid var(--gray-1);
  background: #f3f3f3;
  color: var(--gray-4);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
}

.paper-section-body pre code {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
}

.paper-section-body table {
  width: 100%;
  margin: 24px 0;
  border: 1px solid var(--black);
  border-collapse: collapse;
  background: var(--white);
  color: var(--gray-4);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.45;
}

.paper-section-body th,
.paper-section-body td {
  padding: 9px 11px;
  border-right: 1px solid var(--gray-1);
  border-bottom: 1px solid var(--gray-1);
  text-align: left;
  vertical-align: top;
}

.paper-section-body th:last-child,
.paper-section-body td:last-child {
  border-right: 0;
}

.paper-section-body th {
  border-color: var(--black);
  background: var(--black);
  color: var(--white);
  font-weight: 500;
  text-transform: uppercase;
}

.model-results-list {
  margin: 26px 0 0;
  column-span: all;
}

.paper-section-body .results-footnote {
  max-width: none;
  margin: 8px 0 30px;
  color: var(--gray-3);
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.45;
  column-span: all;
}

.model-results-selector {
  display: grid;
  grid-template-columns: auto repeat(2, minmax(180px, 1fr));
  border: 1px solid var(--black);
  background: var(--white);
}

.model-results-selector > span,
.model-results-selector > button {
  min-height: 46px;
  padding: 0 18px;
  border: 0;
  color: var(--black);
  font-family: var(--mono);
  font-size: 11px;
}

.model-results-selector > span {
  display: flex;
  align-items: center;
  border-right: 1px solid var(--black);
  color: var(--gray-3);
  text-transform: uppercase;
}

.model-results-selector > button {
  border-right: 1px solid var(--black);
  background: var(--white);
  cursor: pointer;
  font-weight: 600;
}

.model-results-selector > button:last-child {
  border-right: 0;
}

.model-results-selector > button:hover,
.model-results-selector > button:focus-visible {
  background: var(--light-blue);
  outline: 0;
}

.model-results-selector > button[aria-selected="true"] {
  background: var(--black);
  color: var(--white);
}

.model-results {
  border: 1px solid var(--black);
  border-top: 0;
}

.model-results[hidden] {
  display: none;
}

.model-results-header {
  display: grid;
  grid-template-columns: minmax(180px, .65fr) minmax(0, 1.35fr);
  align-items: stretch;
  border-bottom: 1px solid var(--black);
  background: var(--white);
}

.model-results-title {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 17px 20px;
  border-right: 1px solid var(--black);
}

.model-results-runtime {
  color: var(--blue);
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
}

.model-results-name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}

.paper-section-body .model-results-name > h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.1;
}

.model-results-effort {
  flex: 0 0 auto;
  color: var(--black);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
}

.model-results-effort small {
  margin-right: 5px;
  color: var(--gray-3);
  font-size: 8px;
  font-weight: 400;
  text-transform: uppercase;
}

.model-results-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
}

.model-results-summary > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 14px 16px;
}

.model-results-summary > div + div {
  border-left: 1px solid var(--gray-1);
}

.model-results-summary dt,
.model-results-summary dd {
  margin: 0;
  font-family: var(--mono);
}

.model-results-summary dt {
  color: var(--gray-3);
  font-size: 8px;
  text-transform: uppercase;
}

.model-results-summary dd {
  margin-top: 4px;
  color: var(--black);
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.model-action-total {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.model-action-total strong {
  font: inherit;
}

.model-action-total span {
  color: var(--gray-3);
  font-size: 12px;
  font-weight: 400;
}

.results-table-shell {
  --result-paper: var(--white);
  --result-hover: rgb(136 216 241 / 18%);
  --result-ink: var(--black);
  --result-muted: var(--gray-3);
  --result-line: var(--gray-1);
  --result-yellow: var(--yellow);
  --result-blue: var(--blue);
  --result-red: var(--red);
  --result-green: var(--green);
  margin: 0;
}

.results-table-wrap {
  overflow: visible;
  background: var(--result-paper);
}

.paper-section-body .results-table {
  width: 100%;
  table-layout: fixed;
  margin: 0;
  border: 0;
  background: var(--result-paper);
  font-size: 11px;
}

.paper-section-body .results-table th:nth-child(1) {
  width: 30%;
}

.paper-section-body .results-table th:nth-child(2),
.paper-section-body .results-table th:nth-child(3) {
  width: 11%;
}

.paper-section-body .results-table th:nth-child(4) {
  width: 12%;
}

.paper-section-body .results-table th:nth-child(5) {
  width: 15%;
}

.paper-section-body .results-table th:nth-child(6) {
  width: 21%;
}

.paper-section-body .results-table th {
  position: sticky;
  z-index: 2;
  top: 0;
  height: 40px;
  padding: 0 12px;
  border-color: var(--result-ink);
  background: var(--result-ink);
  color: var(--result-paper);
  font-size: 10px;
  font-weight: 600;
  vertical-align: middle;
  white-space: nowrap;
}

.paper-section-body .results-table td {
  height: 66px;
  padding: 7px 12px;
  border-color: var(--result-line);
  vertical-align: middle;
}

.results-sort-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-transform: inherit;
}

.results-sort-button:hover,
.results-sort-button:focus-visible,
.results-sort-button.active {
  color: var(--result-paper);
  outline: none;
}

.results-sort-button.active {
  text-decoration: underline;
  text-decoration-color: var(--result-yellow);
  text-underline-offset: 5px;
}

.result-row:hover {
  background: var(--result-hover);
}

.result-task {
  display: grid;
  grid-template-columns: 48px minmax(56px, auto) 30px;
  align-items: center;
  gap: 12px;
}

.result-thumbnail {
  display: block;
  width: 48px;
  height: 48px;
  border: 1px solid var(--result-ink);
  background: var(--black);
  box-shadow: 2px 2px 0 var(--result-ink);
  image-rendering: pixelated;
  object-fit: contain;
}

.result-task-id {
  color: var(--result-ink);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--result-line);
  text-underline-offset: 3px;
}

.paper-section-body .result-task-id {
  text-decoration-color: var(--result-line);
}

.result-task-id:hover,
.result-task-id:focus-visible {
  color: var(--result-blue);
  outline: none;
  text-decoration-color: currentColor;
}

.result-toggle {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--result-ink);
  cursor: pointer;
}

.result-toggle:hover,
.result-toggle:focus-visible {
  border-color: var(--result-blue);
  color: var(--result-blue);
  outline: none;
}

.result-toggle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transition: transform 120ms ease;
}

.result-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.result-number,
.result-progress,
.result-status {
  color: var(--result-ink);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.result-number {
  font-size: 12px;
}

.result-actions {
  position: relative;
  white-space: nowrap;
}

.result-actions-values {
  display: inline-flex;
  align-items: baseline;
  cursor: help;
  outline: none;
}

.result-actions-values:focus-visible {
  box-shadow: 0 2px 0 var(--result-blue);
}

.result-actions-values > strong {
  font: inherit;
  font-weight: 600;
}

.result-actions-values > span {
  margin-left: 3px;
  color: var(--result-muted);
  font-size: 10px;
}

.result-actions-popover {
  position: absolute;
  z-index: 8;
  bottom: calc(50% + 15px);
  left: 50%;
  width: min(286px, calc(100vw - 28px));
  padding: 12px;
  border: 1px solid var(--result-ink);
  background: var(--result-ink);
  color: var(--result-paper);
  font-family: var(--mono);
  opacity: 0;
  pointer-events: none;
  text-align: left;
  transform: translate(-50%, 4px);
  transition: opacity 100ms ease, transform 100ms ease, visibility 0s linear 100ms;
  visibility: hidden;
  white-space: normal;
}

.result-actions:hover .result-actions-popover,
.result-actions:focus-within .result-actions-popover {
  opacity: 1;
  transform: translate(-50%, 0);
  transition-delay: 0s;
  visibility: visible;
}

.action-comparison-head,
.action-comparison-legend,
.action-comparison-totals {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.action-comparison-head {
  gap: 12px;
  color: var(--result-paper);
  font-size: 10px;
}

.action-comparison-head > strong {
  color: var(--result-paper);
  font: inherit;
  font-weight: 600;
  text-transform: uppercase;
}

.action-comparison-head > span {
  color: var(--result-paper);
  font-size: 9px;
  white-space: nowrap;
}

.action-comparison-head > span.better {
  color: var(--result-green);
}

.action-comparison-head > span.worse {
  color: var(--result-red);
}

.action-comparison-legend {
  justify-content: flex-start;
  gap: 14px;
  margin-top: 9px;
  color: var(--gray-1);
  font-size: 8px;
  text-transform: uppercase;
}

.action-comparison-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.action-comparison-legend i {
  width: 6px;
  height: 6px;
  background: var(--result-blue);
}

.action-comparison-legend i.human {
  background: var(--gray-1);
}

.action-comparison-legend i.agent.better {
  background: var(--result-green);
}

.action-comparison-legend i.agent.worse {
  background: var(--result-red);
}

.action-comparison-legend i.agent.equal,
.action-comparison-legend i.agent.neutral {
  background: var(--result-paper);
}

.action-comparison-chart {
  margin-top: 8px;
}

.action-comparison-chart svg {
  display: block;
  width: 100%;
  height: 102px;
  overflow: visible;
}

.action-comparison-gridline {
  stroke: rgb(255 255 255 / 14%);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.action-comparison-gridline.baseline {
  stroke: rgb(255 255 255 / 35%);
}

.action-comparison-line {
  fill: none;
  stroke: var(--result-blue);
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.action-comparison-line.human {
  stroke: var(--gray-1);
}

.action-comparison-line.agent.better {
  stroke: var(--result-green);
}

.action-comparison-line.agent.worse {
  stroke: var(--result-red);
}

.action-comparison-line.agent.equal,
.action-comparison-line.agent.neutral {
  stroke: var(--result-paper);
}

.action-comparison-point {
  fill: var(--result-blue);
  stroke: var(--result-ink);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.action-comparison-point.human {
  fill: var(--gray-1);
}

.action-comparison-point.agent.better {
  fill: var(--result-green);
}

.action-comparison-point.agent.worse {
  fill: var(--result-red);
}

.action-comparison-point.agent.equal,
.action-comparison-point.agent.neutral {
  fill: var(--result-paper);
}

.action-comparison-tick-label,
.action-comparison-axis-label {
  color: var(--gray-1);
  fill: var(--gray-1);
  font-family: var(--mono);
  font-size: 7px;
}

.action-comparison-axis-label {
  fill: var(--result-paper);
  font-size: 7px;
  text-transform: uppercase;
}

.action-comparison-totals {
  margin-top: 9px;
  color: var(--gray-1);
  font-size: 8px;
  text-transform: uppercase;
}

.action-comparison-totals strong {
  margin-left: 4px;
  color: var(--result-paper);
  font-size: 10px;
}

.result-progress {
  font-size: 11px;
}

.result-progress {
  color: var(--result-muted);
}

.result-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--result-muted);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.result-status::before {
  width: 5px;
  height: 5px;
  background: currentColor;
  content: "";
}

.result-status.win {
  color: var(--result-green);
}

.result-replay-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--result-ink);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.paper-section-body .result-replay-link {
  text-decoration: none;
}

.result-replay-link span {
  border-bottom: 2px solid var(--result-red);
  line-height: 1.7;
}

.result-replay-link svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.result-replay-link:hover,
.result-replay-link:focus-visible {
  color: var(--result-red);
  outline: none;
}

.result-replay-unavailable {
  color: var(--result-muted);
  font-family: var(--mono);
  font-size: 10px;
}

.result-detail-row[hidden] {
  display: none;
}

.paper-section-body .result-detail-cell {
  height: auto;
  padding: 0;
  border-bottom: 1px solid var(--result-ink);
  background: var(--result-hover);
}

.result-levels {
  padding: 13px 14px 15px 72px;
}

.result-levels-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 9px;
  color: var(--result-ink);
  font-family: var(--mono);
}

.result-levels-head strong {
  font-size: 11px;
  text-transform: uppercase;
}

.result-levels-head span {
  color: var(--result-muted);
  font-size: 9px;
  white-space: nowrap;
}

.result-levels-table-wrap {
  overflow-x: auto;
}

.paper-section-body .result-levels-table {
  width: 100%;
  margin: 0;
  border-color: var(--result-ink);
  background: var(--result-paper);
  font-size: 10px;
}

.paper-section-body .result-levels-table th {
  height: 30px;
  padding: 0 10px;
  border-color: var(--result-ink);
  background: var(--result-paper);
  color: var(--result-muted);
  font-size: 9px;
}

.paper-section-body .result-levels-table td {
  height: 34px;
  padding: 5px 10px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.paper-section-body .result-levels-table .better {
  color: var(--result-green);
  font-weight: 600;
}

.paper-section-body .result-levels-table .worse {
  color: var(--result-red);
  font-weight: 600;
}

.paper-section-body blockquote {
  margin: 10px 36px;
  padding: 2px 0 2px 18px;
  border: 0;
  border-left: 3px solid var(--yellow);
  background: transparent;
  color: var(--gray-4);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.paper-section-body blockquote strong,
.paper-section-body blockquote a {
  color: inherit;
}

.paper-section-body blockquote > :last-child {
  margin-bottom: 0;
}

.paper-section-body hr {
  height: 1px;
  margin: 28px 0;
  border: 0;
  background: var(--black);
}

.article-figure {
  width: 100%;
  margin: 28px 0;
  break-inside: avoid;
}

.article-figure.arc-representation-comparison {
  width: 100%;
  margin: 20px 0 28px;
}

.arc-representation-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.arc-representation-task {
  min-width: 0;
}

.arc-representation-task > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 0;
  border-top: 2px solid var(--black);
  font-family: var(--mono);
}

.arc-representation-task > header strong {
  color: var(--black);
  font-size: 13px;
}

.arc-representation-task > header span {
  color: var(--gray-3);
  font-size: 10px;
  text-align: right;
}

.arc-representation-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6667fr);
  gap: 8px;
  width: 100%;
}

.arc-representation-pair .visual-media {
  aspect-ratio: 1;
}

.arc-representation-pair .visual-media img,
.arc-representation-pair .visual-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.arc-representation-pair .arc-3d-demo-item:nth-child(2) .visual-media {
  background: #d8d8d2;
}

.arc-representation-pair .arc-3d-demo-item:last-child .visual-media {
  aspect-ratio: 5 / 3;
}

.arc-3d-demo-item {
  position: relative;
  min-width: 0;
}

.text-grid-demo {
  z-index: 1;
  outline: none;
}

.text-grid-demo .visual-media {
  cursor: zoom-in;
  transform-origin: left center;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.text-grid-demo:hover,
.text-grid-demo:focus-visible {
  z-index: 5;
}

.text-grid-demo:hover .visual-media,
.text-grid-demo:focus-visible .visual-media {
  transform: scale(1.9);
  box-shadow: 0 8px 28px rgb(0 0 0 / 28%);
}

.arc-3d-demo-item span {
  display: block;
  padding: 6px 8px;
  border: 1px solid var(--black);
  border-top: 0;
  color: var(--gray-3);
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
}

.article-figure.arc-representation-comparison figcaption {
  font-size: 11px;
}

.case-manual {
  margin: 22px 0 26px;
  border: 1px solid var(--black);
  background: var(--white);
  column-span: all;
  break-inside: avoid;
}

.case-manual-header {
  display: grid;
  grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr);
  align-items: end;
  padding: 22px 26px;
  border-bottom: 1px solid var(--black);
  gap: 32px;
  background: var(--black);
  color: var(--white);
}

.case-manual-header span,
.manual-rule-copy > span,
.manual-rule-goal > span,
.case-item-index,
.manual-failure-copy > span {
  font-family: var(--mono);
  font-size: 8px;
  text-transform: uppercase;
}

.case-manual-header span {
  display: block;
  margin-bottom: 7px;
  color: var(--yellow);
}

.paper-section-body .case-manual-header h4 {
  margin: 0;
  color: var(--white);
  font-size: 22px;
}

.paper-section-body .case-manual-header p {
  margin: 0;
  color: var(--gray-1);
  font-size: 12px;
  line-height: 1.55;
}

.case-manual-rules {
  display: grid;
  grid-template-columns: minmax(300px, .9fr) minmax(260px, 1fr) minmax(190px, .62fr);
  min-height: 152px;
  border-bottom: 1px solid var(--black);
}

.manual-jump-demo {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  padding: 18px;
  gap: 11px;
  border-right: 1px solid var(--black);
  background: var(--light-blue);
}

.manual-jump-demo > span {
  flex: 0 0 auto;
  color: var(--black);
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 500;
}

.manual-jump-state {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: repeat(3, 36px);
  padding: 6px;
  border: 6px solid var(--black);
  background-color: var(--white);
  background-image:
    linear-gradient(rgb(0 0 0 / 25%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(0 0 0 / 25%) 1px, transparent 1px);
  background-size: 6px 6px;
}

.manual-slot {
  position: relative;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
}

.manual-slot::before {
  width: 24px;
  height: 24px;
  background-color: var(--gray-1);
  background-image:
    linear-gradient(rgb(0 0 0 / 25%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(0 0 0 / 25%) 1px, transparent 1px);
  background-size: 6px 6px;
  content: "";
}

.manual-rule-copy,
.manual-rule-goal {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 20px 22px;
}

.manual-rule-copy {
  border-right: 1px solid var(--black);
}

.manual-rule-copy > span,
.manual-rule-goal > span {
  margin-bottom: 6px;
  color: var(--gray-3);
}

.paper-section-body .manual-rule-copy h5 {
  margin: 0 0 7px;
  font-size: 14px;
  text-transform: uppercase;
}

.paper-section-body .manual-rule-copy p,
.paper-section-body .manual-rule-goal p {
  margin: 0;
  color: var(--gray-3);
  font-size: 11px;
  line-height: 1.5;
}

.manual-rule-goal {
  background: var(--yellow);
}

.manual-rule-goal > span,
.paper-section-body .manual-rule-goal p {
  color: var(--black);
}

.manual-rule-goal strong {
  margin-bottom: 7px;
  color: var(--black);
  font-size: 17px;
  line-height: 1.15;
}

.case-manual-divider {
  padding: 7px 12px;
  border-bottom: 1px solid var(--black);
  background: var(--gray-4);
  color: var(--white);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
}

.case-item-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border-bottom: 1px solid var(--black);
  background: var(--black);
}

.case-item {
  display: grid;
  min-width: 0;
  min-height: 144px;
  grid-template-columns: 144px minmax(0, 1fr);
  background: var(--white);
}

.case-item-sprite {
  position: relative;
  width: 144px;
  min-height: 144px;
  overflow: hidden;
  background-color: var(--white);
  background-image:
    linear-gradient(rgb(0 0 0 / 25%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(0 0 0 / 25%) 1px, transparent 1px);
  background-size: 12px 12px;
}

.case-item > div:last-child {
  min-width: 0;
  padding: 18px 20px;
  border-left: 1px solid var(--black);
}

.case-item-index {
  display: block;
  margin-bottom: 5px;
  color: var(--gray-2);
}

.paper-section-body .case-item h5 {
  margin: 0 0 7px;
  display: flex;
  align-items: center;
  color: var(--black);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
}

.paper-section-body .case-item p {
  margin: 0;
  color: var(--gray-3);
  font-size: 11px;
  line-height: 1.52;
}

.manual-peg,
.manual-mini-peg {
  --piece-color: var(--green);

  position: relative;
  z-index: 2;
  display: block;
  background-color: var(--piece-color);
  background-image:
    linear-gradient(rgb(0 0 0 / 25%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(0 0 0 / 25%) 1px, transparent 1px);
  clip-path: polygon(25% 0, 75% 0, 75% 25%, 100% 25%, 100% 75%, 75% 75%, 75% 100%, 25% 100%, 25% 75%, 0 75%, 0 25%, 25% 25%);
}

.manual-peg {
  position: absolute;
  top: 48px;
  left: 50%;
  width: 48px;
  height: 48px;
  background-size: 12px 12px;
  transform: translateX(-50%);
}

.manual-mini-peg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  background-size: 6px 6px;
  transform: translate(-50%, -50%);
}

.manual-peg.red {
  --piece-color: var(--red);
}

.manual-rail {
  position: absolute;
  z-index: 1;
  top: 60px;
  right: 0;
  left: 0;
  height: 24px;
  background: var(--black);
}

.manual-socket {
  position: absolute;
  z-index: 2;
  top: 24px;
  left: 50%;
  display: block;
  width: 96px;
  height: 96px;
  background-image:
    linear-gradient(rgb(0 0 0 / 25%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(0 0 0 / 25%) 1px, transparent 1px),
    linear-gradient(var(--orange), var(--orange)),
    linear-gradient(var(--yellow), var(--yellow)),
    linear-gradient(var(--black), var(--black));
  background-position: 0 0, 0 0, 24px 24px, 12px 12px, 0 0;
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat;
  background-size: 12px 12px, 12px 12px, 48px 48px, 72px 72px, 96px 96px;
  transform: translateX(-50%);
}

.manual-post {
  position: absolute;
  top: 36px;
  left: 50%;
  display: block;
  width: 48px;
  height: 60px;
  background: var(--black);
  transform: translateX(-50%);
}

.manual-post::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 48px;
  background-image:
    linear-gradient(rgb(0 0 0 / 25%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(0 0 0 / 25%) 1px, transparent 1px),
    linear-gradient(var(--white), var(--white)),
    linear-gradient(var(--light-pink), var(--light-pink)),
    linear-gradient(var(--light-pink), var(--light-pink)),
    linear-gradient(var(--purple), var(--purple));
  background-position:
    0 0,
    0 0,
    12px 12px,
    24px 12px,
    12px 24px,
    0 0;
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-size:
    12px 12px,
    12px 12px,
    12px 12px,
    12px 24px,
    12px 12px,
    48px 48px;
  content: "";
}

.case-manual-failure {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  min-height: 150px;
}

.manual-failure-visual {
  position: relative;
  min-height: 150px;
  overflow: hidden;
  border-right: 1px solid var(--black);
  background-color: var(--light-blue);
  background-image:
    linear-gradient(rgb(0 0 0 / 25%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(0 0 0 / 25%) 1px, transparent 1px);
  background-size: 10px 10px;
}

.manual-reset-key {
  position: absolute;
  top: 10px;
  left: 40px;
  display: block;
  width: 100px;
  height: 130px;
  background-image:
    linear-gradient(rgb(0 0 0 / 25%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(0 0 0 / 25%) 1px, transparent 1px),
    linear-gradient(var(--white), var(--white)),
    linear-gradient(var(--purple), var(--purple)),
    linear-gradient(var(--purple), var(--purple)),
    linear-gradient(var(--purple), var(--purple)),
    linear-gradient(var(--purple), var(--purple)),
    linear-gradient(var(--purple), var(--purple)),
    linear-gradient(var(--purple), var(--purple)),
    linear-gradient(var(--purple), var(--purple)),
    linear-gradient(var(--black), var(--black)),
    linear-gradient(var(--black), var(--black)),
    linear-gradient(var(--black), var(--black)),
    linear-gradient(var(--black), var(--black)),
    linear-gradient(var(--light-blue), var(--light-blue));
  background-position:
    0 0,
    0 0,
    40px 40px,
    20px 10px,
    10px 20px,
    10px 30px,
    70px 30px,
    10px 70px,
    20px 80px,
    40px 90px,
    10px 0,
    0 10px,
    10px 90px,
    30px 90px,
    0 0;
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-size:
    10px 10px,
    10px 10px,
    20px 20px,
    60px 10px,
    80px 10px,
    20px 40px,
    20px 40px,
    80px 10px,
    60px 10px,
    20px 40px,
    80px 10px,
    100px 80px,
    80px 10px,
    40px 40px,
    100px 130px;
}

.manual-failure-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 22px 24px;
}

.manual-failure-copy > span {
  margin-bottom: 6px;
  color: var(--purple);
}

.paper-section-body .manual-failure-copy h5 {
  margin: 0 0 8px;
  font-size: 14px;
  text-transform: uppercase;
}

.paper-section-body .manual-failure-copy p {
  margin: 0;
  max-width: 760px;
  color: var(--gray-3);
  font-size: 11px;
  line-height: 1.55;
}

.model-update {
  display: grid;
  width: min(100%, 1080px);
  min-height: 148px;
  grid-template-columns: minmax(185px, .62fr) minmax(300px, 1.05fr) minmax(230px, .9fr) minmax(220px, .8fr);
  margin: 22px auto 28px;
  border: 1px solid var(--black);
  background: var(--black);
  gap: 1px;
  break-inside: avoid;
}

.model-update > div {
  min-width: 0;
  background: var(--white);
}

.model-update-heading,
.model-update-fact {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 22px;
}

.model-update-heading {
  background: var(--black) !important;
  color: var(--white);
}

.model-update-heading span,
.model-update-fact > span {
  margin-bottom: 7px;
  font-family: var(--mono);
  font-size: 8px;
  text-transform: uppercase;
}

.model-update-heading span {
  color: var(--yellow);
}

.model-update-heading strong {
  color: var(--white);
  font-size: 16px;
  line-height: 1.25;
}

.model-update-jump {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  padding: 15px;
  gap: 9px;
  background: var(--light-blue) !important;
}

.model-update-jump > span {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 20px;
}

.model-update-jump .manual-jump-state {
  grid-template-columns: repeat(3, 30px);
  padding: 5px;
  border-width: 5px;
  background-size: 5px 5px;
}

.model-update-jump .manual-slot {
  width: 30px;
  height: 30px;
}

.model-update-jump .manual-slot::before {
  width: 20px;
  height: 20px;
  background-size: 5px 5px;
}

.model-update-jump .manual-mini-peg {
  width: 20px;
  height: 20px;
  background-size: 5px 5px;
}

.model-update-fact > span {
  color: var(--gray-3);
}

.model-update-fact strong {
  margin-bottom: 7px;
  font-size: 13px;
  line-height: 1.25;
  text-transform: uppercase;
}

.paper-section-body .model-update-fact p {
  margin: 0;
  color: var(--gray-3);
  font-size: 11px;
  line-height: 1.52;
}

.model-update-fact.goal {
  background: var(--yellow);
}

.model-update-fact.goal > span,
.paper-section-body .model-update-fact.goal p {
  color: var(--black);
}

.model-update-piece {
  grid-template-columns: minmax(185px, .62fr) 148px minmax(250px, 1fr) minmax(240px, .9fr);
}

.model-update-piece-visual {
  position: relative;
  min-height: 148px;
  overflow: hidden;
  background-color: var(--white) !important;
  background-image:
    linear-gradient(rgb(0 0 0 / 25%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(0 0 0 / 25%) 1px, transparent 1px);
  background-size: 12px 12px;
}

.model-update-piece-visual .manual-post {
  top: 42px;
}

.model-update-red .model-update-heading span {
  color: var(--red);
}

.model-update-level-two {
  grid-template-columns: minmax(185px, .62fr) 240px minmax(250px, 1fr) minmax(240px, .9fr);
}

.model-update-level-two-visual {
  display: grid;
  min-height: 148px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--black) !important;
}

.model-update-level-two-visual > div {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background-color: var(--light-blue);
  background-image:
    linear-gradient(rgb(0 0 0 / 25%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(0 0 0 / 25%) 1px, transparent 1px);
  background-size: 10px 10px;
}

.model-update-level-two-visual .manual-reset-key {
  top: 9px;
  left: 50%;
  transform: translateX(-50%) scale(.82);
  transform-origin: top center;
}

.replay-excerpt {
  --replay-accent: var(--blue);

  width: min(100%, 1080px);
  margin: 24px auto 34px;
  border: 1px solid var(--black);
  background: var(--white);
  break-inside: avoid;
  transition: box-shadow 160ms ease;
}

.replay-excerpt.is-playing {
  box-shadow: 0 0 0 3px var(--replay-accent);
}

.replay-excerpt-primary {
  --replay-accent: var(--purple);

  border-top: 5px solid var(--purple);
}

.mechanic-bridge {
  --replay-accent: var(--yellow);

  border-top: 5px solid var(--yellow);
}

.mechanic-bridge-red {
  --replay-accent: var(--red);

  border-top-color: var(--red);
}

.mechanic-bridge-stage {
  height: 430px;
  min-height: 430px;
  grid-template-columns: minmax(390px, .92fr) minmax(0, 1.08fr);
}

.mechanic-bridge-stage .replay-media {
  min-height: 430px;
}

.mechanic-bridge-stage .replay-media > img {
  max-height: 430px;
}

.mechanic-bridge-stage .replay-copy {
  padding: 28px 32px;
}

.paper-section-body .mechanic-bridge-stage .replay-copy h4 {
  margin-bottom: 14px;
  font-size: 19px;
}

.paper-section-body .mechanic-bridge-stage .replay-copy blockquote {
  margin-bottom: 16px;
  font-size: 13px;
}

.replay-stage {
  display: grid;
  height: 500px;
  min-height: 500px;
  grid-template-columns: minmax(390px, .92fr) minmax(0, 1.08fr);
}

.replay-stage.mechanic-bridge-stage {
  height: 430px;
  min-height: 430px;
  grid-template-columns: minmax(390px, .92fr) minmax(0, 1.08fr);
}

.replay-stage[hidden] {
  display: none;
}

.replay-media {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 500px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-right: 1px solid var(--black);
  background: var(--black);
}

.replay-media > img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 500px;
  image-rendering: pixelated;
  object-fit: contain;
}

.replay-media-comparison {
  padding: 14px;
  background: #161616;
}

.replay-frame-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.replay-frame-grid > div {
  min-width: 0;
  border: 1px solid var(--gray-3);
  background: var(--black);
}

.replay-frame-grid > div:last-child:nth-child(3) {
  grid-column: 1 / -1;
}

.replay-frame-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  image-rendering: pixelated;
  object-fit: contain;
}

.replay-frame-grid > div:last-child:nth-child(3) img {
  aspect-ratio: 2.5 / 1;
}

.replay-frame-grid span {
  display: block;
  padding: 5px 7px;
  border-top: 1px solid var(--gray-3);
  color: var(--white);
  font-family: var(--mono);
  font-size: 8px;
  line-height: 1.35;
  text-transform: uppercase;
}

.replay-frame-grid-four img {
  aspect-ratio: 1;
}

.replay-frame-label {
  position: absolute;
  bottom: 9px;
  left: 9px;
  padding: 5px 7px;
  border: 1px solid var(--white);
  background: var(--black);
  color: var(--white);
  font-family: var(--mono);
  font-size: 8px;
  line-height: 1.2;
  text-transform: uppercase;
}

.replay-film-progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: rgb(255 255 255 / 35%);
}

.replay-film-progress i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--yellow);
}

.replay-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 34px 38px;
  background: var(--white);
}

.replay-kind {
  align-self: flex-start;
  margin-bottom: 13px;
  padding: 4px 7px;
  border: 1px solid var(--black);
  color: var(--black);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 500;
  line-height: 1.25;
  text-transform: uppercase;
}

.replay-kind.inspect {
  border-top: 4px solid var(--blue);
}

.replay-kind.prediction {
  border-top: 4px solid var(--yellow);
}

.replay-kind.evidence {
  border-top: 4px solid var(--green);
}

.replay-kind.revision {
  border-top: 4px solid var(--purple);
}

.paper-section-body .replay-copy h4 {
  margin: 0 0 18px;
  font-size: 21px;
  line-height: 1.2;
}

.paper-section-body .replay-copy blockquote {
  margin: 0 0 22px;
  padding: 0 0 0 16px;
  border-left-color: var(--yellow);
  color: var(--black);
  font-size: 14px;
  line-height: 1.58;
}

.paper-section-body .replay-copy blockquote p,
.paper-section-body .replay-copy > p {
  margin: 0;
}

.paper-section-body .replay-copy > p {
  padding-top: 17px;
  border-top: 1px solid var(--gray-1);
  color: var(--gray-3);
  font-size: 12px;
  line-height: 1.62;
}

.replay-film-copy [data-replay-film-phase][hidden] {
  display: none;
}

.paper-section-body .replay-film-copy [data-replay-film-phase] > p {
  margin: 0;
  padding-top: 17px;
  border-top: 1px solid var(--gray-1);
  color: var(--gray-3);
  font-size: 12px;
  line-height: 1.62;
}

.replay-controls {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  border-top: 1px solid var(--black);
}

.replay-toggle,
.replay-step-buttons button {
  min-height: 52px;
  border: 0;
  border-radius: 0;
  background: var(--white);
  color: var(--gray-3);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 8px;
  text-transform: uppercase;
}

.replay-toggle {
  border-right: 1px solid var(--black);
  color: var(--black);
  font-weight: 500;
}

.replay-toggle:hover,
.replay-step-buttons button:hover {
  background: #f3f3f3;
  color: var(--black);
}

.replay-toggle:focus-visible,
.replay-step-buttons button:focus-visible {
  position: relative;
  z-index: 2;
  outline: 3px solid var(--blue);
  outline-offset: -3px;
}

.replay-step-buttons {
  display: grid;
  min-width: 0;
  grid-auto-columns: minmax(90px, 1fr);
  grid-auto-flow: column;
  overflow-x: auto;
  scrollbar-width: none;
}

.replay-step-buttons::-webkit-scrollbar {
  display: none;
}

.replay-step-buttons button {
  display: flex;
  min-width: 90px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-right: 1px solid var(--gray-1);
  white-space: nowrap;
}

.replay-step-buttons button:last-child {
  border-right: 0;
}

.replay-step-buttons button span {
  color: var(--gray-2);
  font-variant-numeric: tabular-nums;
}

.replay-step-buttons button.active {
  box-shadow: inset 0 4px 0 var(--blue);
  color: var(--black);
  font-weight: 500;
}

.replay-excerpt-primary .replay-step-buttons button.active {
  box-shadow: inset 0 4px 0 var(--purple);
}

.mechanic-bridge .replay-step-buttons button.active {
  box-shadow: inset 0 4px 0 var(--yellow);
}

.mechanic-bridge-red .replay-step-buttons button.active {
  box-shadow: inset 0 4px 0 var(--red);
}

.replay-excerpt figcaption {
  padding: 10px 12px;
  border-top: 1px solid var(--black);
  color: var(--gray-3);
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.5;
}

.replay-excerpt figcaption strong {
  color: var(--black);
}

.memory-write {
  display: grid;
  min-width: 0;
  grid-column: 1 / -1;
  grid-template-columns: 170px minmax(0, 1fr);
  background: var(--white);
}

.memory-write-meta,
.memory-write-body {
  min-width: 0;
  padding: 13px 16px;
}

.memory-write-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid var(--black);
  box-shadow: inset 5px 0 0 var(--purple);
}

.memory-write-working .memory-write-meta {
  box-shadow: inset 5px 0 0 var(--yellow);
}

.memory-write-meta span,
.memory-write-meta small,
.memory-write-replacement span {
  font-family: var(--mono);
  font-size: 8px;
  line-height: 1.35;
  text-transform: uppercase;
}

.memory-write-meta span {
  margin-bottom: 5px;
  color: var(--gray-3);
}

.memory-write-meta code {
  color: var(--black);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
}

.memory-write-meta small {
  margin-top: 4px;
  color: var(--gray-2);
}

.memory-write-body {
  display: flex;
  align-items: center;
}

.paper-section-body .memory-write-body p {
  margin: 0;
  color: var(--black);
  font-size: 11px;
  line-height: 1.55;
}

.memory-write-replacement {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0;
}

.paper-section-body .memory-write-replacement p {
  padding: 13px 16px;
}

.paper-section-body .memory-write-replacement p + p {
  border-left: 1px solid var(--black);
}

.memory-write-replacement span {
  display: block;
  margin-bottom: 5px;
  color: var(--gray-3);
}

.replay-copy .memory-write {
  grid-template-columns: 132px minmax(0, 1fr);
  margin-top: 17px;
  border-top: 1px solid var(--gray-1);
}

.replay-copy .memory-write-meta,
.replay-copy .memory-write-body {
  padding-top: 12px;
  padding-bottom: 0;
}

.replay-copy .memory-write-meta {
  padding-left: 11px;
  border-right-color: var(--gray-1);
}

.replay-copy .memory-write-replacement {
  padding: 0;
}

.paper-section-body .replay-copy .memory-write-replacement p {
  padding-top: 12px;
  padding-bottom: 0;
}

.arc-examples {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 22px 0 8px;
}

.arc-examples a {
  display: block;
  border: 1px solid var(--black);
  background: var(--black);
}

.arc-examples a:hover {
  border-color: var(--red);
}

.arc-examples img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}

.play-once-frame {
  position: relative;
}

.game-grid-figure video {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--black);
  background: var(--white);
}

.paper-section-body > .game-grid-figure:first-child {
  margin-top: 22px;
}

.play-once-button {
  position: absolute;
  right: 9px;
  bottom: 9px;
  padding: 5px 9px;
  border: 1px solid var(--black);
  background: var(--white);
  color: var(--black);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
}

.play-once-button:hover {
  background: var(--black);
  color: var(--white);
}

.play-once-button[hidden] {
  display: none;
}

.paper-section-body .arc-examples-caption {
  margin: 0 0 22px;
  color: var(--gray-3);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
}

.arc-background-details {
  margin: 22px 0;
  border: 1px solid var(--black);
  background: var(--white);
}

.paper-section-body details:not([open]) > :not(summary) {
  display: none !important;
}

.arc-background-details summary {
  padding: 13px 16px;
  cursor: pointer;
  color: var(--black);
  font-weight: 700;
}

.arc-background-details[open] summary {
  border-bottom: 1px solid var(--black);
}

.arc-background-details-body {
  padding: 16px;
}

.arc-background-details-body > :last-child {
  margin-bottom: 0;
}

.system-comparison-details {
  margin: 18px 0 26px;
  border: 1px solid var(--black);
  background: var(--white);
}

.system-comparison-details summary {
  padding: 10px 12px;
  cursor: pointer;
  color: var(--black);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
}

.system-comparison-details[open] summary {
  border-bottom: 1px solid var(--black);
}

.code-baseline-footnote {
  color: var(--gray-3);
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.5;
}

.system-comparison-table-wrap {
  max-height: 430px;
  overflow: auto;
}

.system-comparison-table-wrap--compact {
  max-height: none;
}

.code-baseline-details .system-comparison-table-title,
.code-baseline-details .system-comparison-table-wrap--compact {
  width: min(86%, 760px);
  margin-right: auto;
  margin-left: auto;
}

.code-baseline-details .system-comparison-table-wrap--compact {
  border-right: 1px solid var(--black);
  border-bottom: 1px solid var(--black);
  border-left: 1px solid var(--black);
}

/* Narrower than the column and centred: the five columns are short enough that
   full width left the rows looking sparse. Type stays at the results-table
   sizes; only the measure changes. */
.system-summary-table-wrap {
  width: 60%;
  margin: 22px auto 14px;
  border: 1px solid var(--black);
  background: var(--white);
  box-sizing: border-box;
}

/* The note explains this table, so it keeps the table's measure instead of
   overhanging it. Scoped to this sibling so the results-table footnote, which
   sits under a full-width table, is untouched. */
.paper-section-body .system-summary-table-wrap + .results-footnote {
  width: 60%;
  margin-right: auto;
  margin-left: auto;
}

.paper-section-body .system-summary-table {
  width: 100%;
  max-width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  column-span: none;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  table-layout: fixed;
}

/* 27/24/16/19/14. At the narrower measure the first column can spare three
   points, which is what "Program-based" needs to stay on one line. */
.paper-section-body .system-summary-table th:first-child {
  width: 27%;
}

.paper-section-body .system-summary-table th.model-column {
  width: 24%;
}

.paper-section-body .system-summary-table th.program-column {
  width: 16%;
}

.paper-section-body .system-summary-table th.effort-column {
  width: 19%;
}

.paper-section-body .system-summary-table th:last-child {
  width: 14%;
}

.paper-section-body .system-summary-table th,
.paper-section-body .system-summary-table td {
  height: 38px;
  padding: 7px 12px;
  border-right: 1px solid var(--gray-1);
  border-bottom: 1px solid var(--gray-1);
  text-align: left;
  vertical-align: middle;
  white-space: normal;
  overflow-wrap: anywhere;
}

.paper-section-body .system-summary-table td[rowspan] {
  vertical-align: middle;
}

.paper-section-body .system-summary-table th:first-child,
.paper-section-body .system-summary-table td:first-child {
  text-align: left;
}

.paper-section-body .system-summary-table th.model-column,
.paper-section-body .system-summary-table td.model-column {
  text-align: center;
}

.paper-section-body .system-summary-table th.program-column,
.paper-section-body .system-summary-table td.program-column,
.paper-section-body .system-summary-table th.effort-column,
.paper-section-body .system-summary-table td.effort-column {
  text-align: center;
}

.paper-section-body .system-summary-table th:last-child,
.paper-section-body .system-summary-table td:last-child {
  text-align: right;
}

.paper-section-body .system-summary-table thead {
  background: var(--black);
  color: var(--white);
}

/* Matches the results table's header: same 40px bar, same 10px/600 type, so
   the two tables in this section read as one family. */
.paper-section-body .system-summary-table thead th {
  height: 40px;
  padding-top: 0;
  padding-bottom: 0;
  border-color: var(--black);
  font-size: 10px;
  font-weight: 600;
}

.paper-section-body .system-summary-table tr:last-child td {
  border-bottom: 0;
}

.paper-section-body .system-summary-table th:last-child,
.paper-section-body .system-summary-table td:last-child {
  border-right: 0;
}

.paper-section-body .system-summary-table .system-comparison-table-highlight {
  background: rgb(136 216 241 / 18%);
}

.system-comparison-table-title {
  display: grid;
  grid-template-columns: 30px max-content minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--black);
  background: var(--gray-0);
  color: var(--black);
  font-family: var(--mono);
}

.system-comparison-table-title span {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  background: var(--black);
  color: var(--white);
  font-size: 9px;
}

.system-comparison-table-title strong {
  font-size: 12px;
}

.system-comparison-table-title small {
  color: var(--gray-3);
  font-size: 8px;
  text-align: right;
}

.system-comparison-note {
  margin: 0;
  padding: 0 12px 9px;
  color: var(--gray-3);
  font-size: 10px;
  line-height: 1.5;
}

.paper-section-body .system-comparison-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.paper-section-body .system-comparison-table th,
.paper-section-body .system-comparison-table td {
  padding: 7px 9px;
  border-right: 1px solid var(--gray-1);
  border-bottom: 1px solid var(--gray-1);
  text-align: right;
  white-space: nowrap;
}

.paper-section-body .system-comparison-table tbody td {
  height: 58px;
  font-size: 12px;
  vertical-align: middle;
}

.paper-section-body .system-comparison-table tbody tr:hover {
  background: rgb(136 216 241 / 18%);
}

.paper-section-body .system-comparison-table-wrap--compact tbody td {
  height: 42px;
  font-size: 12px;
}

.paper-section-body .system-comparison-table-wrap--compact th,
.paper-section-body .system-comparison-table-wrap--compact td {
  padding-right: 6px;
  padding-left: 6px;
}

.system-comparison-table-wrap--compact .system-comparison-table {
  font-size: 12px;
}

.paper-section-body .system-comparison-table tbody tr.system-comparison-table-highlight,
.paper-section-body .system-comparison-table tbody tr.system-comparison-table-highlight td:first-child {
  background: #fff8cc;
}

.paper-section-body .system-comparison-table .comparison-placeholder {
  color: var(--gray-2);
  font-style: italic;
}

.paper-section-body .system-comparison-table th:first-child,
.paper-section-body .system-comparison-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--white);
  text-align: left;
}

.paper-section-body .system-comparison-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--black);
  color: var(--white);
}

.paper-section-body .system-comparison-table thead th:first-child {
  z-index: 3;
  background: var(--black);
}

.paper-section-body .system-comparison-table tfoot th {
  position: sticky;
  bottom: 0;
  background: var(--gray-0);
  border-top: 1px solid var(--black);
}

.comparison-task {
  display: grid;
  grid-template-columns: 40px minmax(48px, auto);
  align-items: center;
  gap: 9px;
}

.comparison-task-thumbnail {
  display: block;
  width: 40px;
  height: 40px;
  border: 1px solid var(--black);
  background: var(--black);
  image-rendering: pixelated;
  object-fit: cover;
}

.comparison-task-id {
  color: var(--black);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  text-decoration-color: var(--yellow);
  text-underline-offset: 3px;
  text-transform: uppercase;
}

.comparison-task-id:hover {
  color: var(--red);
}

.architecture-figure {
  width: 100%;
  margin: 28px 0;
  column-span: all;
  break-inside: avoid;
}

.agent-architecture {
  border: 1px solid var(--black);
  background: var(--white);
}

.turn-loop-svg {
  display: block;
  width: 100%;
  height: auto;
  padding: 4px;
  border: 1px solid var(--black);
  background: var(--white);
}

.loop-node-box {
  fill: var(--white);
  stroke: var(--black);
  stroke-width: 1;
}

.loop-aside-box {
  fill: #fafafa;
  stroke: var(--gray-2);
  stroke-width: 1;
}

.loop-aside-box-dashed {
  stroke-dasharray: 5 4;
}

.loop-accent-observe {
  fill: var(--blue);
}

.loop-accent-hypothesize {
  fill: var(--yellow);
}

.loop-accent-act {
  fill: var(--green);
}

.loop-step,
.loop-kicker,
.loop-node-sub,
.loop-aside-title,
.loop-edge-label {
  fill: var(--gray-3);
  font-family: var(--mono);
}

.loop-step,
.loop-kicker {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.loop-node-sub,
.loop-edge-label {
  font-size: 11px;
}

.loop-aside-title {
  fill: var(--black);
  font-size: 12px;
}

.loop-node-title {
  fill: var(--black);
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 760;
}

.loop-link {
  fill: none;
  stroke: var(--black);
  stroke-width: 1.5;
}

.loop-link-optional {
  stroke: var(--gray-2);
  stroke-dasharray: 5 4;
}

.loop-head-fill {
  fill: var(--black);
}

.loop-head-soft-fill {
  fill: var(--gray-2);
}

.loop-edge-label-optional {
  fill: var(--gray-2);
}

.loop-edge-label-return {
  text-anchor: middle;
}

.agent-node {
  display: flex;
  min-height: 88px;
  flex-direction: column;
  justify-content: center;
  padding: 18px 20px;
  border: 1px solid var(--black);
  border-top: 6px solid var(--gray-1);
}

.agent-hub-node {
  width: min(520px, calc(100% - 40px));
  margin-right: auto;
  margin-left: auto;
}

.agent-world {
  margin-top: 20px;
}

.agent-node span,
.agent-resource span {
  margin-bottom: 6px;
  color: var(--gray-3);
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
}

.agent-node strong {
  color: var(--black);
  font-size: 18px;
  line-height: 1.2;
}

.agent-node small,
.agent-resource small {
  margin-top: 6px;
  color: var(--gray-3);
  font-family: var(--mono);
  font-size: 10px;
}

.agent-world {
  border-top-color: var(--blue);
}

.agent-player {
  border-top-color: var(--green);
}

.agent-live-link {
  display: grid;
  width: min(420px, calc(100% - 56px));
  min-height: 48px;
  margin: 0 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.agent-live-link div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--gray-3);
  font-family: var(--mono);
  font-size: 10px;
  white-space: nowrap;
}

.agent-live-link b {
  color: var(--black);
  font-size: 20px;
  font-weight: 500;
}

.agent-resource-links {
  position: relative;
  display: grid;
  min-height: 62px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.agent-resource-links::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 14px;
  background: var(--black);
  content: "";
}

.agent-resource-links::after {
  position: absolute;
  top: 14px;
  left: 25%;
  width: 50%;
  height: 1px;
  background: var(--black);
  content: "";
}

.agent-resource-links > div {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 31px 12px 8px;
  color: var(--gray-3);
  font-family: var(--mono);
  font-size: 9px;
  text-align: center;
}

.agent-resource-links > div::before {
  position: absolute;
  top: 14px;
  left: 50%;
  width: 1px;
  height: 13px;
  background: var(--black);
  content: "";
}

.agent-resource-links b {
  color: var(--black);
  font-size: 14px;
  font-weight: 500;
}

.agent-resource-links code {
  padding: 0;
  border: 0;
  background: transparent;
  font-size: inherit;
}

.agent-resources {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--black);
  background: #f5f5f5;
}

.agent-resource {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 14px 18px;
  border-right: 1px solid var(--gray-1);
}

.agent-resource:last-child {
  border-right: 0;
}

.agent-resource strong {
  color: var(--black);
  font-size: 14px;
  line-height: 1.3;
}

.agent-resource code {
  padding: 0;
  border: 0;
  background: transparent;
  font-size: inherit;
}

.architecture-figure figcaption {
  margin-top: 8px;
  color: var(--gray-3);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
}

.architecture-figure figcaption strong {
  color: var(--black);
}

.method-details pre {
  width: 60%;
  max-width: 60%;
  column-span: none;
  overflow-x: auto;
  margin: 8px auto 20px;
  padding: 16px;
  box-sizing: border-box;
  border: 1px solid var(--gray-1);
  background: #f5f5f5;
  color: var(--black);
  font-size: 11px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.method-details .player-prompt {
  width: 100%;
  max-width: 100%;
  overflow-wrap: break-word;
}

.method-details h4 {
  margin: 18px 0 8px;
  font-family: var(--sans);
  font-size: 15px;
}

.paper-section-body .representation-table {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 20px auto;
  column-span: none;
  font-size: 12px;
  table-layout: auto;
}

.representation-table thead {
  display: none;
}

.representation-table tbody {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6667fr);
  grid-template-rows: auto auto;
  column-gap: 8px;
  row-gap: 10px;
}

/* Each row spans both tracks and borrows them with subgrid, so the three
   descriptions share one height and the media below them lines up whatever
   the copy says. A fixed min-height here goes stale every time it is edited. */
.representation-table tbody tr {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  min-width: 0;
}

.representation-table tbody td {
  display: block;
  width: auto;
  box-sizing: border-box;
}

.representation-table tbody td:nth-child(2) {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: 0;
  text-align: center;
  overflow: hidden;
  background: #d8d8d2;
}

.representation-table tbody tr:last-child td:nth-child(2) {
  aspect-ratio: 5 / 3;
  background: var(--black);
}

.representation-table img {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  height: auto;
  border: 1px solid var(--gray-1);
  image-rendering: pixelated;
}

.representation-table .representation-2d-row img {
  max-width: 100%;
}

.representation-table pre {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 5px;
  box-sizing: border-box;
  overflow: visible;
  font-size: 4px;
  line-height: 1.15;
  text-align: left;
  white-space: pre;
}

.representation-table pre code {
  display: block;
  width: max-content;
}

.representation-table .representation-3d-row img {
  max-width: none;
}

.game-mechanic-figure {
  margin: 22px 0;
}

.game-mechanic-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.game-mechanic-steps > div {
  min-width: 0;
}

.game-mechanic-steps img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--gray-1);
  image-rendering: pixelated;
}

.game-mechanic-steps span {
  display: block;
  margin-top: 7px;
  color: var(--black);
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
}

.game-mechanic-steps small {
  display: block;
  margin-top: 3px;
  color: var(--gray-3);
  font-size: 11px;
  line-height: 1.5;
}

.game-mechanic-figure figcaption {
  margin-top: 12px;
  color: var(--gray-3);
  font-size: 11px;
  line-height: 1.55;
}

.game-mechanic-figure figcaption strong {
  color: var(--black);
}

.paper-section-body .method-compare-table {
  width: 95%;
  max-width: 95%;
  margin: 20px auto;
  column-span: none;
  table-layout: fixed;
  font-size: 12px;
}

.method-compare-table th:first-child,
.method-compare-table td:first-child {
  width: 15%;
  color: var(--black);
}

.method-compare-table:not(.memory-compare-table) th:nth-child(2),
.method-compare-table:not(.memory-compare-table) td:nth-child(2) {
  width: 47%;
}

.method-compare-table td {
  overflow-wrap: anywhere;
}

.method-compare-table pre {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 8px 9px;
  overflow-x: auto;
  font-size: 9.5px;
  line-height: 1.5;
  white-space: pre;
  overflow-wrap: normal;
  tab-size: 2;
}

.method-compare-table small {
  display: block;
  margin-top: 7px;
  color: var(--gray-3);
  font-size: 11px;
}

.memory-compare-table th:first-child,
.memory-compare-table td:first-child {
  width: 15%;
}

.memory-compare-table th:nth-child(2),
.memory-compare-table td:nth-child(2) {
  width: 26%;
}

.memory-compare-table th:nth-child(3),
.memory-compare-table td:nth-child(3) {
  width: 33%;
}

.memory-compare-table th:nth-child(4),
.memory-compare-table td:nth-child(4) {
  width: 26%;
}

.paper-section-body .method-compare-rules {
  margin: 0;
  padding-left: 15px;
}

.method-compare-rules li {
  margin-bottom: 7px;
  line-height: 1.5;
}

.method-compare-rules li:last-child {
  margin-bottom: 0;
}

.method-details h4:first-child {
  margin-top: 0;
}

.visual-media {
  border: 1px solid var(--black);
  background: var(--black);
}

.visual-media img,
.visual-media video {
  display: block;
  width: 100%;
  height: auto;
}

.article-figure figcaption {
  margin-top: 8px;
  color: var(--gray-3);
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.5;
}

.article-figure figcaption strong {
  color: var(--black);
}

.article-figure figcaption cite {
  display: block;
  margin-top: 2px;
  color: var(--gray-2);
  font-style: normal;
}

.paper-citation {
  margin-top: 34px;
}

.paper-citation h2 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
}

.citation-block {
  margin: 0;
  border: 1px solid var(--gray-1);
  background: var(--white);
}

.citation-block figcaption {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 12px 0 21px;
  border-bottom: 1px solid var(--gray-1);
  background: #f3f3f3;
  color: var(--gray-3);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.citation-copy {
  padding: 6px 11px;
  border: 1px solid var(--black);
  background: var(--white);
  color: var(--black);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: inherit;
  text-transform: uppercase;
  white-space: nowrap;
}

.citation-copy:hover {
  background: var(--black);
  color: var(--white);
}

/* The entry is pre-wrapped at a readable width, but a long title or URL still
   has to scroll inside the box rather than widening the page. */
.citation-block pre {
  overflow-x: auto;
  margin: 0;
  padding: 19px 21px;
  color: var(--gray-4);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  white-space: pre;
}

.citation-block pre code {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
}

.paper-footer {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 18px;
  padding: 0 12px;
  border: 1px solid var(--black);
  background: var(--black);
  color: var(--white);
  font-family: var(--mono);
  font-size: 8px;
  text-transform: uppercase;
}

.paper-footer a {
  text-decoration-color: var(--red);
  text-underline-offset: 3px;
}

@media (max-width: 1100px) {
  .paper-header-body h1 {
    font-size: 44px;
  }
}

@media (max-width: 800px) {
  .paper-header::before {
    display: none;
  }

  .paper-page {
    width: min(100% - 32px, 1280px);
    margin-top: 16px;
  }

  .paper-header-body h1 {
    font-size: 40px;
  }

  .paper-section-body {
    column-count: 1;
    column-rule: 0;
  }

  .article-opening .paper-section-body > p:first-child {
    font-size: 21px;
  }

  .replay-reader-guide,
  .trajectory-reading {
    grid-template-columns: 1fr;
  }

  .replay-reader-guide > div + div,
  .trajectory-reading section:nth-child(even) {
    border-left: 0;
  }

  .replay-reader-guide > div + div,
  .trajectory-reading section + section {
    border-top: 1px solid var(--black);
  }

  .replay-bookmarks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .replay-bookmarks button:nth-child(3) {
    border-left: 0;
  }

  .replay-bookmarks button:nth-child(n + 3) {
    border-top: 1px solid var(--black);
  }

  .article-replay-heading {
    grid-template-columns: 1fr auto;
  }

  .article-replay-heading > span {
    grid-column: 1 / -1;
  }

  .article-replay-heading > a {
    grid-column: 2;
  }

  .article-replay-shell {
    height: max(680px, 82svh);
  }

  .lf52-tutorial-header {
    grid-template-columns: 1fr;
  }

  .lf52-tutorial-header > div strong {
    max-width: none;
  }

  .lf52-tutorial-stage {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .lf52-tutorial-world {
    border-right: 0;
    border-bottom: 1px solid var(--black);
  }

  .lf52-tutorial-canvas {
    width: min(100%, 512px);
  }

  .lf52-tutorial-agent {
    min-height: 390px;
  }

  .lf52-rulebook {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lf52-rulebook > header {
    grid-column: 1 / -1;
    min-height: 74px;
  }

  .walkthrough-beat {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 11px 14px 13px;
  }

  .walkthrough-beat-index {
    display: flex;
    align-items: baseline;
    gap: 12px;
  }

  .walkthrough-beat-index span {
    margin-bottom: 0;
  }

  .walkthrough-beat-index strong {
    max-width: none;
  }

  .paper-section-body .walkthrough-beat h3 {
    margin-bottom: 7px;
    font-size: 19px;
  }

  .paper-section-body .walkthrough-beat p {
    font-size: 12px;
    line-height: 1.5;
  }

  .replay-stage {
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .case-manual-header,
  .case-manual-rules,
  .case-item-grid,
  .case-manual-failure {
    grid-template-columns: 1fr;
  }

  .model-update,
  .model-update-piece {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .manual-jump-demo,
  .manual-rule-copy,
  .manual-failure-visual {
    border-right: 0;
    border-bottom: 1px solid var(--black);
  }

  .replay-media {
    min-height: 0;
    aspect-ratio: 1;
    border-right: 0;
    border-bottom: 1px solid var(--black);
  }

  .replay-copy {
    min-height: 360px;
  }

  .mechanic-bridge-stage,
  .mechanic-bridge-stage .replay-media {
    height: auto;
    min-height: 0;
  }

  .replay-stage.mechanic-bridge-stage {
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .mechanic-bridge-stage .replay-copy {
    min-height: 0;
    justify-content: flex-start;
  }

}

@media (max-height: 600px) and (min-width: 600px) {
  .replay-copy {
    padding: 24px 28px;
  }
}

@media (max-width: 720px) {
  .arc-examples {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .arc-representation-grid {
    grid-template-columns: 1fr;
  }

  .arc-representation-pair {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .text-grid-demo:hover .visual-media,
  .text-grid-demo:focus-visible .visual-media {
    transform: none;
    box-shadow: none;
  }

  .representation-table tbody {
    grid-template-columns: 1fr;
  }

  .model-results-selector {
    grid-template-columns: auto repeat(2, minmax(0, 1fr));
  }

  .model-results-selector > span,
  .model-results-selector > button {
    min-height: 42px;
    padding: 0 11px;
    font-size: 9px;
  }

  .model-results-header {
    grid-template-columns: 1fr;
  }

  .model-results-title {
    padding: 14px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--black);
  }

  .model-results-summary > div {
    padding: 11px 9px;
  }

  .model-results-summary dd {
    font-size: 13px;
  }

  .results-table > thead th:nth-child(4),
  .results-table > thead th:nth-child(5),
  .result-row > td:nth-child(4),
  .result-row > td:nth-child(5) {
    display: none;
  }

  .paper-section-body .result-detail-cell {
    display: table-cell;
  }

  .result-levels {
    padding-left: 12px;
  }

  .result-levels-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .paper-section-body .results-table th:nth-child(1) {
    width: 42%;
  }

  .paper-section-body .results-table th:nth-child(2) {
    width: 15%;
  }

  .paper-section-body .results-table th:nth-child(3) {
    width: 26%;
  }

  .paper-section-body .results-table th:nth-child(6) {
    width: 17%;
  }

  .result-actions-popover {
    right: -48px;
    left: auto;
    width: min(276px, calc(100vw - 28px));
    transform: translateY(4px);
  }

  .result-actions:hover .result-actions-popover,
  .result-actions:focus-within .result-actions-popover {
    transform: translateY(0);
  }

}

@media (max-width: 520px) {
  body {
    background-image: none;
  }

  .paper-page {
    width: 100%;
    margin: 0;
  }

  .model-results-selector {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .model-results-selector > span {
    display: none;
  }

  .model-results-selector > button:first-of-type {
    border-left: 0;
  }

  .model-results-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .model-results-summary > div:nth-child(3) {
    border-left: 0;
  }

  .model-results-summary > div:nth-child(n + 3) {
    border-top: 1px solid var(--gray-1);
  }

  .paper-section-body .results-table th,
  .paper-section-body .results-table td {
    padding-right: 7px;
    padding-left: 7px;
  }

  .result-task {
    grid-template-columns: 38px minmax(42px, 1fr) 24px;
    gap: 7px;
  }

  .result-thumbnail {
    width: 38px;
    height: 38px;
    box-shadow: 1px 1px 0 var(--result-ink);
  }

  .result-toggle {
    width: 24px;
    height: 28px;
  }

  .result-replay-link span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .result-replay-link svg {
    width: 18px;
    height: 18px;
  }

  .replay-bookmarks {
    grid-template-columns: 1fr;
  }

  .replay-bookmarks button + button,
  .replay-bookmarks button:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--black);
  }

  .article-replay-heading {
    grid-template-columns: 1fr;
  }

  .article-replay-heading > a,
  .article-replay-heading > p {
    grid-column: 1;
  }

  .article-replay-heading > a {
    border-top: 1px solid var(--black);
    border-left: 0;
  }

  .lf52-tutorial-header nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lf52-tutorial-header nav button:nth-child(2) {
    border-right: 0;
  }

  .lf52-tutorial-header nav button:nth-child(n + 3) {
    border-top: 1px solid var(--gray-1);
  }

  .lf52-tutorial-world > header {
    align-items: flex-start;
    height: auto;
    min-height: 44px;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
  }

  .lf52-tutorial-world {
    grid-template-rows: auto minmax(0, 1fr) 96px;
  }

  .lf52-coach,
  .lf52-memory-strip,
  .lf52-pixel-strip {
    height: 96px;
  }

  .lf52-coach {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    padding-left: 48px;
    gap: 4px;
  }

  .lf52-coach span {
    width: auto;
  }

  .lf52-pixel-strip {
    grid-template-columns: minmax(120px, .85fr) minmax(0, 1fr);
    gap: 8px;
  }

  .lf52-hotspot span {
    max-width: 115px;
    font-size: 6px;
  }

  .lf52-tutorial-agent {
    min-height: 360px;
  }

  .lf52-tutorial-copy {
    padding: 24px 21px;
  }

  .paper-section-body .lf52-tutorial-copy h3 {
    font-size: 20px;
  }

  .lf52-rulebook {
    grid-template-columns: 1fr;
  }

  .lf52-rulebook > header {
    grid-column: 1;
  }

  .lf52-rule {
    min-height: 72px;
  }

  .lf52-tutorial-controls {
    grid-template-columns: 68px 72px minmax(44px, 1fr) 44px 78px;
  }

  .lf52-tutorial-progress {
    margin: 0 9px;
  }

  .paper-header {
    padding: 0 14px 25px;
    border-width: 0 0 1px;
  }

  .manuscript-meta {
    min-height: 40px;
    margin: 0 -14px 25px;
    padding: 0 10px;
  }

  .status-banner {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 22px;
  }

  .manuscript-meta > :last-child {
    display: none;
  }

  .paper-header-body h1 {
    font-size: 34px;
    line-height: 1.05;
  }

  .paper-subtitle {
    font-size: 18px;
  }

  .paper-byline {
    margin-top: 24px;
    padding-top: 14px;
  }

  .paper-authors {
    gap: 6px 18px;
    margin: 0;
    font-size: 14px;
  }

  .paper-affiliations {
    display: grid;
    gap: 3px;
  }

  .paper {
    margin-top: 0;
    padding: 0 14px 30px;
    border-width: 0 0 1px;
  }

  .agent-node {
    min-height: 84px;
  }

  .agent-hub-node {
    width: calc(100% - 28px);
  }

  .agent-world {
    margin-top: 14px;
  }

  .agent-live-link {
    width: calc(100% - 40px);
  }

  .agent-resource-links > div {
    padding-right: 6px;
    padding-left: 6px;
  font-size: 8px;
}

  .agent-resource {
    padding: 12px 10px;
  }

  .agent-resource strong {
    font-size: 12px;
  }

  .agent-resource small {
    font-size: 8px;
  }

  .replay-copy {
    min-height: 420px;
    padding: 24px 20px;
  }

  .case-manual-header {
    padding: 24px 18px;
    gap: 12px;
  }

  .case-item {
    grid-template-columns: 120px minmax(0, 1fr);
  }

  .case-item-sprite {
    width: 120px;
  }

  .model-update,
  .model-update-piece {
    grid-template-columns: 1fr;
  }

  .model-update-heading,
  .model-update-fact {
    min-height: 120px;
  }

  .model-update-jump,
  .model-update-piece-visual {
    min-height: 148px;
  }

  .paper-section-body .replay-copy h4 {
    font-size: 18px;
  }

  .replay-controls {
    grid-template-columns: 70px minmax(0, 1fr);
  }

  .replay-step-buttons {
    grid-auto-columns: minmax(82px, 1fr);
  }

  .replay-step-buttons button {
    min-width: 82px;
  }

  .replay-frame-grid {
    gap: 5px;
  }

  .memory-write {
    grid-template-columns: 1fr;
  }

  .memory-write-meta {
    border-right: 0;
    border-bottom: 1px solid var(--black);
  }

  .memory-write-replacement {
    grid-template-columns: 1fr;
  }

  .paper-section-body .memory-write-replacement p + p {
    border-top: 1px solid var(--black);
    border-left: 0;
  }

  .replay-copy .memory-write {
    grid-template-columns: 1fr;
  }

  .replay-copy .memory-write-meta {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    justify-content: initial;
    gap: 8px;
    border-right: 0;
    border-bottom: 1px solid var(--gray-1);
  }

  .replay-copy .memory-write-meta span,
  .replay-copy .memory-write-meta small {
    margin: 0;
  }

  .replay-copy .memory-write-meta small {
    text-align: right;
  }

  .replay-copy .memory-write-replacement {
    grid-template-columns: 1fr;
  }

  .paper-section-body .replay-copy .memory-write-replacement p + p {
    border-top: 1px solid var(--gray-1);
  }

  .paper-section {
    padding-top: 28px;
  }

  .section-number {
    width: 27px;
    height: 27px;
  }

  .paper-section-heading {
    gap: 9px;
  }

  .paper-section-heading h2 {
    font-size: 21px;
  }

  .paper-section-body {
    font-size: 15px;
  }

  .paper-section-body pre {
    padding: 16px;
  }

  .paper-section-body table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .paper-section-body .system-summary-table {
    display: table;
    overflow-x: visible;
    font-size: 10px;
    white-space: normal;
  }

  .paper-section-body .system-summary-table th,
  .paper-section-body .system-summary-table td {
    height: 34px;
    padding: 6px 5px;
    overflow-wrap: normal;
  }

  .paper-section-body .system-summary-table thead th {
    height: 38px;
    font-size: 8px;
    line-height: 1.2;
  }

  .paper-section-body .system-summary-table th:last-child,
  .paper-section-body .system-summary-table td:last-child {
    white-space: nowrap;
  }

  .paper-section-body .representation-table {
    display: table;
    width: 100%;
    max-width: 100%;
    overflow-x: visible;
    white-space: normal;
  }

  .paper-section-body .method-compare-table {
    display: table;
    width: 100%;
    max-width: 100%;
    overflow-x: visible;
    white-space: normal;
  }

  .method-details pre {
    width: 100%;
    max-width: 100%;
  }

  .paper-section-body .results-table,
  .paper-section-body .result-levels-table {
    display: table;
  }

  .result-levels {
    padding-left: 14px;
  }

  .paper-footer {
    margin: 0;
    border-width: 0;
  }
}

@media print {
  body {
    background: var(--white);
  }

  .paper-page {
    width: 100%;
    margin: 0;
  }

  .manuscript-meta,
  .paper-footer,
  .replay-controls {
    display: none;
  }

  .replay-stage[hidden] {
    display: grid;
    border-top: 1px solid var(--black);
  }

  .paper-header {
    padding-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .replay-excerpt {
    transition: none;
  }
}