/* ── the one object: a quiet frame for drawn and photographed objects ── */
.scene .object-svg,
.scene .object-image,
.scene .object-video {
  background: rgba(22, 22, 24, 0.72);
  border: 1px solid var(--hb-line-strong);
}
.scene .object-video video {
  background: #000;
}
/* The title's mark is part of the background's story, not a card. */
.scene-spine .object.mark {
  background: none;
  border: 0;
}
.scene-spine .object.mark img {
  max-height: 46vh;
}
/* The title object animates inside its SVG (SMIL). An SVG loaded through <img> cannot see
   prefers-reduced-motion (fixture 2026-10-16, #5277), so the page swaps in its still twin here. */
@media (prefers-reduced-motion: reduce) {
  .scene-spine .object.mark img {
    content: url("assets/act0/title-mark-static.svg");
  }
}
/* A station's object must fit its panel (engine caps the figure at 32vh; the image follows). */
.scene-rail .station .object img {
  max-height: 32vh;
}
/* the credit line under an object (R-90): small, quiet, and a real link */
.scene .object .credit {
  padding: 0 4px 6px;
  color: var(--hb-text-secondary);
}
.scene .object .credit a:focus-visible {
  outline: 2px solid var(--hb-mint);
  outline-offset: 3px;
}
/* ── proof tables: before and after, numbers aligned ── */
.scene .object-table {
  padding: 14px 18px 8px;
  border-radius: 18px;
  background: rgba(22, 22, 24, 0.86);
  border: 1px solid var(--hb-line-strong);
}
.scene .object-table table {
  font-size: clamp(16px, 1.45vw, 26px);
  font-variant-numeric: tabular-nums;
}
.scene .object-table td {
  color: var(--hb-text);
  font-weight: 700;
}
.scene .object-table td:first-child {
  color: var(--hb-text-secondary);
  font-weight: 500;
}
.scene .object-table td:last-child {
  color: var(--hb-mint);
}
/* ── the who-does-what pipeline (R-06): Human is an outline, AI is a mint fill ── */
.scene-rail .pipeline .chip.ai {
  background: var(--hb-mint);
  border-color: var(--hb-mint);
  color: var(--hb-mint-deep);
  font-weight: 700;
}
.scene-rail .pipeline .cell:has(.chip.ai) {
  border-color: rgba(90, 230, 171, 0.35);
}
/* ── the map: deep purple plates; Act 6's plates light as each is named ── */
.scene-map .plate.lit {
  fill: rgba(30, 10, 62, 0.78);
  stroke: var(--hb-mint);
}
.scene-map .plate.done {
  stroke: var(--hb-violet-line, rgba(167, 139, 250, 0.36));
}
/* ── the close: the scan code readable from the back of the room (R-72) ── */
.scene-spine .object-qr img {
  width: clamp(220px, 20vw, 400px);
}
.scene-spine .object-qr .qr-url {
  color: var(--hb-text);
}
/* the proof table's column heads, readable from the room (type only) */
.scene .object-table th {
  font-size: clamp(11px, 0.95vw, 16px);
}
/* a number and its unit stay on one line, on the phone too */
.scene .object-table td:not(:first-child) {
  white-space: nowrap;
}
/* the phone page never scrolls sideways (R-21): a proof table tightens to the column */
@media (max-width: 760px) {
  html:not(.is-stage) .scene .object-table {
    padding: 10px 8px 4px;
  }
  html:not(.is-stage) .scene .object-table th,
  html:not(.is-stage) .scene .object-table td {
    padding: 8px 6px;
  }
  html:not(.is-stage) .scene .object-table table {
    font-size: 15px;
  }
}
/* ───────────────────────── the 2026-10-18 revision round: the picked layouts ───────────────────────── */
/* 01-A: the title column shrinks to its words; the loop centres in the space that is left, midway
   between the title's right edge and the screen's right edge. The agenda lines arrive on build 1. */
.scene-spine.layout-title .two {
  grid-template-columns: max-content minmax(0, 1fr);
  justify-content: center;
  gap: clamp(24px, 3vw, 56px);
}
.scene-spine.layout-title .object.mark {
  justify-self: center;
  width: min(100%, 60vw);
}
.scene-spine.layout-title .object.mark img {
  max-height: 60vh;
}
.scene-spine.layout-title .text {
  counter-reset: agenda;
}
.scene-spine.layout-title .beat {
  margin-top: 8px;
  font-size: clamp(16px, 1.45vw, 24px);
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.scene-spine.layout-title .beat::before {
  counter-increment: agenda;
  content: counter(agenda, decimal-leading-zero);
  font: 600 0.78em/1 var(--hb-mono);
  color: var(--hb-mint);
  letter-spacing: 0.1em;
}
.scene-spine.layout-title .beat:first-of-type {
  margin-top: clamp(18px, 2.4vw, 36px);
}
/* 02-A + 03-A: About Me. The square headshot fills a rounded card; build 1 dissolves it to the 2005
   face (the stack's second layer); build 2 opens the show photo behind the whole scene (the bleed)
   and the card shrinks to a tilted print beside the poster-sized lyric. */
.scene-spine.layout-about .cred {
  font-size: clamp(18px, 1.7vw, 28px);
}
.scene-spine.layout-about .beat {
  margin-top: clamp(8px, 1vw, 14px);
  font-size: clamp(18px, 1.7vw, 28px);
}
.scene-spine.layout-about .object-stack {
  background: none;
  border: 0;
  justify-self: center;
  width: min(100%, 36vw, 62vh);
  aspect-ratio: 1;
  border-radius: 28px;
  overflow: hidden;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.08);
  transition:
    width 1200ms var(--ease),
    transform 1200ms var(--ease),
    box-shadow 1200ms var(--ease);
}
.scene-spine.layout-about .object-stack img.layer,
.scene-spine.layout-about .object-stack img.layer.on {
  max-height: none;
  border-radius: 0;
  /* both faces scale from the top edge: the 2005 scan's padded foot leaves the frame, the eye
  lines move together, and the hair stays */
  transform: scale(1.14);
  transform-origin: 50% 0;
}
/* build 2: the 2005 face slides onto the same face in the show photo and fades away there
   (Matt, 2026-10-19). The card's layers put the 2005 eyes at the card's centre; on a 16:9 stage
   the show photo (cover, 60% 40%) puts his face 10.85vw left of and 1.5vh above the card's,
   at 0.56 of the card's face scale, with his head tipped back about 15 degrees. Measured from
   the two photos' faces (forehead to chin, eyes to mouth). The move runs first, the fade starts
   as it lands. */
.scene-spine.layout-about[data-build="2"] .object-stack {
  transform: translate(-10.57vw, -2.73vh) rotate(-15deg) scale(0.4485);
  transform-origin: 50% 50%;
  opacity: 0;
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.9),
    0 30px 80px rgba(0, 0, 0, 0.6);
  transition:
    transform 1600ms var(--ease),
    box-shadow 1600ms var(--ease),
    opacity 1100ms var(--ease) 1300ms;
}
.scene-spine.layout-about .quote .lyric {
  font-size: clamp(26px, 2.9vw, 50px);
  max-width: 18em;
}
.scene-spine.layout-about .beat-icon.square {
  background: #fff;
}
.scene-spine.layout-about .beat-icon.mark {
  padding: 6px;
  background: rgba(255, 255, 255, 0.06);
}
/* 04a-A: the Pi and the session list, side by side, under the statement */
.scene-spine.layout-here .two {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(14px, 2vh, 26px) clamp(24px, 3vw, 56px);
  align-items: start;
}
.scene-spine.layout-here .two > .text {
  grid-column: 1;
  grid-row: 1;
}
/* the group's two objects become grid children: the Pi under the words, the clip at the right */
.scene-spine.layout-here .object-group.duo {
  display: contents;
}
.scene-spine.layout-here .object-group.duo > .object-image {
  grid-column: 1;
  grid-row: 2;
  width: min(100%, 30vw);
  align-self: start;
}
.scene-spine.layout-here .object-group.duo > .object-video {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  transform: perspective(1800px) rotateY(-10deg) rotateX(2deg);
  transform-origin: left center;
}
.scene-spine.layout-here .object-group.duo > .object-image {
  background: none;
  border: 0;
}
.scene-spine.layout-here .object-group.duo > .object-image img {
  filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.65));
  max-height: 40vh;
}
.scene-spine.layout-here .object-group.duo > .object-image .credit {
  text-align: center;
}
.scene-spine.layout-here .object-video {
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.scene .object .tag.live {
  color: var(--hb-mint);
}
/* 04b-C: the desktop split view large, a phone in front of its lower-right corner */
.scene-rail .station .object-group.strip {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
  max-height: none;
}
.scene-rail .station .object-group.strip > .object-image {
  background: none;
  border: 0;
}
.scene-rail .station .object-group.strip > .object-image img {
  height: 26vh;
  object-fit: cover;
  object-position: top;
  border-radius: 10px;
  border: 1px solid var(--hb-line-strong);
}
.scene-rail .station .object-group.strip > .object-image .credit {
  text-align: center;
  font-size: clamp(9px, 0.7vw, 12px);
  padding: 0;
}
.scene-rail .station .object.photo {
  background: none;
  border: 0;
}
.scene-rail .station .object.photo img {
  max-height: 30vh;
  width: auto;
  margin: 0 auto;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.65));
}
/* Act 2 (ACT2-B): each station puts its object on top, larger, the statement and the line under */
.scene-rail.layout-objects-first .station {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  align-content: center;
  flex-basis: var(--panel, 58vw);
}
.scene-rail.layout-objects-first .station .object {
  order: -1;
  max-height: 30vh;
  justify-self: center;
  width: min(100%, 44vw);
}
.scene-rail.layout-objects-first .station .object img {
  max-height: 28vh;
}
.scene-rail.layout-objects-first
  .station
  .object-group.strip
  > .object-image
  img {
  height: 24vh;
}
.scene-rail.layout-objects-first .station .object.photo img,
.scene-rail.layout-objects-first .station .object .pi-cut {
  max-height: 27vh;
}
.scene-rail.layout-objects-first .station .object-group.mesh10 svg {
  max-height: 28vh;
}
.scene-rail.layout-objects-first .station .panel-text h3 {
  font-size: clamp(20px, 1.9vw, 32px);
}
.scene-rail.layout-objects-first .station .beat {
  font-size: clamp(14px, 1.2vw, 20px);
  margin-top: 8px;
}
.scene-rail.layout-objects-first .head .statement.compact {
  font-size: clamp(28px, 2.8vw, 44px);
}
/* Act 3 (ACT3-A): the charts at 56 percent of the height */
.scene-chart .chart-box [data-talk="timeline"],
.scene-chart .chart-box [data-talk="hours"] {
  height: 56vh;
}
.scene-chart .statement.compact {
  font-size: clamp(28px, 3vw, 46px);
}
/* Act 4 (ACT4-A): the loop with me in it, then without: a stack of two drawings, no card */
.scene-spine.layout-nexus .object-stack {
  background: none;
  border: 0;
  aspect-ratio: 3 / 2;
}
.scene-spine.layout-nexus .object-stack img.layer {
  object-fit: contain;
}
.scene-spine.layout-nexus .beat {
  color: var(--hb-mint);
  font-weight: 700;
}
/* the dive objects: real captures fill their frame */
.scene-map .map-object .object.cover img {
  width: 100%;
  object-fit: cover;
}
.scene-map .map-object .object.contain img {
  object-fit: contain;
  background: #141416;
}
/* Act 6 (ACT6-A): three tall panels, every image filling its frame; a render says so */
.scene-spine.layout-next .two {
  grid-template-columns: 1fr;
  gap: clamp(12px, 1.8vh, 24px);
}
.scene-spine.layout-next .statement {
  font-size: clamp(34px, 3.8vw, 60px);
  max-width: none;
}
.scene-spine.layout-next .beat {
  font-size: clamp(15px, 1.25vw, 21px);
}
.scene-spine.layout-next .object-group.pods {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
.scene-spine.layout-next .object-group.pods > .object {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
  height: 44vh;
  background: none;
  border: 0;
}
.scene-spine.layout-next .object-group.pods > .object img {
  height: 100%;
  min-height: 0;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--hb-line-strong);
  background: #141416;
}
.scene-spine.layout-next .object-group.pods > .object .credit {
  font: 500 clamp(13px, 1.1vw, 18px) / 1.4 var(--hb-font);
  color: var(--hb-text-secondary);
}
.scene-spine.layout-next .object-group.pods > .object-group.kic {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--hb-line-strong);
}
.scene-spine.layout-next .object-group.pods > .object-group.kic > .object {
  border: 0;
  border-radius: 0;
  background: #141416;
  height: 100%;
}
.scene-spine.layout-next .object-group.pods > .object-group.kic > .object img {
  border: 0;
  border-radius: 0;
  height: 100%;
}
.scene-spine.layout-next .object-group.pods > .object-group.labs {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  align-content: center;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--hb-line-strong);
  background: rgba(22, 22, 24, 0.8);
  gap: 10px;
}
.scene-spine.layout-next .object-group.pods > .object-group.labs > .object {
  height: auto;
  padding: 10px 6px;
  border-radius: 12px;
  border: 1px dashed rgba(167, 139, 250, 0.5);
  gap: 6px;
}
.scene-spine.layout-next .object-group.pods > .object-group.labs > .object img {
  border: 0;
  background: none;
  height: auto;
}
.scene-spine.layout-next .object-group.pods > .object-group.labs > .credit {
  grid-column: 1 / -1;
}
.scene-spine.layout-next
  .object-group.pods
  > .object-group.labs
  > .object
  .credit {
  font: 600 10px/1 var(--hb-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hb-text-secondary);
  text-align: center;
}
/* the open-source call-out heads the bottom half: the README, the links page, and the scan code */
@keyframes readme-scroll {
  0%,
  15% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(calc(-100% + 40vh));
  }
}
.scene .object .tag.readme,
.scene .object .tag.links {
  color: var(--hb-mint);
  left: 12px;
  right: auto;
}
/* the picked layouts are projector layouts: on the phone's reading page every scene is the plain
   spine again (R-21), the close-up clip shows whole, and the panels stack */
@media (max-width: 760px) {
  html:not(.is-stage) .scene-spine[class*="layout-"] .two {
    grid-template-columns: 1fr;
  }
  html:not(.is-stage) .scene-spine.layout-here .object-group.duo {
    display: grid;
  }
  html:not(.is-stage)
    .scene-spine.layout-here
    .object-group.duo
    > .object-video {
    transform: none;
  }
  /* the reading page stacks the duo: the Pi photo under the words, the clip under it (the stage's
     grid placement collapsed the photo's column to nothing at phone width, 2026-10-19) */
  html:not(.is-stage)
    .scene-spine.layout-here
    .object-group.duo
    > .object-image,
  html:not(.is-stage)
    .scene-spine.layout-here
    .object-group.duo
    > .object-video {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    align-self: start;
  }
  html:not(.is-stage)
    .scene-spine.layout-here
    .object-group.duo
    > .object-image {
    width: min(100%, 240px);
  }
  /* the reading page's station object spans the column; the strip is two by two instead of a
     column of four that spilled over the next station (Matt's phone review, 2026-10-19) */
  html:not(.is-stage) .scene-rail.layout-objects-first .station .object {
    width: 100%;
    max-height: none;
  }
  html:not(.is-stage) .scene-rail .station .object-group.strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-height: none;
    align-items: start;
  }
  html:not(.is-stage)
    .scene-rail
    .station
    .object-group.strip
    > .object-image
    img {
    height: 38vw;
  }
  html:not(.is-stage) .scene-rail.layout-objects-first .station {
    flex-basis: 100%;
  }
  html:not(.is-stage) .scene-spine.layout-about .object-stack,
  html:not(.is-stage) .scene-spine.layout-about[data-build="2"] .object-stack {
    width: min(100%, 320px);
    justify-self: start;
    transform: none;
    /* the phone shows no show photo to fade into: the card stays */
    opacity: 1;
  }
  html:not(.is-stage) .scene-spine.layout-next .object-group.pods > .object {
    height: auto;
  }
  /* an answer page's table wraps its cells (the proof-table rule keeps numbers on one line) */
  html:not(.is-stage) .scene-answer .object-table td:not(:first-child) {
    white-space: normal;
  }
}
/* a short projector (1280x720): Act 5 keeps its statement, machine, and timeline on one screen */
@media (max-height: 820px) {
  .scene-spine.layout-next .object-group.pods > .object {
    height: 38vh;
  }
  .scene-spine.layout-about .quote .lyric {
    font-size: clamp(18px, 2vw, 28px);
  }
  .scene-spine.layout-about .quote {
    margin-top: 12px;
  }
  .scene-spine.layout-about .marks {
    margin-top: 12px;
    padding-top: 10px;
  }
  .scene-spine.layout-about .statement {
    font-size: clamp(30px, 3.6vw, 52px);
  }
}
/* Act 4 (ACT4P-A): the fixed layout above the three sourced counts, in the map's object column */
.scene-map .map-object .object-group.proof {
  grid-template-columns: 1fr;
  gap: 10px;
}
.scene-map .map-object .object-group.proof > .object-image img {
  max-height: 26vh;
  object-fit: contain;
  background: #141416;
}
.scene-map .map-object .object-group.proof > .object-table {
  padding: 8px 12px 4px;
}
.scene-map .map-object .object-group.proof > .object-table table {
  font-size: clamp(13px, 1.1vw, 18px);
}
/* a short projector (1280x720): the objects-first stations keep the pipeline on screen */
@media (max-height: 820px) {
  .scene-rail.layout-objects-first {
    padding-top: 10vh;
    padding-bottom: 7vh;
  }
  .scene-rail.layout-objects-first .head .statement.compact {
    font-size: 34px; /* the verifier's floor for a statement */
    max-width: none; /* one line, so the station and the pipeline keep their room */
  }
  .scene-rail.layout-objects-first .head {
    margin-bottom: 10px;
  }
  .scene-rail.layout-objects-first .station .object {
    max-height: 20vh;
  }
  .scene-rail.layout-objects-first .station .object img,
  .scene-rail.layout-objects-first .station .object.photo img,
  .scene-rail.layout-objects-first .station .object .pi-cut,
  .scene-rail.layout-objects-first .station .object-group.mesh10 svg {
    max-height: 20vh;
  }
  .scene-rail.layout-objects-first
    .station
    .object-group.strip
    > .object-image
    img {
    height: 17vh;
  }
  .scene-rail.layout-objects-first .station .panel-text h3 {
    font-size: clamp(17px, 1.6vw, 24px);
  }
  .scene-rail.layout-objects-first .station .beat {
    font-size: clamp(12px, 1vw, 15px);
    margin-top: 4px;
  }
  .scene-rail.layout-objects-first .pipeline .cell {
    padding: 8px 10px;
  }
}
/* Act 4's map: eyes and hands as the real captures (Matt, 2026-10-19), the camera's view across the
   top, the scope and the profiler under it */
.scene-map .map-object .object-group.eyes {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.scene-map .map-object .object-group.eyes > .object.wide {
  grid-column: 1 / -1;
}
.scene-map .map-object .object-group.eyes > .object img {
  height: 15vh;
  max-height: none;
  object-fit: cover;
  border-radius: 10px;
}
.scene-map .map-object .object-group.eyes > .object.wide img {
  height: 24vh;
}
.scene-map .map-object .object-group.eyes > .credit {
  grid-column: 1 / -1;
  margin: 2px 0 0;
}
/* ═══ Round 5 (Matt, 2026-10-19) ═══ */
/* the title's table of contents: "Act N" before each act, none before Questions */
.scene-spine.layout-title .beat::before {
  content: "Act " counter(agenda);
  min-width: 4.2em;
  text-transform: uppercase;
}
.scene-spine.layout-title .beat:last-of-type::before {
  content: "";
}
/* About me: the opening mark sits below the kicker, and the lyric closes with a mark too */
.scene-spine.layout-about .quote .kicker {
  margin-bottom: clamp(18px, 2.4vh, 30px);
}
.scene-spine.layout-about .lyric::before {
  top: -0.1em;
}
.scene-spine.layout-about .lyric::after {
  content: "\201D";
  font: 800 1.6em/0 var(--hb-font);
  color: var(--hb-mint);
  margin-left: 0.08em;
  vertical-align: -0.42em;
}
/* Act 3: station 1 holds the Pi and Brad's book; the Ideas station's subtitle; bigger early shots */
.scene-rail .station .object-group.brad {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(18px, 2vw, 36px);
  max-height: none;
}
.scene-rail .station .object-group.brad > .object.book {
  background: none;
  border: 0;
  flex: none;
}
.scene-rail .station .object-group.brad > .object.book img {
  height: 20vh;
  width: auto;
  border-radius: 6px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}
.scene-rail .station .object-group.brad .credit {
  text-align: center;
}
.scene-rail.layout-objects-first [data-station="the-tool"] .object {
  width: min(100%, 60vw);
  max-height: none;
}
.scene-rail.layout-objects-first
  [data-station="the-tool"]
  .object-group.strip
  > .object-image
  img {
  height: 36vh;
}
/* Act 5, 7.0 and 7.1: the loop at the right, the issue-workflow row along the bottom, Test and
   Feedback outlined in red on their own a moment after the slide lands */
.scene-spine.layout-nexus .object-group.nexus2 {
  display: contents;
}
/* Act 5's bench panel: the camera's view across the top, three captures under it */
.scene-map .map-object .object-group.eyes {
  grid-template-columns: repeat(3, 1fr);
}
.scene-map .map-object .object-group.eyes > .object img {
  height: 13vh;
}
.scene-map .map-object .object-group.eyes > .object.kicad img {
  object-fit: contain;
  background: #232325;
}
/* Act 6: a purple heading over each preview, the pod renders unboxed, the PCB cluster, the labs */
.scene-spine.layout-next .object-group.pods > .object-group > .tag {
  position: static;
  order: -1;
  grid-column: 1 / -1;
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  font: 800 clamp(18px, 1.6vw, 28px) / 1.1 var(--hb-font);
  letter-spacing: -0.01em;
  text-transform: none;
  color: #9b6dff;
}
.scene-spine.layout-next .object-group.pods > .object-group {
  height: 50vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  border: 0;
  background: none;
  overflow: visible;
}
.scene-spine.layout-next .object-group.pods > .object-group > .credit {
  grid-column: 1 / -1;
  max-width: none;
  text-align: left;
}
.scene-spine.layout-next .object-group.pod {
  grid-template-columns: 1fr;
}
.scene-spine.layout-next .object-group.pod > .object {
  grid-column: 1;
  grid-row: 2;
  background: none;
  border: 0;
  overflow: visible;
}
.scene-spine.layout-next .object-group.pod > .object img {
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
  border: 0;
  background: none;
  border-radius: 14px;
}
.scene-spine.layout-next .object-group.pod > .object.bank {
  justify-self: end;
  align-self: start;
  height: 74%;
  opacity: 0.92;
}
.scene-spine.layout-next .object-group.pod > .object.hero {
  justify-self: start;
  align-self: end;
  height: 82%;
  z-index: 1;
  filter: drop-shadow(0 24px 50px rgba(0, 0, 0, 0.7));
}
.scene-spine.layout-next .object-group.pod > .object .tag {
  font-size: 9px;
}
.scene-spine.layout-next .object-group.kic {
  grid-template-columns: 1fr;
  border: 0;
  overflow: visible;
}
.scene-spine.layout-next .object-group.kic > .object {
  grid-column: 1;
  grid-row: 2;
  background: none;
  border: 0;
  overflow: visible;
}
.scene-spine.layout-next .object-group.kic > .object img {
  border: 0;
  background: none;
  border-radius: 0;
  height: auto;
  object-fit: contain;
}
.scene-spine.layout-next .object-group.kic > .object.sch {
  justify-self: start;
  align-self: start;
  width: 46%;
}
.scene-spine.layout-next .object-group.kic > .object.sch img {
  border-radius: 6px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
}
.scene-spine.layout-next .object-group.kic > .object.layout {
  justify-self: end;
  align-self: start;
  width: 62%;
  margin-top: 10%;
  z-index: 1;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.6));
}
.scene-spine.layout-next .object-group.kic > .object.iso {
  justify-self: center;
  align-self: end;
  width: 74%;
  z-index: 2;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.7));
}
.scene-spine.layout-next .object-group.labs {
  grid-template-columns: 1fr;
  padding: 0;
  border: 0;
  background: none;
}
.scene-spine.layout-next .object-group.labs > .object {
  grid-row: 2;
  border: 0;
  padding: 0;
  background: none;
}
.scene-spine.layout-next .object-group.labs > .object img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}
/* round 5 fixes: the Pi beside the book, the wordmark title on one line, the rail title on one line */
.scene-rail .station .object-group.brad > .object.photo {
  flex: 0 1 auto;
  width: auto;
  background: none;
  border: 0;
}
.scene-rail .station .object-group.brad > .object.photo img {
  height: 22vh;
  max-height: none;
  width: auto;
}
.scene-rail .head .statement {
  max-width: none;
}
/* Act 6, rebuilt: each panel is a fixed frame; its heading on top, its caption at the foot, and
   its pictures placed inside, unboxed */
.scene-spine.layout-next .object-group.pods > .object-group.pod,
.scene-spine.layout-next .object-group.pods > .object-group.kic,
.scene-spine.layout-next .object-group.pods > .object-group.labs {
  position: relative;
  display: block;
  height: 52vh;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
}
.scene-spine.layout-next .object-group.pods > .object-group > .tag {
  position: absolute;
  left: 0;
  top: 0;
}
.scene-spine.layout-next .object-group.pods > .object-group > .credit {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
}
.scene-spine.layout-next .object-group.pods > .object-group > .object {
  position: absolute;
  margin: 0;
  padding: 0;
  height: auto;
  border: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
  display: block;
}
.scene-spine.layout-next .object-group.pods > .object-group > .object img {
  display: block;
  max-height: none;
  border: 0;
  background: none;
}
.scene-spine.layout-next .object-group.pod > .object.hero {
  left: 0;
  top: 13%;
  bottom: 17%;
}
.scene-spine.layout-next .object-group.pod > .object.bank {
  right: 0;
  top: 7%;
  height: 52%;
  opacity: 1;
}
.scene-spine.layout-next .object-group.pod > .object.hero img,
.scene-spine.layout-next .object-group.pod > .object.bank img {
  height: 100%;
  width: auto;
  border-radius: 14px;
}
.scene-spine.layout-next .object-group.kic > .object.sch {
  left: 0;
  top: 9%;
  width: 52%;
}
.scene-spine.layout-next .object-group.kic > .object.layout {
  right: 0;
  top: 30%;
  width: 70%;
  margin: 0;
}
.scene-spine.layout-next .object-group.kic > .object.iso {
  left: 8%;
  bottom: 17%;
  width: 78%;
}
.scene-spine.layout-next .object-group.kic > .object img {
  width: 100%;
  height: auto;
}
.scene-spine.layout-next .object-group.labs > .object {
  left: 0;
  right: 0;
  top: 9%;
  bottom: 17%;
}
.scene-spine.layout-next .object-group.labs > .object img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* round 5 fixes, measured: the title's sentence stays inline so the wordmark follows it; the Brad
   station's two figures get explicit widths (nested figures inherited the station's 44vw); Act 6's
   pictures size by width (a percentage height inside an inset box resolved to the image's own size) */
.scene-rail .station .object-group.brad > .object.photo.photo {
  width: 22vw;
}
.scene-rail .station .object-group.brad > .object.photo.photo img {
  width: 100%;
  height: auto;
  max-height: 24vh;
  object-fit: contain;
}
.scene-rail .station .object-group.brad > .object.book.book {
  width: auto;
}
.scene-spine.layout-next
  .object-group.pods
  > .object-group
  > .object.object
  img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}
.scene-spine.layout-next .object-group.pod > .object.hero.hero {
  top: auto;
  bottom: 17%;
  width: 66%;
}
.scene-spine.layout-next .object-group.pod > .object.bank.bank {
  top: 9%;
  height: auto;
  width: 50%;
}
.scene-spine.layout-next .object-group.kic > .object.sch.sch img {
  border-radius: 6px;
}
.scene-spine.layout-next .object-group.labs > .object.object {
  left: 0;
  right: 0;
  top: 9%;
  bottom: auto;
}
.scene-spine.layout-next .object-group.pods > .object-group > .object.object {
  height: auto;
  background: none;
  box-shadow: none;
}
.scene-spine.layout-next .object-group.kic > .object.iso.iso {
  top: auto;
  bottom: 17%;
}
/* ═══ Round 6 (Matt's picks, 2026-10-19) ═══ */
/* the section's name is the slide's title line, under the path */
.scene .eyebrow-xl {
  font: 800 clamp(17px, 1.55vw, 28px) / 1.15 var(--hb-font);
  letter-spacing: -0.01em;
  text-transform: none;
}
/* ABOUT-C: the show photo as a Polaroid print on the right; the lyric not bold; its credit under it */
.scene-spine.layout-about .quote .lyric {
  font-weight: 400;
}
.scene-spine.layout-about .bleed {
  inset: auto;
  right: 5vw;
  top: 14vh;
  padding: 1.4vh 1.4vh 8vh;
  background: #f4f4f0;
  transform: rotate(2deg);
  transform-origin: 50% 50%;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 900ms var(--ease);
}
.scene-spine.layout-about .bleed.on {
  opacity: 1;
  transform: rotate(2deg);
}
.scene-spine.layout-about .bleed::after {
  display: none;
}
.scene-spine.layout-about .bleed img {
  display: block;
  height: 62vh;
  width: auto;
  object-fit: contain;
}
/* the 2005 card lands on the face in the print: measured from the print's geometry (62vh tall at
   5vw from the right, 14vh from the top, a 1.4vh border, turned 2 degrees) and the 2005 crop's face */
.scene-spine.layout-about[data-build="2"] .object-stack {
  transform: translate(4.99vw, -7.19vh) rotate(-13deg) scale(0.1772);
}
/* LOOP-D: callouts beside the loop; the waiting one goes when the loop closes */
.scene-spine.layout-nexus .object-group.loopbox {
  position: relative;
  display: block;
}
.scene-spine.layout-nexus .object-group.loopbox > .object.waits,
.scene-spine.layout-nexus .object-group.loopbox > .object.outside {
  position: absolute;
  background: none;
  border: 0;
  z-index: 3;
  transition: opacity 700ms var(--ease);
}
.scene-spine.layout-nexus .object-group.loopbox > .object.waits {
  left: 2%;
  bottom: -2%;
  width: 46%;
}
.scene-spine.layout-nexus .object-group.loopbox > .object.outside {
  right: 0;
  top: -9%;
  width: 66%;
}
.scene-spine.layout-nexus[data-build="2"]
  .object-group.loopbox
  > .object.waits {
  opacity: 0;
}
.scene-spine.layout-nexus .object-group.loopbox > .object.outside:not(.on) {
  opacity: 0;
}
.scene-spine.layout-nexus .object-group.loopbox > .object img {
  max-height: none;
  border-radius: 0;
}
/* THANKS-B, as Matt marked it up */
@keyframes readme-scroll-dark {
  0%,
  12% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(calc(-100% + 66vh));
  }
}
@media (max-width: 760px) {
  html:not(.is-stage) .scene-spine.layout-about .bleed {
    display: none;
  }
}
/* the ladder's title on one line: its three sentences run inline */
.scene-rail .head .statement .sentence {
  display: inline;
}
.scene-rail .head .statement .sentence + .sentence::before {
  content: " ";
}
.scene-spine.layout-nexus .object-group.loopbox > .object.waits {
  width: 50%;
}
.scene-spine.layout-nexus .object-group.loopbox > .object.outside {
  width: 78%;
}
/* the path on a short projector: tighter, and clear of the wordmark */
@media (max-height: 820px) {
  .scene .eyebrow-xl {
    font-size: 15px;
    margin-bottom: 8px;
  }
}
/* the thank-you slide fits: a tighter question list and who bubble */
@keyframes readme-scroll-dark {
  0%,
  12% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(calc(-100% + 60vh));
  }
}
/* the phone reading page: the Thank You slide in one column, and Act 6's panels in normal flow */
@media (max-width: 760px) {
  html:not(.is-stage)
    .scene-spine.layout-next
    .object-group.pods
    > .object-group.pod,
  html:not(.is-stage)
    .scene-spine.layout-next
    .object-group.pods
    > .object-group.kic,
  html:not(.is-stage)
    .scene-spine.layout-next
    .object-group.pods
    > .object-group.labs {
    display: grid;
    height: auto;
    gap: 10px;
  }
  html:not(.is-stage)
    .scene-spine.layout-next
    .object-group.pods
    > .object-group
    > .tag,
  html:not(.is-stage)
    .scene-spine.layout-next
    .object-group.pods
    > .object-group
    > .credit,
  html:not(.is-stage)
    .scene-spine.layout-next
    .object-group.pods
    > .object-group
    > .object.object {
    position: static;
    width: 100%;
    margin: 0;
  }
}
@media (max-width: 760px) {
  html:not(.is-stage)
    .scene-spine.layout-nexus
    .object-group.loopbox
    > .object.waits,
  html:not(.is-stage)
    .scene-spine.layout-nexus
    .object-group.loopbox
    > .object.outside {
    transition: none;
  }
}
/* ═══ Round 7 (Matt's 2026-10-19 list; the picks default to A until he chooses) ═══ */
/* the agenda lines: larger, further from the subtitle */
.scene-spine.layout-title .beat {
  font-size: clamp(19px, 1.85vw, 31px);
  margin-top: clamp(10px, 1.2vh, 16px);
}
.scene-spine.layout-title .beat:first-of-type {
  margin-top: clamp(30px, 4.2vh, 58px);
}
.scene-spine.layout-title .beat::before {
  font-size: 0.6em;
}
/* 1.0: "Senior Electrical Engineer at" followed by the wordmark as it draws itself */
.scene-spine.layout-about .beat:first-of-type::after {
  content: "";
  display: inline-block;
  width: 6.4em;
  height: 1.07em;
  margin-left: 0.4em;
  vertical-align: -0.12em;
  background: url("assets/act7/spd-wordmark.svg") left center / contain
    no-repeat;
}
/* 1.1: both marks the same size and mint; the lyric and its attribution in a rounded card */
.scene-spine.layout-about .lyric {
  padding-left: 0;
}
.scene-spine.layout-about .lyric::before {
  position: static;
  font: 800 1.6em/0 var(--hb-font);
  vertical-align: -0.42em;
  margin-right: 0.08em;
  opacity: 1;
}
.scene-spine.layout-about .lyric-card {
  border: 1px solid var(--hb-line-strong);
  border-radius: 18px;
  background: rgba(35, 35, 37, 0.92);
  padding: clamp(14px, 1.6vw, 24px) clamp(16px, 1.8vw, 28px)
    clamp(12px, 1.3vw, 20px);
  max-width: 30em;
}
.scene-spine.layout-about .lyric-credit {
  margin: 10px 0 0;
  text-align: right;
}
/* the automatic sequence: build 1 the 2006 face large; build 2 the print and the landing; build 3 the fade */
.scene-spine.layout-about[data-build="1"] .object-stack {
  transform: scale(1.22);
  transform-origin: 50% 50%;
}
.scene-spine.layout-about[data-build="2"] .object-stack {
  opacity: 1;
  transition:
    transform 1600ms var(--ease),
    box-shadow 1600ms var(--ease);
}
.scene-spine.layout-about[data-build="3"] .object-stack {
  transform: translate(4.99vw, -7.19vh) rotate(-13deg) scale(0.1772);
  transform-origin: 50% 50%;
  opacity: 0;
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.9),
    0 30px 80px rgba(0, 0, 0, 0.6);
  transition: opacity 1300ms var(--ease);
}
/* 5.x: FRICTION outlined red, FIX filled mint; the station pictures; the coda at the last station's right */
.scene-rail .beat.with-label {
  margin-top: 8px;
}
.scene-rail .beat[data-label="FRICTION"] .beat-label {
  color: #f87171;
  border-color: #f87171;
}
.scene-rail .beat[data-label="FIX"] .beat-label {
  color: #0f1f1a;
  background: var(--hb-mint);
  border-color: var(--hb-mint);
}
.scene-rail .beat.with-label .beat-label + *,
.scene-rail .beat.with-label {
  color: var(--hb-text);
}
.scene-rail.layout-objects-first .station .object-group.trio,
.scene-rail.layout-objects-first .station .object-group.upgrade {
  width: min(100%, 72vw);
  max-height: none;
  grid-template-columns: auto auto auto;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.4vw, 44px);
  background: none;
  border: 0;
}
.scene-rail.layout-objects-first .station .object-group.upgrade {
  grid-template-columns: auto auto auto auto;
}
.scene-rail .station .object-group.trio > .object,
.scene-rail .station .object-group.upgrade > .object {
  background: none;
  border: 0;
  width: auto;
  max-height: none;
}
.scene-rail .station .object-group.trio > .object img,
.scene-rail .station .object-group.upgrade > .object img {
  max-height: 26vh;
  width: auto;
  margin: 0 auto;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.6));
}
.scene-rail .station .object-group.trio > .object.term img {
  border-radius: 10px;
  border: 1px solid var(--hb-line-strong);
  filter: none;
}
.scene-rail .station .object-group.upgrade > .object.arrow img {
  width: 5vw;
  filter: none;
}
.scene-rail .station .object-group.upgrade > .object.psu img {
  max-height: 21vh;
}
.scene-rail .station .object-group.trio > .object .credit,
.scene-rail .station .object-group.upgrade > .object .credit {
  text-align: center;
}
.scene-rail .station .object.meloop {
  width: min(100%, 44vw);
}
.scene-rail .station[data-station="cloud"] .panel-text {
  position: relative;
  padding-right: 36%;
}
.scene-rail .coda {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 32%;
  margin: 0;
  font: 800 clamp(18px, 1.7vw, 30px) / 1.2 var(--hb-font);
  color: var(--hb-mint);
  text-align: right;
}
/* 9.0: the bench panel: the camera strip across the top, three captures, the drain curve beside the render */
.scene-map .map-object .object-group.eyes2 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}
.scene-map .map-object .object-group.eyes2 > .object {
  background: none;
  border: 0;
}
.scene-map .map-object .object-group.eyes2 > .object img {
  width: 100%;
  height: 12vh;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--hb-line-strong);
}
.scene-map .map-object .object-group.eyes2 > .object.strip {
  grid-column: 1 / -1;
}
.scene-map .map-object .object-group.eyes2 > .object.strip img {
  height: 15vh;
}
.scene-map .map-object .object-group.eyes2 > .object.kicad img {
  object-fit: contain;
  background: #232325;
}
.scene-map .map-object .object-group.eyes2 > .object.battery {
  grid-column: 1 / 3;
}
.scene-map .map-object .object-group.eyes2 > .object.battery img {
  height: 21vh;
  object-fit: contain;
  background: #161618;
}
.scene-map .map-object .object-group.eyes2 > .object.iso img {
  height: 21vh;
}
.scene-map .map-object .object-group.batsetup {
  grid-template-columns: 1fr;
  gap: 10px;
}
.scene-map .map-object .object-group.batsetup > .object.strip img {
  width: 100%;
  height: 24vh;
  object-fit: cover;
}
.scene-map .map-object .object-group.proof > .object-svg img {
  width: 100%;
  object-fit: contain;
  background: #161618;
}
/* 10.2: Act 6 in four: the PCB pipeline, other labs, the pod, the roadmap; the title at its standard height */
.scene-spine.layout-next .two {
  align-content: start;
}
.scene-spine.layout-next {
  align-content: start;
  padding-top: calc(14vh + clamp(8px, 1.4vh, 16px));
}
.scene-spine.layout-next .object-group.pods {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.scene-spine.layout-next .object-group.pods > .object-group.road {
  position: relative;
  display: block;
  height: 52vh;
  padding: 0;
  border: 0;
  background: none;
}
.scene-spine.layout-next
  .object-group.pods
  > .object-group.road
  > .object-table {
  position: absolute;
  left: 0;
  right: 0;
  top: 13%;
  bottom: 17%;
  margin: 0;
  padding: clamp(10px, 1.2vw, 18px);
  border: 1px solid var(--hb-line-strong);
  border-radius: 14px;
  background: #141416;
  overflow: hidden;
}
.scene-spine.layout-next .object-group.road table {
  border-collapse: collapse;
  width: 100%;
}
.scene-spine.layout-next .object-group.road th {
  text-align: left;
  font: 700 clamp(10px, 0.8vw, 13px) / 1 var(--hb-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hb-mint);
  padding: 0 0 10px;
  border: 0;
}
.scene-spine.layout-next .object-group.road td {
  font: 700 clamp(13px, 1.1vw, 19px) / 1.25 var(--hb-font);
  color: var(--hb-text);
  padding: clamp(4px, 0.7vh, 8px) 0;
  border: 0;
  vertical-align: top;
}
.scene-spine.layout-next .object-group.road td:first-child {
  width: 1.2em;
  color: var(--hb-mint);
  font-size: clamp(15px, 1.3vw, 22px);
  line-height: 1;
  padding-right: 8px;
}
.scene-spine.layout-next .object-group.road tr:last-child td {
  color: var(--hb-text-secondary);
  font-weight: 500;
}
/* the wall pods stand in front, the tall rack behind at the right; the badges at the renders' feet */
.scene-spine.layout-next .object-group.pod > .object.hero {
  left: auto;
  right: 0;
  top: 13%;
  bottom: 22%;
  z-index: 1;
  opacity: 0.92;
}
.scene-spine.layout-next .object-group.pod > .object.bank {
  left: 0;
  right: auto;
  top: auto;
  bottom: 17%;
  height: 48%;
  z-index: 2;
  filter: drop-shadow(0 24px 50px rgba(0, 0, 0, 0.75));
}
.scene-spine.layout-next .object-group.pod > .object .tag {
  top: auto;
  left: auto;
  right: 8px;
  bottom: 8px;
  font-size: 9px;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid #636366;
  color: var(--hb-text);
}
/* 11.0: Thank you in three columns: the identity block beside the title, the pictures under; the scan code
   and the phone in the middle; the FAQs at the right */
@media (max-width: 760px) {
  html:not(.is-stage)
    .scene-spine.layout-next
    .object-group.pods
    > .object-group.road,
  html:not(.is-stage)
    .scene-spine.layout-next
    .object-group.pods
    > .object-group.road
    > .object-table {
    position: static;
    height: auto;
  }
  html:not(.is-stage) .scene-rail .station[data-station="cloud"] .panel-text {
    padding-right: 0;
  }
  html:not(.is-stage) .scene-rail .coda {
    position: static;
    width: auto;
    text-align: left;
    margin-top: 12px;
  }
  html:not(.is-stage) .scene-spine.layout-about .object-stack,
  html:not(.is-stage) .scene-spine.layout-about[data-build="3"] .object-stack {
    transform: none;
    opacity: 1;
  }
}
.scene-map .map-object .object-group.eyes2 > .object.iso img {
  object-fit: contain;
  background: #232325;
}
/* round 7 fixes, measured: the eyebrow is the text block's first p, so the wordmark follows the
   second; the definition is the beat that arrives at build 1; the lyric card takes the column */
.scene-spine.layout-about .beat:first-of-type::after {
  content: none;
}
.scene-spine.layout-about .text > p.beat:nth-of-type(2)::after {
  content: "";
  display: inline-block;
  width: 6.4em;
  height: 1.07em;
  margin-left: 0.4em;
  vertical-align: -0.12em;
  background: url("assets/act7/spd-wordmark.svg") left center / contain
    no-repeat;
}
.scene-spine.layout-about .lyric-card {
  max-width: 44vw;
}
.scene-spine.layout-about .quote .lyric {
  font-size: clamp(22px, 2.25vw, 40px);
  max-width: none;
}
/* round 7, measured by the verifier: the reasons table takes no room until it arrives; the station
   pictures and lines leave the pipeline on screen; the bench panel fits a short projector */
.scene-rail.layout-objects-first .station .object-group.trio,
.scene-rail.layout-objects-first .station .object-group.upgrade {
  max-height: 27vh;
}
.scene-rail .station .object-group.trio > .object img,
.scene-rail .station .object-group.upgrade > .object img {
  max-height: 21vh;
}
.scene-rail .station .object-group.upgrade > .object.psu img {
  max-height: 18vh;
}
.scene-rail.layout-objects-first .station .beat {
  margin-top: 5px;
  font-size: clamp(13px, 1.1vw, 18px);
}
.scene-rail.layout-objects-first .station .panel-text h3 {
  font-size: clamp(18px, 1.7vw, 28px);
}
@media (max-height: 820px) {
  .scene-map .map-object .object-group.eyes2 {
    gap: 6px;
  }
  .scene-map .map-object .object-group.eyes2 > .object.strip img {
    height: 11vh;
  }
  .scene-map .map-object .object-group.eyes2 > .object img {
    height: 9.5vh;
  }
  .scene-map .map-object .object-group.eyes2 > .object.battery img,
  .scene-map .map-object .object-group.eyes2 > .object.iso img {
    height: 15vh;
  }
  .scene-map .map-object .object-group.eyes2 > .credit {
    font-size: clamp(10px, 0.85vw, 13px);
  }
}
@media (max-height: 820px) {
  .scene-rail.layout-objects-first .station .object,
  .scene-rail.layout-objects-first .station .object-group.trio,
  .scene-rail.layout-objects-first .station .object-group.upgrade {
    max-height: 23vh;
  }
  .scene-rail.layout-objects-first .station .object img,
  .scene-rail .station .object-group.trio > .object img,
  .scene-rail .station .object-group.upgrade > .object img {
    max-height: 19vh;
  }
  .scene-rail.layout-objects-first .station .beat {
    margin-top: 3px;
    font-size: clamp(12px, 1vw, 16px);
  }
  .scene-rail.layout-objects-first .station .panel-text h3 {
    font-size: clamp(16px, 1.5vw, 24px);
    margin-bottom: 4px;
  }
  .scene-rail .coda {
    font-size: clamp(15px, 1.4vw, 24px);
  }
}
/* round 7 at 1280x720: the roadmap's lines wrap; the identity block stays clear of Thank you */
.scene-spine.layout-next .object-group.road td {
  white-space: normal;
}
/* round 7 at 1280x720: the rail's title line sits under the path, not on it; the station gives
   the room back below */
@media (max-height: 820px) {
  .scene-rail.layout-objects-first {
    padding-top: 12.5vh;
    padding-bottom: 5vh;
  }
  .scene-rail.layout-objects-first .head {
    margin-bottom: 6px;
  }
  .scene-rail.layout-objects-first .station .object,
  .scene-rail.layout-objects-first .station .object-group.trio,
  .scene-rail.layout-objects-first .station .object-group.upgrade {
    max-height: 22vh;
  }
  .scene-rail.layout-objects-first .station .object img,
  .scene-rail .station .object-group.trio > .object img,
  .scene-rail .station .object-group.upgrade > .object img {
    max-height: 18vh;
  }
}
/* round 7 at 1280x720, measured: Thank you clears the identity block; the pods clear their caption;
   the scan code's address stays above the phone */
@media (max-height: 820px) {
  .scene-spine.layout-next .object-group.pod > .object.bank {
    bottom: 25%;
    height: 42%;
  }
  .scene-spine.layout-next .object-group.pod > .object.hero {
    bottom: 27%;
  }
}
/* ═══ Round 7, Matt's picks (2026-10-20) ═══ */
/* ST3-B: a red badge under the bare Pi, a mint badge under the pair that fixed it */
.scene-rail .station .object-group.upgrade > .object.before .credit,
.scene-rail .station .object-group.upgrade > .object-group.after > .credit {
  display: inline-block;
  justify-self: center;
  margin-top: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  font: 800 clamp(9px, 0.72vw, 12px) / 1 var(--hb-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.scene-rail .station .object-group.upgrade > .object.before .credit {
  color: #f87171;
  border: 1px solid #f87171;
}
.scene-rail .station .object-group.upgrade > .object-group.after {
  grid-template-columns: auto auto;
  align-items: center;
  justify-items: center;
  gap: 0 clamp(10px, 1.2vw, 20px);
  background: none;
  border: 0;
  max-height: none;
}
.scene-rail .station .object-group.upgrade > .object-group.after > .credit {
  grid-column: 1 / -1;
  color: #0f1f1a;
  background: var(--hb-mint);
}
.scene-rail .station .object-group.upgrade > .object-group.after > .object {
  background: none;
  border: 0;
  width: auto;
  max-height: none;
}
.scene-rail .station .object-group.upgrade > .object-group.after > .object img {
  max-height: 19vh;
  width: auto;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.6));
}
.scene-rail
  .station
  .object-group.upgrade
  > .object-group.after
  > .object.psu
  img {
  max-height: 16vh;
}
.scene-rail .station .object-group.upgrade > .object.arrow img {
  filter: none;
}
/* EMOJI-A as amended: the number on the same line as the mark and the word; a lower cell */
.scene-rail .pipeline .cell {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 8px;
  row-gap: 5px;
  align-items: center;
  padding: 7px 10px;
}
.scene-rail .pipeline .cell .n {
  grid-column: 1;
  grid-row: 1;
}
.scene-rail .pipeline .cell .s {
  grid-column: 2;
  grid-row: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scene-rail .pipeline .cell .chip {
  grid-column: 1 / -1;
  grid-row: 2;
}
/* DIVE 3: the two layouts side by side with the table under */
.scene-map .map-object .object-group.pair3 {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.scene-map .map-object .object-group.pair3 > .object-image {
  position: relative;
}
.scene-map .map-object .object-group.pair3 > .object-image img {
  width: 100%;
  height: 30vh;
  object-fit: contain;
  background: #141416;
}
.scene-map .map-object .object-group.pair3 > .object-image .tag {
  left: 10px;
  right: auto;
  top: 10px;
}
.scene-map .map-object .object-group.pair3 > .object-image.bad .tag {
  color: #f87171;
  border-color: #f87171;
  background: rgba(28, 10, 10, 0.85);
}
.scene-map .map-object .object-group.pair3 > .object-image.good .tag {
  color: #0f1f1a;
  background: var(--hb-mint);
  border-color: var(--hb-mint);
}
.scene-map .map-object .object-group.pair3 > .object-table {
  grid-column: 1 / -1;
}
/* DIVE 6: the pack and the load, side by side */
.scene-map .map-object .object-group.batpair {
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: clamp(12px, 1.5vw, 28px);
  background: none;
  border: 0;
}
.scene-map .map-object .object-group.batpair > .object {
  background: none;
  border: 0;
}
.scene-map .map-object .object-group.batpair > .object img {
  width: 100%;
  max-height: 40vh;
  object-fit: contain;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.6));
}
.scene-map .map-object .object-group.batpair > .object .credit {
  text-align: center;
}
/* ACT6-B: three picture panels and a narrower roadmap; the wall pods top right in front, the rack
   bottom left behind, whole */
.scene-spine.layout-next .object-group.pods {
  grid-template-columns: 1.15fr 1.15fr 1.15fr 0.9fr;
}
.scene-spine.layout-next .object-group.pod > .object.hero {
  left: 0;
  right: auto;
  top: auto;
  bottom: 17%;
  height: 62%;
  z-index: 1;
  opacity: 1;
  filter: none;
}
.scene-spine.layout-next .object-group.pod > .object.bank {
  left: auto;
  right: 0;
  top: 13%;
  bottom: auto;
  height: 46%;
  z-index: 2;
}
/* THANKS-A as amended: the title and the identity chip share the top row; the scan code and the
   phone in the middle column under it; the FAQs beside them */
@media (max-height: 820px) {
  .scene-spine.layout-next .object-group.pod > .object.bank {
    top: 13%;
    bottom: auto;
    height: 40%;
  }
  .scene-spine.layout-next .object-group.pod > .object.hero {
    bottom: 25%;
    height: 56%;
  }
}
/* a short projector: the rack clears the pod panel's caption */
@media (max-height: 820px) {
  .scene-spine.layout-next .object-group.pod > .object.hero {
    bottom: 33%;
    height: 48%;
  }
  .scene-spine.layout-next .object-group.pod > .object.bank {
    height: 36%;
  }
}
/* the pod panel, at the round-5 rules' own specificity: the wall pods top right in front, the whole
   rack bottom left behind; the roadmap's lines fit a short projector */
.scene-spine.layout-next .object-group.pod > .object.hero.hero {
  left: 0;
  right: auto;
  top: auto;
  bottom: 17%;
  width: 58%;
  height: auto;
  z-index: 1;
}
.scene-spine.layout-next .object-group.pod > .object.bank.bank {
  left: auto;
  right: 0;
  top: 13%;
  bottom: auto;
  width: 48%;
  height: auto;
  z-index: 2;
}
@media (max-height: 820px) {
  .scene-spine.layout-next .object-group.pod > .object.hero.hero {
    bottom: 30%;
    width: 50%;
  }
  .scene-spine.layout-next .object-group.pod > .object.bank.bank {
    width: 44%;
  }
  .scene-spine.layout-next .object-group.road td {
    font-size: clamp(11px, 0.85vw, 13px);
    padding: 2px 0;
  }
  .scene-spine.layout-next .object-group.road td:first-child {
    font-size: 14px;
  }
}
/* the rack clears a four-line caption on the wide projector too */
.scene-spine.layout-next .object-group.pod > .object.hero.hero {
  bottom: 24%;
  width: 54%;
}

/* ═══ Round 8 (Matt, 2026-10-20): each slide below is laid out in one place ═══ */

/* ── The path. The talk's sections as stops under the HUD; a thin grey line joins each pair of stops and
   every dot is opaque, so no line shows through one. Moving forward a section, the stop we leave beats,
   a pulse runs the line toward the next stop and leaves it mint behind it, and the stop we reach ripples
   and takes the glow. Engine v1.6 sets the one-shot classes (leave, run, arrive); every timing is here. */
.progress {
  --dot: 15px;
  --gap: 3px;
  --beat: 440ms;
  --lead: 180ms;
  --run: 720ms;
  --ripple: 950ms;
  --arrive: calc(var(--lead) + var(--steps, 1) * var(--run));
  position: fixed;
  z-index: 19;
  left: var(--pad);
  right: var(--pad);
  top: calc(22px + clamp(22px, 2.2vw, 30px) + clamp(8px, 1.4vh, 16px));
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  pointer-events: none;
  transition: opacity 900ms var(--ease);
}
.progress.none {
  opacity: 0;
  visibility: hidden;
}
.progress .seg {
  position: absolute;
  top: calc(var(--dot) / 2 - 1px);
  left: calc((var(--k) + 0.5) * 100% / var(--n) + var(--dot) / 2 + var(--gap));
  width: calc(100% / var(--n) - var(--dot) - 2 * var(--gap));
  height: 2px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.16);
}
.progress .seg .fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: 1px;
  background: var(--hb-mint);
}
.progress .seg.lit .fill {
  width: 100%;
}
.progress .seg.run .fill {
  transition: width var(--run) cubic-bezier(0.45, 0, 0.25, 1)
    calc(var(--lead) + var(--i, 0) * var(--run));
}
.progress .seg .fill::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  background: #eafff6;
  box-shadow:
    0 0 10px 3px rgba(90, 230, 171, 0.9),
    0 0 24px 8px rgba(90, 230, 171, 0.4);
  opacity: 0;
}
.progress .seg.run .fill::after {
  animation: path-head var(--run) linear
    calc(var(--lead) + var(--i, 0) * var(--run)) both;
}
@keyframes path-head {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.progress .stop {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  pointer-events: auto;
}
.progress .dot {
  position: relative;
  z-index: 1;
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  box-sizing: border-box;
  background: #48484a;
  transition:
    background 300ms var(--ease),
    box-shadow 300ms var(--ease);
}
.progress .past .dot {
  background: #3e8b6c; /* the mint at 55 percent over the stage, opaque */
}
.progress .cur .dot {
  background: var(--hb-mint);
  box-shadow:
    0 0 0 5px rgba(90, 230, 171, 0.18),
    0 0 20px var(--hb-mint);
}
.progress .ring {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 0;
  width: var(--dot);
  height: var(--dot);
  margin-left: calc(var(--dot) / -2);
  border-radius: 50%;
  border: 2px solid var(--hb-mint);
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
}
.progress .name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 600 clamp(11px, 0.78vw, 15px) / 1.1 var(--hb-font);
  color: #8e8e93;
  transition:
    color 300ms var(--ease),
    font-weight 300ms var(--ease);
}
.progress .past .name {
  color: rgba(90, 230, 171, 0.6);
}
.progress .cur .name {
  color: var(--hb-text);
  font-weight: 800;
}
.progress .stop:hover .name {
  color: var(--hb-text);
}
/* r14: no focus box on a path stop, by mouse, keys, or the phone (Matt, 2026-10-21) */
.progress .stop:focus,
.progress .stop:focus-visible,
.progress .stop:focus-visible .dot {
  outline: none;
}
.progress .stop.leave .dot {
  animation: path-beat var(--beat) ease-out both;
}
@keyframes path-beat {
  0% {
    transform: scale(1);
    background: var(--hb-mint);
    box-shadow:
      0 0 0 5px rgba(90, 230, 171, 0.18),
      0 0 20px var(--hb-mint);
  }
  40% {
    transform: scale(1.5);
    background: #eafff6;
    box-shadow:
      0 0 0 7px rgba(90, 230, 171, 0.25),
      0 0 28px var(--hb-mint);
  }
  100% {
    transform: scale(1);
    background: #3e8b6c;
    box-shadow: none;
  }
}
.progress .stop.arrive .dot {
  animation: path-arrive 440ms ease-out var(--arrive) both;
}
@keyframes path-arrive {
  0% {
    transform: scale(1);
    background: #48484a;
    box-shadow: none;
  }
  45% {
    transform: scale(1.55);
    background: #eafff6;
    box-shadow:
      0 0 0 7px rgba(90, 230, 171, 0.25),
      0 0 30px var(--hb-mint);
  }
  100% {
    transform: scale(1);
    background: var(--hb-mint);
    box-shadow:
      0 0 0 5px rgba(90, 230, 171, 0.18),
      0 0 20px var(--hb-mint);
  }
}
.progress .stop.arrive .ring {
  animation: path-ripple var(--ripple) ease-out var(--arrive) both;
}
@keyframes path-ripple {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }
  100% {
    transform: scale(3.6);
    opacity: 0;
  }
}
.progress .stop.arrive .name {
  transition-delay: var(--arrive);
}
@media (max-height: 820px) {
  .progress {
    --dot: 13px;
    top: 52px;
  }
  .progress .stop {
    gap: 4px;
  }
  .progress .name {
    font-size: 10px;
  }
}
@media (max-width: 760px) {
  .progress {
    display: none; /* the path needs a projector's width */
  }
}

/* ── 1.0: the SPD wordmark at the line's own size. Its letters fill 0.279 of its height and Inter's
   capitals are 0.727 em, so a 2.61 em tall wordmark sets its letters at the text's capital height; the
   beat centres its items, which puts the wordmark's letters on the text's baseline. The wordmark's own
   left margin (0.72 em at this size) and the beat's gap are taken back so a word space remains. */
.scene-spine.layout-about .text > p.beat:nth-of-type(2) {
  max-width: none;
}
.scene-spine.layout-about .text > p.beat:nth-of-type(2)::after {
  content: "";
  flex: none;
  display: block;
  width: 15.66em;
  height: 2.61em;
  margin: -0.6em 0 -0.6em calc(0.28em - 16px - 0.72em);
  background: url("assets/act7/spd-wordmark.svg") left center / contain
    no-repeat;
}

/* ── 3.0 and 3.1: What is [the wordmark]? The title and its answer run across the top; under them
   the words take the left and the interface the right, the desktop hung from the definition's
   first line and the phone in front of it, standing on the last line of the reasons. */
.scene-spine.layout-platform {
  align-content: start;
  padding-top: max(150px, 14vh);
}
.scene-spine.layout-platform .statement .keep {
  /* the wordmark stands in for the name: its letters at the title's capital height and its baseline
     on the title's (the mark's capitals are 0.548 of its box, Inter's 0.727 em); the margins take
     back the mark's own side bearings so the word spaces match the title's */
  display: inline-block;
  width: 4.89em;
  height: 1.327em;
  margin: 0 -0.08em 0 -0.1em;
  vertical-align: -0.371em;
  overflow: hidden;
  text-indent: 120%;
  color: transparent;
  background: url("assets/act2b/wordmark-pingpong.svg") left bottom / contain
    no-repeat;
}
.scene-spine.layout-platform .sub {
  max-width: none;
  margin-top: clamp(12px, 1.4vh, 20px);
  font-weight: 600;
  color: var(--hb-text);
}
.scene-spine.layout-platform .beat {
  max-width: none;
}
.scene-spine.layout-platform .sub + .beat {
  /* the definition: the lead paragraph, a mint rule at its left */
  margin-top: 0;
  padding-left: clamp(16px, 1.3vw, 26px);
  border-left: 3px solid var(--hb-mint);
  font: 500 clamp(16px, 1.3vw, 25px) / 1.46 var(--hb-font);
  color: var(--hb-text);
}
.scene-spine.layout-platform .sub + .beat + .beat {
  /* Why use a meta-harness? */
  margin-top: clamp(22px, 3.4vh, 44px);
  font: 800 clamp(17px, 1.4vw, 27px) / 1.2 var(--hb-font);
  letter-spacing: -0.01em;
  color: var(--hb-mint);
}
.scene-spine.layout-platform .beat.with-label {
  display: block;
  margin-top: clamp(14px, 2.2vh, 28px);
  font: 500 clamp(13px, 0.98vw, 18px) / 1.42 var(--hb-font);
  color: var(--hb-text-secondary);
}
.scene-spine.layout-platform .beat.with-label .beat-label {
  display: block;
  margin-bottom: 0.3em;
  padding: 0;
  border: 0;
  border-radius: 0;
  white-space: normal;
  font: 800 clamp(15px, 1.1vw, 21px) / 1.25 var(--hb-font);
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--hb-text);
}
.scene-spine.layout-platform .object-group.desk {
  position: relative;
  display: block;
  overflow: visible;
  border: 0;
  background: none;
}
.scene-spine.layout-platform .object-group.desk > .object.cover {
  border-radius: 14px;
  border: 1px solid var(--hb-line-strong);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}
.scene-spine.layout-platform .object-group.desk > .object img {
  height: auto;
}
.scene-spine.layout-platform .object-group.desk > .object.phone {
  border-radius: 22px;
  border: 3px solid #3a3a3c;
  background: #000;
  box-shadow:
    0 0 0 8px var(--hb-bg),
    0 30px 60px rgba(0, 0, 0, 0.6);
}
.scene-spine.layout-platform .object-group.desk > .credit {
  padding: 0;
  font: 600 clamp(12px, 0.85vw, 15px) / 1 var(--hb-mono);
  letter-spacing: 0.06em;
}
@media (min-width: 761px) {
  /* the scene's own grid: the title and its answer across, then two columns of reasons beside
     the interface (the text block's children join the grid). Sizes in --u, a hundredth of a 16:9
     stage's width, so 1280x720 is exactly two thirds of 1920x1080 */
  .scene-spine.layout-platform {
    --u: min(1vw, 1.7778vh);
    padding-top: calc(var(--u) * 6.9);
  }
  .scene-spine.layout-platform .statement {
    font-size: calc(var(--u) * 4.375);
  }
  .scene-spine.layout-platform .sub {
    margin-top: calc(var(--u) * 1);
    font-size: calc(var(--u) * 1.5625);
  }
  .scene-spine.layout-platform .sub + .beat {
    padding-left: calc(var(--u) * 1.35);
    font-size: calc(var(--u) * 1.3);
  }
  .scene-spine.layout-platform .sub + .beat + .beat {
    margin-top: calc(var(--u) * 1.9);
    font-size: calc(var(--u) * 1.4);
  }
  .scene-spine.layout-platform .beat.with-label {
    margin-top: calc(var(--u) * 1.25);
    font-size: calc(var(--u) * 0.9375);
  }
  .scene-spine.layout-platform .beat.with-label .beat-label {
    font-size: calc(var(--u) * 1.094);
  }
  .scene-spine.layout-platform .object-group.desk > .credit {
    font-size: calc(var(--u) * 0.78);
  }
  .scene-spine.layout-platform .two {
    grid-template-columns:
      minmax(0, 1fr) minmax(0, 1fr)
      minmax(0, 1.62fr);
    column-gap: calc(var(--u) * 2.3);
    row-gap: 0;
    align-items: start;
  }
  .scene-spine.layout-platform .text {
    display: contents;
  }
  .scene-spine.layout-platform .text > * {
    grid-column: 1 / 3;
  }
  .scene-spine.layout-platform .text > .statement,
  .scene-spine.layout-platform .text > .sub {
    grid-column: 1 / -1;
  }
  .scene-spine.layout-platform .text > .sub {
    margin-bottom: calc(var(--u) * 2);
  }
  .scene-spine.layout-platform .text > .beat.with-label {
    grid-column: auto;
  }
  .scene-spine.layout-platform .object-group.desk {
    grid-column: 3;
    grid-row: 3 / span 6;
    align-self: stretch;
    margin-left: calc(var(--u) * 1.8);
  }
  .scene-spine.layout-platform .object-group.desk > .object.phone {
    position: absolute;
    left: -4%;
    bottom: 0;
    width: 31%;
  }
  .scene-spine.layout-platform .object-group.desk > .credit {
    position: absolute;
    right: 0;
    bottom: 0;
  }
}

/* ── 4.0 to 4.3: GitHub is the shared work surface. The Octocat hangs left of the title so its
   second line starts under the G; the three points arrive one by one as separate bullets, each with
   room above and below, filling the column beside the views. */
.scene-spine.layout-github .statement {
  position: relative;
  padding-left: 1.14em;
  max-width: none;
}
.scene-spine.layout-github .statement .sentence:first-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.08em;
  width: 0.92em;
  height: 0.92em;
  background: url("assets/act2c/octocat.svg") center / contain no-repeat;
}
.scene-spine.layout-github .beat {
  position: relative;
  max-width: none;
  padding-left: 1.3em;
  color: var(--hb-text);
}
.scene-spine.layout-github .beat::before {
  /* the bullet: a mint dot centred on the first line */
  content: "";
  position: absolute;
  left: 0.12em;
  top: calc(0.725em - 0.21em);
  width: 0.42em;
  height: 0.42em;
  border-radius: 50%;
  background: var(--hb-mint);
  box-shadow: 0 0 0.6em rgba(90, 230, 171, 0.55);
}
.scene-spine.layout-github .object-video {
  overflow: visible;
  border: 0;
  background: none;
}
.scene-spine.layout-github .object-video video {
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--hb-line-strong);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.scene-spine.layout-github .object-video .tag {
  top: 14px;
  right: 14px;
}
.scene-spine.layout-github .object-video .credit {
  padding: 12px 4px 0;
  font: 500 clamp(12px, 0.95vw, 17px) / 1.4 var(--hb-font);
  color: var(--hb-muted);
}
.scene-spine.layout-github .object-video .credit a {
  color: var(--hb-mint);
}
@media (min-width: 761px) {
  .scene-spine.layout-github {
    --u: min(1vw, 1.7778vh);
    padding-top: calc(var(--u) * 6.9);
    padding-bottom: calc(var(--u) * 4.5);
    align-content: center;
  }
  .scene-spine.layout-github .two {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
    column-gap: calc(var(--u) * 4);
    align-items: start;
  }
  .scene-spine.layout-github .two > .object-video {
    /* hung from the first bullet's line: the title's two lines and the gap under them */
    margin-top: calc(var(--u) * (4 * 1.02 * 2 + 2.8));
  }
  .scene-spine.layout-github .statement {
    font-size: calc(var(--u) * 4);
  }
  .scene-spine.layout-github .beat {
    margin-top: calc(var(--u) * 1.8);
    font: 500 calc(var(--u) * 1.4) / 1.45 var(--hb-font);
  }
  .scene-spine.layout-github .statement + .beat {
    margin-top: calc(var(--u) * 2.8);
  }
  .scene-spine.layout-github .beat + .beat {
    padding-top: calc(var(--u) * 1.8);
    border-top: 1px solid var(--hb-line);
  }
  .scene-spine.layout-github .beat + .beat::before {
    top: calc(var(--u) * 1.8 + 0.725em - 0.21em);
  }
  .scene-spine.layout-github .object-video .tag {
    font-size: calc(var(--u) * 0.66);
  }
  .scene-spine.layout-github .object-video .credit {
    font-size: calc(var(--u) * 0.85);
  }
}

/* ── 5.0 to 5.9: the stations. Each station's words take the panel's full width under its picture:
   the statement, the line under it, then FRICTION and SOLUTION as two rows. The chips are the same
   width (eight letters in the mono face), so the words after them start on one edge. The title's
   three sentences keep a full word space after each period. */
.scene-rail .head .statement .sentence + .sentence {
  margin-left: 0.16em;
}
.scene-rail.layout-objects-first .station .panel-text h3,
.scene-rail.layout-objects-first .station .panel-text .beat {
  max-width: none;
}
.scene-rail.layout-objects-first .station .panel-text .beat {
  color: var(--hb-text-secondary);
}
.scene-rail.layout-objects-first .station .panel-text .beat.with-label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.9em;
  align-items: baseline;
  color: var(--hb-text);
}
.scene-rail.layout-objects-first .station .panel-text .beat-label {
  position: relative;
  top: -0.12em;
  padding: 0.42em 0.7em;
  border-radius: 0.45em;
  font-size: 0.62em;
}
.scene-rail .beat[data-label="SOLUTION"] .beat-label {
  color: #0f1f1a;
  background: var(--hb-mint);
  border-color: var(--hb-mint);
}
@media (min-width: 761px) {
  .scene-rail.layout-objects-first {
    --u: min(1vw, 1.7778vh);
  }
  .scene-rail.layout-objects-first .station .panel-text h3 {
    margin-bottom: calc(var(--u) * 0.2);
    font-size: calc(var(--u) * 1.75);
  }
  .scene-rail.layout-objects-first .station .panel-text .beat {
    margin-top: calc(var(--u) * 0.65);
    font-size: calc(var(--u) * 1.15);
    line-height: 1.45;
  }
  .scene-rail.layout-objects-first .station .panel-text .beat.with-label {
    margin-top: calc(var(--u) * 0.75);
  }
  .scene-rail.layout-objects-first
    .station
    .panel-text
    .beat:not(.with-label)
    + .beat.with-label {
    margin-top: calc(var(--u) * 1.25);
  }
}
.scene-rail.layout-objects-first .station[data-station] .panel-text {
  /* the station's label and its line share one row; the words take the whole width */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px;
  align-items: center;
  padding-right: 0;
}
.scene-rail.layout-objects-first .station .panel-text > * {
  grid-column: 1 / -1;
}
.scene-rail.layout-objects-first .station .panel-text > .month {
  grid-column: 1;
}
.scene-rail.layout-objects-first .station .panel-text > .axis {
  grid-column: 2;
  margin: 0;
}
/* 5.9: the coda takes the room beside the last picture, at the size of a pull quote: "But first,"
   as its kicker, the question under it */
.scene-rail .coda {
  position: relative;
  z-index: 2;
  justify-self: end;
  align-self: start;
  right: auto;
  bottom: auto;
  width: 38%;
  margin: 0;
  padding: 0.1em 0 0.15em 0.55em;
  border-left: 0.09em solid var(--hb-mint);
  font: 800 clamp(26px, 2.7vw, 52px) / 1.06 var(--hb-font);
  letter-spacing: -0.02em;
  color: var(--hb-text);
  text-align: left;
  text-wrap: balance;
}
.scene-rail .coda::first-line {
  font: 700 0.42em / 2.1 var(--hb-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hb-mint);
}
@media (min-width: 761px) {
  .scene-rail .window,
  .scene-rail .coda {
    grid-row: 2;
    grid-column: 1;
  }
}
@media (min-width: 761px) {
  .scene-rail.layout-objects-first .station .object,
  .scene-rail.layout-objects-first .station .object-group.trio,
  .scene-rail.layout-objects-first .station .object-group.upgrade {
    max-height: 26vh;
  }
  .scene-rail.layout-objects-first .station .panel-text > .month {
    font-size: calc(var(--u) * 0.68);
  }
  .scene-rail.layout-objects-first .station .panel-text h3 {
    margin-top: calc(var(--u) * 0.9);
    font-size: calc(var(--u) * 1.65);
  }
  .scene-rail.layout-objects-first .station .object img,
  .scene-rail.layout-objects-first .station .object.photo img,
  .scene-rail.layout-objects-first .station .object .pi-cut,
  .scene-rail.layout-objects-first .station .object-group.mesh10 svg {
    max-height: 26vh;
  }
  .scene-rail .coda {
    width: 40%;
    margin-top: calc(var(--u) * 0.6);
    font-size: calc(var(--u) * 3.3);
  }
}

/* ── 8.0 and 8.1: the issue-workflow row under the loop. Each step is one cell: its number, its mark
   and its word on top, Human or AI under them. At 8.0 Test and Feedback light red a moment after
   the slide lands; at 8.1, with me off the ring, Test drops its red and flips to AI, Feedback leaves
   the row, the row closes the gap, and Close takes number 07: Human first, then AI on every step.
   Every step of 8.1 is a class the engine sets at once; the delays here put them in order. */
.pipeline-row {
  --g: 12px;
  display: flex;
  gap: var(--g);
}
.pipeline-row .cell {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  align-content: start;
  column-gap: 0.55em;
  padding: 0.75em 0.9em 0.8em;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(44, 44, 46, 0.8);
  border: 1px solid var(--hb-line);
  box-shadow: inset 0 0 0 1px transparent;
  transition:
    border-color 600ms var(--ease),
    background 600ms var(--ease),
    box-shadow 600ms var(--ease),
    opacity 450ms var(--ease),
    flex-grow 750ms cubic-bezier(0.55, 0, 0.25, 1),
    padding 750ms cubic-bezier(0.55, 0, 0.25, 1),
    margin 750ms cubic-bezier(0.55, 0, 0.25, 1),
    border-width 750ms cubic-bezier(0.55, 0, 0.25, 1);
}
.pipeline-row .cell.ai {
  border-color: rgba(90, 230, 171, 0.35);
}
.pipeline-row .cell.red {
  border-color: #f87171;
  box-shadow: inset 0 0 0 1px #f87171;
  background: rgba(248, 113, 113, 0.1);
}
.pipeline-row .cell.gone {
  /* Feedback leaves: it fades, then its slot closes and the cells after it slide into the gap */
  flex-grow: 0.0001;
  opacity: 0;
  padding-left: 0;
  padding-right: 0;
  border-width: 0;
  margin-right: calc(var(--g) * -1);
  transition-delay: 0ms, 0ms, 0ms, 1400ms, 1850ms, 1850ms, 1850ms, 1850ms;
}
.pipeline-row .n {
  grid-column: 1;
  grid-row: 1;
  display: inline-grid;
  font: 600 0.55em / 1 var(--hb-mono);
  color: var(--hb-muted);
}
.pipeline-row .n b {
  grid-area: 1 / 1;
  font-weight: inherit;
}
.pipeline-row .n .was {
  opacity: 0;
}
.pipeline-row .cell.renum .n .was {
  animation: renum-out 420ms var(--ease) 2650ms both;
}
.pipeline-row .cell.renum .n .now {
  animation: renum-in 420ms var(--ease) 2650ms both;
}
@keyframes renum-out {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translateY(-0.6em);
  }
}
@keyframes renum-in {
  from {
    opacity: 0;
    transform: translateY(0.6em);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.pipeline-row .s {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: baseline;
  gap: 0.32em;
  min-width: 0;
  white-space: nowrap;
  font: 700 1em / 1.18 var(--hb-font);
  color: var(--hb-text);
}
.pipeline-row .s .emoji {
  font-style: normal;
}
.pipeline-row .s .lines {
  /* a two-line word: the second line ends where the first does */
  display: inline-grid;
}
.pipeline-row .s .lines .r {
  justify-self: end;
}
.pipeline-row .chip {
  /* on the cell's floor, so every chip sits on one line whatever the word above it */
  position: absolute;
  left: 1.45em;
  bottom: 1.3em;
  display: inline-flex;
  padding: 0.32em 0.8em;
  border-radius: 999px;
  border: 1px solid rgba(199, 199, 204, 0.55);
  background: transparent;
  color: var(--hb-text);
  font: 700 0.62em / 1 var(--hb-font);
  transition:
    background 450ms var(--ease),
    border-color 450ms var(--ease),
    color 450ms var(--ease);
}
.pipeline-row .chip b {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  font-weight: inherit;
  transition:
    max-width 450ms var(--ease),
    opacity 300ms var(--ease);
}
.pipeline-row .chip .h {
  max-width: 5em;
}
.pipeline-row .chip .a {
  max-width: 0;
  opacity: 0;
}
.pipeline-row .cell.ai .chip {
  background: var(--hb-mint);
  border-color: var(--hb-mint);
  color: var(--hb-mint-deep);
}
.pipeline-row .cell.ai .chip .h {
  max-width: 0;
  opacity: 0;
}
.pipeline-row .cell.ai .chip .a {
  max-width: 3em;
  opacity: 1;
}
.pipeline-row .cell.flipped .chip,
.pipeline-row .cell.flipped .chip b {
  transition-delay: 700ms;
}
.scene-spine.layout-nexus .pipeline-row {
  grid-column: 1 / -1;
  margin-top: clamp(14px, 2.6vh, 32px);
  font-size: clamp(14px, 1.15vw, 22px);
}
@media (min-width: 761px) {
  .scene-spine.layout-nexus {
    --u: min(1vw, 1.7778vh);
  }
  .scene-spine.layout-nexus .pipeline-row {
    --g: calc(var(--u) * 0.62);
    font-size: calc(var(--u) * 1.15);
  }
  .scene-spine.layout-nexus .pipeline-row .cell {
    height: calc(var(--u) * 6.3);
    box-sizing: border-box;
  }
}
@media (max-width: 760px) {
  html:not(.is-stage) .pipeline-row {
    flex-wrap: wrap;
  }
  html:not(.is-stage) .pipeline-row .cell {
    flex: 1 1 40%;
  }
  html:not(.is-stage) .pipeline-row .cell.gone {
    display: none;
  }
  html:not(.is-stage) .pipeline-row .cell,
  html:not(.is-stage) .pipeline-row .cell *,
  html:not(.is-stage) .pipeline-row .n b {
    transition: none;
    animation: none;
  }
  html:not(.is-stage) .pipeline-row .cell.renum .n .was {
    opacity: 0;
  }
}

/* ── 11.0: Thank you. Four areas on one grid: the top row holds the identity chip at the left (photo,
   name, a dot, the role in mint, a dot, the Solid Product Design wordmark at the role's capital
   height, all on one line) and Thank you at the right; under it three columns, each titled in the
   talk's purple: Hapimatic-core (the announcement and its pictures), Links (the scan code and the
   links page on a phone), and FAQs (the seven questions, each with its one-line answer). */
.scene-spine.layout-wrap .object-group.thanks4 {
  border: 0;
  background: none;
}
.scene-spine.layout-wrap .object-group.thanks4 > .object-group {
  position: relative;
  border: 0;
  background: none;
  overflow: visible;
}
.scene-spine.layout-wrap .object-group.thanks4 > .object-group > .tag {
  /* a column's title */
  position: static;
  order: -2;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font: 800 clamp(18px, 1.5vw, 28px) / 1.1 var(--hb-font);
  letter-spacing: -0.01em;
  text-transform: none;
  color: #9b6dff;
}
/* the identity chip: one line */
.scene-spine.layout-wrap .object-group.thanks4 > .object-group.who {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0.55em 1.3em 0.55em 0.55em;
  border-radius: 999px;
  border: 1px solid var(--hb-line-strong);
  background: rgba(44, 44, 46, 0.72);
  font-size: clamp(15px, 1.25vw, 24px);
}
.scene-spine.layout-wrap .object-group.who > .object.avatar {
  display: contents;
}
.scene-spine.layout-wrap .object-group.who > .object.avatar img {
  order: 1;
  flex: none;
  width: 3.6em;
  height: 3.6em;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--hb-line-strong);
}
.scene-spine.layout-wrap .object-group.who > .object.avatar .credit {
  order: 2;
  margin: 0 0 0 0.7em;
  padding: 0;
  white-space: nowrap;
  font: 800 1.6em / 1 var(--hb-font);
  letter-spacing: -0.02em;
  color: var(--hb-text);
}
.scene-spine.layout-wrap .object-group.who > .object.avatar .tag {
  order: 3;
  position: static;
  display: flex;
  align-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  white-space: nowrap;
  font: 600 1em / 1 var(--hb-font);
  letter-spacing: 0;
  text-transform: none;
  color: var(--hb-mint);
}
.scene-spine.layout-wrap .object-group.who > .object.avatar .tag::before,
.scene-spine.layout-wrap .object-group.who > .object.wordmark::before {
  /* the small dot between the items */
  content: "";
  flex: none;
  width: 0.3em;
  height: 0.3em;
  margin: 0 0.75em;
  border-radius: 50%;
  background: var(--hb-muted);
}
.scene-spine.layout-wrap .object-group.who > .object.wordmark {
  order: 4;
  display: flex;
  align-items: center;
  overflow: visible;
  border: 0;
  background: none;
}
.scene-spine.layout-wrap .object-group.who > .object.wordmark img {
  /* the wordmark's letters at the role's capital height (they fill 0.279 of the mark's box; Inter's
     capitals are 0.727 em), its left bearing taken back so the dot's space matches the other */
  width: auto;
  height: 2.61em;
  margin: -0.6em 0 -0.6em -0.72em;
  background: none;
  border: 0;
}
/* Hapimatic-core: the title, the announcement, the README's top across the column, the two diagrams
   side by side under it (their backgrounds are the stage's, so a letterbox never shows) */
.scene-spine.layout-wrap .object-group.core {
  /* the announcement under the pictures, so the README, the scan code, and the first question
     start on one line across the three columns */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  column-gap: 14px;
  row-gap: 12px;
}
.scene-spine.layout-wrap .object-group.core > .tag {
  grid-column: 1 / -1;
  grid-row: 1;
}
.scene-spine.layout-wrap .object-group.core > .credit {
  grid-column: 1 / -1;
  grid-row: 4;
  margin: 2px 0 0;
  padding: 0;
  font: 700 clamp(15px, 1.2vw, 23px) / 1.3 var(--hb-font);
  letter-spacing: -0.005em;
  color: var(--hb-text);
  text-wrap: balance;
}
.scene-spine.layout-wrap .object-group.core > .object {
  min-height: 0;
  border-radius: 12px;
  border: 1px solid var(--hb-line-strong);
  background: #1c1c1e;
}
.scene-spine.layout-wrap .object-group.core > .object img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.scene-spine.layout-wrap .object-group.core > .object.core {
  grid-column: 1 / -1;
  grid-row: 2;
  background: #0d1116;
}
.scene-spine.layout-wrap .object-group.core > .object.core img {
  object-fit: cover;
  object-position: center top;
}
.scene-spine.layout-wrap .object-group.core > .object.arch,
.scene-spine.layout-wrap .object-group.core > .object.life {
  grid-row: 3;
  aspect-ratio: 1600 / 880;
}
.scene-spine.layout-wrap .object-group.core > .object.arch {
  grid-column: 1;
}
.scene-spine.layout-wrap .object-group.core > .object.life {
  grid-column: 2;
}
.scene-spine.layout-wrap .object-group.core > .object.core .tag {
  top: 10px;
  right: 10px;
  font-size: 9px;
}
/* Links: the scan code, its address, then the links page on a phone, the phone as wide as the code
   and cut off by the column's floor */
.scene-spine.layout-wrap .object-group.links {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  justify-items: start;
  row-gap: 12px;
}
.scene-spine.layout-wrap .object-group.links > .tag {
  grid-row: 1;
}
.scene-spine.layout-wrap .object-group.links > .object-qr {
  grid-row: 2;
  width: clamp(150px, 13.8vw, 265px);
  gap: 10px;
  overflow: visible;
  border: 0;
  background: none;
}
.scene-spine.layout-wrap .object-group.links > .object-qr img {
  width: 100%;
  padding: 7%;
}
.scene-spine.layout-wrap .object-group.links > .object-qr .credit {
  padding: 0;
  font: 600 clamp(11px, 0.78vw, 15px) / 1.35 var(--hb-mono);
  word-break: break-all;
}
.scene-spine.layout-wrap .object-group.links > .object.phone {
  grid-row: 3;
  position: relative;
  width: clamp(150px, 13.8vw, 265px);
  min-height: 0;
  border-radius: 26px 26px 0 0;
  border: 4px solid #3a3a3c;
  border-bottom: 0;
  background: #1c1c1e;
  box-shadow: 0 0 0 6px var(--hb-bg);
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent);
  mask-image: linear-gradient(to bottom, #000 80%, transparent);
}
.scene-spine.layout-wrap .object-group.links > .object.phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
/* FAQs: the seven questions down the column's full height, each with its answer under it */
.scene-spine.layout-wrap .object-group.faq {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  row-gap: 12px;
}
.scene-spine.layout-wrap .object-group.faq > .tag {
  grid-row: 1;
}
.scene-spine.layout-wrap .object-group.faq > .object-table.qlist {
  grid-row: 2;
  padding: 0;
  border: 0;
  background: none;
  overflow: visible;
}
.scene-spine.layout-wrap .object-table.qlist table,
.scene-spine.layout-wrap .object-table.qlist tbody {
  display: grid;
  grid-auto-rows: minmax(0, 1fr);
  width: 100%;
  height: 100%;
  font-variant-numeric: normal;
}
.scene-spine.layout-wrap .object-table.qlist table {
  grid-template-rows: minmax(0, 1fr);
}
.scene-spine.layout-wrap .object-table.qlist tr:first-child {
  display: none; /* the column's title says FAQs once */
}
.scene-spine.layout-wrap .object-table.qlist tr {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 0.75em;
  align-content: center;
  min-height: 0;
  padding: 0.3em 0;
  border-top: 1px solid var(--hb-line);
}
.scene-spine.layout-wrap .object-table.qlist tr:nth-child(2) {
  border-top: 0;
}
.scene-spine.layout-wrap .object-table.qlist td {
  padding: 0;
  border: 0;
  white-space: normal;
}
.scene-spine.layout-wrap .object-group.who > .group-link {
  border: 0; /* the cover link is the chip itself; no underline along its floor */
  border-radius: 999px;
}
.scene-spine.layout-wrap .object-table.qlist td:first-child {
  grid-row: 1 / span 2;
  align-self: start;
  display: grid;
  place-items: center;
  width: 1.7em;
  height: 1.7em;
  margin-top: -0.12em;
  border-radius: 50%;
  background: var(--hb-mint);
  color: var(--hb-mint-deep);
  font: 800 0.82em / 1 var(--hb-font);
}
.scene-spine.layout-wrap .object-table.qlist td:nth-child(2) {
  font: 700 1em / 1.25 var(--hb-font);
  color: var(--hb-text);
}
.scene-spine.layout-wrap .object-table.qlist td:nth-child(3) {
  margin-top: 0.2em;
  font: 500 0.78em / 1.32 var(--hb-font);
  color: var(--hb-text-secondary);
}
@media (min-width: 761px) {
  .scene-spine.layout-wrap {
    --u: min(1vw, 1.7778vh);
    padding-top: calc(var(--u) * 6.9);
    padding-bottom: calc(var(--u) * 3.6);
    align-content: start;
  }
  .scene-spine.layout-wrap .two {
    grid-template-columns: minmax(0, 41fr) minmax(0, 16.5fr) minmax(0, 38.5fr);
    grid-template-rows: auto auto calc(var(--u) * 37.5);
    column-gap: calc(var(--u) * 2.4);
    row-gap: 0;
    align-items: stretch;
  }
  .scene-spine.layout-wrap .two > .text,
  .scene-spine.layout-wrap .two > .object-group.thanks4 {
    display: contents;
  }
  .scene-spine.layout-wrap .text > .eyebrow-xl {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    margin: 0;
  }
  .scene-spine.layout-wrap .text > .statement {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    align-self: end;
    text-align: right;
    font-size: calc(var(--u) * 5.2);
  }
  .scene-spine.layout-wrap .object-group.thanks4 > .object-group.who {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    justify-self: start;
    align-self: center;
    font-size: calc(var(--u) * 1.22);
  }
  .scene-spine.layout-wrap .object-group.core,
  .scene-spine.layout-wrap .object-group.links,
  .scene-spine.layout-wrap .object-group.faq {
    grid-row: 3;
    margin-top: calc(var(--u) * 2.6);
  }
  .scene-spine.layout-wrap .object-group.core {
    grid-column: 1;
  }
  .scene-spine.layout-wrap .object-group.links {
    grid-column: 2;
  }
  .scene-spine.layout-wrap .object-group.faq {
    grid-column: 3;
    font-size: calc(var(--u) * 1.02);
  }
  .scene-spine.layout-wrap .object-group.thanks4 > .object-group > .tag {
    font-size: calc(var(--u) * 1.45);
  }
  .scene-spine.layout-wrap .object-group.core > .credit {
    font-size: calc(var(--u) * 1.25);
  }
  .scene-spine.layout-wrap .object-group.links > .object-qr .credit {
    font-size: calc(var(--u) * 0.72);
  }
  .scene-spine.layout-wrap .object-group.links > .object-qr,
  .scene-spine.layout-wrap .object-group.links > .object.phone {
    width: calc(var(--u) * 13.8);
  }
}

/* ── 7.0: the three lines under the title break where the talk breaks them, nowhere else */
.scene-chart .sub {
  max-width: none;
}

/* ── round 8 on a phone: the long lines wrap instead of widening the page */
@media (max-width: 760px) {
  .scene-spine.layout-about .text > p.beat:nth-of-type(2) {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .scene-spine.layout-about .text > p.beat:nth-of-type(2)::after {
    width: 11em;
    height: 1.84em;
    margin: 0 0 0 calc(40px + 16px - 0.5em);
  }
  .scene-spine.layout-wrap .object-group.thanks4 > .object-group.who {
    flex-wrap: wrap;
    row-gap: 10px;
    padding: 12px 16px;
    border-radius: 22px;
  }
  .scene-spine.layout-wrap .object-group.who > .object.avatar .tag {
    flex-basis: 100%;
    order: 3;
  }
  .scene-spine.layout-wrap .object-group.who > .object.avatar .tag::before,
  .scene-spine.layout-wrap .object-group.who > .object.wordmark::before {
    display: none;
  }
  .scene-spine.layout-wrap .object-group.who > .object.wordmark {
    flex-basis: 100%;
  }
  .scene-spine.layout-wrap .object-group.who > .object.wordmark img {
    height: 2.2em;
    margin: -0.5em 0 -0.5em -0.6em;
  }
}

@media (max-width: 760px) {
  .scene-rail .coda {
    justify-self: start;
    width: auto;
    margin-top: 24px;
    font-size: 30px;
  }
  .scene-spine.layout-platform .object-group.desk > .object.phone {
    width: 52%;
    margin: 18px auto 0;
  }
  .pipeline-row .cell {
    height: auto;
    row-gap: 8px;
  }
  .pipeline-row .chip {
    position: static;
    grid-column: 1 / -1;
    justify-self: start;
  }
  .scene-spine.layout-wrap .object-group.thanks4 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .scene-spine.layout-wrap .object-group.core > .object.core {
    aspect-ratio: 1138 / 900;
  }
  .scene-spine.layout-wrap .object-group.core > .object.life {
    /* the engine keeps a group to one column on a phone: the diagrams stack */
    grid-column: 1;
    grid-row: 4;
  }
  .scene-spine.layout-wrap .object-group.core > .credit {
    grid-row: 5;
  }
  .scene-spine.layout-wrap .object-group.core > .credit {
    text-wrap: wrap;
  }
  .scene-spine.layout-wrap .object-group.links > .object.phone {
    height: 300px;
  }
}

/* ── 9.x: "Battery characterization" is the map's longest name; at the other plates' size it would
   run past its plate (verifier check 20), so this one plate's name is set a size down */
.plabel[data-plate="battery"] {
  --label-size: 30px;
}

/* ── 7.0, WORKDAYS-C (Matt's pick, 2026-10-20): the workdays line in italic mint, a step quieter
   than the total above it */
.chart-box .tc-light {
  font-weight: 400;
  font-style: italic;
  opacity: 0.8;
  fill: var(--hb-mint);
}

/* ═══ Round 9 (Matt, 2026-10-20 15:24Z): no node graph; the path on the logo's line; the controls as
   icons under the count; every slide gets the room back ═══ */
:root {
  --r9-logo-h: clamp(22px, 2.2vw, 30px);
  --r9-logo-w: calc(
    var(--r9-logo-h) * 4.161
  ); /* the header cut's proportions (viewBox 10028 x 2410, r10) */
  --r9-ctr-w: 88px;
  --r9-gap: clamp(28px, 3vw, 64px);
  --r9-top: calc(
    22px + var(--r9-logo-h) + clamp(48px, 3.2vw, 64px)
  ); /* the first line under the HUD */
  --r9-bot: 2vh; /* ROOM-B (Matt's pick): a slim foot */
  --r9-grow: 1.3; /* ROOM-B: the pictures and charts about 30 percent larger */
}
/* the node graph at the foot of every slide is gone */
#ambient {
  display: none;
}
/* the HUD row: the count with the controls under it, at the logo's height */
.hud {
  align-items: flex-start;
}
.hud-right {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: var(--r9-logo-h) auto;
  justify-items: end;
  align-items: center;
  column-gap: 8px;
  row-gap: 8px;
}
.hud-right .ctr {
  grid-row: 1;
  grid-column: 1 / span 9;
  justify-self: end;
}
.hud-right .step,
.hud-right .relay-chip,
.hud-right #talk-identity {
  grid-row: 2;
}
/* r14: the relay as a dish icon (Matt, 2026-10-21): mint when connected, amber and pulsing
   while it connects or retries, grey with a red slash when lost. The words stay in the element
   (role=status, aria-label, title) but are not drawn. It sits just left of the count. */
.hud .relay-chip {
  --relay-c: var(--hb-muted);
  --relay-icon: url("assets/hud/relay-dish.svg");
  position: relative;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  font-size: 0;
  color: transparent;
  grid-row: 1;
  grid-column: 1;
  align-self: center;
  pointer-events: auto;
}
.hud .relay-chip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--relay-c);
  -webkit-mask: var(--relay-icon) center / contain no-repeat;
  mask: var(--relay-icon) center / contain no-repeat;
}
.hud .relay-chip::after {
  content: "";
  display: none;
  position: absolute;
  left: 50%;
  top: -3px;
  bottom: -3px;
  width: 2.5px;
  margin-left: -1.25px;
  border-radius: 2px;
  background: var(--hb-red);
  box-shadow: 0 0 0 1.5px var(--hb-bg);
  transform: rotate(-45deg);
}
.hud .relay-chip[data-state="live"] {
  --relay-c: var(--hb-mint);
}
.hud .relay-chip[data-state="wait"] {
  --relay-c: var(--hb-amber);
  animation: relay-wait 1.4s ease-in-out infinite;
}
.hud .relay-chip[data-state="down"] {
  --relay-c: var(--hb-muted);
}
.hud .relay-chip[data-state="down"]::after {
  display: block;
}
@keyframes relay-wait {
  50% {
    opacity: 0.35;
  }
}
/* Matt's pick (R-B in the row, 2026-10-21): the small dish at the right end of the count's row,
   centred on the same line as the count and the timeline */
.hud .relay-chip {
  width: 18px;
  height: 18px;
  grid-row: 1;
  grid-column: 10;
  margin-left: 6px;
}
.hud-right .relay-chip ~ .ctr,
.hud-right .relay-chip:empty ~ .ctr {
  grid-column: 1 / span 9;
}
/* step through: a fast-forward mark (the words stay for a screen reader) */
.hud .step {
  width: 34px;
  height: 28px;
  padding: 0;
  font-size: 0;
  justify-content: center;
  background: var(--hb-mint)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230c3327' d='M2.5 5v14l9.5-7zM12 5v14l9.5-7z'/%3E%3C/svg%3E")
    center / 18px no-repeat;
}
/* account: a silhouette */
.hud #talk-identity .ti-toggle {
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 0;
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8.2' r='4.2' fill='%23c7c7cc'/%3E%3Cpath fill='%23c7c7cc' d='M3.8 21c.6-4.6 4-7.4 8.2-7.4s7.6 2.8 8.2 7.4z'/%3E%3C/svg%3E")
    center / 16px no-repeat;
}
@media (min-width: 761px) {
  /* the path between the logo and the count, its dots on the logo's centre line */
  .progress {
    top: calc(22px + var(--r9-logo-h) / 2 - var(--dot) / 2);
    left: calc(var(--pad) + var(--r9-logo-w) + var(--r9-gap));
    right: calc(var(--pad) + var(--r9-ctr-w) + var(--r9-gap));
  }
  .progress .name {
    max-width: 92%;
    white-space: normal;
    text-wrap: balance;
    text-align: center;
    overflow: visible;
    line-height: 1.15;
  }
  /* every slide starts under the HUD and runs to the foot */
  html .scene.scene {
    padding-top: var(--r9-top);
    padding-bottom: var(--r9-bot);
  }
}
@media (max-height: 820px) and (min-width: 761px) {
  .progress {
    top: calc(22px + var(--r9-logo-h) / 2 - var(--dot) / 2);
  }
}
/* the pictures and charts take the room the node graph and the old path held (--r9-grow) */
@media (min-width: 761px) {
  .scene-chart .chart-box [data-talk="timeline"],
  .scene-chart .chart-box [data-talk="hours"] {
    /* the chart grows with ROOM-B but stops at the room the slide has: about 69vh less 70px */
    height: min(calc(52vh * var(--r9-grow)), calc(69.4vh - 70px));
  }
  .scene-map .map-stage {
    height: clamp(
      300px,
      min(calc(52vh * var(--r9-grow)), 60vh),
      780px
    ); /* a dive's caption stays on screen */
  }
  .scene-map .map-object .object-group.eyes2 > .object img {
    height: calc(12vh * var(--r9-grow));
  }
  .scene-map .map-object .object-group.eyes2 > .object.strip img {
    height: calc(15vh * var(--r9-grow));
  }
  .scene-rail.layout-objects-first .station .object,
  .scene-rail.layout-objects-first .station .object-group.trio,
  .scene-rail.layout-objects-first .station .object-group.upgrade {
    max-height: calc(26vh * var(--r9-grow));
  }
  .scene-rail.layout-objects-first .station .object img,
  .scene-rail.layout-objects-first .station .object.photo img,
  .scene-rail.layout-objects-first .station .object .pi-cut,
  .scene-rail.layout-objects-first .station .object-group.mesh10 svg,
  .scene-rail .station .object-group.trio > .object img,
  .scene-rail .station .object-group.upgrade > .object img {
    max-height: calc(26vh * var(--r9-grow));
  }
  .scene-spine.layout-next .object-group.pods > .object-group {
    height: calc(50vh * var(--r9-grow));
  }
}
/* a 4:3 screen (an iPad held sideways, 1080 x 810): the words wrap where a 16:9 stage keeps them on
   one line, so the slides take the extra height instead */
@media (min-width: 761px) and (max-aspect-ratio: 3/2) and (min-aspect-ratio: 5/4) {
  /* About: the lyric card stays left of the print (its left edge sits at 39 percent of the width here) */
  .scene-spine.layout-about .lyric-card {
    max-width: 31.5vw;
  }
  .scene-spine.layout-about .quote .lyric {
    font-size: 1.7vw;
  }
  /* the bench: the map takes more of the width; the panel beside it narrows */
  .scene-map .map-layout {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.7fr);
  }
  .scene-spine.layout-about .text > p.beat:nth-of-type(2) {
    flex-wrap: wrap;
    row-gap: 0.2em;
  }
  .scene-spine.layout-about .text > p.beat:nth-of-type(2)::after {
    margin-left: calc(clamp(40px, 3.6vw, 60px) + 16px - 0.72em);
  }
  .scene-spine.layout-wrap .object-group.thanks4 > .object-group.who {
    font-size: calc(var(--u) * 0.98);
  }
  .scene-spine.layout-wrap .two {
    grid-template-rows: auto auto calc(var(--u) * 52);
  }
  .scene-spine.layout-wrap .object-group.faq {
    font-size: calc(var(--u) * 0.98);
  }
  .scene-map .map-stage {
    height: clamp(300px, 62vh, 780px);
  }
  .scene-spine.layout-next .object-group.pods > .object-group {
    height: 62vh;
  }
}
/* the phone page: the controls now sit under the count, so the band is one icon row taller */
@media (max-width: 760px) {
  html:not(.is-stage) .scene {
    padding-top: calc(118px + env(safe-area-inset-top, 0px));
  }
}
/* the hours chart carries three lines above it and a legend under it: it keeps a foot at every size */
@media (min-width: 761px) {
  .scene-chart .chart-box [data-talk="hours"] {
    height: min(calc(50vh * var(--r9-grow)), calc(72.2vh - 130px));
  }
}
/* a screen taller than it is wide (960 x 1080) stacks the bench panel under the map: the map keeps its
   round-8 height there so the caption stays on screen */
@media (min-width: 761px) and (max-aspect-ratio: 1/1) {
  /* the engine stacks the panel under the map here, with capped heights (engine.css, "Half a
     screen"); the room the node graph held is not taken on these screens */
  .scene-map .map-stage {
    height: 38vh;
  }
  .scene-map .map-object .object-group.eyes2 > .object img {
    height: 12vh;
  }
  .scene-map .map-object .object-group.eyes2 > .object.strip img {
    height: 15vh;
  }
}

/* a short projector (1280 x 720): the station pictures stop at the size that leaves the workflow row
   on screen */
@media (min-width: 761px) and (max-height: 820px) {
  .scene-map .map-stage {
    height: clamp(
      300px,
      52vh,
      620px
    ); /* the round-8 size: a dive's long caption stays on screen */
  }
  .scene-map .map-object .object-group.pair3 > .object-image img {
    height: 26vh; /* the design-review pair with its table fits above its caption */
  }
  .scene-rail.layout-objects-first .station .object,
  .scene-rail.layout-objects-first .station .object-group.trio,
  .scene-rail.layout-objects-first .station .object-group.upgrade,
  .scene-rail.layout-objects-first .station .object img,
  .scene-rail.layout-objects-first .station .object.photo img,
  .scene-rail.layout-objects-first .station .object .pi-cut,
  .scene-rail.layout-objects-first .station .object-group.mesh10 svg,
  .scene-rail .station .object-group.trio > .object img,
  .scene-rail .station .object-group.upgrade > .object img {
    max-height: min(calc(26vh * var(--r9-grow)), 29.6vh);
  }
}
/* station 1's three pictures and station 3's before-and-after row shrink to their panel's width
   instead of running past its edges (ROOM-B's larger pictures overflowed and the window clipped them) */
@media (min-width: 761px) {
  .scene-rail.layout-objects-first .station .object-group.trio,
  .scene-rail.layout-objects-first .station .object-group.upgrade {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    max-width: 100%;
  }
  .scene-rail .station .object-group.trio > *,
  .scene-rail .station .object-group.upgrade > * {
    flex: 0 1 auto;
    min-width: 0;
  }
  .scene-rail .station .object-group.trio > .object img,
  .scene-rail .station .object-group.upgrade > .object img,
  .scene-rail .station .object-group.upgrade > .object-group > .object img {
    max-width: 100%;
    height: auto;
  }
}
/* the isometric lattice behind every slide, restored (Matt, 2026-10-20 18:09Z). It was drawn on the
   same canvas as the node graph (mesh.js lattice(): two families of 1 px lines at 30 degrees either
   side of horizontal, every 64 px along a row, white at 3.5 percent), so hiding that canvas took it
   too. The lines are drawn here instead, fixed to the screen as the canvas was: 32 px apart measured
   square to the lines (64 px along a row times sin 30). */
body {
  background-image:
    repeating-linear-gradient(
      150deg,
      rgba(255, 255, 255, 0.035) 0 1px,
      transparent 1px 32px
    ),
    repeating-linear-gradient(
      210deg,
      rgba(255, 255, 255, 0.035) 0 1px,
      transparent 1px 32px
    );
  background-attachment: fixed;
}

/* ---------------------------------------------------------------------------
   Round 10 (Matt's 2026-10-20 evening list). Inline marks and the station asides.
   --------------------------------------------------------------------------- */
.hl {
  color: var(--mint, #5ae6ab);
}
.scene-rail .station .beat.aside,
.beat.aside {
  font-size: 0.78em;
  font-style: italic;
  color: var(--mint, #5ae6ab);
  margin-top: -0.35em;
}
.inline-icon {
  display: inline-block;
  height: 1.05em;
  width: auto;
  vertical-align: -0.16em;
  margin: 0 0.18em 0 0.05em;
}
figcaption.credit a .inline-icon {
  height: 1.15em;
  margin-right: 0.3em;
}

/* r10 H1/H2: the header wordmark is the app's title-bar mark and a link to hapimatic.com */
.hud a.brand {
  pointer-events: auto;
  display: inline-block;
  line-height: 0;
  height: var(--r9-logo-h);
}
.hud a.brand img {
  display: block;
  height: var(--r9-logo-h);
  width: auto;
}
.hud a.brand:focus-visible {
  outline: 2px solid var(--hb-mint);
  outline-offset: 4px;
  border-radius: 4px;
}
/* r10 H4: the header band. Content scrolling up under it fades out over the band's last 48 px,
   so the wordmark, the path and the count never sit on top of a slide. The band repeats the
   page's own lattice (same layers as body, fixed), so it reads as the background, not a bar. */
body::before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: var(--r9-top);
  z-index: 2; /* over the deck (1), under the path and the header (20) */
  pointer-events: none;
  background-color: var(--hb-bg, #141414);
  background-image:
    repeating-linear-gradient(
      150deg,
      rgba(255, 255, 255, 0.035) 0 1px,
      transparent 1px 32px
    ),
    repeating-linear-gradient(
      210deg,
      rgba(255, 255, 255, 0.035) 0 1px,
      transparent 1px 32px
    );
  background-attachment: fixed;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 calc(100% - 48px),
    transparent
  );
  mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent);
}
@media (max-width: 760px) {
  body::before {
    height: calc(118px + env(safe-area-inset-top, 0px));
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 calc(100% - 36px),
      transparent
    );
    mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent);
  }
}
/* r10 H3: the way out of step-through on a phone */
.stepper-exit {
  position: absolute;
  top: max(10px, env(safe-area-inset-top, 0px));
  right: 12px;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  font: 400 30px/1 var(--hb-font);
  color: var(--hb-text);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--hb-line-strong);
  cursor: pointer;
}
/* r10 G6: the GitHub credit keeps its icon and link on one line */
.scene-spine.layout-github .object-video .credit a {
  display: inline;
  white-space: nowrap;
}
.inline-icon {
  width: 1.05em;
}

/* r10: an inline icon stays in the run of text even inside an object (whose img rules are block) */
.object .inline-icon,
.object figcaption.credit .inline-icon,
.scene .inline-icon {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  max-width: none;
  margin: 0 0.25em 0 0;
  vertical-align: -0.16em;
}

/* r10 P1/P2 (slide 2.0): the Pi 20 percent larger and a little lower; the clip flat, whole,
   and sharp-edged, so it reads as the real app window and the file is reusable. */
.scene-spine.layout-here .object-group.duo > .object-video {
  transform: none;
  align-self: start;
  width: min(100%, 58vw);
  justify-self: end;
}
.scene-spine.layout-here .object-group.duo > .object-video video {
  display: block;
  width: 100%;
  height: auto;
}
.scene-spine.layout-here .object-group.duo > .object-image {
  /* the trimmed photo has no margins now: 25vw puts the 85 mm board a fifth larger than before */
  width: min(100%, 25vw);
  margin-top: clamp(10px, 3vh, 36px);
}
.scene-spine.layout-here .object-group.duo > .object-image img {
  max-height: 44vh;
}

/* ── r10 About Me (A2, A4, B1 to B4) ──
   Build 0: the name and the two credential lines. Press 1 (build 1): the credentials leave and
   the Rewind line takes their place, large; the 2005 face dissolves in. Press 2 (build 2): the
   Mose Giganticus wordmark replaces the Rewind line, the lyric card fades in under it, the print
   appears and the 2005 face lands on it; build 3 (automatic) fades the face. */
.scene-spine.layout-about .text > p.beat:nth-of-type(2)::after {
  content: none;
  display: none;
}
.scene-spine.layout-about h2.statement + .beat.cred {
  margin-top: clamp(18px, 2.4vw, 38px);
}
.scene-spine.layout-about .beat .spd {
  font-family: "DM Sans", var(--hb-font);
  font-weight: 700;
  letter-spacing: 0.01em;
}
/* the swap happens on the stage and the desktop page; the phone's reading page shows every line */
@media (min-width: 761px) {
  .scene-spine.layout-about[data-build="1"] .beat.cred,
  .scene-spine.layout-about[data-build="2"] .beat.cred,
  .scene-spine.layout-about[data-build="3"] .beat.cred,
  .scene-spine.layout-about[data-build="2"] .beat.rewind,
  .scene-spine.layout-about[data-build="3"] .beat.rewind {
    display: none;
  }
}
.scene-spine.layout-about .beat.rewind {
  margin-top: clamp(18px, 2.4vw, 38px);
  font: 800 clamp(26px, 2.7vw, 46px) / 1.1 var(--hb-font);
  color: var(--hb-mint);
}
.scene-spine.layout-about .beat.mose {
  margin-top: clamp(18px, 2.4vw, 38px);
  align-items: center;
}
.scene-spine.layout-about .beat.mose .beat-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.scene-spine.layout-about .beat-icon.mose {
  width: auto;
  height: clamp(22px, 2.3vw, 40px);
  max-width: 100%;
  background: none;
  border: 0;
  padding: 0;
  border-radius: 0;
  object-fit: contain;
}
/* the lyric card hugs its lines: no left rule, the opening mark hangs outside the text, the
   attribution ends where the lyrics end */
.scene-spine.layout-about .lyric-card {
  width: fit-content;
  max-width: min(50vw, 100%);
}
.scene-spine.layout-about .lyric {
  position: relative;
  border-left: 0;
  padding-left: 0;
  margin-left: 0.55em;
}
.scene-spine.layout-about .lyric::before {
  position: absolute;
  left: -0.62em;
  top: 0.12em;
  margin: 0;
}
.scene-spine.layout-about .lyric-credit {
  text-align: right;
  margin-left: 0.55em;
}

/* ── r10 A1: the credential tiles, both 5:3, the SPD mark and Drexel at one size ── */
.scene-spine.layout-about .beat-icon.wide {
  width: 3.5em;
  height: 2.1em;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  object-fit: contain;
}
/* ── r10 T1: Act 2's name is the wordmark, on the line at the words' size ── */
.scene-spine.layout-title .beat .inline-icon {
  width: auto;
  height: 1.02em;
  vertical-align: -0.12em;
  margin: 0;
}
/* ── r10 M1/M2: the info dialog is about the event; the speaker and the company get a card each ── */
dialog.talk-info .info-head h2 {
  margin-top: 0;
}
dialog.talk-info .info-speaker,
dialog.talk-info .info-company {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--hb-line);
}
dialog.talk-info .info-photo {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
dialog.talk-info .info-logo {
  width: 100px;
  height: 60px;
  border-radius: 8px;
  flex: none;
}
dialog.talk-info .info-name {
  display: block;
  font: 700 16px/1.25 var(--hb-font);
  color: var(--hb-text);
}
dialog.talk-info .info-role {
  display: block;
  margin-top: 2px;
  font: 500 13px/1.35 var(--hb-font);
  color: var(--hb-text-secondary);
}
dialog.talk-info .info-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
dialog.talk-info .info-link {
  font: 600 11px/1 var(--hb-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hb-mint);
  text-decoration: none;
  border: 1px solid rgba(90, 230, 171, 0.5);
  border-radius: 999px;
  padding: 8px 12px;
}
dialog.talk-info .info-link:hover,
dialog.talk-info .info-link:focus-visible {
  background: rgba(90, 230, 171, 0.12);
}

/* ── r10 W2/W3: What is Hapimatic? The interface on the left under the title, the words on the
   right; the desktop about a tenth larger, the phone over the empty part of its lower right, the
   hapimatic.com link at the lower left where the phone was. ── */
@media (min-width: 761px) {
  .scene-spine.layout-platform .two {
    grid-template-columns: minmax(0, 1.78fr) minmax(0, 1fr) minmax(0, 1fr);
    column-gap: calc(var(--u) * 2.6);
  }
  .scene-spine.layout-platform .text > * {
    grid-column: 2 / 4;
  }
  .scene-spine.layout-platform .text > .statement,
  .scene-spine.layout-platform .text > .sub {
    grid-column: 1 / -1;
  }
  .scene-spine.layout-platform .text > .beat.with-label {
    grid-column: auto;
  }
  /* the six points fill the two right columns in order (the first labelled beat is the text
     block's fourth p, so even ones go left) */
  .scene-spine.layout-platform .text > .beat.with-label:nth-of-type(even) {
    grid-column: 2;
  }
  .scene-spine.layout-platform .text > .beat.with-label:nth-of-type(odd) {
    grid-column: 3;
  }
  .scene-spine.layout-platform .object-group.desk {
    grid-column: 1;
    grid-row: 3 / span 6;
    margin-left: 0;
    margin-right: calc(var(--u) * 1.2);
    align-self: start;
  }
  .scene-spine.layout-platform .object-group.desk > .object.phone {
    left: auto;
    right: -2%;
    bottom: -10%;
    width: 22%;
  }
  .scene-spine.layout-platform .object-group.desk > .credit {
    right: auto;
    left: 0;
    bottom: -8%;
  }
}

/* ── r10 G1/G2/G4/G5: GitHub. The clip fills the right side and sits level with the words; "is
   the" steps back so GitHub and shared work surface carry the title; the points lead with an
   emoji instead of a dot, and the rules between them are gone. ── */
.scene-spine.layout-github .statement .keep {
  font-size: 0.56em;
  font-weight: 500;
  color: var(--hb-text-secondary);
  letter-spacing: 0;
  vertical-align: 0.1em;
}
.scene-spine.layout-github .beat {
  padding-left: 0;
}
.scene-spine.layout-github .beat::before {
  content: none;
}
@media (min-width: 761px) {
  .scene-spine.layout-github .two {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
    column-gap: calc(var(--u) * 3);
    align-items: center;
  }
  .scene-spine.layout-github .two > .object-video {
    margin-top: 0;
    align-self: center;
  }
  .scene-spine.layout-github .beat + .beat {
    padding-top: 0;
    border-top: 0;
  }
  .scene-spine.layout-github .beat + .beat::before {
    content: none;
  }
}

/* ── r10 T2 (A): the contents list in the wordmark's weight, a little larger, so it stands out
   and sits with the mark on Act 2's line ── */
.scene-spine.layout-title .beat {
  font-weight: 700;
  font-size: clamp(20px, 2vw, 34px);
  letter-spacing: -0.015em;
  color: var(--hb-text);
}

/* r10: on a phone the lyric card takes the column, so the lines stay long */
@media (max-width: 760px) {
  .scene-spine.layout-about .lyric-card {
    width: auto;
    max-width: 100%;
  }
}

/* ── r10 S3: the two Pis at one scale (both boards are 85 mm wide: 876 of the bare photo's 893 px,
   995 of the HAT photo's 1043 px), the supply at its real size beside them (about 70 mm) ── */
@media (min-width: 761px) {
  .scene-rail .station .object-group.upgrade > .object.before img {
    width: 17vw;
    max-height: none;
  }
  .scene-rail
    .station
    .object-group.upgrade
    > .object-group.after
    > .object.photo
    img {
    width: 17.5vw; /* the trimmed HAT photo: 995 of 1043 px is the 85 mm board */
    max-height: none;
  }
  .scene-rail
    .station
    .object-group.upgrade
    > .object-group.after
    > .object.psu
    img {
    width: 14vw;
    max-height: none;
  }
}

/* r10 S4: the dates under station 4's screenshots show again (the figure used to clip them) */
.scene-rail.layout-objects-first
  [data-station="the-tool"]
  .object-group.strip
  > .object-image {
  max-height: none;
  overflow: visible;
}
.scene-rail.layout-objects-first
  [data-station="the-tool"]
  .object-group.strip
  > .object-image
  img {
  height: 33vh;
}

/* r10: the phone's reading page shows the closed loop at once (no fade), so every build is visible
   the moment the page is ready (verifier check 2) */
@media (max-width: 760px) {
  html:not(.is-stage)
    .scene-spine.layout-nexus[data-build="2"]
    .object-group.loopbox
    > .object.onloop.on {
    transition: none;
    transition-delay: 0s;
    opacity: 1;
  }
}

/* r10 P2 (the media lane's finding): the clip's "black left strip" was a letterbox, not the file:
   with width 100% and a 62vh cap, object-fit left black bands at wider screens. The clip now keeps
   its own size inside the cap, on a transparent box that hugs it; and the Pi cut-out drops its
   drop-shadow, which read as a dark halo. */
.scene-spine.layout-here .object-group.duo > .object-video {
  width: fit-content;
  max-width: 58vw;
  justify-self: end;
}
.scene-spine.layout-here .object-group.duo > .object-video video {
  width: auto;
  max-width: 100%;
  max-height: 62vh;
  height: auto;
  margin-inline: auto;
  background: transparent;
}
.scene-spine.layout-here .object-group.duo > .object-image img {
  filter: none;
}

/* ── go-live amendment (Matt, 2026-10-21): "shared work surface" stays on one line; the title steps
   down so it fits the left column at every width, and the two added points (hand-offs, gates) sit
   under the first three. ── */
.scene-spine.layout-github .statement {
  white-space: nowrap;
}
@media (min-width: 761px) {
  .scene-spine.layout-github .statement {
    font-size: calc(var(--u) * 3.3);
  }
  .scene-spine.layout-github .beat {
    font: 500 calc(var(--u) * 1.22) / 1.42 var(--hb-font);
    margin-top: calc(var(--u) * 1.2);
  }
  .scene-spine.layout-github .statement + .beat {
    margin-top: calc(var(--u) * 2);
  }
}
@media (max-width: 760px) {
  .scene-spine.layout-github .statement {
    font-size: clamp(26px, 7.4vw, 34px);
  }
}

/* ── round 11: the bench as a flat 2x3 grid of case panels (view "grid") and one page per case:
   the icon top-left, the title across the top, then one block per step (picture + caption). The
   grid sits left of the scene's object at the overview; a panel flies to the icon box as its
   page takes over, and flies back when the page leaves. (Variant A.) ── */
.scene-map.view-grid {
  --u: min(1vw, 1.7778vh);
  --case-icon: calc(var(--u) * 7);
}
.scene-map.view-grid .map-layout.case-layout {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: center;
  gap: calc(var(--u) * 3);
  margin-top: calc(var(--u) * 2.2);
}
.scene-map.view-grid.in-case .map-layout.case-layout {
  opacity: 0;
  visibility: hidden;
}
.scene-map.view-grid .map-layout.case-layout {
  will-change: transform, opacity;
}
.case-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 40;
  pointer-events: none;
  transform-origin: 0 0;
  will-change: transform;
  object-fit: contain;
}
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr; /* every card the height of the tallest (Matt, 2026-10-21) */
  gap: calc(var(--u) * 1.4);
}
.case-panel {
  position: relative;
  container-type: inline-size;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  align-items: center;
  gap: calc(var(--u) * 0.6);
  padding: calc(var(--u) * 0.9) calc(var(--u) * 0.6);
  border-radius: calc(var(--u) * 1.2);
  background: rgba(44, 44, 46, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.16);
  aspect-ratio: 1.12;
  box-sizing: border-box;
  min-height: 0;
  transition:
    border-color 300ms var(--ease),
    background-color 300ms var(--ease);
}
.case-panel .case-icon {
  width: 58%;
  max-height: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  align-self: center;
}
/* The label is exactly its authored lines (one or two): no wrapping inside a line, the type
   sized from the card's own width so the longest line fits at every stage size, and a two-line
   box on every card so the icons sit level across the row. */
.case-panel .case-label {
  margin: 0;
  text-align: center;
  white-space: nowrap;
  font: 700 clamp(9px, 7.4cqw, 26px) / 1.18 var(--hb-font);
  min-height: 2.36em;
  display: grid;
  align-content: center;
  color: var(--hb-text);
}
.case-panel.done {
  border-color: rgba(167, 139, 250, 0.4);
  background: rgba(30, 10, 62, 0.45);
}
.case-panel.now,
.case-panel.zoom {
  border-color: var(--hb-mint);
  background: rgba(90, 230, 171, 0.1);
  z-index: 3;
}
.case-stage {
  display: grid;
}
.case-stage > .case-layout,
.case-stage > .case-pages {
  grid-area: 1 / 1;
}
.case-pages {
  display: grid;
  align-content: start;
  margin-top: calc(var(--u) * 2.2);
  pointer-events: none;
  min-height: 0;
}
.case-page {
  grid-area: 1 / 1;
  align-self: start;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: calc(var(--u) * 1.8);
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
}
.case-page.shown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.case-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: calc(var(--u) * 2);
}
.case-head .case-icon {
  width: var(--case-icon);
  height: var(--case-icon);
  object-fit: contain;
  border-radius: calc(var(--u) * 1.2);
  background: rgba(44, 44, 46, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: calc(var(--u) * 0.9);
  box-sizing: border-box;
}
.case-title {
  margin: 0;
  font: 800 calc(var(--u) * 3) / 1.05 var(--hb-font);
  letter-spacing: -0.02em;
  color: var(--hb-text);
}
.case-blocks {
  display: grid;
  grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
  gap: calc(var(--u) * 1.4);
  align-content: start;
}
.case-blocks.n-6 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 1.4) calc(var(--u) * 1.8);
}
.case-block {
  margin: 0;
  display: grid;
  grid-template-rows: auto auto;
  align-content: start; /* every caption starts right under its picture: tops level across the row */
  gap: calc(var(--u) * 1);
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 320ms var(--ease),
    transform 320ms var(--ease);
}
.case-block.on {
  opacity: 1;
  transform: none;
}
.case-media {
  aspect-ratio: 4 / 3;
  border-radius: calc(var(--u) * 1);
  background: rgba(28, 28, 30, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: calc(var(--u) * 0.5);
  box-sizing: border-box;
}
.case-blocks.n-6 .case-media {
  aspect-ratio: 16 / 9;
}
.case-media > .object,
.case-media > .object-group {
  width: 100%;
  height: 100%;
  margin: 0;
  display: grid;
  place-items: center;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
/* The picture is sized to the box on both axes and fitted inside it (a picture taller than 4:3
   used to take the box's width, overrun its height, and get clipped: the board render, the cell). */
.case-media .object img,
.case-media .object svg,
.case-media .object video {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  margin: 0;
}
.case-media .object-group {
  grid-auto-flow: column;
  gap: calc(var(--u) * 0.6);
}
.case-media .object-group > .object {
  min-width: 0;
  min-height: 0;
  margin: 0;
}
.case-media .credit,
.case-media figcaption.credit {
  display: none;
}
.case-caption {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: calc(var(--u) * 0.6);
  margin: 0;
  font: 500 calc(var(--u) * 1.05) / 1.35 var(--hb-font);
  color: var(--hb-text);
}
.case-num {
  display: inline-grid;
  place-items: center;
  min-width: 1.9em;
  height: 1.9em;
  border-radius: 999px;
  background: rgba(90, 230, 171, 0.14);
  font: 700 calc(var(--u) * 0.8) / 1 var(--hb-mono);
  color: var(--hb-mint);
  letter-spacing: 0.04em;
}
.case-blocks.n-6 .case-caption {
  font-size: calc(var(--u) * 1.02);
}
.case-blocks.n-5 .case-caption {
  font-size: calc(var(--u) * 1.08);
}
/* the phone reading page: the grid stays, static; the pages are the unrolled cards below it */
@media (max-width: 760px) {
  html:not(.is-stage) .scene-map.view-grid .map-layout.case-layout {
    display: grid;
  }
  html:not(.is-stage) .scene-map.view-grid .case-pages {
    display: none;
  }
  html:not(.is-stage) .case-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  html:not(.is-stage) .case-panel {
    padding: 12px 8px;
    gap: 8px;
    aspect-ratio: auto;
    transition: none;
  }
  html:not(.is-stage) .case-panel .case-label {
    font-size: clamp(9px, 7.4cqw, 15px);
    line-height: 1.15;
  }
  html:not(.is-stage) .case-panel .case-icon {
    width: 52%;
  }
}

/* ── a short stage (the phone stepper's 1280x720, a 720p projector): the Questions page's chip, title,
   lists and pictures take every size from the stage unit, so nothing spills into its neighbour
   (Matt, 2026-10-21: the chip ran under the title, the answers over the next question, the phone
   picture off the bottom). ── */
@media (min-width: 761px) and (max-height: 800px) {
  .scene-spine.layout-wrap .two {
    /* a definite height, so the third row is the remainder and the pictures scale to it */
    height: calc(100svh - var(--u) * 10.5);
    grid-template-rows: auto auto minmax(0, 1fr);
  }
  .scene-spine.layout-wrap .object-group.links {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    align-content: start;
    min-height: 0;
  }
  .scene-spine.layout-wrap .object-group.thanks4 > .object-group.who {
    font-size: calc(var(--u) * 1);
    padding: 0.45em 1.1em 0.45em 0.45em;
  }
  .scene-spine.layout-wrap .object-group.who > .object.wordmark {
    font-size: calc(var(--u) * 1.25);
  }
  .scene-spine.layout-wrap .text > .statement {
    font-size: calc(var(--u) * 4.4);
  }
  .scene-spine.layout-wrap .object-group.core,
  .scene-spine.layout-wrap .object-group.links,
  .scene-spine.layout-wrap .object-group.faq {
    margin-top: calc(var(--u) * 1.6);
    min-height: 0;
  }
  .scene-spine.layout-wrap .object-group.faq {
    font-size: calc(var(--u) * 0.92);
    row-gap: 6px;
  }
  .scene-spine.layout-wrap .object-table.qlist table,
  .scene-spine.layout-wrap .object-table.qlist tbody {
    /* rows take their words' height; the list is sized to fit the column at this stage */
    grid-auto-rows: auto;
    grid-template-rows: none;
    height: auto;
  }
  .scene-spine.layout-wrap .object-table.qlist tr {
    padding: 0.24em 0;
    align-content: start;
  }
  .scene-spine.layout-wrap .object-table.qlist td:nth-child(2) {
    font-size: calc(var(--u) * 1.28);
  }
  .scene-spine.layout-wrap .object-table.qlist td:nth-child(3) {
    font-size: calc(var(--u) * 1);
    line-height: 1.25;
    margin-top: 0.12em;
  }
  .scene-spine.layout-wrap .object-group.links > .object.phone {
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }
  .scene-spine.layout-wrap .object-group.links > .object.phone img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top;
  }
  .scene-spine.layout-wrap .object-group.core > .credit {
    font-size: calc(var(--u) * 1.1);
  }
}
/* the seven answer pages on a short stage: the headline and the bullets a step down, so the last
   bullet stays above the bottom edge (720p showed the fifth one cut) */
@media (min-width: 761px) and (max-height: 800px) {
  .scene-answer {
    padding-top: 10vh;
  }
  .scene-answer .answer {
    font-size: calc(var(--u) * 2.1);
    margin-bottom: 10px;
  }
  .scene-answer .points {
    font-size: calc(var(--u) * 1.22);
    line-height: 1.4;
    gap: 6px;
  }
  .scene-answer .object img,
  .scene-answer .object video {
    max-height: 46vh;
  }
}

/* ══ round 12 (Matt, 2026-10-21 05:1xZ) ══ */
/* (1) About: the heading never moves between the builds (the scene's lines start at the top
   instead of centring on a content that changes height); the two faces share one frame of one
   size; the lyric fills its card; the wordmark a tenth smaller, on the name's left edge, and the
   whole group closer to the name. */
@media (min-width: 761px) {
  .scene-spine.layout-about {
    align-content: start;
    padding-top: 15vh;
  }
  .scene-spine.layout-about .two {
    align-items: start;
  }
  .scene-spine.layout-about .object-stack {
    width: min(36vw, 62vh);
    align-self: start;
  }
  .scene-spine.layout-about .lyric-card {
    width: 100%;
    max-width: min(50vw, 100%);
  }
  .scene-spine.layout-about .quote .lyric {
    max-width: none;
  }
  .scene-spine.layout-about .beat.mose {
    margin-top: clamp(14px, 1.6vw, 26px);
    padding-left: 0;
    margin-left: 0;
  }
  .scene-spine.layout-about .beat-icon.mose {
    height: clamp(20px, 2.07vw, 36px);
    margin-left: 0;
  }
  .scene-spine.layout-about .beat.mose + .quote,
  .scene-spine.layout-about .quote {
    margin-top: clamp(12px, 1.4vw, 24px);
  }
}
/* (2) here we are: the words and the Pi end where the clip ends; nothing hangs below it */
@media (min-width: 761px) {
  .scene-spine.layout-here .two {
    align-items: start;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .scene-spine.layout-here .object-group.duo > .object-video {
    align-self: start;
  }
  .scene-spine.layout-here .object-group.duo > .object-image {
    align-self: end;
    justify-self: start;
  }
  .scene-spine.layout-here .object-group.duo > .object-image img {
    max-height: 30vh;
  }
}
/* (4) GitHub: the title's top on the picture's top; the five points share the column's height
   evenly */
@media (min-width: 761px) {
  .scene-spine.layout-github .two {
    align-items: start;
  }
  .scene-spine.layout-github .two > .object-video {
    align-self: start;
  }
  .scene-spine.layout-github .two > .text {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    min-height: 0;
  }
  .scene-spine.layout-github .two > .text > .statement {
    flex: none;
    margin-bottom: calc(var(--u) * 1);
  }
  .scene-spine.layout-github .two > .text > .beat {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    margin-top: 0;
    min-height: 0;
  }
  .scene-spine.layout-github .two > .text > .statement + .beat {
    margin-top: 0;
  }
}
/* (6) station 3: the chip under the bare Pi is not clipped by its picture's box */
.scene-rail .station .object-group.upgrade,
.scene-rail .station .object-group.upgrade > .object {
  overflow: visible;
}
/* (8) a breath between "&" and an inline mark */
.beat .inline-icon {
  margin-left: 0.22em;
}
/* (10) the bench title on one line where it fits (the engine's 14em cap off); the words after
   "development" are tied, so a narrower stage breaks there */
.scene-map.view-grid > .text .statement {
  max-width: none; /* one line on a wide stage; balanced lines where it must wrap */
}
/* (11) the case page: the section heading stays above, so the case title is a subtitle: a mono
   kicker ("Case 2 of 6") over a 2.1-unit title beside a smaller icon tile */
.scene-map.view-grid {
  --case-icon: calc(var(--u) * 5.2);
}
.case-head {
  gap: calc(var(--u) * 1.4);
}
.case-head .case-icon {
  padding: calc(var(--u) * 0.6);
}
.case-headtext {
  display: grid;
  gap: calc(var(--u) * 0.35);
  min-width: 0;
}
.case-kicker {
  margin: 0;
  font: 700 calc(var(--u) * 0.85) / 1 var(--hb-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hb-mint);
}
.case-title {
  font: 700 calc(var(--u) * 2.1) / 1.1 var(--hb-font);
  letter-spacing: -0.01em;
  color: var(--hb-text);
}
.case-page {
  gap: calc(var(--u) * 1.4);
}
/* (15) What's Next: the statement's tail fades in at its build */
.statement .late {
  opacity: 0;
  transition: opacity 700ms var(--ease);
}
.statement .late.on {
  opacity: 1;
}
/* (16) Questions: the heading at the left, the chip at the right across the second and third
   columns, the FAQ column a little narrower and the columns further apart */
@media (min-width: 761px) {
  .scene-spine.layout-wrap .two {
    grid-template-columns: minmax(0, 40fr) minmax(0, 17fr) minmax(0, 34fr);
    column-gap: calc(var(--u) * 4);
  }
  .scene-spine.layout-wrap .text > .eyebrow-xl {
    grid-column: 1;
    justify-self: start;
  }
  .scene-spine.layout-wrap .text > .statement {
    grid-column: 1;
    justify-self: start;
    text-align: left;
  }
  .scene-spine.layout-wrap .object-group.thanks4 > .object-group.who {
    grid-column: 2 / 4;
    justify-self: end;
  }
}
/* (17) the answer pages: the question takes the band's full width, clear of the button */
.scene-answer .qtext {
  flex: 1 1 auto;
  min-width: 0;
}
.scene-answer .qtext .statement.compact {
  max-width: none;
}
/* (1) both faces share one frame: the rewind build no longer grows the card */
@media (min-width: 761px) {
  .scene-spine.layout-about[data-build="1"] .object-stack {
    transform: none;
  }
}
/* (15) Other Labs: the mesh fills its column with no frame around it (the drawing carries the labs);
   the dashed violet frame was on the inner figure, the group's frame on the group */
.scene-spine.layout-next .object-group.pods > .object-group.labs,
.scene-spine.layout-next .object-group.pods > .object-group.labs > .object {
  padding: 0;
  border: 0;
  background: none;
}

/* ══ round 12 picks (Matt, 2026-10-21 06:2xZ) ══ */
/* GITHUB-C: a thin mint rule under the title; the emoji hangs in a gutter so the sentences share one left edge */
@media (min-width: 761px) {
  .scene-spine.layout-github .two > .text > .statement {
    padding-bottom: calc(var(--u) * 0.8);
    border-bottom: 2px solid var(--hb-mint);
  }
  .scene-spine.layout-github .two > .text > .beat .beat-text {
    display: block;
    padding-left: 1.7em;
    text-indent: -1.7em;
  }
}
/* IDEA-RAIL: the next station fades out at the stage's right edge instead of being cut mid-word */
@media (min-width: 761px) {
  .scene-rail .window {
    -webkit-mask-image: linear-gradient(90deg, #000 0 84%, transparent 99.5%);
    mask-image: linear-gradient(90deg, #000 0 84%, transparent 99.5%);
  }
}
/* IDEA-QA: the ALL QUESTIONS button as a mint pill, like the deck's other pills */
.scene-answer .qback {
  border-color: rgba(90, 230, 171, 0.55);
  color: var(--hb-mint);
  background: rgba(90, 230, 171, 0.08);
}
/* IDEA-HUD: the section labels under the dots a touch larger on a 720p stage (the phone stepper) */
@media (min-width: 761px) and (max-height: 800px) {
  .hud .step {
    font-size: 11px;
  }
}

/* Round 14: a clip that cannot play is replaced by its poster (engine.js clipToPoster); the
   picture takes the clip's own look on the two video slides. */
.scene-spine.layout-github .object-video img.clip-poster {
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--hb-line-strong);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.scene-spine.layout-here .object-group.duo > .object-video img.clip-poster {
  width: auto;
  max-width: 100%;
  max-height: 62vh;
  height: auto;
  margin-inline: auto;
}

/* ── Round 14 (Matt's dry run, 2026-10-21) ── the About slide.
   (1) The 2006 face lands on his face in the show photo again. The landing is a transform
   relative to the face card's own box, and round 12 moved that box (the card now starts at the
   top of its column and keeps one size), so the old transform landed it on the head behind
   him. Re-measured on the stage page: 117 px high and 3 px left at 1920x1080, 57 px high and
   3 px left at 1280x720 (the short stage sizes the column in part in px, hence two rules).
   (2) The Mose Giganticus wordmark and the lyric card move down into the middle of the space
   between his name and the foot of the print. `translate` (not `transform`) keeps the beats'
   own fade-in transforms untouched. */
/* engine.js placeAbout() measures both on every screen (--land-x/--land-y on the card,
   --mose-y on the scene); the values here are the 1920x1080 and 1280x720 measurements, used
   until the first measurement lands. */
@media (min-width: 761px) {
  .scene-spine.layout-about[data-build="2"] .object-stack,
  .scene-spine.layout-about[data-build="3"] .object-stack {
    transform: translate(var(--land-x, 5.15vw), var(--land-y, 3.64vh))
      rotate(-13deg) scale(0.1772);
  }
  .scene-spine.layout-about .text > .beat.mose,
  .scene-spine.layout-about .text > .quote {
    translate: 0 var(--mose-y, 15.6vh);
  }
}
@media (min-width: 761px) and (max-height: 800px) {
  .scene-spine.layout-about[data-build="2"] .object-stack,
  .scene-spine.layout-about[data-build="3"] .object-stack {
    transform: translate(var(--land-x, 5.22vw), var(--land-y, 0.73vh))
      rotate(-13deg) scale(0.1772);
  }
  .scene-spine.layout-about .text > .beat.mose,
  .scene-spine.layout-about .text > .quote {
    translate: 0 var(--mose-y, 10.5vh);
  }
}