/* lanea.css — Lane A (#5867): slides 6 to 8 of the Penn ESE5180 deck. Loaded after ring-r10.css.
   Slide 7 (build-bench): layouts lanea-m1 (spotlight), lanea-m2 (growing list), lanea-m3 (pages of two).
   Slide 8 (bench): layouts lanea-cases-m1 and lanea-cases-m2. Slide 6 (bench-nexus): the lanea-ring layers.
   The scene picks its variant by its layout name, so a variant switch is a one-word change in the builder. */

/* ═══ Lane A (#5867) — slide 7, "You build its bench" ═══
   Shared frame for the three variants: the headline across the top at full slide width, both sentences on
   one line (Matt's headline rule); under it the points left and the desktop viewport right. Variants differ
   only in how the five points take turns. */
/* the headline holds still from build to build: the slide hangs from the top instead of re-centring as
   each point's height changes */
.scene-spine[class*="layout-lanea-m"] {
  align-content: start;
}
.scene-spine[class*="layout-lanea-m"] .text {
  display: contents;
}
.scene-spine[class*="layout-lanea-m"] .two {
  grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 5.15fr);
  grid-template-rows: auto auto auto auto auto auto auto auto 1fr;
  column-gap: 0.9vw;
  row-gap: 0;
  align-items: start;
}
.scene-spine[class*="layout-lanea-m"] .eyebrow-xl {
  grid-column: 1 / 6;
  grid-row: 1;
}
.scene-spine[class*="layout-lanea-m"] .statement {
  grid-column: 1 / -1;
  grid-row: 2;
  max-width: none;
  font-size: min(3.35vw, 5.95vh);
  margin-bottom: 1.6vh;
}
@media (min-width: 761px) {
  /* Lane L: the tiles and the viewport sit a little further below the headline */
  .scene-spine[class*="layout-lanea-m"] .statement {
    margin-bottom: 3.6vh;
  }
}
/* Matt's headline rule: across the top at full slide width, one line when it fits (both sentences fit) */
.scene-spine[class*="layout-lanea-m"] .statement {
  white-space: nowrap;
}
.scene-spine[class*="layout-lanea-m"] .statement .sentence {
  display: inline;
}
.scene-spine[class*="layout-lanea-m"] .statement .sentence + .sentence::before {
  content: " ";
}
.scene-spine[class*="layout-lanea-m"] .two > .object.lanea-desk {
  grid-column: 6;
  grid-row: 3 / 10;
  justify-self: end;
  align-self: start;
  margin-left: 1.6vw;
  border-radius: 14px;
  background: none;
  box-shadow:
    0 18px 60px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}
.scene-spine[class*="layout-lanea-m"] .two > .object.lanea-desk img {
  display: block;
  height: min(
    60vh,
    34vw
  ); /* the image fits its column: 1.229 wide per unit tall */
  width: auto;
  max-height: none;
  border-radius: 14px;
}
/* the shared pieces of a point */
.scene-spine[class*="layout-lanea-m"] .beat {
  max-width: none;
  margin: 0;
}
.scene-spine[class*="layout-lanea-m"] .beat .beat-label {
  font: 800 clamp(11px, 0.9vw, 17px) / 1 var(--hb-mono);
  letter-spacing: 0.14em;
  color: var(--hb-mint);
  border-color: rgba(90, 230, 171, 0.45);
  background: rgba(90, 230, 171, 0.08);
  justify-self: start;
  align-self: center;
}
.scene-spine[class*="layout-lanea-m"] [class*="lanea-pt"] {
  grid-column: 1 / 6;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 1.2vw;
  row-gap: 0.6vh;
  align-items: center;
}
.scene-spine[class*="layout-lanea-m"] [class*="lanea-pt"] .beat-icon {
  grid-row: 1 / 3;
  grid-column: 1;
  height: auto;
  width: 6.2vw;
  border-radius: 16px;
  background: var(--hb-surface, #2c2c2e);
}
.scene-spine[class*="layout-lanea-m"] [class*="lanea-pt"] .beat-label {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
}
.scene-spine[class*="layout-lanea-m"] [class*="lanea-pt"] .beat-text {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  font: 750 min(1.95vw, 3.5vh) / 1.15 var(--hb-font);
  color: var(--hb-text);
  letter-spacing: -0.01em;
}
.scene-spine[class*="layout-lanea-m"] [class*="lanea-body"] {
  grid-column: 1 / 6;
  font: 500 min(1.36vw, 2.45vh) / 1.42 var(--hb-font);
  color: var(--hb-text-secondary);
  margin-top: 1.6vh;
}
.scene-spine[class*="layout-lanea-m"] [class*="lanea-ex"] {
  grid-column: 1 / 6;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.8vw;
  align-items: baseline;
  margin-top: 1.4vh;
  padding: 1.1vh 1vw;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
  font: 500 min(1.25vw, 2.25vh) / 1.42 var(--hb-font);
  color: var(--hb-text-secondary);
}
.scene-spine[class*="layout-lanea-m"] [class*="lanea-ex"] .beat-label {
  color: var(--hb-text);
  border-color: rgba(255, 255, 255, 0.25);
  background: none;
  align-self: start;
  margin-top: 0.15em;
}
/* the overview rows (build 0): icon, label, the one-line version */
.scene-spine[class*="layout-lanea-m"] [class*="lanea-idx"] {
  grid-column: 1 / 6;
  display: grid;
  grid-template-columns: auto 9.2em minmax(0, 1fr);
  column-gap: 1vw;
  align-items: center;
  margin-top: 1.2vh;
  font: 500 min(1.25vw, 2.25vh) / 1.35 var(--hb-font);
  color: var(--hb-text-secondary);
}
.scene-spine[class*="layout-lanea-m"] [class*="lanea-idx"] .beat-icon {
  height: auto;
  width: 4.4vw;
  border-radius: 12px;
  background: var(--hb-surface, #2c2c2e);
}
.scene-spine[class*="layout-lanea-m"] [class*="lanea-idx"] .beat-label {
  min-width: 7.4em;
  text-align: center;
}
.scene-spine[class*="layout-lanea-m"] .lanea-idx1 {
  grid-row: 3;
}
.scene-spine[class*="layout-lanea-m"] .lanea-idx2 {
  grid-row: 4;
}
.scene-spine[class*="layout-lanea-m"] .lanea-idx3 {
  grid-row: 5;
}
.scene-spine[class*="layout-lanea-m"] .lanea-idx4 {
  grid-row: 6;
}
.scene-spine[class*="layout-lanea-m"] .lanea-idx5 {
  grid-row: 7;
}
@keyframes lanea-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── M1 spotlight: build 0 lists the five; each build then opens one point in full, the five as chips above ── */
.scene-spine.layout-lanea-m1 [class*="lanea-pt"],
.scene-spine.layout-lanea-m1 [class*="lanea-body"],
.scene-spine.layout-lanea-m1 [class*="lanea-ex"] {
  display: none;
}
.scene-spine.layout-lanea-m1:not([data-build="0"]) [class*="lanea-idx"] {
  grid-row: 3;
  grid-template-columns: 1fr;
  justify-items: center;
  row-gap: 0.7vh;
  margin: 0 0 6vh; /* Lane L: clear room between the five tiles and the opened point */
  padding: 1vh 0.4vw 1.2vh;
  border-radius: 14px;
  border: 1px solid transparent;
  opacity: 0.45;
  transition:
    opacity 400ms var(--ease),
    border-color 400ms var(--ease),
    background 400ms var(--ease);
}
.scene-spine.layout-lanea-m1:not([data-build="0"])
  [class*="lanea-idx"]
  .beat-text {
  display: none;
}
.scene-spine.layout-lanea-m1:not([data-build="0"])
  [class*="lanea-idx"]
  .beat-icon {
  width: 4.6vw;
}
.scene-spine.layout-lanea-m1:not([data-build="0"])
  [class*="lanea-idx"]
  .beat-label {
  min-width: 0;
}
.scene-spine.layout-lanea-m1:not([data-build="0"]) .lanea-idx1 {
  grid-column: 1;
}
.scene-spine.layout-lanea-m1:not([data-build="0"]) .lanea-idx2 {
  grid-column: 2;
}
.scene-spine.layout-lanea-m1:not([data-build="0"]) .lanea-idx3 {
  grid-column: 3;
}
.scene-spine.layout-lanea-m1:not([data-build="0"]) .lanea-idx4 {
  grid-column: 4;
}
.scene-spine.layout-lanea-m1:not([data-build="0"]) .lanea-idx5 {
  grid-column: 5;
}
.scene-spine.layout-lanea-m1 [class*="lanea-pt"] {
  grid-row: 4;
}
.scene-spine.layout-lanea-m1 [class*="lanea-body"] {
  grid-row: 5;
}
.scene-spine.layout-lanea-m1 [class*="lanea-ex"] {
  grid-row: 6;
}

.scene-spine.layout-lanea-m1[data-build="1"] .lanea-idx1 {
  opacity: 1;
  border-color: rgba(90, 230, 171, 0.55);
  background: rgba(90, 230, 171, 0.07);
}
.scene-spine.layout-lanea-m1[data-build="1"] .lanea-pt1 {
  display: grid;
  animation: lanea-in 520ms var(--ease) both;
}
.scene-spine.layout-lanea-m1[data-build="1"] .lanea-body1 {
  display: block;
  animation: lanea-in 520ms var(--ease) 90ms both;
}
.scene-spine.layout-lanea-m1[data-build="1"] .lanea-ex1 {
  display: grid;
  animation: lanea-in 520ms var(--ease) 180ms both;
}
.scene-spine.layout-lanea-m1[data-build="2"] .lanea-idx2 {
  opacity: 1;
  border-color: rgba(90, 230, 171, 0.55);
  background: rgba(90, 230, 171, 0.07);
}
.scene-spine.layout-lanea-m1[data-build="2"] .lanea-pt2 {
  display: grid;
  animation: lanea-in 520ms var(--ease) both;
}
.scene-spine.layout-lanea-m1[data-build="2"] .lanea-body2 {
  display: block;
  animation: lanea-in 520ms var(--ease) 90ms both;
}
.scene-spine.layout-lanea-m1[data-build="2"] .lanea-ex2 {
  display: grid;
  animation: lanea-in 520ms var(--ease) 180ms both;
}
.scene-spine.layout-lanea-m1[data-build="3"] .lanea-idx3 {
  opacity: 1;
  border-color: rgba(90, 230, 171, 0.55);
  background: rgba(90, 230, 171, 0.07);
}
.scene-spine.layout-lanea-m1[data-build="3"] .lanea-pt3 {
  display: grid;
  animation: lanea-in 520ms var(--ease) both;
}
.scene-spine.layout-lanea-m1[data-build="3"] .lanea-body3 {
  display: block;
  animation: lanea-in 520ms var(--ease) 90ms both;
}
.scene-spine.layout-lanea-m1[data-build="3"] .lanea-ex3 {
  display: grid;
  animation: lanea-in 520ms var(--ease) 180ms both;
}
.scene-spine.layout-lanea-m1[data-build="4"] .lanea-idx4 {
  opacity: 1;
  border-color: rgba(90, 230, 171, 0.55);
  background: rgba(90, 230, 171, 0.07);
}
.scene-spine.layout-lanea-m1[data-build="4"] .lanea-pt4 {
  display: grid;
  animation: lanea-in 520ms var(--ease) both;
}
.scene-spine.layout-lanea-m1[data-build="4"] .lanea-body4 {
  display: block;
  animation: lanea-in 520ms var(--ease) 90ms both;
}
.scene-spine.layout-lanea-m1[data-build="4"] .lanea-ex4 {
  display: grid;
  animation: lanea-in 520ms var(--ease) 180ms both;
}
.scene-spine.layout-lanea-m1[data-build="5"] .lanea-idx5 {
  opacity: 1;
  border-color: rgba(90, 230, 171, 0.55);
  background: rgba(90, 230, 171, 0.07);
}
.scene-spine.layout-lanea-m1[data-build="5"] .lanea-pt5 {
  display: grid;
  animation: lanea-in 520ms var(--ease) both;
}
.scene-spine.layout-lanea-m1[data-build="5"] .lanea-body5 {
  display: block;
  animation: lanea-in 520ms var(--ease) 90ms both;
}
.scene-spine.layout-lanea-m1[data-build="5"] .lanea-ex5 {
  display: grid;
  animation: lanea-in 520ms var(--ease) 180ms both;
}

/* ── M2 growing list: all five titles from the start; the current one opens, the rest stay one line ── */
.scene-spine.layout-lanea-m2 [class*="lanea-pt"][data-at] {
  opacity: 0.4;
  transform: none;
  margin-top: 1.3vh;
}
.scene-spine.layout-lanea-m2 [class*="lanea-pt"][data-at].on {
  opacity: 0.6;
}
.scene-spine.layout-lanea-m2[data-build="0"] [class*="lanea-pt"][data-at] {
  opacity: 0.9;
}
.scene-spine.layout-lanea-m2 [class*="lanea-pt"] .beat-icon {
  width: 3.3vw;
  border-radius: 10px;
}
.scene-spine.layout-lanea-m2 [class*="lanea-pt"] .beat-label {
  font-size: clamp(10px, 0.8vw, 15px);
  padding: 3px 6px;
}
.scene-spine.layout-lanea-m2 [class*="lanea-pt"] .beat-text {
  font-size: min(1.4vw, 2.5vh);
}
.scene-spine.layout-lanea-m2 [class*="lanea-body"],
.scene-spine.layout-lanea-m2 [class*="lanea-ex"] {
  display: none;
}
.scene-spine.layout-lanea-m2 [class*="lanea-body"] {
  margin-top: 0.8vh;
  font-size: min(1.3vw, 2.35vh);
  padding-left: 4vw;
}
.scene-spine.layout-lanea-m2 [class*="lanea-ex"] {
  margin: 0.8vh 0 0.6vh 4vw;
  font-size: min(1.25vw, 2.25vh);
  padding: 0.8vh 0.8vw;
}

.scene-spine.layout-lanea-m2[data-build="1"] .lanea-pt1 {
  opacity: 1;
}
.scene-spine.layout-lanea-m2[data-build="1"] .lanea-body1 {
  display: block;
  animation: lanea-in 520ms var(--ease) both;
}
.scene-spine.layout-lanea-m2[data-build="1"] .lanea-ex1 {
  display: grid;
  animation: lanea-in 520ms var(--ease) 90ms both;
}
.scene-spine.layout-lanea-m2[data-build="2"] .lanea-pt2 {
  opacity: 1;
}
.scene-spine.layout-lanea-m2[data-build="2"] .lanea-body2 {
  display: block;
  animation: lanea-in 520ms var(--ease) both;
}
.scene-spine.layout-lanea-m2[data-build="2"] .lanea-ex2 {
  display: grid;
  animation: lanea-in 520ms var(--ease) 90ms both;
}
.scene-spine.layout-lanea-m2[data-build="3"] .lanea-pt3 {
  opacity: 1;
}
.scene-spine.layout-lanea-m2[data-build="3"] .lanea-body3 {
  display: block;
  animation: lanea-in 520ms var(--ease) both;
}
.scene-spine.layout-lanea-m2[data-build="3"] .lanea-ex3 {
  display: grid;
  animation: lanea-in 520ms var(--ease) 90ms both;
}
.scene-spine.layout-lanea-m2[data-build="4"] .lanea-pt4 {
  opacity: 1;
}
.scene-spine.layout-lanea-m2[data-build="4"] .lanea-body4 {
  display: block;
  animation: lanea-in 520ms var(--ease) both;
}
.scene-spine.layout-lanea-m2[data-build="4"] .lanea-ex4 {
  display: grid;
  animation: lanea-in 520ms var(--ease) 90ms both;
}
.scene-spine.layout-lanea-m2[data-build="5"] .lanea-pt5 {
  opacity: 1;
}
.scene-spine.layout-lanea-m2[data-build="5"] .lanea-body5 {
  display: block;
  animation: lanea-in 520ms var(--ease) both;
}
.scene-spine.layout-lanea-m2[data-build="5"] .lanea-ex5 {
  display: grid;
  animation: lanea-in 520ms var(--ease) 90ms both;
}

/* ── M3 pages of two: Access and Knowledge, then Discovery and Rules, then Memory, each in full ── */
.scene-spine.layout-lanea-m3 [class*="lanea-idx"] {
  display: none;
}
.scene-spine.layout-lanea-m3[data-build="0"] [class*="lanea-idx"] {
  display: grid;
}
.scene-spine.layout-lanea-m3 [class*="lanea-pt"] {
  margin-top: 1.4vh;
}
.scene-spine.layout-lanea-m3 [class*="lanea-pt"] .beat-icon {
  width: 4.2vw;
  border-radius: 12px;
}
.scene-spine.layout-lanea-m3 [class*="lanea-pt"] .beat-text {
  font-size: min(1.6vw, 2.9vh);
}
.scene-spine.layout-lanea-m3 [class*="lanea-body"] {
  font-size: min(1.3vw, 2.35vh);
  margin-top: 0.8vh;
}
.scene-spine.layout-lanea-m3 [class*="lanea-ex"] {
  font-size: min(1.25vw, 2.25vh);
  margin-top: 0.7vh;
  padding: 0.7vh 0.8vw;
}
.scene-spine.layout-lanea-m3[data-build="1"]
  :is(
    .lanea-pt3,
    .lanea-body3,
    .lanea-ex3,
    .lanea-pt4,
    .lanea-body4,
    .lanea-ex4,
    .lanea-pt5,
    .lanea-body5,
    .lanea-ex5
  ) {
  display: none;
}
.scene-spine.layout-lanea-m3[data-build="2"]
  :is(
    .lanea-pt3,
    .lanea-body3,
    .lanea-ex3,
    .lanea-pt4,
    .lanea-body4,
    .lanea-ex4,
    .lanea-pt5,
    .lanea-body5,
    .lanea-ex5
  ) {
  display: none;
}
.scene-spine.layout-lanea-m3[data-build="3"]
  :is(
    .lanea-pt1,
    .lanea-body1,
    .lanea-ex1,
    .lanea-pt2,
    .lanea-body2,
    .lanea-ex2,
    .lanea-pt5,
    .lanea-body5,
    .lanea-ex5
  ) {
  display: none;
}
.scene-spine.layout-lanea-m3[data-build="4"]
  :is(
    .lanea-pt1,
    .lanea-body1,
    .lanea-ex1,
    .lanea-pt2,
    .lanea-body2,
    .lanea-ex2,
    .lanea-pt5,
    .lanea-body5,
    .lanea-ex5
  ) {
  display: none;
}
.scene-spine.layout-lanea-m3[data-build="5"]
  :is(
    .lanea-pt1,
    .lanea-body1,
    .lanea-ex1,
    .lanea-pt2,
    .lanea-body2,
    .lanea-ex2,
    .lanea-pt3,
    .lanea-body3,
    .lanea-ex3,
    .lanea-pt4,
    .lanea-body4,
    .lanea-ex4
  ) {
  display: none;
}
.scene-spine.layout-lanea-m3[data-build="0"]
  :is([class*="lanea-pt"], [class*="lanea-body"], [class*="lanea-ex"]) {
  display: none;
}

/* slide 7 on the phone reading page: every build at once, so all five points in full, in one column, still;
   the overview chips go, the headline wraps at the phone size, the screenshot spans the column */
@media (max-width: 760px) {
  /* a plain block, so the stage's grid placements (the points share rows there) do not apply */
  html:not(.is-stage) .scene-spine[class*="layout-lanea-m"] .two {
    display: block;
  }
  html:not(.is-stage) .scene-spine[class*="layout-lanea-m"] .statement {
    font-size: clamp(32px, 9.5vw, 44px);
  }
  html:not(.is-stage)
    .scene-spine[class*="layout-lanea-m"]
    .statement
    .sentence {
    display: block; /* one sentence per line: the phone breaks only at the boundary */
  }
  html:not(.is-stage)
    .scene-spine[class*="layout-lanea-m"]
    .statement
    .sentence
    + .sentence::before {
    content: none;
  }
  html:not(.is-stage) .scene-spine[class*="layout-lanea-m"] .statement {
    white-space: normal;
  }
  html:not(.is-stage)
    .scene-spine[class*="layout-lanea-m"]
    [class*="lanea-idx"] {
    display: none;
  }
  html:not(.is-stage) .scene-spine[class*="layout-lanea-m"] [class*="lanea-pt"],
  html:not(.is-stage)
    .scene-spine[class*="layout-lanea-m"]
    [class*="lanea-ex"] {
    display: grid;
    opacity: 1;
    animation: none;
  }
  html:not(.is-stage)
    .scene-spine[class*="layout-lanea-m"]
    [class*="lanea-body"] {
    display: block;
    opacity: 1;
    animation: none;
    padding-left: 0;
    font-size: 17px;
  }
  html:not(.is-stage)
    .scene-spine[class*="layout-lanea-m"]
    [class*="lanea-pt"] {
    margin-top: 22px;
  }
  html:not(.is-stage)
    .scene-spine[class*="layout-lanea-m"]
    [class*="lanea-pt"]
    .beat-icon {
    width: 64px;
  }
  html:not(.is-stage)
    .scene-spine[class*="layout-lanea-m"]
    [class*="lanea-pt"]
    .beat-text {
    font-size: 20px;
  }
  html:not(.is-stage)
    .scene-spine[class*="layout-lanea-m"]
    [class*="lanea-ex"] {
    margin-left: 0;
    font-size: 15px;
  }
  html:not(.is-stage)
    .scene-spine[class*="layout-lanea-m"]
    .two
    > .object.lanea-desk {
    margin: 18px 0 0;
    justify-self: stretch;
  }
  html:not(.is-stage)
    .scene-spine[class*="layout-lanea-m"]
    .two
    > .object.lanea-desk
    img {
    width: 100%;
    height: auto;
  }
}

/* ═══ Lane A (#5867) — slide 8, "AI Hardware Development Examples": six cases, three detailed ═══
   The grid narrows and the pictures widen; the three detailed cases sit on the top row, the three
   listed ones under them (a click opens them, Next never does). */
@media (min-width: 761px) {
  .scene-map.view-grid[class*="layout-lanea-cases"] .map-layout.case-layout {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: calc(var(--u) * 2.6);
  }
  .scene-map.view-grid[class*="layout-lanea-cases"] .case-grid {
    gap: calc(var(--u) * 1.1);
  }
  .scene-map.view-grid[class*="layout-lanea-cases"] .case-panel {
    aspect-ratio: 1.2;
    cursor: pointer;
  }
  .scene-map.view-grid[class*="layout-lanea-cases"] .case-panel .case-icon {
    width: 54%;
  }
  .scene-map.view-grid[class*="layout-lanea-cases"] .case-panel .case-label {
    font-size: clamp(9px, 6.6cqw, 22px);
  }
  .scene-map.view-grid[class*="layout-lanea-cases"]
    .map-object
    .object-group.eyes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(var(--u) * 0.8);
  }
  .scene-map.view-grid[class*="layout-lanea-cases"]
    .map-object
    .object-group.eyes
    > .object
    img {
    height: 17vh;
  }
  .scene-map.view-grid[class*="layout-lanea-cases"]
    .map-object
    .object-group.eyes
    > .object.wide
    img {
    height: 33vh;
  }
  /* M1: the listed three keep the grid, quieter: dashed, no fill, a step dimmer */
  .scene-map.view-grid.layout-lanea-cases-m1 .case-panel:nth-child(n + 4) {
    background: transparent;
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.22);
  }
  .scene-map.view-grid.layout-lanea-cases-m1
    .case-panel:nth-child(n + 4)
    .case-icon {
    opacity: 0.72;
  }
  .scene-map.view-grid.layout-lanea-cases-m1
    .case-panel:nth-child(n + 4)
    .case-label {
    color: var(--hb-text-secondary);
  }
  /* M2: the listed three shrink to one line each, icon and name */
  .scene-map.view-grid.layout-lanea-cases-m2 .case-grid {
    grid-auto-rows: auto;
  }
  .scene-map.view-grid.layout-lanea-cases-m2 .case-panel:nth-child(n + 4) {
    aspect-ratio: auto;
    grid-template-rows: none;
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    padding: calc(var(--u) * 0.5) calc(var(--u) * 0.7);
    background: transparent;
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.22);
    gap: calc(var(--u) * 0.6);
  }
  .scene-map.view-grid.layout-lanea-cases-m2
    .case-panel:nth-child(n + 4)
    .case-icon {
    width: calc(var(--u) * 3.6);
  }
  .scene-map.view-grid.layout-lanea-cases-m2
    .case-panel:nth-child(n + 4)
    .case-label {
    font-size: calc(var(--u) * 0.82);
    white-space: normal;
    text-align: left;
    min-height: 0;
    color: var(--hb-text-secondary);
  }
}
/* the phone reading page: two columns of three tiles, their labels on their two lines, the photos below */
@media (max-width: 760px) {
  html:not(.is-stage)
    .scene-map.view-grid[class*="layout-lanea-cases"]
    .map-layout.case-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  /* the engine hides a map's picture on the phone (#5032); here the tiles have their own column, so the
     bench photos fit below them */
  html:not(.is-stage)
    .scene-map.view-grid[class*="layout-lanea-cases"]
    .map-object {
    display: block;
  }
}

/* slide 8, the fuel-gauge page (Lane L): the dashboard's plot leads, wide and legible; the motion graphic and the
   figure narrow beside it. Each box's ratio is its share of the row (2 : 1.1 : 0.9) times one constant, 1.7, so
   the three are one height and the captions' tops stay level; at that height the plot (3.6 : 1) fills its box. */
.scene-map.view-grid[class*="layout-lanea-cases"]
  .case-page[data-dive="dive-5"]
  .case-blocks {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr) minmax(0, 0.9fr);
}
.scene-map.view-grid[class*="layout-lanea-cases"]
  .case-page[data-dive="dive-5"]
  .case-block[data-k="1"]
  .case-media {
  aspect-ratio: 3.4 / 1;
}
.scene-map.view-grid[class*="layout-lanea-cases"]
  .case-page[data-dive="dive-5"]
  .case-block[data-k="2"]
  .case-media {
  aspect-ratio: 1.87 / 1;
}
.scene-map.view-grid[class*="layout-lanea-cases"]
  .case-page[data-dive="dive-5"]
  .case-block[data-k="3"]
  .case-media {
  aspect-ratio: 1.53 / 1;
}
.scene-map.view-grid[class*="layout-lanea-cases"] .case-panel.can-open:hover {
  border-color: rgba(90, 230, 171, 0.6);
}

/* ═══ Lane A (#5867) — slide 6 (bench-nexus): build 0 holds on the spinner with me opaque (the drawing is
   assets/penn/lanea-nexus-me-in-loop.svg); build 1 is one motion. My waiting marks fade, I lift off the
   ring to my place beside it, the agent, the firmware, and the board slide to their places on the closed
   ring, the instruments and the readings arrive in the gap, and the animated closed loop takes over.
   The moves are lanea-ring-v1.py's MOVES as percentages of the 900 x 600 frame. Keyframes run each time
   build 1 arrives; stepping back drops them, so the pieces snap away. ═══ */
.scene-spine.layout-nexus
  .object-stack
  img.layer[class*="lanea-rg-"]:not(.lanea-rg-final) {
  opacity: 0;
  transform: none;
  transition: none;
  border-radius: 0;
}
.scene-spine.layout-nexus[data-build="2"]
  .object-stack
  img.layer.on.lanea-rg-final {
  transition: opacity 700ms var(--ease) 2300ms;
}
.scene-spine.layout-nexus[data-build="2"]
  .object-stack
  img.layer.on.lanea-rg-line,
.scene-spine.layout-nexus[data-build="2"]
  .object-stack
  img.layer.on.lanea-rg-mepanel,
.scene-spine.layout-nexus[data-build="2"]
  .object-stack
  img.layer.on.lanea-rg-mewait,
.scene-spine.layout-nexus[data-build="2"]
  .object-stack
  img.layer.on.lanea-rg-me,
.scene-spine.layout-nexus[data-build="2"]
  .object-stack
  img.layer.on.lanea-rg-agent,
.scene-spine.layout-nexus[data-build="2"]
  .object-stack
  img.layer.on.lanea-rg-firmware,
.scene-spine.layout-nexus[data-build="2"]
  .object-stack
  img.layer.on.lanea-rg-board,
.scene-spine.layout-nexus[data-build="2"]
  .object-stack
  img.layer.on.lanea-rg-instruments,
.scene-spine.layout-nexus[data-build="2"]
  .object-stack
  img.layer.on.lanea-rg-readings {
  animation-duration: 3100ms;
  animation-fill-mode: both;
  animation-timing-function: linear;
}
.scene-spine.layout-nexus[data-build="2"]
  .object-stack
  img.layer.on.lanea-rg-line {
  animation-name: lanea-hold;
}
.scene-spine.layout-nexus[data-build="2"]
  .object-stack
  img.layer.on.lanea-rg-mewait {
  animation-name: lanea-wait-out;
}
.scene-spine.layout-nexus[data-build="2"]
  .object-stack
  img.layer.on.lanea-rg-mepanel {
  animation-name: lanea-panel-out;
}
.scene-spine.layout-nexus[data-build="2"]
  .object-stack
  img.layer.on.lanea-rg-me {
  animation-name: lanea-me-lift;
}
.scene-spine.layout-nexus[data-build="2"]
  .object-stack
  img.layer.on.lanea-rg-agent {
  animation-name: lanea-agent-move;
}
.scene-spine.layout-nexus[data-build="2"]
  .object-stack
  img.layer.on.lanea-rg-firmware {
  animation-name: lanea-firmware-move;
}
.scene-spine.layout-nexus[data-build="2"]
  .object-stack
  img.layer.on.lanea-rg-board {
  animation-name: lanea-board-move;
}
.scene-spine.layout-nexus[data-build="2"]
  .object-stack
  img.layer.on.lanea-rg-instruments {
  animation-name: lanea-arrive-1;
  transform-origin: 33.7% 78.2%;
}
.scene-spine.layout-nexus[data-build="2"]
  .object-stack
  img.layer.on.lanea-rg-readings {
  animation-name: lanea-arrive-2;
  transform-origin: 21.6% 46.1%;
}
/* the timeline, out of 3100 ms: 0 the swap; 0 to 400 the wait fades; 250 to 1450 I lift; 1000 to 2000 the
   ring re-forms; 1300 to 2200 the instruments and readings arrive; 2300 to 3000 the closed loop fades in;
   2600 to 3100 the pieces fade under it */
@keyframes lanea-hold {
  0%,
  84% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes lanea-wait-out {
  0% {
    opacity: 1;
  }
  13%,
  100% {
    opacity: 0;
  }
}
@keyframes lanea-panel-out {
  0%,
  8% {
    opacity: 1;
  }
  24%,
  100% {
    opacity: 0;
  }
}
@keyframes lanea-me-lift {
  0%,
  8% {
    opacity: 1;
    transform: none;
    animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1);
  }
  47% {
    opacity: 1;
    transform: translate(-7.333%, -42.133%);
  }
  84% {
    opacity: 1;
    transform: translate(-7.333%, -42.133%);
  }
  99% {
    opacity: 0;
    transform: translate(-7.333%, -42.133%);
  }
  /* faded out: back to its origin, so a spent piece never sits outside the frame */
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes lanea-agent-move {
  0%,
  32% {
    opacity: 1;
    transform: none;
    animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1);
  }
  65%,
  84% {
    opacity: 1;
    transform: translate(0%, -4%);
  }
  99% {
    opacity: 0;
    transform: translate(0%, -4%);
  }
  /* faded out: back to its origin, so a spent piece never sits outside the frame */
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes lanea-firmware-move {
  0%,
  32% {
    opacity: 1;
    transform: none;
    animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1);
  }
  65%,
  84% {
    opacity: 1;
    transform: translate(-1.631%, -9.858%);
  }
  99% {
    opacity: 0;
    transform: translate(-1.631%, -9.858%);
  }
  /* faded out: back to its origin, so a spent piece never sits outside the frame */
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes lanea-board-move {
  0%,
  32% {
    opacity: 1;
    transform: none;
    animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1);
  }
  65%,
  84% {
    opacity: 1;
    transform: translate(19.593%, -6.808%);
  }
  99% {
    opacity: 0;
    transform: translate(19.593%, -6.808%);
  }
  /* faded out: back to its origin, so a spent piece never sits outside the frame */
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes lanea-arrive-1 {
  0%,
  42% {
    opacity: 0;
    transform: translateY(5%) scale(0.86);
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  65%,
  84% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes lanea-arrive-2 {
  0%,
  48% {
    opacity: 0;
    transform: translateY(5%) scale(0.86);
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  71%,
  84% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}
/* the words over the ring wait for the loop to close */
.scene-spine.layout-nexus[data-build="2"][data-scene-id="bench-nexus"]
  .object-group.loopbox
  > .object.onloop.on,
.scene-spine.layout-nexus[data-build="2"][data-scene-id="bench-nexus"]
  .object-group.loopbox
  > .object.outside.on {
  transition-delay: 2600ms;
}
/* the still twins (reduced motion, the phone page): my held frame, no moving pieces */
@media (prefers-reduced-motion: reduce) {
  .scene-spine.layout-nexus[data-scene-id="bench-nexus"]
    .object-stack
    img.layer.base {
    content: url("assets/penn/lanea-nexus-me-in-loop-static.svg");
  }
  .scene-spine.layout-nexus
    .object-stack
    img.layer[class*="lanea-rg-"]:not(.lanea-rg-final) {
    display: none;
  }
}
@media (max-width: 760px) {
  /* the reading page shows every build at once, with no fades (verifier check 2) */
  html:not(.is-stage)
    .scene-spine.layout-nexus[data-build="2"]
    .object-stack
    img.layer.on.lanea-rg-final {
    transition: none;
  }
  html:not(.is-stage)
    .scene-spine.layout-nexus[data-scene-id="bench-nexus"]
    .object-stack
    img.layer.base {
    content: url("assets/penn/lanea-nexus-me-in-loop-static.svg");
  }
  html:not(.is-stage)
    .scene-spine.layout-nexus
    .object-stack
    img.layer[class*="lanea-rg-"]:not(.lanea-rg-final) {
    display: none;
  }
}

/* ═══ Lane A (#5867) — slide 6 (bench-nexus), Matt's headline rule: the headline runs across the top at full
   slide width on one line; the subtitle and the two lines sit left under it, the ring right, the who-does-what
   row along the bottom. Stage only: the phone page keeps its single column.
   Lane L: the two green lines are about 1.3 times their old size and fill the left column down to the row: the
   subtitle, a gap, line 1, a gap, line 2, a gap, then the row. The three gaps are equal shares of the height the
   ring spans, so the rhythm holds at every stage size. ═══ */
@media (min-width: 761px) {
  .scene-spine.layout-nexus[data-scene-id="bench-nexus"] .two {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    grid-template-rows:
      auto auto auto minmax(0, 1fr) auto minmax(0, 1fr) auto
      minmax(0, 1fr) auto;
    column-gap: calc(var(--u) * 3);
    row-gap: 0;
    align-items: start;
  }
  .scene-spine.layout-nexus[data-scene-id="bench-nexus"] .text {
    display: contents;
  }
  .scene-spine.layout-nexus[data-scene-id="bench-nexus"] .eyebrow-xl {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .scene-spine.layout-nexus[data-scene-id="bench-nexus"] .statement {
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: none;
    white-space: nowrap;
  }
  .scene-spine.layout-nexus[data-scene-id="bench-nexus"] .statement .sentence {
    display: inline;
  }
  .scene-spine.layout-nexus[data-scene-id="bench-nexus"] .sub {
    grid-column: 1;
    grid-row: 3;
  }
  .scene-spine.layout-nexus[data-scene-id="bench-nexus"] .beat {
    grid-column: 1;
    grid-row: 5;
    margin: 0;
    max-width: none;
    font-size: calc(var(--u) * 1.8);
    line-height: 1.3;
  }
  .scene-spine.layout-nexus[data-scene-id="bench-nexus"] .beat + .beat {
    grid-row: 7;
  }
  .scene-spine.layout-nexus[data-scene-id="bench-nexus"] .object-group.loopbox {
    grid-column: 2;
    grid-row: 3 / 9;
    align-self: start;
    margin-top: calc(var(--u) * 4.2);
  }
  .scene-spine.layout-nexus[data-scene-id="bench-nexus"] .pipeline-row {
    grid-row: 9;
  }
}