/* site/v6: an editorial page in the language of the share cards. Big heavy headlines with the number in red, one
   scene per finding drawn as SVG, a small proof line under every picture. Dark chapters are the tram (real photos);
   light chapters are the drawn dilemmas. */
:root {
  --mini-bg: var(--paper);
  --ink: #14161b;
  --paper: #f6f6f2;
  --sand: #ebe7dd;
  --night: #0c1013;
  --night2: #151c22;
  --red: #e2302a;
  --green: #1e9e57;
  --amber: #f5b700;
  --slate: #3d5a80;
  --muted: #6b6f76;
  /* the four situations, easiest first; each always sits next to its name and number */
  --c1: #2f8f5b;
  --c2: #d98a1c;
  --c3: #7a4fc4;
  --c4: #c93a2e;
  --font: 'Avenir Next', 'Avenir', 'Segoe UI', system-ui, sans-serif;
  --serif: Charter, 'Iowan Old Style', Georgia, serif;
  --measure: 1120px;
  --pad: clamp(18px, 4vw, 56px);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 64px;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 500 18px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a {
  color: inherit;
}
h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.06;
}
em {
  font-style: normal;
  box-shadow: inset 0 -0.18em 0 var(--amber);
}
.noscript {
  padding: 40px;
}
button {
  font: inherit;
  color: inherit;
}
:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
}

/* ---------- top bar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px var(--pad);
  background: rgba(12, 16, 19, 0.94);
  backdrop-filter: blur(8px);
  color: #fff;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: var(--amber);
  text-decoration: none;
  white-space: nowrap;
}
.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--amber);
}
.topbar nav {
  display: flex;
  gap: clamp(10px, 2vw, 26px);
  overflow-x: auto;
  scrollbar-width: none;
  font-size: 15px;
  font-weight: 700;
}
.topbar nav a {
  color: #aab3b9;
  text-decoration: none;
  white-space: nowrap;
}
.topbar nav a:hover,
.topbar nav a.on {
  color: #fff;
}
.topbar nav .st {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-right: 6px;
  border-radius: 5px;
  background: #39424a;
  color: #fff;
  font-size: 12px;
}
.topbar nav a.on .st {
  background: var(--sc, var(--amber));
  color: #fff;
}
.topbar nav a:nth-child(1) {
  --sc: var(--c1);
}
.topbar nav a:nth-child(2) {
  --sc: var(--c2);
}
.topbar nav a:nth-child(3) {
  --sc: var(--c3);
}
.topbar nav a:nth-child(4) {
  --sc: var(--c4);
}

/* ---------- hero */
.hero {
  background: var(--night);
  color: #fff;
  padding: clamp(36px, 6vw, 88px) var(--pad) clamp(48px, 6vw, 96px);
}
.hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.kicker {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--amber);
}
.hero h1 {
  font-size: clamp(36px, 4.6vw, 70px);
  line-height: 1.02;
}
.hi {
  color: var(--red);
}
.hero .dek {
  font-size: clamp(17px, 1.4vw, 20px);
  color: #c9d0d5;
  max-width: 44ch;
  margin: 20px 0 0;
}
.hero-frame {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
}
.hero-frame .scene.photo {
  border-radius: 0;
}
.hero-q {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
  margin-top: 16px;
  transition: opacity 0.4s;
}
.hero-q span {
  font-weight: 800;
  font-size: clamp(18px, 1.7vw, 22px);
}
.pick {
  display: flex;
  gap: 12px;
}
.pick button,
.q-pick button {
  min-height: 52px;
  min-width: 150px;
  padding: 10px 24px;
  border-radius: 999px;
  border: 3px solid #fff;
  background: var(--ink);
  color: #fff;
  font-weight: 800;
  font-size: 19px;
  cursor: pointer;
  transition:
    transform 0.15s,
    background 0.15s;
}
.pick button:hover,
.q-pick button:hover {
  transform: translateY(-2px);
  background: var(--red);
}
.hero-q.done {
  display: none;
}
.hero-out {
  font-size: clamp(17px, 1.5vw, 21px);
  margin: 16px 0 0;
}
.hero-out:empty {
  display: none;
}
.hero-out strong {
  color: #fff;
}
.hero-out a {
  color: var(--amber);
}

/* ---------- chapters */
.chapter {
  padding: clamp(56px, 8vw, 120px) var(--pad);
}
.chapter:nth-of-type(odd) {
  background: var(--paper);
}
#press {
  background: var(--night);
  color: #fff;
}
.ch-head {
  max-width: var(--measure);
  margin: 0 auto clamp(36px, 5vw, 64px);
}
.ch-head h2 {
  font-size: clamp(34px, 5vw, 68px);
  max-width: 18ch;
}
.ch-head .dek {
  font-size: clamp(18px, 1.6vw, 21px);
  max-width: 56ch;
  margin: 14px 0 0;
  color: var(--muted);
}
#press .ch-head .dek {
  color: #aab3b9;
}

/* ---------- a rung opens with a dark band: where you are on the ladder, the claim, and its findings to scan */
.rung {
  padding-top: 0;
}
.rung-head {
  margin: 0 calc(-1 * var(--pad)) clamp(36px, 5vw, 64px);
  padding: clamp(56px, 8vw, 112px) var(--pad) clamp(44px, 6vw, 72px);
  background: var(--ink);
  color: #fff;
}
.rung-in {
  max-width: var(--measure);
  margin: 0 auto;
}
.rung-steps {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 44px;
  margin-bottom: 18px;
}
.rung-steps i {
  width: 30px;
  border-radius: 4px 4px 0 0;
  background: #39424a;
}
.rung-steps i:nth-child(1) {
  height: 25%;
}
.rung-steps i:nth-child(2) {
  height: 50%;
}
.rung-steps i:nth-child(3) {
  height: 75%;
}
.rung-steps i:nth-child(4) {
  height: 100%;
}
.rung-steps i.on {
  background: var(--step, var(--amber));
}
.rung-n {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 700;
  color: #aab3b9;
}
.rung-n b {
  margin-left: 10px;
  font-size: 28px;
  font-weight: 800;
  color: var(--step, var(--amber));
}
.rung-head h2 {
  font-size: clamp(38px, 5.6vw, 76px);
  max-width: 17ch;
}
.rung-head .dek {
  font-size: clamp(18px, 1.6vw, 21px);
  max-width: 58ch;
  margin: 18px 0 0;
  color: #c9d0d5;
}
.rung-list {
  list-style: none;
  padding: 0;
  margin: clamp(24px, 3vw, 36px) 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(20px, 3vw, 44px);
}
.rung-list li {
  border-top: 1px solid #d9d3c6;
}
.rung-list a {
  display: block;
  padding: 11px 0 13px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.35;
}
.rung-list a::after {
  content: ' ↓';
  color: var(--red);
}
.rung-list a:hover {
  color: var(--red);
}
/* ---------- the hard rung's own chart: five dilemmas, AIs against people */
.dl-chart {
  margin-top: clamp(28px, 4vw, 44px);
}
.dl-key {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: #3a3f46;
}
.dl-key i {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin: 0 6px 0 16px;
  vertical-align: -1px;
}
.dl-key i:first-child {
  margin-left: 0;
}
.dl-key .ai,
.dl-chart .b.ai i {
  background: var(--red);
}
.dl-key .hu,
.dl-chart .b.hu i {
  background: #8c9198;
}
.dl-chart ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dl-chart li {
  display: grid;
  grid-template-columns: minmax(150px, 220px) 1fr;
  grid-template-rows: auto auto;
  column-gap: 18px;
  row-gap: 4px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid #d9d3c6;
}
.dl-chart .lb {
  grid-row: span 2;
  font-weight: 800;
  font-size: 18px;
}
.dl-chart .b {
  display: grid;
  grid-template-columns: 1fr 56px;
  gap: 12px;
  align-items: center;
}
.dl-chart .b::before {
  content: '';
  grid-area: 1 / 1;
  height: 14px;
  border-radius: 4px;
  background: #e4dfd3;
}
.dl-chart .b i {
  grid-area: 1 / 1;
  height: 14px;
  border-radius: 4px;
  width: 0;
  transition: width 1s cubic-bezier(0.5, 0, 0.3, 1) 0.2s;
}
.dl-chart.played .b i,
.played .dl-chart .b i {
  width: calc(var(--w) * 1%);
}
.dl-chart .b b {
  text-align: right;
  font-size: 18px;
}
.dl-chart .b.ai b {
  color: var(--red);
}
.dl-chart .b.hu b {
  color: var(--muted);
}
.dl-note {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--muted);
}

/* ---------- appendix */
#science {
  background: var(--paper);
}
.models-t {
  max-width: var(--measure);
  margin: clamp(40px, 6vw, 72px) auto 0;
}
.models-t h3 {
  font-size: clamp(24px, 2.6vw, 34px);
  margin-bottom: 14px;
}
.scroll-x {
  overflow-x: auto;
}
.models-t table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.models-t th {
  text-align: left;
  font-size: 13px;
  color: var(--muted);
  padding: 8px 10px;
  border-bottom: 2px solid var(--ink);
  white-space: nowrap;
}
.models-t td {
  padding: 9px 10px;
  border-bottom: 1px solid #ddd8cc;
  vertical-align: top;
}
.models-t .r {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.models-t .mute {
  color: var(--muted);
}
.models-t .ok {
  color: var(--green);
  font-weight: 700;
}
.models-t .bad {
  color: var(--red);
  font-weight: 700;
}
.models-t .note {
  font-size: 14px;
  color: var(--muted);
  margin: 12px 0 0;
}
.deeper {
  max-width: var(--measure);
  margin: clamp(40px, 6vw, 72px) auto 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.deeper a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 18px;
  border-radius: 14px;
  border: 2px solid var(--ink);
  text-decoration: none;
}
.deeper a:hover {
  background: var(--ink);
  color: #fff;
}
.deeper b {
  font-size: 18px;
}
.deeper span {
  font-size: 15px;
  color: var(--muted);
}
.deeper a:hover span {
  color: #c9d0d5;
}

/* ---------- a finding: headline, scene, proof */
.finding {
  max-width: var(--measure);
  margin: 0 auto clamp(64px, 9vw, 128px);
}
.finding:last-child {
  margin-bottom: 0;
}
.f-head {
  font-size: clamp(28px, 3.6vw, 50px);
  max-width: 22ch;
  margin-bottom: clamp(18px, 2.4vw, 30px);
}
.finding.wide .f-head {
  max-width: 26ch;
}
.f-head .num {
  color: var(--red);
  font-variant-numeric: tabular-nums;
}
.f-scene {
  position: relative;
}
.scene {
  display: block;
  width: 100%;
  height: auto;
}
.scene.photo {
  border-radius: 16px;
  height: auto;
  background: #000;
}
.f-proof {
  max-width: 70ch;
  margin: 18px 0 0;
  padding-left: 14px;
  border-left: 4px solid var(--amber);
  font-size: 15px;
  line-height: 1.55;
  color: #50555c;
}
#press .f-proof {
  color: #aab3b9;
}
.f-share {
  margin-top: 14px;
}
.share {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 2px solid currentColor;
  background: transparent;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
}
.share::before {
  content: '';
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v13M6 9l6-6 6 6M4 15v5h16v-5'/%3E%3C/svg%3E")
    center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v13M6 9l6-6 6 6M4 15v5h16v-5'/%3E%3C/svg%3E")
    center/contain no-repeat;
}

/* ---------- scene animation: plays once when scrolled into view */
.scene .hot path {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.6, 0, 0.3, 1) 0.35s;
}
.played .scene .hot path,
.played.scene .hot path {
  stroke-dashoffset: 0;
}
.scene .tram {
  transition: transform 1.2s cubic-bezier(0.5, 0, 0.3, 1) 0.4s;
}
.played .scene .tram,
.played.scene .tram {
  transform: translateX(26px);
}
.played .scene .tram-far,
.played.scene .tram-far {
  transform: translateX(var(--roll));
}
.scene .ai-pulled {
  opacity: 0;
}
.played .scene .ai {
  opacity: 0;
  transition: opacity 0.1s 0.3s;
}
.played .scene .ai-pulled {
  opacity: 1;
  transition: opacity 0.1s 0.3s;
}
.scene .skull {
  opacity: 0;
  transform: translateY(-14px);
  transform-box: fill-box;
  transition:
    opacity 0.35s,
    transform 0.45s cubic-bezier(0.3, 1.6, 0.5, 1);
  transition-delay: calc(1.4s + var(--d, 0ms));
}
.played .scene .skull,
.played.scene .skull {
  opacity: 1;
  transform: none;
}
.scene .route {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.2s cubic-bezier(0.6, 0, 0.3, 1) 0.3s;
}
.played .scene .route {
  clip-path: inset(0 0 0 0);
}
.scene .bubble {
  opacity: 0;
  transform: translateY(10px);
  transform-box: fill-box;
  transition:
    opacity 0.4s,
    transform 0.4s;
}
.played .scene .bubble {
  opacity: 1;
  transform: none;
}
/* the hero plays on click, not on scroll */
.hero-frame:not(.played) .scene .route,
.hero-frame:not(.played) .scene .skull {
  transition-delay: 0s;
}
.hero-frame .scene .skull {
  transition-delay: calc(1.1s + var(--d, 0ms));
}

/* ---------- the flip toggle */
.flip-tabs {
  display: inline-flex;
  padding: 5px;
  border-radius: 999px;
  background: var(--night2);
  margin-bottom: 18px;
}
.flip-tabs button {
  padding: 10px 20px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: #aab3b9;
  font-weight: 800;
  cursor: pointer;
}
.flip-tabs button[aria-selected='true'] {
  background: #fff;
  color: var(--ink);
}
.flip-body {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 40px);
  align-items: center;
}
.flip-photo {
  position: relative;
}
.flip .when {
  display: none;
}
.flip[data-mode='dilemma'] .when.dilemma,
.flip[data-mode='routing'] .when.routing {
  display: block;
  animation: fadein 0.35s;
}
.flip-photo .when .route {
  clip-path: none;
}
.flip-photo .when .skull {
  opacity: 1;
  transform: none;
  transition: none;
}
@keyframes fadein {
  from {
    opacity: 0;
  }
}
.prompt {
  font-family: var(--serif);
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.4;
  color: #dfe5e9;
  margin: 0 0 20px;
}
.big {
  font-size: clamp(64px, 9vw, 128px);
  font-weight: 800;
  line-height: 0.9;
  margin: 0;
}
.big small {
  display: block;
  font-size: 20px;
  margin-top: 10px;
  color: #c9d0d5;
}
.good {
  color: var(--green);
}
.bad {
  color: var(--red);
}

/* ---------- dumbbell: every AI, two wordings */
.dumbbell {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dumbbell li {
  display: grid;
  grid-template-columns: minmax(150px, 280px) 1fr 64px;
  gap: 16px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid #222b32;
}
.dumbbell .who {
  font-size: 16px;
  color: #c9d0d5;
}
.dumbbell .who b {
  color: #fff;
}
.dumbbell .track {
  position: relative;
  height: 22px;
}
.dumbbell .track::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: #2a343b;
}
.dumbbell .bar {
  position: absolute;
  top: calc(50% - 3px);
  height: 6px;
  border-radius: 3px;
  background: var(--red);
  opacity: 0.55;
  left: calc(min(var(--a), var(--b)) * 1%);
  width: 0;
  transition: width 0.9s cubic-bezier(0.5, 0, 0.3, 1) 0.2s;
}
.played .dumbbell .bar,
.dumbbell.played .bar {
  width: calc((max(var(--a), var(--b)) - min(var(--a), var(--b))) * 1%);
}
.dumbbell i {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid var(--night);
  transform: translate(-50%, -50%);
}
.dumbbell i.g {
  left: calc(var(--x) * 1%);
  background: #3ed183;
}
.dumbbell i.r {
  left: calc(var(--x) * 1%);
  background: var(--red);
  width: 22px;
  height: 22px;
}
.dumbbell .val {
  text-align: right;
  font-weight: 800;
  color: var(--red);
}
.legend {
  font-size: 14px;
  color: #aab3b9;
  margin: 14px 0 0;
}
.legend i {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  vertical-align: -1px;
  margin: 0 4px 0 10px;
}
.legend i.g {
  background: #3ed183;
  margin-left: 0;
}
.legend i.r {
  background: var(--red);
}

/* ---------- photos in pairs */
.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 2vw, 24px);
}
.pair figure {
  margin: 0;
}
.pair figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 10px;
}
.pair figcaption b {
  font-size: clamp(32px, 4vw, 52px);
}
.pair.two figcaption {
  color: var(--ink);
}
.sticky-note {
  position: relative;
  z-index: 2;
  width: min(86%, 760px);
  margin: 0 auto -34px;
  padding: 22px 30px;
  transform: rotate(-2deg);
  background: #ffe36e;
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.25;
  box-shadow: 0 10px 0 -4px #f2cd2e;
}
.terminal {
  padding: clamp(16px, 2vw, 26px) clamp(18px, 2.4vw, 30px);
  border-radius: 14px;
  background: #05080a;
  border: 2px solid #2a343b;
  font:
    500 clamp(14px, 1.5vw, 19px) / 1.6 Menlo,
    'SF Mono',
    Consolas,
    monospace;
  color: #9aa4ab;
}
.terminal p {
  margin: 0;
}
.terminal .type {
  color: #ff6b5e;
  font-weight: 700;
  /* typed in left to right; the line keeps its full height the whole time, so nothing below it moves */
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.6s steps(60) 0.3s;
}
.played .terminal .type {
  clip-path: inset(0 0 0 0);
}
.tally {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 26px;
}
.tally b {
  display: block;
  font-size: clamp(56px, 7vw, 96px);
  line-height: 1;
  color: #c9d0d5;
}
.tally .bad b {
  color: var(--red);
}
.tally span {
  font-weight: 700;
  color: #aab3b9;
}
.crowd {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 14px;
}
.crowd i {
  width: 12px;
  height: 18px;
  border-radius: 6px 6px 3px 3px;
  background: #ff7a00;
  opacity: 0;
  transform: scale(0.4);
  transition:
    opacity 0.2s,
    transform 0.2s;
}
.tally > div:first-child .crowd i {
  background: #7a8288;
}
.played .crowd i {
  opacity: 1;
  transform: none;
}

/* ---------- "but" follow-up */
.but {
  margin-top: 26px;
  padding: clamp(18px, 2.4vw, 28px);
  border-radius: 18px;
  background: var(--sand);
}
.but p {
  margin: 0 0 8px;
  font-size: clamp(19px, 1.8vw, 24px);
  font-weight: 700;
  max-width: 40ch;
}
.but p.small {
  font-size: 16px;
  font-weight: 600;
  color: var(--muted);
  margin: 10px 0 0;
}
.scene.small {
  max-width: 720px;
}

/* ---------- backing rows */
.backing {
  display: grid;
  gap: 14px;
}
.back-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 110px 140px 110px;
  align-items: end;
  gap: 12px;
  padding: 16px 18px 12px;
  border-radius: 18px;
  background: var(--sand);
}
.back-row .side {
  text-align: center;
  font-weight: 800;
  font-size: 16px;
}
.back-row .side .scene {
  height: 120px;
  width: auto;
  margin: 0 auto;
}
.bots {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 0;
  align-items: end;
  min-height: 70px;
}
.bots span {
  width: 46px;
  opacity: 0;
  transform: translateX(-30px);
  transition:
    opacity 0.3s,
    transform 0.4s cubic-bezier(0.3, 1.4, 0.5, 1);
  transition-delay: calc(var(--i) * 70ms);
}
.played .bots span,
.back-row.played .bots span {
  opacity: 1;
  transform: none;
}
.bots .scene {
  width: 46px;
}
.back-row .none {
  align-self: center;
  justify-self: center;
  padding: 18px 16px;
  border: 3px dashed #b9b1a2;
  border-radius: 14px;
  color: #a39b8b;
  font-weight: 800;
}
.back-row .score {
  align-self: center;
  text-align: right;
  font-weight: 800;
  font-size: 26px;
  color: var(--muted);
}
.back-row .score b {
  color: var(--red);
  font-size: 44px;
}

/* ---------- ranks (nationality) */
.ranks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 3vw, 40px);
}
.rank h4 {
  font-size: 24px;
  margin-bottom: 12px;
}
.rank ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rank li {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 7px 12px;
  margin-bottom: 6px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--sand);
  font-weight: 700;
}
.rank li::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: #ddd5c4;
  transition: width 0.9s cubic-bezier(0.5, 0, 0.3, 1);
  transition-delay: 0.1s;
}
.played .rank li::before,
.ranks.played .rank li::before {
  width: calc(var(--w) * 1%);
}
.rank li > * {
  position: relative;
}
.rank li.am {
  background: var(--red);
  color: #fff;
}
.rank li.am::before {
  background: #c02520;
}
.rank .flag .scene {
  width: 36px;
}
.rank .p {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.rank li.am .p {
  color: #fff;
}

/* ---------- orders (TypeSafe, Cloudflare disability) */
.order {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: clamp(8px, 2vw, 24px);
}
.order li {
  text-align: center;
}
.order .fig {
  position: relative;
}
.order .fig .scene {
  height: clamp(120px, 16vw, 200px);
  width: auto;
  margin: 0 auto;
}
.order .sk {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s 1.2s;
}
.order .sk .scene {
  height: 52px;
}
.played .order .sk,
.order.played .sk {
  opacity: 1;
}
.order b {
  display: block;
  margin: 8px 0 12px;
  font-size: clamp(14px, 1.6vw, 20px);
}
.order .last b {
  color: var(--red);
}
.order .col {
  position: relative;
  height: clamp(140px, 18vw, 220px);
  margin: 0 auto;
  width: min(100%, 110px);
  border-radius: 12px;
  background: #e4dfd3;
  overflow: hidden;
}
.order .col i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  background: var(--slate);
  transition: height 0.9s cubic-bezier(0.5, 0, 0.3, 1);
}
.order .last .col i {
  background: var(--red);
}
.played .order .col i,
.order.played .col i {
  height: calc(var(--h) * 1%);
}
.order .col span {
  position: absolute;
  left: 0;
  right: 0;
  top: 10px;
  font-weight: 800;
  font-size: clamp(16px, 2vw, 26px);
}
.order .last .col span {
  color: var(--red);
}

/* ---------- AIs vs people */
.vs {
  margin-top: 18px;
}
.vs-row {
  display: grid;
  grid-template-columns: 90px 1fr 90px;
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
}
.vs-row .who {
  font-weight: 800;
  font-size: 20px;
}
.vs-row .bar {
  height: 34px;
  border-radius: 10px;
  background: #e4dfd3;
  overflow: hidden;
}
.vs-row .bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--red);
  transition: width 1s cubic-bezier(0.5, 0, 0.3, 1) 0.2s;
}
.vs-row.human .bar i {
  background: #8c9198;
}
.played .vs-row .bar i,
.vs.played .vs-row .bar i {
  width: calc(var(--w) * 1%);
}
.vs-row b {
  font-size: 34px;
  text-align: right;
  color: var(--red);
}
.vs-row.human b {
  color: var(--muted);
}
.vs-q {
  margin: 4px 0 0;
  font-size: 15px;
  color: var(--muted);
}
.yes-row {
  margin-top: 26px;
  padding: clamp(18px, 2.4vw, 28px);
  border-radius: 18px;
  background: var(--sand);
}
.yes-row p {
  margin: 0 0 16px;
  font-size: clamp(19px, 1.8vw, 24px);
  font-weight: 700;
}
.yes-row ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 2vw, 28px);
}
.yes-row li {
  position: relative;
  text-align: center;
  padding-top: 26px;
}
.yes-row li .scene {
  width: 64px;
  margin: 0 auto;
}
.yes-row .sign {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-10%) rotate(-6deg);
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--red);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
}
.yes-row li b {
  display: block;
  font-size: 14px;
  margin-top: 4px;
}

/* ---------- the hundred */
.hundred {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  gap: 6px;
  max-width: 900px;
}
.hundred i {
  aspect-ratio: 3 / 4;
  border-radius: 50% 50% 30% 30% / 40% 40% 20% 20%;
  background: var(--c);
  opacity: 0.15;
  transition: opacity 0.4s;
}
.played .hundred i,
.hundred.played i {
  opacity: 1;
}
.played .hundred i:not(.k-same),
.hundred.played i:not(.k-same) {
  transition-delay: 0.8s;
}
.hlegend {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 28px;
  max-width: 900px;
}
.hlegend li {
  display: grid;
  grid-template-columns: 18px 64px 1fr;
  gap: 10px;
  align-items: baseline;
  font-weight: 700;
}
.hlegend li i {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--c);
  align-self: center;
}
.hlegend b {
  font-size: 26px;
}
.hlegend small {
  grid-column: 3;
  color: var(--muted);
  font-weight: 600;
}
.four {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.four figure {
  position: relative;
  margin: 0;
  padding: 14px 14px 6px;
  border-radius: 16px;
  background: var(--paper);
}
.four figcaption {
  font-weight: 800;
  color: var(--muted);
}
.four .turn {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
}

/* ---------- quiz */
.quiz {
  max-width: var(--measure);
  margin: 0 auto;
  display: grid;
  gap: clamp(28px, 4vw, 56px);
}
.q {
  position: relative;
}
.q .scene .hot,
.q .scene .skull,
.q .scene .ai-pulled {
  visibility: hidden;
}
.q.played .scene .hot,
.q.played .scene .skull,
.q.played .scene .ai-pulled {
  visibility: visible;
}
.q-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}
.q-pick button {
  border-color: var(--ink);
}
.q-out {
  font-size: clamp(19px, 1.8vw, 24px);
  font-weight: 700;
  margin: 14px 0 0;
}

/* ---------- how / press */
.how {
  max-width: var(--measure);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
}
.how h4 {
  font-size: 24px;
  margin-bottom: 10px;
}
.how p {
  margin: 0;
  color: #3a3f46;
}
.more {
  max-width: var(--measure);
  margin: 32px auto 0;
}
.press-grid {
  max-width: var(--measure);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.thumb {
  padding: 0;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: none;
  transition: transform 0.15s;
}
.thumb::before {
  display: none;
}
.thumb:hover {
  transform: translateY(-3px);
}
.thumb img {
  display: block;
  width: 100%;
  height: auto;
}
.press-acts {
  max-width: var(--measure);
  margin: 26px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.btn {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 2px solid var(--amber);
  background: var(--amber);
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}
.btn.ghost {
  background: transparent;
  color: inherit;
  border-color: currentColor;
}

/* ---------- share sheet */
.sheet {
  width: min(980px, 100vw);
  max-height: 100dvh;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
}
.sheet::backdrop {
  background: rgba(10, 12, 14, 0.82);
}
.sheet-in {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: 26px;
  padding: 26px;
  max-height: 100dvh;
  overflow: auto;
}
.sheet img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}
.sheet h4 {
  font-size: 26px;
  margin: 8px 0 12px;
  padding-right: 40px;
}
.sheet .src {
  font-size: 15px;
  color: #50555c;
  border-left: 4px solid var(--amber);
  padding-left: 12px;
}
.sheet .acts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.sheet .btn.ghost {
  color: var(--ink);
}
.sheet .dl {
  font-weight: 700;
  margin-top: 16px;
}
.sheet .x {
  position: absolute;
  top: 6px;
  right: 10px;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  font-size: 34px;
  cursor: pointer;
}
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 60;
  transform: translate(-50%, 160%);
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 800;
  transition: transform 0.25s;
}
.toast.show {
  transform: translate(-50%, 0);
}
.toast:empty,
.toast:not(.show) {
  visibility: hidden;
  transition:
    transform 0.25s,
    visibility 0s 0.25s;
}
.toast.show {
  visibility: visible;
  transition: transform 0.25s;
}

/* ---------- small screens */
@media (max-width: 860px) {
  .deeper,
  .rung-list {
    grid-template-columns: 1fr;
  }
  .hero-inner,
  .flip-body,
  .ranks,
  .how,
  .sheet-in {
    grid-template-columns: 1fr;
  }
  .press-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .back-row {
    grid-template-columns: 80px minmax(0, 1fr) 80px;
    grid-template-areas: 'a score b' 'bots bots bots';
    align-items: center;
  }
  .back-row .side:first-child {
    grid-area: a;
  }
  .back-row .bots {
    grid-area: bots;
  }
  .back-row .side:nth-child(3) {
    grid-area: b;
  }
  .back-row .none {
    display: none;
  }
  .back-row .score {
    grid-area: score;
    text-align: center;
  }
  .bots {
    min-height: 0;
  }
  .bots span,
  .bots .scene {
    width: 34px;
  }
  .back-row .side .scene {
    height: 90px;
  }
  .dumbbell li {
    grid-template-columns: 1fr 56px;
  }
  .dumbbell .who {
    grid-column: 1 / -1;
  }
  .hlegend {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  body {
    font-size: 17px;
  }
  .models-t th:nth-child(2),
  .models-t td:nth-child(2),
  .models-t th:nth-child(3),
  .models-t td:nth-child(3) {
    display: none;
  }
  .dl-chart li {
    grid-template-columns: 1fr;
  }
  .dl-chart .lb {
    grid-row: auto;
    font-size: 16px;
  }
  .rung-steps {
    height: 32px;
  }
  .rung-steps i {
    width: 22px;
  }
  .pair,
  .four,
  .tally {
    grid-template-columns: 1fr;
  }
  .pick {
    flex: 1 1 100%;
  }
  .pick button,
  .q-pick button {
    min-width: 0;
    flex: 1;
    font-size: 17px;
    white-space: nowrap;
    padding: 10px 14px;
  }
  .hero-frame .scene.photo {
    aspect-ratio: 4 / 3 !important;
  }
  .hundred {
    grid-template-columns: repeat(10, 1fr);
  }
  .order {
    gap: 4px;
  }
  .sticky-note {
    margin-bottom: -18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- fork labels: the side that dies turns red as the scene plays (so a quiz never gives it away) */
.scene .lab.dead text {
  transition: fill 0.3s calc(1.4s + var(--d, 0ms));
}
.played .scene .lab.dead text {
  fill: var(--red);
}

/* ---------- footbridge: the man falls once the scene plays */
.scene .fall {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform 0.9s cubic-bezier(0.5, 0, 0.7, 1) 0.6s;
}
.played .scene .fall {
  transform: translate(-90px, 228px) rotate(-80deg);
}

/* ---------- words vs picture */
.wp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 2vw, 24px);
}
.wp figure {
  margin: 0;
  color: var(--ink);
  padding: clamp(14px, 2vw, 22px);
  border-radius: 20px;
  background: #dff1e6;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.wp figure.bad {
  background: #fbe1de;
}
.wp-card {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 220px;
  padding: 18px;
  border-radius: 14px;
  background: #fff;
}
.wp-card p {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.35;
}
.wp-card img {
  width: 100%;
  max-width: 340px;
  height: auto;
}
.wp figcaption {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  font-weight: 800;
}
.wp figcaption span {
  font-size: 20px;
}
.wp figcaption b {
  grid-row: span 2;
  font-size: clamp(54px, 7vw, 96px);
  line-height: 0.9;
  color: var(--green);
}
.wp .bad figcaption b {
  color: var(--red);
}
.wp figcaption small {
  color: #3a3f46;
  font-size: 15px;
}

/* ---------- plain horizontal bars (one against three) */
.bars {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}
.bars li {
  display: grid;
  grid-template-columns: minmax(140px, 260px) 1fr 70px;
  gap: 14px;
  align-items: center;
  padding: 6px 0;
}
.bars .who {
  font-weight: 800;
}
.bars .bar {
  height: 26px;
  border-radius: 8px;
  background: #ddd6c8;
  overflow: hidden;
}
.bars .bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--red);
  transition: width 1s cubic-bezier(0.5, 0, 0.3, 1) 0.2s;
}
.played .bars .bar i {
  width: calc(var(--w) * 1%);
}
.bars b {
  text-align: right;
  font-size: 26px;
  color: var(--red);
}
.bars .rest .who,
.bars .rest b {
  color: var(--muted);
}
.bars .rest .bar i {
  background: #8c9198;
}

/* ---------- the upgrade: one skull per question */
.upgrade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 2vw, 24px);
}
.upgrade > div {
  display: grid;
  grid-template-columns: 90px 1fr;
  grid-template-areas: 'h h' 'bot n' 'sk sk';
  align-items: center;
  align-content: start;
  gap: 8px 18px;
  padding: clamp(16px, 2vw, 24px);
  border-radius: 20px;
  background: var(--paper);
}
.upgrade h4 {
  grid-area: h;
  font-size: 24px;
}
.upgrade .scene {
  grid-area: bot;
  width: 90px;
}
.upgrade b {
  grid-area: n;
  font-size: clamp(64px, 8vw, 110px);
  line-height: 1;
}
.upgrade .new b {
  color: var(--red);
}
.upgrade .sk {
  grid-area: sk;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  min-height: 40px;
}
.upgrade .sk span {
  width: 34px;
  opacity: 0;
  transform: scale(0.5);
  transition:
    opacity 0.2s,
    transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);
  transition-delay: calc(0.4s + var(--i) * 45ms);
}
.played .upgrade .sk span {
  opacity: 1;
  transform: none;
}
.upgrade .sk .scene {
  width: 34px;
}
@media (max-width: 560px) {
  .wp,
  .upgrade {
    grid-template-columns: 1fr;
  }
  .bars li {
    grid-template-columns: 1fr 60px;
  }
  .bars .who {
    grid-column: 1 / -1;
    font-size: 15px;
  }
  .bars .bar {
    grid-row: 2;
  }
}

.share.alt {
  margin-left: 8px;
  border-style: dashed;
}

/* ---------- quiz extras */
.q-n {
  margin: 0 0 4px;
  font-weight: 800;
  color: var(--muted);
}
.q-out .same {
  color: var(--green);
}
.q-out .diff {
  color: var(--red);
}
.q-out .share {
  margin-left: 6px;
  vertical-align: 2px;
}
.q-end {
  margin: 0;
  padding: clamp(18px, 2.4vw, 28px);
  border-radius: 18px;
  background: var(--ink);
  color: #fff;
  font-size: clamp(19px, 1.8vw, 24px);
  font-weight: 700;
  animation: fadein 0.4s;
}
.q-end a {
  color: var(--amber);
}

/* ================================================================== the study: a blog post, one reading column */
.story {
  background: var(--paper);
  padding-top: clamp(64px, 9vw, 128px);
}
.story > * {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
.story > h2 {
  font-size: clamp(40px, 5.6vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.story .lede {
  margin-top: 22px;
  font-size: clamp(21px, 2vw, 25px);
  line-height: 1.45;
  color: #2a2e35;
}
.story > h3 {
  margin-top: clamp(48px, 6vw, 72px);
  margin-bottom: 0;
  font-size: clamp(26px, 2.6vw, 32px);
}
.story > h4 {
  margin-top: 34px;
  margin-bottom: 0;
  font-size: 21px;
}
.story > p {
  margin-top: 16px;
  margin-bottom: 0;
  font-size: 19px;
  line-height: 1.62;
  color: #2a2e35;
}
.story a {
  color: inherit;
  text-decoration-color: #b8b2a5;
  text-underline-offset: 3px;
}
/* figures run wider than the reading column */
.story > .reqchart,
.story > .duo,
.story > .sits {
  max-width: 1000px;
  margin-top: clamp(28px, 4vw, 44px);
  margin-bottom: clamp(28px, 4vw, 44px);
}

/* ---- requests per day */
.reqchart {
  padding: clamp(18px, 2.4vw, 28px) clamp(16px, 2.4vw, 30px) clamp(16px, 2vw, 22px);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 0 1px #e4dfd3;
}
.reqchart .fig-t {
  font-size: 17px;
  font-weight: 800;
}
.rc-wrap {
  position: relative;
  margin-top: 6px;
}
.reqchart svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.reqchart .grid {
  stroke: #ece8df;
  stroke-width: 1;
}
.reqchart .base {
  stroke: #b8b2a5;
  stroke-width: 1.5;
}
.reqchart .ylab,
.reqchart .xlab {
  font: 600 13px var(--font);
  fill: var(--muted);
}
.reqchart .bar {
  fill: #2b3138;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(0);
  transition:
    transform 0.55s cubic-bezier(0.3, 1.25, 0.5, 1),
    fill 0.15s;
  transition-delay: calc(0.15s + var(--i) * 32ms);
}
.reqchart .bar.last {
  fill: var(--amber);
}
.reqchart.played .bar {
  transform: none;
}
.reqchart .hit {
  fill: transparent;
}
.reqchart .d.on .bar {
  fill: var(--red);
}
.reqchart .mk {
  opacity: 0;
  transition: opacity 0.4s;
  transition-delay: calc(0.4s + var(--i) * 32ms);
}
.reqchart.played .mk {
  opacity: 1;
}
.reqchart .mk line {
  stroke: #9a948a;
  stroke-width: 1.2;
  stroke-dasharray: 2 3;
}
.reqchart .mk circle {
  fill: var(--ink);
}
.reqchart .mk text {
  font: 800 14px var(--font);
  fill: var(--ink);
}
.reqchart .mk .md {
  font-weight: 600;
  fill: var(--muted);
}
.reqchart .end {
  font: 800 15px var(--font);
  fill: var(--muted);
}
.reqchart .end.big {
  font-size: 28px;
  fill: var(--ink);
}
.rc-tip {
  position: absolute;
  transform: translate(-50%, calc(-100% - 10px));
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
  pointer-events: none;
}
.rc-tip b {
  display: block;
  font-size: 12px;
  color: var(--amber);
}
.reqchart .fig-c {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.reqchart .fig-c b {
  color: var(--ink);
}

/* ---- the two characters, side by side, each a main point and a secondary one */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(14px, 2vw, 22px);
}
.char {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 0 1px #e4dfd3;
  overflow: hidden;
}
.char-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2.6vw, 30px);
}
.char-scene {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px 0;
}
.char h4 {
  font-size: clamp(26px, 2.6vw, 34px);
  margin: 0 0 12px;
}
.char-main > p {
  margin: 14px 0 0;
  font-size: 17px;
  line-height: 1.5;
  color: #2a2e35;
}
.char-scene .scene {
  max-width: 440px;
}
.char-scene .scene .ai {
  opacity: 1 !important;
}
.char-scene .heading {
  animation: heading 1.6s linear infinite;
}
@keyframes heading {
  to {
    stroke-dashoffset: -40;
  }
}
.char-more {
  --mini-bg: #f3f0e8;
  padding: clamp(16px, 2vw, 22px) clamp(20px, 2.6vw, 30px) clamp(18px, 2.2vw, 24px);
  background: #f3f0e8;
  border-top: 1px solid #e4dfd3;
}
.char-more > p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.5;
  color: #50555c;
}
.minis {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.minis li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 800;
  color: #3a3f46;
}
.minis .scene {
  width: 100%;
}
.makers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
}
.makers li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.makers .mk {
  font-weight: 800;
  font-size: 13px;
}
.bots-row {
  display: flex;
  gap: 2px;
}
.bots-row .m {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50px;
}
.bots-row .scene {
  width: 34px;
}
.bots-row small {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  line-height: 1.15;
}
.makers.small .bots-row .scene {
  width: 28px;
  opacity: 0.85;
}

/* ---- the situations: one row each. Left: the step and its numbers. Middle: what it is. Right: what it looks like. */
.sits {
  list-style: none;
  padding: clamp(6px, 1vw, 10px) clamp(18px, 2.4vw, 30px);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 0 1px #e4dfd3;
}
.sits li {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 240px;
  gap: clamp(18px, 2.6vw, 34px);
  align-items: start;
  padding: clamp(18px, 2.4vw, 26px) 0;
  border-bottom: 1px solid #ece8df;
}
.sits li:last-child {
  border-bottom: 0;
}
.sit-k {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
}
.sit-n {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 22px;
  font-weight: 800;
  color: var(--c);
}
.sit-n i {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--c);
  color: #fff;
  font-style: normal;
  font-size: 16px;
}
.sit-s {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.sit-s b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.sit-s em {
  display: inline-block;
  margin-top: 2px;
  box-shadow: none;
  font-style: normal;
  font-weight: 700;
  color: var(--c);
}
.pie {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  margin-top: 2px;
}
.sit-t p {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: #2a2e35;
}
.sit-t p + p {
  margin-top: 10px;
}
.sit-t b {
  color: var(--ink);
}
.sit-exs {
  display: grid;
  gap: 10px;
}
.sit-ex {
  --mini-bg: #faf8f3;
  aspect-ratio: 240 / 130;
  border-radius: 12px;
  background: #faf8f3;
  box-shadow: inset 0 0 0 1px #ece8df;
  overflow: hidden;
}
.sit-ex .scene {
  width: 100%;
  height: 100%;
}

/* ---- the lever: an AI steps up, pulls, the trolley takes the side line */
.char-sub {
  margin: -6px 0 14px !important;
  font-size: 17px !important;
  font-weight: 700;
  color: var(--muted) !important;
}
.scene.lever {
  max-width: 520px;
}
.scene.lever .who-bot {
  opacity: 0.32;
  filter: grayscale(1);
  transition:
    opacity 0.4s,
    filter 0.4s,
    transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.scene.lever.on .who-bot {
  opacity: 1;
  filter: none;
  transform: translateX(10px);
}
.scene.lever .tag-t {
  font: 800 17px var(--font);
  fill: #fff;
}
.scene.lever .who-tag {
  transition: opacity 0.3s;
}
.scene.lever .arm {
  transition: transform 0.5s cubic-bezier(0.5, 0, 0.3, 1.4);
  transform: rotate(-24deg);
}
.scene.lever.pulled .arm {
  transform: rotate(24deg);
}
.scene.lever .way {
  animation: heading 1.6s linear infinite;
  transition: opacity 0.4s;
}
.scene.lever .way-b {
  opacity: 0;
}
.scene.lever.pulled .way-a {
  opacity: 0;
}
.scene.lever.pulled .way-b {
  opacity: 1;
}
.scene.lever .lt {
  transition: transform 1.2s cubic-bezier(0.5, 0, 0.3, 1) 0.4s;
}
.scene.lever.pulled .lt {
  transform: translateX(14px);
}
.makers .m.lit {
  border-radius: 8px;
  background: #fdf0c8;
  box-shadow: 0 0 0 2px var(--amber);
}
.makers .m {
  transition:
    background 0.3s,
    box-shadow 0.3s;
}

@media (max-width: 860px) {
  .duo {
    grid-template-columns: 1fr;
  }
  .sits li {
    grid-template-columns: 170px minmax(0, 1fr);
  }
  .sit-exs {
    grid-column: 2;
    max-width: 300px;
  }
}
@media (max-width: 560px) {
  .story > p {
    font-size: 18px;
  }
  .minis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sits li {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .sit-k {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
  .sit-s {
    order: 3;
    flex-basis: 100%;
  }
  .sit-exs {
    grid-column: auto;
    max-width: none;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  .reqchart .mk .md {
    display: none;
  }
}

/* ================================================================== a step: questions, try it, what we asked, what we found */
.rung-body {
  max-width: var(--measure);
  margin: 0 auto clamp(64px, 9vw, 120px);
}
.qs {
  list-style: none;
  margin: 0 0 clamp(28px, 4vw, 44px);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.qs.five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.qs li {
  --mini-bg: var(--sand);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border-radius: 16px;
  background: var(--sand);
}
.qs .scene {
  width: 100%;
  max-width: 200px;
  margin-bottom: 6px;
}
.qs b {
  font-size: 18px;
  line-height: 1.2;
}
.qs b.big {
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1;
  color: var(--red);
}
.qs span {
  font-size: 15px;
  color: #3a3f46;
}
/* try it: the question on the left, you and then the AIs on the right */
.try {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(14px, 2vw, 24px);
  align-items: start;
}
.try-q {
  padding: clamp(16px, 2vw, 24px);
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
}
.try-tag {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
}
.try-q > .scene {
  max-width: 220px;
  margin-bottom: 10px;
}
.try-q .scene.photo {
  max-width: none;
  border-radius: 10px;
}
.try-text {
  margin: 0;
  white-space: pre-wrap;
  font:
    500 15px/1.55 Menlo,
    'SF Mono',
    Consolas,
    monospace;
  color: #23272e;
}
.try-ask {
  margin: 10px 0 0;
  font:
    700 15px/1.5 Menlo,
    'SF Mono',
    Consolas,
    monospace;
}
.try-a {
  min-height: 100%;
  padding: clamp(16px, 2vw, 24px);
  border: 2px dashed #c9c2b4;
  border-radius: 16px;
}
.try.dark .try-a {
  border-color: #39424a;
}
.try-pick[hidden],
.try-res[hidden] {
  display: none !important;
}
.try-pick {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.try-h {
  margin: 0;
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 800;
}
.try-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.try-btns button {
  min-height: 50px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 3px solid currentColor;
  background: transparent;
  font-weight: 800;
  font-size: 17px;
  cursor: pointer;
  transition:
    transform 0.15s,
    background 0.15s,
    color 0.15s;
}
.try-btns button:hover {
  transform: translateY(-2px);
  background: var(--ink);
  color: #fff;
}
.try.dark .try-btns button:hover {
  background: #fff;
  color: var(--ink);
}
.try-btns .third {
  border-style: dashed;
}
.try-note {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}
.try-skip {
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
}
.try-you {
  margin: 0 0 14px;
  font-size: 19px;
  font-weight: 700;
}
.try-you:empty {
  display: none;
}
.try-side {
  padding: 12px 0;
  border-top: 1px solid #d9d3c6;
}
.try.dark .try-side {
  border-color: #39424a;
}
.try-side p {
  margin: 0 0 8px;
  font-weight: 700;
}
.try-side b {
  font-size: 30px;
  margin-right: 4px;
}
.try-side.bad b {
  color: var(--red);
}
.try-side.x b {
  color: var(--muted);
}
.bots-in {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 2px;
}
.bots-in .r {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 54px;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.25s,
    transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1);
  transition-delay: calc(var(--i) * 50ms);
}
.played .bots-in .r {
  opacity: 1;
  transform: none;
}
.bots-in .scene {
  width: 34px;
}
.bots-in small,
.cb small {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  color: var(--muted);
}
.try-x,
.try-after {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--muted);
}
.asked {
  max-width: 76ch;
  margin: clamp(22px, 3vw, 32px) 0 0;
  padding-left: 14px;
  border-left: 4px solid var(--amber);
  font-size: 16px;
  color: #3a3f46;
}
.asked b {
  color: inherit;
}
.verdict {
  margin-top: clamp(40px, 6vw, 72px);
  padding: clamp(22px, 3vw, 40px);
  border-radius: 22px;
  background: var(--sand);
  color: var(--ink);
}
.v-tag {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 800;
  color: var(--red);
}
.verdict h3 {
  font-size: clamp(28px, 3.4vw, 46px);
  max-width: 24ch;
  margin-bottom: clamp(18px, 2.4vw, 28px);
}
.ov-line {
  margin: 0 0 8px;
  font-weight: 700;
}
/* the cast: 22 robots, lit by what each did */
.cast-bots {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: 10px 6px;
}
.cb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 2px 6px;
  border-radius: 12px;
  background: #fff;
  opacity: 0.35;
  transition:
    opacity 0.3s,
    background 0.3s;
  transition-delay: calc(0.3s + var(--i) * 40ms);
}
.cb .scene {
  width: 36px;
}
.played .cb {
  opacity: 1;
}
.played .cb.bad {
  background: #fbe1de;
  box-shadow: inset 0 0 0 3px var(--red);
}
.played .cb.warn {
  background: #fdf0c8;
}
.played .cb.ok {
  background: #dff1e6;
}
.played .cb.off {
  opacity: 0.3;
}
.cast-key {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 15px;
  font-weight: 700;
}
.cast-key i {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  margin-right: 6px;
  vertical-align: -2px;
}
.cast-key .bad i {
  background: #fbe1de;
  box-shadow: inset 0 0 0 2px var(--red);
}
.cast-key .warn i {
  background: #fdf0c8;
}
.cast-key .ok i {
  background: #dff1e6;
}
.cast-key .off i {
  background: #fff;
  opacity: 0.5;
}
.cast-note {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--muted);
}
/* the grid: every AI against every pair */
.grid-wrap {
  overflow-x: auto;
}
.pgrid {
  display: block;
  width: 100%;
  min-width: 720px;
  height: auto;
}
.pgrid rect {
  fill: #ddd6c8;
}
.pgrid rect.on {
  fill: var(--red);
}
.pgrid .gl {
  font: 700 9px var(--font);
  fill: var(--muted);
}
.grid-cap {
  margin: 12px 0 0;
  font-size: 16px;
}
.grid-cap b {
  font-size: 26px;
  color: var(--red);
}
@media (max-width: 860px) {
  .try,
  .qs {
    grid-template-columns: 1fr;
  }
  .qs.five {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cast-bots {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* the phone chart: same data, its own proportions */
.reqchart.narrow .mk text {
  font-size: 19px;
}
.reqchart.narrow .ylab,
.reqchart.narrow .xlab {
  font-size: 17px;
}
.reqchart.narrow .end.big {
  font-size: 30px;
}

/* ================================================================== a step, as a blog post (step 1 first) */
.story.step {
  position: relative;
  isolation: isolate;
}
/* the step's own color, fading down into the page: a soft hero behind the title */
.step-hero {
  position: absolute;
  inset: 0 0 auto 0;
  height: min(560px, 70vh);
  max-width: none !important;
  margin: 0 !important;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--step) 30%, var(--paper)) 0%,
    color-mix(in srgb, var(--step) 16%, var(--paper)) 30%,
    color-mix(in srgb, var(--step) 6%, var(--paper)) 62%,
    var(--paper) 100%
  );
}
.step-k {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 auto 14px;
  font-size: 17px;
  font-weight: 800;
  color: var(--step);
}
.step-k .sn {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--step);
  color: #fff;
  font-size: 17px;
}
.story > .try {
  max-width: 1000px;
  margin: clamp(24px, 3vw, 36px) auto;
}
.story .note {
  margin-top: 8px !important;
  font-size: 14px !important;
  color: var(--muted) !important;
}
.story .handoff {
  margin-top: clamp(32px, 4vw, 48px) !important;
  font-size: clamp(21px, 2vw, 25px) !important;
  font-weight: 800;
  color: var(--ink) !important;
}
/* simple horizontal bars, in the reading column */
.hbars {
  list-style: none;
  padding: 0;
  margin-top: 18px !important;
}
.hbars li {
  display: grid;
  grid-template-columns: minmax(150px, 220px) 1fr 74px;
  gap: 14px;
  align-items: center;
  padding: 5px 0;
}
.hbars .bl {
  font-size: 16px;
  font-weight: 700;
}
.hbars .bb {
  height: 14px;
  border-radius: 7px;
  background: #e8e3d8;
  overflow: hidden;
}
.hbars .bb i {
  display: block;
  height: 100%;
  width: calc(max(var(--w), 1.5) * 1%);
  border-radius: 7px;
  background: #8c9198;
}
.hbars .bad .bb i {
  background: var(--red);
}
.hbars b {
  text-align: right;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.hbars .bad b {
  color: var(--red);
}
.hbars .rest .bl,
.hbars .rest b {
  color: var(--muted);
}
/* words against pictures: one line per AI, a dot for each */
.story > .wp2 {
  max-width: 1000px;
  margin: clamp(28px, 4vw, 44px) auto;
  padding: clamp(18px, 2.4vw, 28px);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 0 1px #e4dfd3;
}
.wp2-ex {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 22px;
}
.wp2-ex > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 14px;
  background: #faf8f3;
}
.wp2-ex span {
  font-size: 14px;
  font-weight: 800;
  color: var(--muted);
}
.wp2-ex p {
  margin: auto 0;
  font-family: var(--serif);
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.4;
}
.wp2-ex img {
  width: 100%;
  max-width: 260px;
  height: auto;
  margin: 0 auto;
}
.wp2-q {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 800;
}
.wp2-head,
.wp2-rows li {
  display: grid;
  grid-template-columns: minmax(150px, 210px) 1fr 1fr;
  gap: 18px;
  align-items: center;
}
.wp2-head {
  padding-bottom: 6px;
  border-bottom: 2px solid var(--ink);
  font-size: 14px;
  font-weight: 800;
  color: var(--muted);
}
.wp2-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wp2-rows li {
  padding: 7px 0;
  border-bottom: 1px solid #f0ece3;
}
.wp2-rows .who {
  font-size: 15px;
  font-weight: 700;
}
.wp2-rows .cell {
  display: grid;
  grid-template-columns: 1fr 86px;
  gap: 10px;
  align-items: center;
}
.wp2-rows .sb {
  height: 12px;
  border-radius: 6px;
  background: #ece8df;
  overflow: hidden;
}
.wp2-rows .sb i {
  display: block;
  height: 100%;
  width: calc(var(--w) * 1%);
  border-radius: 6px;
  background: #3b4149;
}
.wp2-rows b {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
/* where the picture made it worse, the picture column says so */
.wp2-rows .drop .pic .sb i {
  background: var(--red);
}
.wp2-rows .drop .pic b {
  color: var(--red);
}
.wp2 figcaption {
  margin-top: 12px;
  font-size: 14px;
  color: var(--muted);
}

@media (max-width: 560px) {
  .wp2-ex {
    grid-template-columns: 1fr;
  }
  .hbars li {
    grid-template-columns: 112px 1fr 46px;
    gap: 8px;
  }
  .hbars .bl {
    font-size: 13px;
    line-height: 1.2;
  }
  .hbars b {
    font-size: 14px;
  }
  .wp2-head,
  .wp2-rows li {
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
  }
  .wp2-head span:first-child {
    display: none;
  }
  .wp2-head {
    font-size: 11px;
    line-height: 1.2;
  }
  .wp2-rows .who {
    grid-column: 1 / -1;
    font-size: 14px;
  }
  .wp2-rows .cell {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .wp2-rows b {
    font-size: 13px;
  }
}

/* the try-it inside a step reads as a figure: a little smaller than the old quiz */
.story > .try .try-h {
  font-size: clamp(22px, 2.2vw, 28px);
}
.story > .try .try-text {
  font-size: 14px;
}
.wp2-ex p {
  font-size: clamp(16px, 1.5vw, 19px) !important;
}

/* an example of exactly what the AIs saw, small, in the reading column */
.story > .asked-ex {
  margin: 18px auto 0;
  padding: 14px 18px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 0 1px #e4dfd3;
  font-size: 14px;
}
.asked-ex > span:first-child {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
}
.asked-ex pre {
  margin: 0 0 8px;
  white-space: pre-wrap;
  font:
    500 14px/1.55 Menlo,
    'SF Mono',
    Consolas,
    monospace;
  color: #23272e;
}
.asked-ex b {
  font:
    700 14px Menlo,
    'SF Mono',
    Consolas,
    monospace;
}
.asked-ex .btns {
  display: inline-flex;
  gap: 6px;
  margin: 0 0 0 10px;
  vertical-align: 1px;
}
.asked-ex .btns i {
  padding: 2px 10px;
  border: 1.5px solid #b8b2a5;
  border-radius: 999px;
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  color: #3a3f46;
}
/* the lever by how many it would save: seven columns */
.story > .lever-row {
  margin: 22px auto 0;
}
.lr-q {
  margin: 0 0 12px !important;
  font-size: 17px !important;
  font-weight: 800;
  color: var(--ink) !important;
}
.lever-row ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
}
.lever-row li {
  display: grid;
  grid-template-rows: auto 120px auto;
  justify-items: center;
  gap: 6px;
}
.lever-row li b {
  grid-row: 1;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}
.lr-bar {
  grid-row: 2;
  position: relative;
  width: 100%;
  max-width: 54px;
  height: 120px;
  border-radius: 8px;
  background: #ece8df;
  overflow: hidden;
}
.lr-bar i {
  position: absolute;
  inset: auto 0 0 0;
  height: calc(var(--h) * 1%);
  background: var(--step, #3b4149);
}
.lever-row .odd .lr-bar i {
  background: var(--red);
}
.lever-row .odd b {
  color: var(--red);
}
.lr-n {
  grid-row: 3;
  font-size: 14px;
  font-weight: 800;
  color: var(--muted);
}
.lever-row figcaption {
  margin-top: 10px;
  font-size: 14px;
  color: var(--muted);
}
/* three ways of asking, three columns */
.wp2-ex.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.wp2-ex.three p {
  font-size: 15px !important;
}
.wp2-head,
.wp2-rows li {
  grid-template-columns: minmax(140px, 190px) repeat(3, minmax(0, 1fr)) !important;
}
.wp2-rows .cell {
  grid-template-columns: 1fr 76px !important;
}
.wp2-rows .cell.low .sb i {
  background: var(--red);
}
.wp2-rows .cell.low b {
  color: var(--red);
}
@media (max-width: 860px) {
  .wp2-ex.three {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .wp2-head,
  .wp2-rows li {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .wp2-rows .cell {
    grid-template-columns: 1fr !important;
  }
  .lever-row li {
    grid-template-rows: auto 90px auto;
  }
  .lr-bar {
    height: 90px;
  }
  .lever-row li b {
    font-size: 16px;
  }
}

/* the lever, five against one beside one against one: a robot per AI, lit if it pulled */
.story > .lever2 {
  max-width: 1000px;
  margin: clamp(24px, 3vw, 36px) auto;
}
.lv-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 2vw, 22px);
}
.lv-col {
  --mini-bg: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(16px, 2vw, 24px);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 0 0 1px #e4dfd3;
}
.lv-col.odd {
  box-shadow: 0 0 0 2px var(--red);
}
.lv-t {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
}
.lv-scene .scene {
  width: 100%;
  max-width: 320px;
}
.lv-note {
  margin: 0;
  font-size: 15px;
  color: var(--muted);
}
.lv-big {
  margin: 4px 0 0;
  font-size: 16px;
  font-weight: 700;
}
.lv-big b {
  font-size: 34px;
  margin-right: 4px;
  color: var(--step);
}
.lv-col.odd .lv-big b {
  color: var(--red);
}
.lv-bots {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: 4px 2px;
}
.lv-bots span .scene {
  width: 100%;
}
.lv-bots span {
  opacity: 0.18;
  filter: grayscale(1);
  transition:
    opacity 0.3s,
    filter 0.3s;
  transition-delay: calc(0.2s + var(--i) * 30ms);
}
.played .lv-bots span.on,
.lever2.played .lv-bots span.on {
  opacity: 1;
  filter: none;
}
.lv-col:not(.odd) .lv-bots span.on {
  opacity: 0.9;
}
.lv-who {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--red);
}
.lv-saw {
  margin-top: auto;
  font-size: 13px;
}
.lv-saw summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--muted);
}
.lv-saw pre {
  margin: 8px 0 4px;
  white-space: pre-wrap;
  font:
    500 13px/1.5 Menlo,
    'SF Mono',
    Consolas,
    monospace;
}
.lv-saw b {
  font:
    700 13px Menlo,
    'SF Mono',
    Consolas,
    monospace;
}
.lever2 figcaption {
  margin-top: 10px;
  font-size: 14px;
  color: var(--muted);
}
@media (max-width: 640px) {
  .lv-cols {
    grid-template-columns: 1fr;
  }
}

/* the lever, four ways: the same cards as before, four across */
.story > .lever4 {
  max-width: 1100px;
  margin: clamp(24px, 3vw, 36px) auto;
}
.lever4 .lv-cols {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.lever4 .lv-col {
  padding: 14px;
  gap: 8px;
}
.lever4 .lv-t {
  font-size: 15px;
  line-height: 1.25;
  min-height: 2.5em;
}
.lever4 .lv-note {
  font-size: 14px;
  min-height: 2.6em;
}
.lever4 .lv-big b {
  font-size: 30px;
}
.lever4 .lv-bots {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.lever4 .lv-who {
  font-size: 13px;
}
.lever4 figcaption {
  margin-top: 10px;
  font-size: 14px;
  color: var(--muted);
}
.played .lever4 .lv-bots span.on,
.lever4.played .lv-bots span.on {
  opacity: 1;
  filter: none;
}
@media (max-width: 900px) {
  .lever4 .lv-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .lever4 .lv-cols {
    grid-template-columns: 1fr;
  }
}

/* three lever cards */
.lever4.three .lv-cols {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 760px) {
  .lever4.three .lv-cols {
    grid-template-columns: 1fr;
  }
}
/* the lowlights: big scenes, a name and a number each */
.story > .lows {
  max-width: 1100px;
  margin: clamp(20px, 3vw, 30px) auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 14px;
}
.low-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 14px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 0 0 1px #e4dfd3;
}
.low-card .scene.low {
  width: 100%;
  height: auto;
}
.low-card figcaption {
  font-size: 15px;
  line-height: 1.45;
  color: #2a2e35;
}
.low-card figcaption b {
  display: block;
  font-size: 17px;
  color: var(--red);
}
.low-card .share {
  align-self: flex-start;
  margin-top: auto;
}
.low-pic {
  position: relative;
  aspect-ratio: 600 / 300;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.low-pic img {
  height: 100%;
  width: auto;
}
.low-tag {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}
.low-x {
  position: absolute;
  right: 8px;
  top: 8px;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--red);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}
@media (max-width: 860px) {
  .story > .lows {
    grid-template-columns: 1fr;
  }
}

/* the highlights: four short findings, a list you can scan */
.story > .hl {
  margin-top: 18px;
  padding: 0;
  list-style: none;
}
.hl li {
  position: relative;
  padding: 10px 0 10px 30px;
  border-top: 1px solid #e4dfd3;
  font-size: 18px;
  line-height: 1.5;
  color: #2a2e35;
}
.hl li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 19px;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  /* good is green and bad is red on every step, whatever the step's own color */
  background: var(--green);
}
.hl b {
  color: var(--ink);
}
.hl.lo li::before {
  background: var(--red);
}

/* ================================================================== step 2: how far would you go */
/* the try-it: one card; your answer plays out in the picture, then the next question */
.story > .ltry {
  max-width: 1000px;
  margin: clamp(24px, 3vw, 36px) auto;
}
.lt-card {
  padding: clamp(16px, 2.2vw, 28px);
  border: 2px solid var(--ink);
  border-radius: 18px;
  background: #fff;
}
.lt-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.lt-top[hidden],
.lt-scene[hidden],
.lt-body[hidden],
.lt-res[hidden] {
  display: none !important;
}
.lt-count {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--step);
}
.lt-dots {
  display: flex;
  gap: 6px;
  margin: 0;
}
.lt-dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e4dfd3;
}
.lt-dots i.now {
  background: var(--step);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--step) 30%, #fff);
}
.lt-dots i.on {
  background: var(--ink);
}
.lt-dots i.off {
  background: #b8b2a5;
}
.lt-scene {
  max-width: 520px;
  margin: 4px auto 0;
}
.lt-scene .scene {
  width: 100%;
}
.lt-body {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(14px, 2vw, 28px);
  align-items: start;
  padding-top: 12px;
  border-top: 1px solid #ece7dc;
}
.lt-a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.lt-a .try-h {
  font-size: clamp(24px, 2.4vw, 30px);
}
.lt-a.wait .try-btns button {
  opacity: 0.35;
  pointer-events: none;
}
.lt-you {
  margin: 0 0 16px;
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 800;
  line-height: 1.35;
}
.lt-mine {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lt-mine li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px;
  border-radius: 12px;
  background: #faf8f3;
}
.lt-mine .lt-pic .scene {
  width: 100%;
}
.lt-mine b {
  font-size: 15px;
}
.lt-mine em {
  box-shadow: none;
  font-style: normal;
  font-size: 14px;
  font-weight: 800;
  color: var(--muted);
}
.lt-mine em:empty {
  display: none;
}
.lt-mine li.yes em {
  color: var(--ink);
}
.lt-mine li.no {
  background: #f1eee7;
}
.lt-mine li.no .lt-pic {
  opacity: 0.45;
}
.lt-mine small {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.lt-mine small b {
  font-size: 13px;
  color: var(--ink);
}
.lt-more {
  margin: 14px 0 0;
  font-size: 15px;
  font-weight: 700;
}
@media (max-width: 760px) {
  .lt-body {
    grid-template-columns: 1fr;
  }
  .lt-mine {
    grid-template-columns: 1fr;
  }
  .lt-mine li {
    display: grid;
    grid-template-columns: 110px 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 12px;
    align-items: center;
  }
  .lt-mine .lt-pic {
    grid-row: 1 / 4;
  }
}

/* the ladder: five rungs, every AI on each, lit where it took the action */
.story > .ladder {
  max-width: 1100px;
  margin: clamp(24px, 3vw, 36px) auto;
}
.ladder ol {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ladder li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 0 0 1px #e4dfd3;
}
.ld-scene .scene {
  width: 100%;
}
.ld-n {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
}
.ld-what {
  margin: 2px 0 0;
  min-height: 5.6em;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--muted);
}
.ld-bots {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 2px;
}
.ld-bots span {
  opacity: 0.16;
  filter: grayscale(1);
  transition:
    opacity 0.3s,
    filter 0.3s;
  transition-delay: calc(0.2s + var(--i) * 25ms);
}
.ladder li.played .ld-bots span.on {
  opacity: 1;
  filter: none;
}
.ld-bots .scene {
  width: 100%;
}
.ld-big {
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 700;
}
.ld-big b {
  font-size: 32px;
  margin-right: 2px;
  color: var(--step);
}
.ld-hu {
  margin: 0;
  min-height: 3.2em;
  padding-top: 6px;
  border-top: 1px solid #ece7dc;
  font-size: 13.5px;
  color: var(--muted);
}
.ld-hu b {
  display: block;
  font-size: 18px;
  color: var(--ink);
}
.ladder figcaption,
.saydo figcaption {
  margin-top: 10px;
  font-size: 14px;
  color: var(--muted);
}
@media (max-width: 960px) {
  .ladder ol {
    grid-template-columns: 1fr;
  }
  .ladder li {
    display: grid;
    grid-template-columns: 180px 1fr;
    grid-template-areas:
      'scene txt'
      'scene bots'
      'big hu';
    column-gap: 14px;
  }
  .ld-scene {
    grid-area: scene;
  }
  .ld-txt {
    grid-area: txt;
  }
  .ld-bots {
    grid-area: bots;
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .ld-big {
    grid-area: big;
  }
  .ld-hu {
    grid-area: hu;
    border-top: 0;
    padding-top: 0;
    align-self: end;
  }
  .ld-what {
    min-height: 0;
  }
}
@media (max-width: 520px) {
  .ladder li {
    grid-template-columns: 1fr;
    grid-template-areas: 'scene' 'txt' 'bots' 'big' 'hu';
  }
}

/* did it, said it was OK, people: three bars per rung */
.story > .saydo {
  max-width: 900px;
  margin: clamp(24px, 3vw, 36px) auto;
  padding: clamp(18px, 2.4vw, 28px);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 0 1px #e4dfd3;
}
.sd-head,
.saydo li {
  display: grid;
  grid-template-columns: minmax(150px, 200px) repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: center;
}
.sd-head {
  padding-bottom: 6px;
  border-bottom: 2px solid var(--ink);
  font-size: 14px;
  font-weight: 800;
  color: var(--muted);
}
.saydo ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.saydo li {
  padding: 9px 0;
  border-bottom: 1px solid #f0ece3;
}
.sd-n {
  font-size: 15px;
  font-weight: 700;
}
.sd-b {
  display: grid;
  grid-template-columns: 1fr 52px;
}
.sd-b.hu {
  grid-template-columns: 1fr 72px;
}
.sd-b b {
  white-space: nowrap;
}
.sd-b {
  gap: 8px;
  align-items: center;
}
.sd-b::before {
  content: '';
  grid-column: 1;
  grid-row: 1;
  height: 14px;
  border-radius: 7px;
  background: #ece7dc;
}
.sd-b i {
  grid-column: 1;
  grid-row: 1;
  height: 14px;
  width: calc(max(var(--w), 1.5) * 1%);
  border-radius: 7px;
}
.sd-b b {
  text-align: right;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.sd-b.did i {
  background: var(--red);
}
.sd-b.ok i {
  background: #8c9198;
}
.sd-b.hu i {
  background: var(--ink);
}
.sd-b.did b {
  color: var(--red);
}
@media (max-width: 640px) {
  .sd-head {
    display: none;
  }
  .saydo li {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .sd-b {
    grid-template-columns: 1fr 60px;
  }
  .sd-b b::after {
    font-weight: 600;
    color: var(--muted);
  }
  .sd-b.did b::after {
    content: ' did';
  }
  .sd-b.ok b::after {
    content: ' said OK';
  }
  .sd-b.hu b::after {
    content: ' people';
  }
  .sd-b {
    grid-template-columns: minmax(0, 1fr) 124px;
  }
  .sd-b b {
    font-size: 14px;
  }
}

/* two robots: what each did, and what it said */
.story > .sd-pair {
  max-width: 900px;
  margin: clamp(20px, 3vw, 30px) auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.sd-card {
  margin: 0;
  padding: 14px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 0 0 1px #e4dfd3;
}
.sd-card .scene {
  width: 100%;
}
.sd-who {
  margin: 6px 0 8px;
  font-size: 17px;
  font-weight: 800;
}
.sd-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 7px 0;
  border-top: 1px solid #f0ece3;
  font-size: 15px;
}
.sd-row b {
  white-space: nowrap;
}
.sd-row b.bad {
  color: var(--red);
}
@media (max-width: 640px) {
  .story > .sd-pair {
    grid-template-columns: 1fr;
  }
}
.sd-two {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}
.sd-two .scene {
  width: 100%;
}
.scene.classic {
  width: 100%;
  height: auto;
}
/* the trapdoor and the footbridge: he drops onto the line once the scene plays */
.scene .drop {
  transition: transform 0.6s cubic-bezier(0.5, 0, 0.9, 0.6) 0.5s;
}
.played .scene .drop,
.played.scene .drop {
  transform: translateY(var(--fall));
}

/* does the number of lives matter? pick a number; robots light where the AI acts at it */
.story > .nl {
  max-width: 1000px;
  margin: clamp(24px, 3vw, 36px) auto;
  padding: clamp(16px, 2.2vw, 28px);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 0 1px #e4dfd3;
}
.nl-pick {
  position: sticky;
  top: 58px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 -8px 16px;
  padding: 8px;
  border-radius: 14px;
  background: rgb(255 255 255 / 0.94);
  backdrop-filter: blur(6px);
}
.nl-pick span {
  margin-right: 6px;
  font-size: 15px;
  font-weight: 800;
  color: var(--muted);
}
.nl-pick button {
  min-width: 56px;
  min-height: 44px;
  padding: 6px 14px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.nl-pick button[aria-pressed='true'] {
  background: var(--ink);
  color: #fff;
}
.nl-pick button:hover {
  background: color-mix(in srgb, var(--step) 18%, #fff);
}
.nl-pick button[aria-pressed='true']:hover {
  background: var(--ink);
}
.nl-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.nl-rows li {
  display: grid;
  grid-template-columns: 130px 1fr 44px 130px;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid #f0ece3;
}
.nl-name {
  font-size: 15px;
  font-weight: 800;
}
.nl-dots {
  display: grid;
  grid-template-columns: repeat(22, minmax(0, 1fr));
  gap: 2px;
}
.nl-dots i {
  position: relative;
  opacity: 0.16;
  filter: grayscale(1);
  transition:
    opacity 0.35s,
    filter 0.35s,
    transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
  transition-delay: calc(var(--i) * 12ms);
}
.nl-dots i .scene {
  width: 100%;
}
.nl-dots i.on {
  opacity: 1;
  filter: none;
}
/* changed from five lives: lifted, with a dot under it */
.nl-dots i.up,
.nl-dots i.down {
  transform: translateY(-6px);
}
.nl-dots i.up::after,
.nl-dots i.down::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: var(--step);
}
.nl-dots i.down::after {
  background: #8c9198;
}
.nl-n {
  font-size: 24px;
  text-align: right;
  color: var(--step);
  font-variant-numeric: tabular-nums;
}
.nl-ch {
  font-size: 13px;
  color: var(--muted);
}
.nl-rows li.na .nl-dots {
  opacity: 0.35;
}
.nl-rows li.na .nl-n {
  color: var(--muted);
}
.nl-say {
  min-height: 2.8em;
  margin: 14px 0 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
}
.nl-key {
  display: flex;
  align-items: center;
  gap: 6px 8px;
  flex-wrap: wrap;
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--muted);
}
.nl-key i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--step);
}
.nl-key i.down {
  margin-left: 10px;
  background: #8c9198;
}
.nl figcaption {
  margin-top: 8px;
  font-size: 14px;
  color: var(--muted);
}
@media (max-width: 760px) {
  .nl-pick span {
    width: 100%;
  }
  .nl-pick button {
    min-width: 0;
    flex: 1;
    min-height: 40px;
    padding: 4px 2px;
    font-size: 14px;
  }
  .nl-rows li {
    grid-template-columns: 1fr 44px;
    grid-template-areas: 'name n' 'dots dots' 'ch ch';
    row-gap: 6px;
  }
  .nl-name {
    grid-area: name;
  }
  .nl-n {
    grid-area: n;
  }
  .nl-dots {
    grid-area: dots;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    row-gap: 10px;
  }
  .nl-ch {
    grid-area: ch;
  }
}

/* it wasn't a misunderstanding: the two questions and its two answers, as a short transcript */
.story > .qa {
  max-width: 760px;
  margin: clamp(20px, 3vw, 30px) auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
.qa-q,
.qa-a {
  margin: 0;
  padding: 14px 16px;
  border-radius: 16px;
}
.qa-q {
  background: #fff;
  box-shadow: 0 0 0 1px #e4dfd3;
}
.qa-q span,
.qa-a small,
.qa-q small {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.qa-q p {
  margin: 4px 0;
  font:
    700 16px/1.45 Menlo,
    'SF Mono',
    Consolas,
    monospace;
}
.qa-a {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 12px;
  align-items: center;
  border: 2px solid currentColor;
}
.qa-a .scene {
  grid-row: 1 / 3;
  width: 40px;
}
.qa-a p {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
}
.qa-a.bad {
  color: var(--red);
  background: #fdf1ef;
}
.qa-a.good {
  color: var(--green);
  background: #eef7f1;
}
.qa-a small {
  color: inherit;
  opacity: 0.85;
}
@media (max-width: 640px) {
  .story > .qa {
    grid-template-columns: 1fr;
  }
}

/* where each AI stopped: a plain two-column table in the reading column */
.story > .stops {
  width: 100%;
  margin-top: 14px;
  border-collapse: collapse;
  font-size: 16px;
}
.stops thead th {
  padding: 0 0 6px;
  border-bottom: 2px solid var(--ink);
  font-size: 14px;
  font-weight: 800;
  text-align: left;
  color: var(--muted);
}
.stops tbody th,
.stops td {
  padding: 10px 0;
  border-bottom: 1px solid #e4dfd3;
  text-align: left;
  vertical-align: top;
  line-height: 1.45;
}
.stops tbody th {
  width: 36%;
  padding-right: 16px;
  font-weight: 800;
}
.stops tbody th small {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.stops tr.all th {
  color: var(--red);
}
.stops td i {
  padding: 1px 6px;
  border-radius: 6px;
  background: #ece7dc;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  color: var(--muted);
}

/* the ladder's numbers as shares, with the count underneath */
.ld-big small {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

/* robots name themselves: a floating label, and the same AI ringed across the step's figures */
.bot-tip {
  position: absolute;
  z-index: 50;
  transform: translate(-50%, -100%);
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}
.ld-bots [data-m],
.nl-dots [data-m],
.bd-bots [data-m] {
  cursor: pointer;
}
.ld-bots .hl-bot,
.nl-dots .hl-bot,
.bd-bots .hl-bot {
  border-radius: 6px;
  box-shadow: 0 0 0 2px var(--ink);
  opacity: 1 !important;
}

/* try it again */
.lt-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
}
.lt-again {
  min-height: 44px;
  padding: 8px 18px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}
.lt-again:hover {
  background: var(--ink);
  color: #fff;
}

/* step 2: the six that said yes, one row */
.story > .yes-row {
  max-width: 900px;
  margin: clamp(20px, 3vw, 30px) auto;
}
.story > .yes-row ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 14px 8px;
}
.story > .yes-row li b {
  font-size: 13px;
  line-height: 1.3;
  hyphens: none;
  overflow-wrap: normal;
  word-break: keep-all;
}
@media (max-width: 520px) {
  .story > .yes-row ul {
    grid-template-columns: repeat(3, 1fr);
  }
}
.yes-row figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 16px;
  font-size: 14px;
  color: var(--muted);
}
.story > .ld-share {
  margin-top: 10px;
}

/* ================================================================== step 3: two strangers */
/* the 16 versions of one question, two AIs side by side */
.story > .sixteen {
  max-width: 820px;
  margin: clamp(22px, 3vw, 34px) auto;
  padding: clamp(16px, 2.2vw, 26px);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 0 1px #e4dfd3;
}
.s16-key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}
.s16-key i {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: -2px;
  border-radius: 4px;
}
.s16-key i.b,
.s16-grid i.b {
  background: var(--tone-dark, #7c533e);
}
.s16-key i.w,
.s16-grid i.w {
  background: var(--tone-light, #f1c7a8);
}
.s16-k2 {
  font-weight: 600;
}
.s16-k2 b {
  padding: 1px 5px;
  border-radius: 4px;
  background: #ece7dc;
  color: var(--ink);
  font-size: 12px;
}
.s16-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 3vw, 34px);
}
.s16-who {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 800;
}
.s16-grid,
.s16-cols {
  display: grid;
  grid-template-columns: 112px repeat(4, 1fr);
  gap: 5px;
  align-items: center;
}
.s16-cols {
  margin-bottom: 4px;
}
.s16-cols span {
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  color: var(--ink);
}
.s16-cols small {
  font-weight: 700;
  color: var(--muted);
}
.s16-row {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--muted);
}
.s16-grid i {
  display: grid;
  place-items: center;
  aspect-ratio: 1.6;
  border-radius: 7px;
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 0.25s,
    transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1);
  transition-delay: calc(var(--i) * 45ms);
}
.sixteen.played .s16-grid i {
  opacity: 1;
  transform: none;
}
.s16-grid small {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: rgb(255 255 255 / 0.85);
}
.s16-grid i.w small {
  color: rgb(0 0 0 / 0.45);
}
.s16-note {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.4;
}
.sixteen figcaption,
.habits figcaption,
.tug figcaption,
.costs figcaption,
.nat figcaption,
.podium3 figcaption {
  margin-top: 12px;
  font-size: 14px;
  color: var(--muted);
}
@media (max-width: 560px) {
  .s16-pair {
    grid-template-columns: 1fr;
  }
}

/* the overall grid, in the reading column's wider frame */
.story > .imp-grid {
  max-width: 1000px;
  margin: clamp(18px, 3vw, 28px) auto;
}

/* the tug of war: one row per contrast, robots behind the person they saved, the other end empty */
.story > .tug {
  max-width: 1040px;
  margin: clamp(22px, 3vw, 34px) auto;
  padding: clamp(14px, 2.2vw, 26px);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 0 1px #e4dfd3;
}
.tug ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tug li {
  display: grid;
  grid-template-columns: 120px 1fr 120px 74px;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid #f0ece3;
}
.tug li:first-child {
  border-top: 0;
}
.tg-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}
.tg-side .scene {
  width: 46px;
}
.tg-side b {
  font-size: 13px;
  line-height: 1.25;
}
.tg-side.b {
  opacity: 0.75;
}
.tg-rope {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 2px 1fr;
  align-items: end;
  min-height: 48px;
  background: linear-gradient(to bottom, transparent calc(100% - 3px), #cfc8bb calc(100% - 3px));
}
.tg-mid {
  height: 100%;
  background: #b8b2a5;
}
.tg-bots {
  display: flex;
  flex-wrap: wrap-reverse;
  gap: 1px;
  padding: 0 6px 5px;
}
.tg-bots.a {
  justify-content: flex-start;
}
.tg-bots.b {
  justify-content: flex-end;
}
.tg-bots i {
  width: 19px;
  opacity: 0;
  transform: translateX(40px);
  transition:
    opacity 0.3s,
    transform 0.5s cubic-bezier(0.3, 1.3, 0.5, 1);
  transition-delay: calc(0.15s + var(--i) * 45ms);
  cursor: pointer;
}
.tug li.played .tg-bots i {
  opacity: 1;
  transform: none;
}
.tg-bots i .scene {
  width: 100%;
}
.tg-score {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}
.tg-score b {
  font-size: 24px;
  color: var(--ink);
}
.tg-score span {
  margin: 0 5px;
  font-size: 13px;
}
.tg-score b.zero {
  color: var(--red);
}
@media (max-width: 700px) {
  .tug li {
    grid-template-columns: 70px 1fr 70px;
    grid-template-areas: 'a rope b' 'score score score';
    row-gap: 4px;
  }
  .tg-side.a {
    grid-area: a;
  }
  .tg-rope {
    grid-area: rope;
  }
  .tg-side.b {
    grid-area: b;
  }
  .tg-score {
    grid-area: score;
    text-align: center;
  }
  .tg-bots i {
    width: 16px;
  }
  .tg-side b {
    font-size: 11px;
  }
}

/* the cost of a preference: one row per AI, one mark per case */
.story > .costs {
  max-width: 900px;
  margin: clamp(22px, 3vw, 34px) auto;
  padding: clamp(14px, 2.2vw, 26px);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 0 1px #e4dfd3;
}
.cs-key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}
.cs-key i {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  border-radius: 3px;
  vertical-align: -1px;
}
.costs ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.costs li {
  display: grid;
  grid-template-columns: 130px 1fr 34px;
  gap: 10px;
  align-items: center;
  padding: 5px 0;
  border-top: 1px solid #f4f1ea;
}
.cs-who {
  font-size: 14px;
  font-weight: 700;
}
.cs-who small {
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
}
.cs-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.cs-marks button {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.cs-marks button.on {
  outline: 3px solid var(--ink);
  outline-offset: 1px;
}
.cs-key i.age,
.cs-marks button.age {
  background: #9aa3ad;
}
.cs-key i.rec,
.cs-marks button.rec {
  background: #c49a62;
}
.cs-key i.other,
.cs-marks button.other {
  background: var(--red);
}
.costs li b {
  font-size: 15px;
  text-align: right;
}
.cs-tip {
  min-height: 2.8em;
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #faf8f3;
  font-size: 15px;
  font-weight: 700;
}
.story > .cost-kinds {
  padding-left: 20px;
}
.cost-kinds li {
  margin: 8px 0;
  font-size: 18px;
  line-height: 1.5;
}
@media (max-width: 560px) {
  .costs li {
    grid-template-columns: 90px 1fr 28px;
  }
}

/* nationality by base model */
.story > .nat {
  max-width: 760px;
  margin: clamp(22px, 3vw, 34px) auto;
  padding: clamp(14px, 2.2vw, 26px);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 0 1px #e4dfd3;
}
.nt-key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
}
.nt-key i {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: -1px;
}
.nt-chart {
  width: 100%;
  height: auto;
}
.nt-chart circle {
  opacity: 0.4;
}
.nt-chart circle:hover {
  opacity: 1;
  stroke: var(--ink);
  stroke-width: 2;
}
.nd-qwen {
  fill: #c93a2e;
  stroke: #c93a2e;
  background: #c93a2e;
}
.nd-us {
  fill: #3d5a80;
  stroke: #3d5a80;
  background: #3d5a80;
}
.nd-nd {
  fill: #9aa3ad;
  stroke: #9aa3ad;
  background: #9aa3ad;
}
.nt-chart circle.nd-qwen,
.nt-chart circle.nd-us,
.nt-chart circle.nd-nd {
  stroke: none;
}
.nt-chart path.avg {
  fill: none;
  stroke-width: 6;
}

/* same base, opposite answers (the old step's rankings, here as a figure) */
.story > .podium3 {
  max-width: 900px;
  margin: clamp(22px, 3vw, 34px) auto;
}
.podium3 figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

/* step 3 quiz: the result under the scene */
.story > .quiz3 {
  max-width: 1000px;
  margin: clamp(24px, 3vw, 36px) auto;
}
.q3-after[hidden] {
  display: none !important;
}
.q3-after {
  padding-top: 14px;
  border-top: 1px solid #ece7dc;
}
.q3-you {
  margin: 0 0 12px;
  font-size: clamp(19px, 1.9vw, 22px);
  font-weight: 800;
}
.q3-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.q3-col {
  padding: 12px 14px;
  border-radius: 14px;
  background: #faf8f3;
}
.q3-col p {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
}
.q3-col p b {
  margin-right: 4px;
  font-size: 28px;
  color: var(--ink);
}
.q3-col p b.zero {
  color: var(--red);
}
.q3-bots {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
}
.q3-bot {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 52px;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.25s,
    transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.q3-after.played .q3-bot {
  opacity: 1;
  transform: none;
}
.q3-bot .scene {
  width: 32px;
}
.q3-bot small {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--muted);
}
.q3-rest {
  margin: 12px 0 0;
  font-size: 15px;
  color: var(--muted);
}
.q3-next {
  margin: 14px 0 0;
}
@media (max-width: 640px) {
  .q3-cols {
    grid-template-columns: 1fr;
  }
}

/* the scoreboard: one row per contrast, the scene (favored person on top, trolley going for the other), the count */
.story > .board {
  max-width: 900px;
  margin: clamp(22px, 3vw, 34px) auto;
  padding: clamp(14px, 2.2vw, 26px);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 0 1px #e4dfd3;
}
.bd-head {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 16px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--ink);
  font-size: 14px;
  font-weight: 800;
  color: var(--muted);
}
.board ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.board li {
  display: grid;
  grid-template-columns: 230px 1fr 1fr;
  grid-template-areas: 'pic a b' 'pic bots bots';
  column-gap: 16px;
  row-gap: 4px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f0ece3;
}
.bd-pic {
  grid-area: pic;
}
.bd-pic .scene {
  width: 100%;
}
.bd-n {
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1.25;
}
.bd-n.a {
  grid-area: a;
}
.bd-n.b {
  grid-area: b;
}
.bd-n b {
  font-size: 34px;
  min-width: 1.2em;
}
.bd-n span {
  font-size: 15px;
  font-weight: 700;
}
.bd-n.b {
  color: var(--muted);
}
.bd-n.b.zero b {
  color: var(--red);
}
.bd-bots {
  grid-area: bots;
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
}
.bd-bots i {
  width: 20px;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.25s,
    transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1);
  transition-delay: calc(0.1s + var(--i) * 40ms);
  cursor: pointer;
}
.board li.played .bd-bots i {
  opacity: 1;
  transform: none;
}
.bd-bots i .scene {
  width: 100%;
}
.board figcaption {
  margin-top: 12px;
  font-size: 14px;
  color: var(--muted);
}
@media (max-width: 640px) {
  .bd-head {
    display: none;
  }
  .board li {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 'pic pic' 'a b' 'bots bots';
  }
  .bd-pic {
    max-width: 230px;
  }
  .bd-n b {
    font-size: 28px;
  }
  .bd-n span {
    font-size: 13px;
  }
}

/* Clef-omni, one against two: four scenes */
.story > .omni-cases {
  max-width: 900px;
  margin: clamp(20px, 3vw, 30px) auto;
}
.oc-h {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 800;
}
.oc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.oc {
  margin: 0;
  padding: 10px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 0 0 1px #e4dfd3;
}
.oc .scene {
  width: 100%;
}
.oc figcaption {
  font-size: 14px;
  font-weight: 700;
  color: var(--red);
}
@media (max-width: 600px) {
  .oc-grid {
    grid-template-columns: 1fr;
  }
}

/* nationality by base, as a table */
.story > .nat {
  max-width: 900px;
}
.nt-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.nt-table thead th {
  padding: 0 4px 8px;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  vertical-align: bottom;
}
.nt-table thead th .scene {
  display: block;
  width: 30px;
  margin: 0 auto 4px;
}
.nt-table tbody th {
  padding: 10px 8px 10px 0;
  font-size: 14px;
  text-align: left;
  white-space: nowrap;
}
.nt-table tbody th small {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.nt-table td {
  padding: 10px 4px;
  border-top: 1px solid #f0ece3;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
}
.nt-table td.up {
  color: #2f5f9e;
}
.nt-table td.down {
  color: var(--red);
}
.nt-table td.hl {
  background: #faf6ea;
}
.nt-table th:first-child {
  text-align: left;
}
@media (max-width: 700px) {
  .nat {
    overflow-x: auto;
  }
  .nt-table {
    min-width: 640px;
  }
}

/* step 3 quiz: the AI's two buttons shown, not pressable; one primary "See results" */
.q3-had {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
}
.q3-btns button[disabled] {
  border-color: #c9c2b4;
  color: #8c9198;
  background: #faf8f3;
  cursor: default;
}
.q3-btns button[disabled]:hover {
  transform: none;
  background: #faf8f3;
  color: #8c9198;
}
.q3-see {
  min-height: 52px;
  margin-top: 6px;
  padding: 12px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
}
.q3-see:hover {
  background: var(--step);
}
.q3-bot {
  width: 64px;
}
.q3-bot b {
  font-size: 11px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
}
.q3-how {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

.q3-cols.one {
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
}
.q3-col.empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.q3-col.empty p {
  font-size: 14px;
}
@media (max-width: 640px) {
  .q3-cols.one {
    grid-template-columns: 1fr;
  }
}

/* the habits: every AI, a bar out from the middle line (half and half) toward its habit */
.story > .habits {
  max-width: 820px;
  margin: clamp(18px, 3vw, 28px) auto;
  padding: clamp(14px, 2.2vw, 24px);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 0 1px #e4dfd3;
}
.hb-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.hb-tabs button {
  min-height: 40px;
  padding: 6px 16px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}
.hb-tabs button[aria-selected='true'] {
  background: var(--ink);
  color: #fff;
}
.hb-axis {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin: 0 52px 4px 162px;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}
.hb-axis span:nth-child(2) {
  text-align: center;
}
.hb-axis span:nth-child(3) {
  text-align: right;
}
.hb-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.hb-rows li {
  display: grid;
  grid-template-columns: 150px 1fr 40px;
  gap: 12px;
  align-items: center;
  padding: 3px 0;
}
.hb-rows .hb-who {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.hb-rows li.strong .hb-who,
.hb-rows li.strong b {
  color: var(--ink);
  font-weight: 800;
}
.hb-who small {
  font-size: 10px;
  color: var(--muted);
}
.hb-track {
  position: relative;
  height: 14px;
  border-radius: 7px;
  background: #f4f1ea;
}
.hb-mid {
  position: absolute;
  left: 50%;
  top: -4px;
  bottom: -4px;
  width: 2px;
  margin-left: -1px;
  background: #b8b2a5;
}
.hb-bar {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: calc(var(--from) * 1%);
  width: 0;
  border-radius: 4px;
  background: #cfc8bb;
  transition: width 0.7s cubic-bezier(0.3, 0.9, 0.3, 1);
}
.habits.played .hb-bar {
  width: calc((var(--to) - var(--from)) * 1%);
}
.hb-rows li.strong .hb-bar {
  background: var(--step);
}
.hb-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: #8c9198;
  transition: left 0.7s cubic-bezier(0.3, 0.9, 0.3, 1);
}
.habits.played .hb-dot {
  left: calc(var(--x) * 1%);
}
.hb-rows li.strong .hb-dot {
  background: var(--step);
  box-shadow: 0 0 0 3px #fff;
}
.hb-rows b {
  font-size: 13px;
  text-align: right;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
  .hb-axis {
    margin: 0 36px 4px 98px;
    font-size: 10px;
  }
  .hb-rows li {
    grid-template-columns: 86px 1fr 32px;
    gap: 8px;
  }
  .s16-grid,
  .s16-cols {
    grid-template-columns: 74px repeat(4, 1fr);
  }
  .s16-cols span {
    font-size: 10px;
  }
}

/* step 3: a habit can cost lives (Laya's scene beside one bar per AI) */
.story > .habitcost,
.story > .fa-bars,
.story > .jev3,
.story > .mm,
.story > .tie3 {
  max-width: 900px;
  margin: clamp(18px, 3vw, 30px) auto;
}
.hc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}
.hc-h {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 800;
  color: var(--muted);
}
.hc-row,
.fa-row {
  display: grid;
  grid-template-columns: 150px 1fr 48px;
  gap: 12px;
  align-items: center;
  padding: 5px 0;
}
.hc-who,
.fa-who {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
}
.hc-row.rest .hc-who {
  color: var(--muted);
}
.hc-bar,
.fa-bar {
  height: 22px;
  border-radius: 6px;
  background: #ebe7dd;
  overflow: hidden;
}
.hc-bar i,
.fa-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 6px;
  background: var(--red);
  transition: width 0.9s cubic-bezier(0.3, 0.9, 0.3, 1);
}
.hc-row.rest .hc-bar i {
  background: #9a9fa6;
}
.hc-bars.played .hc-bar i,
.played .hc-bars .hc-bar i,
.fa-bars.played .fa-bar i {
  width: calc(var(--w) * 1%);
}
.hc-row b,
.fa-row b {
  font-size: 18px;
  text-align: right;
}
.habitcost figcaption,
.fa-bars figcaption,
.jev3 figcaption,
.mm figcaption {
  margin-top: 10px;
  font-size: 14px;
  color: var(--muted);
}

/* the method check: two bars */
.story > .fa-bars {
  max-width: 720px;
  padding: clamp(14px, 2vw, 22px);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 0 1px #e4dfd3;
}
.fa-row {
  grid-template-columns: 210px 1fr 56px;
}
.fa-who small {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.fa-bar i {
  background: #9a9fa6;
}
.fa-row.real .fa-bar i {
  background: var(--step);
}
.fa-row b {
  font-size: 24px;
}

/* the board: the split rows, robots on both sides */
.bd-but {
  margin: 18px 0 0;
  padding-top: 12px;
  border-top: 2px solid var(--ink);
  font-size: 15px;
  font-weight: 800;
}
.board li {
  grid-template-areas: 'pic a b' 'pic bots bots2';
}
.bd-bots.a {
  grid-area: bots;
}
.bd-bots.b {
  grid-area: bots2;
}
.board li:not(.split) .bd-bots.a {
  grid-column: 2 / 4;
}
.board li.split .bd-n.b {
  color: var(--ink);
}
@media (max-width: 640px) {
  .board li {
    grid-template-areas: 'pic pic' 'a b' 'bots bots2';
  }
}

/* Jev: the ranking */
.story > .jev3 {
  max-width: 600px;
  padding: clamp(14px, 2vw, 24px);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 0 1px #e4dfd3;
}
.jev3 .order .col span {
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  text-align: center;
  font-size: 22px;
  font-weight: 800;
}
.jev3 .order .last .col i {
  background: var(--red);
}

/* people and the AIs */
.mm-t {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.mm-t th,
.mm-t td {
  padding: 10px 8px;
  border-bottom: 1px solid #e4dfd3;
  text-align: left;
  vertical-align: top;
}
.mm-t thead th {
  font-size: 13px;
  color: var(--muted);
  border-bottom: 2px solid var(--ink);
}
.mm-t tbody th {
  font-weight: 800;
  width: 26%;
}
.mm-v {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  background: #ebe7dd;
}
.mm-t tr.same .mm-v {
  background: #dcefe2;
  color: #1d6b3a;
}
.mm-t tr.opposite .mm-v {
  background: #fbe4e1;
  color: var(--red);
}
.mm-t tr.none td,
.mm-t tr.none th {
  color: var(--muted);
}
@media (max-width: 640px) {
  .hc-grid {
    grid-template-columns: 1fr;
  }
  .hc-row {
    grid-template-columns: 110px 1fr 40px;
  }
  .fa-row {
    grid-template-columns: 120px 1fr 44px;
  }
  .mm-t {
    font-size: 13px;
  }
  .mm-t thead th:last-child,
  .mm-t td:last-child {
    display: none;
  }
}

.jev3 .order .fig .scene {
  height: clamp(80px, 9vw, 110px);
}
.jev3 .order .sk .scene {
  height: 36px;
}
.jev3 .order b {
  margin: 4px 0 8px;
  font-size: clamp(13px, 1.3vw, 16px);
}
.jev3 .order .col {
  height: clamp(90px, 10vw, 120px);
  width: min(100%, 76px);
}
.jev3 .order .col span {
  font-size: 18px;
}
.jev3 .order b {
  white-space: nowrap;
  min-height: 1.3em;
}
/* the verdict also as a colored edge on the AIs' cell, so it survives on phones where the tag column is hidden */
.mm-t td:nth-child(3) {
  border-left: 4px solid #e4dfd3;
  padding-left: 10px;
}
.mm-t tr.same td:nth-child(3) {
  border-left-color: #2f9e5a;
}
.mm-t tr.opposite td:nth-child(3) {
  border-left-color: var(--red);
}
.mm-t tr.split td:nth-child(3) {
  border-left-color: #b9b1a2;
}

.story > .twice3 {
  max-width: 900px;
  margin: clamp(18px, 3vw, 30px) auto;
}
.twice3 > figcaption {
  margin-top: 10px;
  font-size: 14px;
  color: var(--muted);
}

/* step 3: the careful ones. Four columns (the last step each AI took on step 2's ladder), one dot per AI, height =
   pairs where it had a favorite */
.story > .careful {
  max-width: 820px;
  margin: clamp(20px, 3vw, 32px) auto;
  padding: clamp(16px, 2.4vw, 28px);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 0 1px #e4dfd3;
}
.cf-ylab,
.cf-xlab {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
}
.cf-xlab {
  margin-top: 6px;
  text-align: center;
}
.cf-chart {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 8px;
  margin-top: 10px;
}
.cf-ticks {
  position: relative;
  height: 280px;
}
.cf-ticks span {
  position: absolute;
  right: 0;
  bottom: calc(var(--y) * 1%);
  transform: translateY(50%);
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.cf-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.cf-plot {
  position: relative;
  height: 280px;
  border-bottom: 2px solid var(--ink);
  background: repeating-linear-gradient(to top, transparent 0, transparent calc(50% - 1px), #efebe2 calc(50% - 1px), #efebe2 50%);
}
.cf-dot {
  position: absolute;
  left: calc(50% - 9px + var(--j) * 16px - 8px);
  bottom: calc(var(--y) * 1% - 9px);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #9a9fa6;
  box-shadow: 0 0 0 2px #fff;
  cursor: pointer;
}
.cf-dot.chat {
  background: #fff;
  box-shadow: inset 0 0 0 3px #9a9fa6, 0 0 0 2px #fff;
}
.cf-dot.named {
  background: var(--step);
}
.cf-dot .cf-lab {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-style: normal;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  color: var(--ink);
}
.cf-dot .cf-lab b {
  color: var(--step);
}
.cf-x {
  margin: 8px 0 0;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
}
.cf-x small {
  display: block;
  font-size: 12px;
  color: var(--muted);
}
.careful > figcaption {
  margin-top: 12px;
  font-size: 14px;
  color: var(--muted);
}
@media (max-width: 640px) {
  .cf-ticks,
  .cf-plot {
    height: 220px;
  }
  .cf-x {
    font-size: 12px;
  }
  .cf-dot .cf-lab {
    font-size: 11px;
  }
}

.cf-dot .cf-lab {
  text-decoration: none;
  border: 0;
}
.cf-dot.zero {
  background: var(--red);
}
.cf-zero {
  margin: 4px 0 0;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--red);
}

/* ---------- step 3: one column, one frame. Every figure is 900 wide in a white card; the three big scenes are the
   only full-width ones, and the verdict the only sand panel. (Later rules win over each figure's own width.) */
#impossible > figure,
#impossible > .omni-cases {
  box-sizing: border-box;
  max-width: 900px;
  width: 100%;
  margin: clamp(22px, 3vw, 34px) auto;
  padding: clamp(14px, 2.2vw, 26px);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 0 1px #e4dfd3;
}
/* figures that were bare: their inner tiles lose their own frame inside the card */
#impossible > .twice3 .oc,
#impossible > .tie3 .oc,
#impossible > .omni-cases .oc,
#impossible > .habitcost .oc {
  box-shadow: none;
  background: #f7f5f0;
}
/* the omni tiles and the cost strip now sit in one card each: no double gap between them */
#impossible > .omni-cases {
  margin-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
#impossible > .omni-cases + .costs {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  box-shadow: 0 0 0 1px #e4dfd3, 0 -1px 0 #fff;
}
/* a heading always has room above it; text after a figure always has the same gap */
#impossible > h3 {
  margin-top: clamp(64px, 8vw, 96px);
}
#impossible > figure + p,
#impossible > .finding + p,
#impossible > .omni-cases + p {
  margin-top: 26px;
}
#impossible .jev3 .ld-share {
  margin: 14px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ================================================================== step 4 (new): same column and frame rules as step 3 */
#real > figure {
  box-sizing: border-box;
  max-width: 900px;
  width: 100%;
  margin: clamp(22px, 3vw, 34px) auto;
  padding: clamp(14px, 2.2vw, 26px);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 0 1px #e4dfd3;
  color: var(--ink);
}
#real > h3 {
  margin-top: clamp(64px, 8vw, 96px);
}
#real > figure + p {
  margin-top: 26px;
}
#real figcaption {
  margin-top: 12px;
  font-size: 14px;
  color: var(--muted);
}
#real .pair4 .oc {
  box-shadow: none;
  background: #f7f5f0;
  padding: 8px;
}
#real .pair4 .scene.photo {
  border-radius: 12px;
}
/* the two framings: a track per AI, a dot for each framing, the gap between them shaded */
.frames4 .hb-axis {
  margin: 0 64px 6px 162px;
}
.fr-rows,
.rl-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.fr-rows li,
.rl-rows li {
  display: grid;
  grid-template-columns: 150px 1fr 56px;
  gap: 12px;
  align-items: center;
  padding: 5px 0;
}
.fr-rows li.off .hb-who,
.fr-rows li.off b {
  color: var(--muted);
}
.fr-rows b,
.rl-rows b {
  font-size: 13px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.fr-track {
  position: relative;
  height: 16px;
  border-radius: 8px;
  background: #f4f1ea;
}
.fr-gap {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: calc(var(--a) * 1%);
  width: calc((var(--b) - var(--a)) * 1%);
  background: color-mix(in srgb, var(--red) 35%, #fff);
  border-radius: 3px;
}
.fr-dot {
  position: absolute;
  top: 50%;
  left: calc(var(--x) * 1%);
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff;
}
.fr-dot.trolley {
  background: #8c9198;
}
.fr-dot.job {
  background: var(--red);
}
.fr-key {
  display: flex;
  gap: 20px;
  margin: 12px 0 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
}
.fr-key span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fr-key .fr-dot {
  position: static;
  margin: 0;
  display: inline-block;
}
/* the rule and the fault: two bars per AI */
.rl-bars {
  display: grid;
  gap: 3px;
}
.rl-bar {
  height: 9px;
  border-radius: 5px;
  background: #f4f1ea;
  overflow: hidden;
}
.rl-bar i {
  display: block;
  height: 100%;
  width: calc(var(--w) * 1%);
  background: var(--red);
  border-radius: 5px;
}
.rl-bar.rule i {
  background: #2f9e5a;
}
.rl-bar.fault i {
  background: #7a1f17;
}
.rl-k {
  display: inline-block;
  width: 16px;
  height: 9px;
  border-radius: 5px;
  background: var(--red);
}
.rl-k.rule {
  background: #2f9e5a;
}
.rl-k.fault {
  background: #7a1f17;
}
@media (max-width: 640px) {
  .fr-rows li,
  .rl-rows li {
    grid-template-columns: 96px 1fr 48px;
    gap: 8px;
  }
  .frames4 .hb-axis {
    margin: 0 56px 6px 104px;
  }
}
#real .oc-grid.one {
  grid-template-columns: minmax(0, 1fr);
}
#real > figure .oc {
  box-shadow: none;
  background: #f7f5f0;
  padding: 8px;
}
#real > figure .scene.photo {
  border-radius: 12px;
}
#real > figure > figcaption:not(:first-child) {
  margin-top: 12px;
}
#real .photo-card .scene.photo {
  border-radius: 12px;
  margin-bottom: 10px;
}
/* hall of shame photos: one shape, so the headings line up */
#real .photo-card .scene.photo {
  aspect-ratio: 16 / 9 !important;
  width: 100%;
  height: auto;
}

/* step 4 (new): the toggle, the live photo and the brake-fault tally, on the light page */
#real .flip-tabs {
  background: #ebe7dd;
}
#real .flip-tabs button {
  color: var(--muted);
}
#real .flip-tabs button[aria-selected='true'] {
  background: var(--ink);
  color: #fff;
}
#real .flip-photo .scene.photo {
  border-radius: 14px;
}
#real .prompt {
  color: var(--ink);
}
#real .big {
  font-size: clamp(52px, 7vw, 88px);
}
#real .big.good {
  color: #2f9e5a;
}
#real .big.bad {
  color: var(--red);
}
#real .big small {
  color: var(--muted);
}
#real .terminal {
  background: #15191d;
}
#real .tally b {
  color: var(--ink);
}
#real .tally .bad b {
  color: var(--red);
}
#real .tally span {
  color: var(--muted);
}
#real .tally > div:first-child .crowd i {
  background: #9a9fa6;
}
#real .tally .bad .crowd i {
  background: var(--red);
}
@media (max-width: 640px) {
  #real .flip-body {
    grid-template-columns: 1fr;
  }
}
#real .big {
  font-size: clamp(40px, 5vw, 64px);
  white-space: nowrap;
}

/* step 4: they counted the workers, then hit them */
.kn-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.kn-pic .scene.photo {
  border-radius: 14px;
}
.kn-qa {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.kn-qa .qa-q,
.kn-qa .qa-a {
  padding: 10px 14px;
  border-radius: 14px;
}
.kn-qa .qa-q p {
  font-size: 14px;
}
.kn-qa .qa-a p {
  font-size: 18px;
}
.kn-qa .qa-a {
  margin-left: 26px;
}
.kn-head {
  display: grid;
  grid-template-columns: 150px 1fr 64px 40px;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}
.kn-head span:nth-child(3) {
  grid-column: 3 / 5;
  text-align: right;
}
.kn-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.kn-rows li {
  display: grid;
  grid-template-columns: 150px 1fr 64px 40px;
  gap: 12px;
  align-items: center;
  padding: 4px 0;
}
.kn-bar {
  position: relative;
  height: 16px;
  border-radius: 8px;
  background: #f4f1ea;
  overflow: hidden;
}
.kn-bar i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(var(--w) * 1%);
  border-radius: 8px;
}
.kn-bar .r {
  background: #cfe9d8;
}
.kn-bar .h {
  top: 4px;
  bottom: 4px;
  background: var(--red);
}
.kn-n {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-align: right;
}
.kn-rows b {
  font-size: 15px;
  text-align: right;
}
.kn-rows li.kn-hit b {
  color: var(--red);
}
.kn-rows li {
  color: var(--ink);
}
.kn-k {
  display: inline-block;
  width: 16px;
  height: 10px;
  border-radius: 5px;
}
.kn-k.r {
  background: #cfe9d8;
}
.kn-k.h {
  background: var(--red);
}
@media (max-width: 640px) {
  .kn-grid {
    grid-template-columns: 1fr;
  }
  .kn-head,
  .kn-rows li {
    grid-template-columns: 90px 1fr 52px 30px;
    gap: 8px;
  }
}

.kn-pic {
  position: sticky;
  top: 70px;
}
.kn-note {
  margin: 10px 2px 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
}
/* the photo's route and skulls play in on scroll elsewhere; here the answer is already given, so show them */
#real .knew4 .scene .route,
#real .knewall4 .scene .route,
#real .knewall4 .scene .skull,
#real .knew4 .scene .skull,
#real .group4 .scene .route,
#real .group4 .scene .skull,
#real .livebars4 .scene .route,
#real .livebars4 .scene .skull,
#real .livebars4 .scene .bubble,
#real .three4 .scene .route,
#real .three4 .scene .skull {
  opacity: 1 !important;
  clip-path: none !important;
  transform: none !important;
}
/* the strip, one number per AI, in two groups */
.kn-q {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 800;
}
.kn-g {
  margin: 16px 0 4px;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--ink);
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
}
.knewall4 .kn-rows li {
  grid-template-columns: 170px 1fr 76px;
}
.knewall4 .hb-who small {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.knewall4 .kn-bar .h {
  top: 0;
  bottom: 0;
}
.knewall4 .kn-rows b {
  font-size: 15px;
  white-space: nowrap;
}
.knewall4 .kn-rows li.kn-ok b {
  color: #2f9e5a;
}
@media (max-width: 640px) {
  .knewall4 .kn-rows li {
    grid-template-columns: 100px 1fr 64px;
  }
}
.kn-sub {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
}
/* the framings: two columns of plain bars */
.fw-head,
.fw-rows li {
  display: grid;
  grid-template-columns: 150px 1fr 1fr;
  gap: 18px;
  align-items: center;
}
.fw-head {
  padding-bottom: 6px;
  border-bottom: 2px solid var(--ink);
  font-size: 13px;
  font-weight: 800;
}
.fw-head span:nth-child(2) {
  color: #4b5058;
}
.fw-head span:nth-child(3) {
  color: var(--red);
}
.fw-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.fw-rows li {
  padding: 6px 0;
  border-bottom: 1px solid #f0ece3;
}
.fw-cell {
  display: grid;
  grid-template-columns: 1fr 60px;
  gap: 10px;
  align-items: center;
}
.fw-bar {
  height: 12px;
  border-radius: 6px;
  background: #f4f1ea;
  overflow: hidden;
}
.fw-bar i {
  display: block;
  height: 100%;
  width: calc(var(--w) * 1%);
  border-radius: 6px;
}
.fw-cell.trolley .fw-bar i {
  background: #8c9198;
}
.fw-cell.job .fw-bar i {
  background: var(--red);
}
.fw-cell b {
  font-size: 13px;
  text-align: right;
  white-space: nowrap;
}
.fw-cell.job b {
  color: var(--red);
}
.fw-cell.off b {
  grid-column: 1 / 3;
  text-align: left;
  color: var(--muted);
}
/* one AI, both framings side by side */
.tw-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.tw {
  padding: 12px;
  border-radius: 16px;
  background: #f7f5f0;
}
.tw-h {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
}
.tw.good .tw-h {
  color: #2f9e5a;
}
.tw.bad .tw-h {
  color: var(--red);
}
.tw-q {
  margin: 6px 0 10px;
  min-height: 3em;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.4;
}
.tw .scene.photo {
  border-radius: 12px;
}
.tw .scene .route,
.tw .scene .skull {
  opacity: 1 !important;
  clip-path: none !important;
  transform: none !important;
}
.tw-n {
  margin: 10px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
}
.tw-n b {
  display: block;
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1;
}
.tw.good .tw-n b {
  color: #2f9e5a;
}
.tw.bad .tw-n b {
  color: var(--red);
}
@media (max-width: 640px) {
  .fw-head,
  .fw-rows li {
    grid-template-columns: 82px 1fr 1fr;
    gap: 8px;
  }
  .fw-cell {
    grid-template-columns: 1fr;
  }
  .fw-cell b {
    text-align: left;
  }
  .tw-grid {
    grid-template-columns: 1fr;
  }
}
.tw .tw-q {
  color: var(--ink);
}
.fw-head small {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}
.pair4 > .kn-q {
  margin-bottom: 12px;
}
/* the live-or-test answer: neither right nor wrong, its own color */
.qa-a.real {
  color: #3d4a8c;
  background: #eff1fa;
}
/* the live card: Claude's answer over the frame, then the chart */
.lv-pic {
  margin-bottom: 28px;
}
.lv-pic .scene.photo {
  border-radius: 12px;
}
.lv-pic .kn-note {
  margin-top: 10px;
}
/* a close-up at the top of a chart's card */
.kn-one {
  margin-bottom: 30px;
  padding-bottom: 26px;
  border-bottom: 1px solid #ece7dc;
}
.kn-one .scene.photo {
  border-radius: 12px;
}
.kn-one .kn-note {
  margin-top: 10px;
}
.kn-one > .kn-q {
  margin-bottom: 12px;
}
.kn-one .kn-grid + figcaption {
  margin-top: 12px;
}
/* what we sent: the request as the AIs got it, new lines highlighted */
.req4 {
  border-radius: 12px;
  background: #15191d;
  color: #c9d0d5;
  padding: 14px 16px;
}
.req4 .req-h {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: #9aa4ab;
}
.req4 pre {
  margin: 0;
  white-space: pre-wrap;
  font:
    500 13px / 1.55 Menlo,
    'SF Mono',
    Consolas,
    monospace;
}
.req4 mark {
  display: inline;
  background: rgba(242, 205, 46, 0.16);
  color: #f2e7b3;
  box-shadow: -4px 0 0 #f2cd2e;
}
.req4 mark b {
  color: #ffd84a;
}
.req4 .req-q {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 12px 0 0;
  font:
    700 13px / 1.4 Menlo,
    'SF Mono',
    Consolas,
    monospace;
  color: #fff;
}
.req4 .req-q i {
  font-style: normal;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid #4a555d;
  color: #c9d0d5;
}
/* hit counts in both columns: red is people hit, green is (almost) none */
.fw-head.hits span:nth-child(2),
.fw-head.hits span:nth-child(3) {
  color: var(--ink);
}
.fw-rows.hits .fw-cell .fw-bar i {
  background: var(--red);
}
.fw-rows.hits .fw-cell b {
  color: var(--red);
}
.fw-rows .fw-cell.ok b {
  color: var(--green);
}
.fw-rows .fw-cell.ok .fw-bar i {
  background: var(--green);
}
.fw-rows.hits .fw-cell.off b {
  color: var(--muted);
}
/* the rule backfiring: two frames, plain cards */
.bk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 16px;
}
.bk-grid .scene.photo {
  border-radius: 12px;
}
.bk-n {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}
.bk-n b {
  display: block;
  font-size: 28px;
  line-height: 1.1;
  color: var(--green);
}
.bk-grid .bad .bk-n b {
  color: var(--red);
}
.bk-who {
  margin: 18px 0 -8px;
  font-size: 15px;
  font-weight: 800;
}
.bk-grid .off .scene.photo {
  filter: grayscale(1);
  opacity: 0.55;
}
.bk-grid .off .bk-n b {
  color: var(--muted);
}
#real .back4 .scene .route,
#real .back4 .scene .skull,
#real .back4 .scene .check {
  opacity: 1 !important;
  clip-path: none !important;
  transform: none !important;
}
.back4 .req4 {
  margin-top: 10px;
}
/* the chat models against the decision models */
.ct-wrap {
  overflow-x: auto;
}
.ct4 {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.ct4 th,
.ct4 td {
  padding: 10px 8px;
  border-bottom: 1px solid #f0ece3;
  text-align: right;
  vertical-align: top;
}
.ct4 thead th {
  border-bottom: 2px solid var(--ink);
  font-size: 13px;
  font-weight: 800;
  vertical-align: bottom;
}
.ct4 tbody th {
  text-align: left;
  font-weight: 500;
  max-width: 260px;
}
.ct4 td {
  font-weight: 800;
  white-space: nowrap;
}
.ct4 td small,
.ct4 th small {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}
.ct4 td small {
  display: inline;
}
.ct4 td.ok {
  color: var(--green);
}
.ct4 td.bad {
  color: var(--red);
}
.ct4 .dec {
  color: var(--muted);
  border-left: 1px solid #e4dfd3;
}
@media (max-width: 640px) {
  .bk-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .ct4 thead {
    display: none;
  }
  .ct4,
  .ct4 tbody,
  .ct4 tr {
    display: block;
  }
  .ct4 tr {
    padding: 10px 0;
    border-bottom: 1px solid #f0ece3;
  }
  .ct4 tbody th {
    display: block;
    max-width: none;
    padding: 0 0 6px;
    border: 0;
    font-weight: 700;
  }
  .ct4 td {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    border: 0;
  }
  .ct4 td::before {
    content: attr(data-who);
    font-weight: 500;
    color: var(--ink);
  }
  .ct4 .dec {
    border-left: 0;
  }
}
/* the ladder rebuild: neutral columns (said live) in ink; red only ever means people hit */
.fw-head.ink span:nth-child(2),
.fw-head.ink span:nth-child(3) {
  color: var(--ink);
}
.fw-rows.ink .fw-cell .fw-bar i {
  background: #4b5058;
}
.fw-rows.ink .fw-cell b {
  color: var(--ink);
}
.fw-rows + .kn-g {
  margin-top: 14px;
}
.rule4 .kn-g {
  margin: 10px 0 2px;
}
/* the reveal: Clef on the reader's frame, the bubble and route always shown */
#real .live4 .scene .bubble,
#real .count4 .scene .bubble,
#real .hit4 .scene .route,
#real .hit4 .scene .skull,
#real .empty4 .scene .tag,
#real .pair4 .scene .route,
#real .pair4 .scene .skull {
  opacity: 1 !important;
  clip-path: none !important;
  transform: none !important;
}
#real .live4 .scene.photo,
#real .count4 .scene.photo,
#real .hit4 > .scene.photo {
  border-radius: 12px;
}
.hit4 > .kn-note {
  margin: 10px 0 26px;
  font-size: 15px;
  font-weight: 700;
  color: var(--red);
}
/* the report card: neutral columns in ink, the last column red (hit) or green (almost never) */
.rc4 thead th.hitcol {
  color: var(--red);
}
.rc4 td {
  color: var(--ink);
}
.rc4 td.hitcol.bad {
  color: var(--red);
}
.rc4 td.hitcol.ok {
  color: var(--green);
}
.rc4 td.hitcol.off {
  color: var(--muted);
}
.rc4 tbody th small {
  display: inline;
  font-size: 11px;
  color: var(--muted);
}
.bk-n.ink b {
  color: var(--ink);
}
#real .empty4 .scene.photo {
  border-radius: 12px;
}
.empty4 .bk-grid {
  margin-top: 6px;
}
.empty4 .bk-n.bad b {
  color: var(--red);
}
/* ---------- press: the cards by step, each with its headline, a share button and a link to the story */
.pr-use {
  max-width: var(--measure);
  margin: 0 auto 48px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 40px);
}
.pr-use h4 {
  margin: 0 0 6px;
  font-size: 17px;
}
.pr-use p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: #aab3b9;
}
.pr-use a {
  color: #fff;
}
.pr-group {
  max-width: var(--measure);
  margin: 0 auto 44px;
}
.pr-group h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-size: 24px;
}
.pr-group h3 .sn {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--c);
  font-size: 16px;
}
.pr-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pr-h {
  margin: 10px 0 6px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}
.pr-a {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
  font-size: 13px;
}
.pr-a a,
.pr-a .pr-share {
  color: #aab3b9;
  font-weight: 700;
}
.pr-a .pr-share {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  min-height: 0;
}
.pr-a .pr-share::before {
  display: none;
}
.anchor-f {
  position: absolute;
  width: 0;
  height: 0;
}
@media (max-width: 900px) {
  .pr-use {
    grid-template-columns: 1fr;
  }
  .pr-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}