/* Chapter 03 (Android, 2 of 2), page-specific: the hero art and its caption, the film card, the figure slides, figure 1
   (the three-rung ladder, played once by figures/android-lifecycle.js, data-mode="ladder"), figure 3 (the builds after
   Android's kill), the diagnosis and the rule, the recap's table of the two kills, Try it. Figure 2 (the two kills) has
   its own sheet, figures/two-kills.css. Loaded after mobile.css and figures/fx.css. Tokens only; the shared components
   (beat conclusions, checks, Try-it steps, widths, and With knowledge, .kn-flow) live in mobile.css. */

/* ---------- The hero art: the message half faded, the card still in the recent apps, the scissors on its thread ---------- */
.stage--vanish { --sa: 251 191 36; --sb: 125 211 252; --sc: 255 107 107; aspect-ratio: auto; display: flex; flex-direction: column; }
.stage--vanish .art { position: relative; inset: auto; width: 94%; height: auto; margin: 3.4% 3% 0; aspect-ratio: 640 / 430; }
.stage--vanish .stage__cap { position: relative; z-index: 3; margin: 0 8%; padding: 1.5% 0 5.6%; font: 500 .84rem/1.45 var(--font-body); color: var(--night-ink-2); text-wrap: pretty; }
.art-msg { font: 500 15.5px/1 var(--font-body); letter-spacing: .01em; }
@media (min-width: 601px) { .art--vanish .art-mono { font-size: 17px; } .art--vanish .art-mono--sm { font-size: 16.5px; } }
@media (max-width: 600px) { .art-msg { font-size: 19px; } .stage--vanish .stage__cap { font-size: .78rem; line-height: 1.4; margin-inline: 6%; } }
/* The film's message in French, « Acheter du lait, / appeler Sam », is longer: on a phone it keeps inside the field and
   clear of the send button (final fix round 1). */
@media (max-width: 600px) { :root[lang="fr"] .art-msg { font-size: 16px; } }
/* The still is the cut: the lower thread faint, the cell ringed in red, the message half faded. One loop (10 s) plays the
   cut and gives it back: intact, the scissors close, the thread and the message fade, then all returns. */
.art--vanish .c3-low { opacity: .2; }
.art--vanish .c3-msg { opacity: .55; }
.art--vanish .c3-cell { opacity: .55; }
@media (prefers-reduced-motion: no-preference) {
  .art--vanish .c3-low { animation: c3-low 10s ease-in-out infinite; }
  .art--vanish .c3-msg { animation: c3-msg 10s ease-in-out infinite; }
  .art--vanish .c3-cell { animation: c3-cell 10s ease-in-out infinite; }
  .art--vanish .c3-cut { animation: c3-cut 10s ease-in-out infinite; }
  .art--vanish .c3-scis { animation: c3-scis 10s ease-in-out infinite; transform-box: fill-box; }
}
@keyframes c3-low { 0%, 36% { opacity: 1; } 42%, 82% { opacity: .2; } 90%, 100% { opacity: 1; } }
@keyframes c3-msg { 0%, 40% { opacity: 1; } 52%, 82% { opacity: .55; } 90%, 100% { opacity: 1; } }
@keyframes c3-cell { 0%, 38% { opacity: 1; } 44%, 82% { opacity: .55; } 90%, 100% { opacity: 1; } }
@keyframes c3-cut { 0%, 38% { opacity: 0; } 42%, 82% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes c3-scis { 0%, 22% { opacity: 0; } 30%, 84% { opacity: 1; } 92%, 100% { opacity: 0; } }

/* ---------- The film card: the published film covers chapters 02 and 03; it plays on chapter 02 (the tile is ep08's,
   from chapter 02's folder; the gradient stays as its fallback) ---------- */
#film { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a5cff' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='M10 9.2v5.6l4.8-2.8z' fill='%237a5cff'/%3E%3C/svg%3E"); }
.film-slot[hidden] { display: none !important; }
.film-slot__k { margin: 0 0 14px !important; }
.film-slot .figure-film__status { left: auto; bottom: auto; top: 12px; right: 12px; }

/* ---------- A figure's own slide (figures 1 and 2): its kicker, close under the beat it belongs to ---------- */
.prose > .slide + .slide.slide--fig { margin-top: clamp(26px, 3vw, 40px); }
.fig-k { margin: 0 0 4px !important; }
.slide--fig > .fx { margin-top: 14px; }

/* ---------- Figure 1: who goes first when memory runs short (a night figure, played once) ----------
   Three rungs with words in every cell, the memory gauge, the scissors on the two bottom cached cells, the dashed
   "not immune" bracket on the top two rungs. The markup is the end state, so no JS, motion off and print all show it;
   android-lifecycle.js adds .is-pre, then .s1 to .s4, and removes them at the end. */
.lad { padding: clamp(16px, 2.4vw, 26px) clamp(16px, 2.4vw, 26px) clamp(12px, 1.6vw, 18px); --cut: #ff8a80; }
.lad__grid { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: stretch; }
.lad__gauge { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; gap: 8px; min-width: 0; }
.lad__gk { font: 600 .68rem/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.lad__bar { position: relative; width: 30px; min-height: 150px; border-radius: 10px; border: 1px solid var(--rule-strong); background: rgba(255, 255, 255, .03); overflow: hidden; }
.lad__fill { --fill: 70%; position: absolute; left: 0; right: 0; bottom: 0; height: var(--fill); background: rgba(236, 235, 243, .3); transition: height .9s var(--fx-ease-io), width .9s var(--fx-ease-io), background-color .35s ease; }
.lad__line { position: absolute; left: 0; right: 0; bottom: 82%; border-top: 2px dashed var(--cut); }
.lad__enough { max-width: 96px; font: 600 .78rem/1.3 var(--font-body); color: var(--ink); text-align: center; text-wrap: balance; transition: opacity .3s ease; }
.lad__rungs { position: relative; list-style: none; margin: 0 !important; padding: 0 108px 0 0 !important; display: grid; gap: 8px; min-width: 0; }
.lad__rung {
  position: relative; margin: 0 !important; display: grid; grid-template-columns: 138px minmax(0, 1fr) 200px; align-items: center; gap: 14px;
  padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .035); border: 1px solid var(--rule); font-size: 1rem;
}
.lad__rank { margin: 0 !important; display: grid; gap: 5px; }
.lad__rank b { font: 600 1.02rem/1.2 var(--font-body); color: var(--ink); }
.lad__odds { display: inline-flex; align-items: center; gap: 3px; font: 500 .82rem/1.2 var(--font-body); color: var(--ink-2); }
.lad__odds > i { flex: none; width: 8px; height: 8px; border-radius: 2px; background: rgba(255, 255, 255, .14); }
.lad__odds[data-odds="1"] > i:nth-child(-n+1), .lad__odds[data-odds="2"] > i:nth-child(-n+2) { background: var(--ink-2); }
.lad__odds[data-odds="3"] > i { background: var(--cut); }
.lad__odds > span { margin-left: 6px; }
.lad__ex { margin: 0 !important; font-size: .93rem !important; line-height: 1.42; color: var(--ink-2); text-wrap: pretty; }
.lad__cells { position: relative; display: flex; align-items: flex-start; gap: 8px; min-height: 30px; }
.lad__cell { position: relative; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #3a4058; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: #ecebf3; transition: background-color .2s ease, box-shadow .2s ease, opacity .2s ease; }
.lad__cell--front { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 0 0 2px rgba(236, 235, 243, .5); }
.lad__cell--pip { background: #475569; }
.lad__cell--pip svg { width: 20px; height: 20px; }
.lad__cell--split { background: linear-gradient(#3a4058 0 45%, transparent 45% 55%, #525a7a 55%); }
.lad__cell--you { background: linear-gradient(135deg, #fcd34d, #d97706); box-shadow: 0 0 0 2px rgba(251, 191, 36, .32); }
/* The cached apps go down a stair: the longest unused at the bottom. */
.lad__cells--stair { min-height: 52px; }
.lad__cells--stair > .lad__cell:nth-child(2) { margin-top: 5px; }
.lad__cells--stair > .lad__cell:nth-child(3) { margin-top: 10px; }
.lad__cells--stair > .lad__cell:nth-child(4) { margin-top: 15px; }
.lad__cells--stair > .lad__cell:nth-child(5) { margin-top: 20px; }
.lad__cell--cut { background: transparent; box-shadow: inset 0 0 0 1.5px var(--cut); opacity: .9; }
.lad__cell--cut::before { content: ""; position: absolute; inset: 4px; border-radius: 6px; border: 1.5px dashed color-mix(in srgb, var(--cut) 60%, transparent); transition: opacity .2s ease; }
.lad.is-pre.s2 .lad__cell--c1, .lad.is-pre.s3 .lad__cell--c2, .lad.is-pre.s2 .lad__cell--c1::before, .lad.is-pre.s3 .lad__cell--c2::before { transition-delay: .2s; }
.lad__scis { position: absolute; left: 118px; top: 19px; width: 22px; height: 22px; color: var(--cut); pointer-events: none; transition: left .32s var(--fx-ease-io), top .32s var(--fx-ease-io), opacity .2s ease, transform .16s ease; }
.lad__scis svg { width: 100%; height: 100%; display: block; }
/* The dashed bracket on the top two rungs, and its words between them. */
.lad__rung--fg::after, .lad__rung--vis::after { content: ""; position: absolute; right: -26px; width: 12px; border: 2px dashed color-mix(in srgb, var(--ink) 50%, transparent); border-left: 0; transition: opacity .3s ease; }
.lad__rung--fg::after { top: 14px; bottom: -6px; border-bottom: 0; border-radius: 0 10px 0 0; }
.lad__rung--vis::after { top: -6px; bottom: 14px; border-top: 0; border-radius: 0 0 10px 0; }
.lad__ni { position: absolute; right: -104px; top: -14px; width: 68px; font: 600 .8rem/1.25 var(--font-body); color: var(--ink); transition: opacity .3s ease; }
.lad__cap { margin: 14px 0 0 !important; color: var(--ink-3) !important; }

/* The rungs on a narrow figure: the gauge across the top, the example under each rank, the bracket's words upright. */
@container fx (max-width: 700px) {
  .lad__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .lad__gauge { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; justify-items: stretch; align-items: center; column-gap: 12px; row-gap: 4px; }
  .lad__bar { width: auto; min-height: 0; height: 16px; }
  .lad__fill { top: 0; bottom: 0; right: auto; height: auto; width: var(--fill); }
  .lad__line { top: -1px; bottom: -1px; left: 82%; right: auto; border-top: 0; border-left: 2px dashed var(--cut); }
  .lad__enough { grid-column: 2; max-width: none; text-align: right; }
  .lad__rungs { padding-right: 30px !important; }
  .lad__rung { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; padding: 10px 12px; }
  .lad__ex { grid-column: 1 / -1; grid-row: 2; }
  .lad__rung--fg::after, .lad__rung--vis::after { right: -12px; width: 8px; }   /* clear of the upright words */
  .lad__ni { right: -31px; top: -44px; width: auto; height: 88px; writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; font-size: .74rem; }
  .lad__ni { text-orientation: sideways; }   /* French « pas à l’abri »: the ’ lies down with its letters (upright, it read "l-") */
}
@container fx (max-width: 420px) {
  .lad__rank b { font-size: .96rem; }
  .lad__cells { gap: 5px; }
  .lad__cell { width: 22px; height: 22px; border-radius: 7px; }
  .lad__cell--pip svg { width: 15px; height: 15px; }
  .lad__cell--cut::before { inset: 3px; border-radius: 5px; }
  .lad__cells--stair { min-height: 42px; }
  .lad__cells--stair > .lad__cell:nth-child(2) { margin-top: 4px; }
  .lad__cells--stair > .lad__cell:nth-child(3) { margin-top: 8px; }
  .lad__cells--stair > .lad__cell:nth-child(4) { margin-top: 12px; }
  .lad__cells--stair > .lad__cell:nth-child(5) { margin-top: 16px; }
  .lad__scis { left: 82px; top: 13px; width: 20px; height: 20px; }   /* end state: on cell 4 */
}

/* Its first view (android-lifecycle.js): memory fills past the line, the scissors cut the bottom cell, then the next,
   memory drops under the line, "enough: Android stops", the bracket. The amber cell is never touched. */
.lad.is-pre .lad__fill { --fill: 6%; }
.lad.is-pre .lad__cell--cut { background: #3a4058; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); opacity: 1; }
.lad.is-pre .lad__cell--cut::before { opacity: 0; }
.lad.is-pre .lad__scis, .lad.is-pre .lad__enough, .lad.is-pre .lad__ni, .lad.is-pre .lad__rung--fg::after, .lad.is-pre .lad__rung--vis::after { opacity: 0; }
.lad.is-pre .lad__scis { left: 156px; top: 24px; }   /* they wait at the first cell they cut, so they fade in there */
.lad.is-pre.s2 .lad__fill { transition-delay: .3s; }  /* memory drops once the cut shows, not before */
.lad.is-pre.s1 .lad__fill { --fill: 96%; background: rgba(255, 107, 107, .55); }
.lad.is-pre.s2 .lad__fill { --fill: 86%; }
.lad.is-pre.s2 .lad__scis { opacity: 1; left: 156px; top: 24px; }
.lad.is-pre.s2 .lad__cell--c1, .lad.is-pre.s3 .lad__cell--c2 { background: transparent; box-shadow: inset 0 0 0 1.5px var(--cut); opacity: .9; }
.lad.is-pre.s2 .lad__cell--c1::before, .lad.is-pre.s3 .lad__cell--c2::before { opacity: 1; }
.lad.is-pre.s3 .lad__fill { --fill: 70%; background: rgba(236, 235, 243, .3); }
.lad.is-pre.s3 .lad__scis { left: 118px; top: 19px; }
.lad.is-pre.s4 .lad__enough, .lad.is-pre.s4 .lad__ni, .lad.is-pre.s4 .lad__rung--fg::after, .lad.is-pre.s4 .lad__rung--vis::after { opacity: 1; }
.lad.is-pre .lad__scis.is-snip { transform: scale(.82) rotate(-8deg); }
.lad.is-pre.s4 .lad__cell--you { animation: lad-glint 1s ease; }
@keyframes lad-glint { 40% { box-shadow: 0 0 0 5px rgba(251, 191, 36, .45); } }
@container fx (max-width: 420px) {
  .lad.is-pre .lad__scis, .lad.is-pre.s2 .lad__scis { left: 109px; top: 17px; }
  .lad.is-pre.s3 .lad__scis { left: 82px; top: 13px; }   /* last, so it wins while s2 stays on */
}
/* A 360 px phone (figure ≤ 330): smaller cells again, so "most likely" still keeps one line. */
@container fx (max-width: 330px) {
  .lad__rung { column-gap: 10px; }
  .lad__cells { gap: 4px; }
  .lad__cell { width: 20px; height: 20px; border-radius: 6px; }
  .lad__cell--pip svg { width: 14px; height: 14px; }
  .lad__cells--stair { min-height: 34px; }
  .lad__cells--stair > .lad__cell:nth-child(2) { margin-top: 3px; }
  .lad__cells--stair > .lad__cell:nth-child(3) { margin-top: 6px; }
  .lad__cells--stair > .lad__cell:nth-child(4) { margin-top: 9px; }
  .lad__cells--stair > .lad__cell:nth-child(5) { margin-top: 12px; }
  .lad__scis { left: 72px; top: 9px; }
  .lad.is-pre .lad__scis, .lad.is-pre.s2 .lad__scis { left: 96px; top: 12px; }
  .lad.is-pre.s3 .lad__scis { left: 72px; top: 9px; }
}
/* "Play again" (android-lifecycle.js shows it while motion is on), on the caption's line, at its right. */
.lad__cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.lad__replay {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin-left: auto; padding: 6px 14px; border-radius: 999px; cursor: pointer;
  border: 1px dashed var(--rule-strong); background: transparent; color: var(--ink-2); font: 600 .8rem/1 var(--font-body);
  transition: color .16s ease, border-color .16s ease, transform .12s ease;
}
.lad__replay:hover { color: var(--ink); border-color: var(--ink-3); }
.lad__replay:active { transform: scale(.97); }
.lad__replay:focus-visible { outline: 2px solid var(--code-focus, var(--accent)); outline-offset: 3px; }
.lad__replay svg { flex: none; width: 15px; height: 15px; }
.lad__replay[hidden] { display: none; }

/* ---------- Figure 3: after Android's kill, build by build (words in every cell; the build's colour on its name) ---------- */
.bk-table { margin-top: 24px; }
.bk-table .data-table { min-width: 0; }
.bk-table .data-table thead th { font-size: .98rem; }
.bk-table .data-table tbody th { width: 36%; padding-left: 34px; text-indent: -20px; background: color-mix(in srgb, var(--bk) 6%, var(--surface)); }
.bk-table .data-table tbody th::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 3px; background: var(--bk); vertical-align: 0; }
.bk-table td { color: var(--ink); font-size: .98rem; }
.bk-table td.bk-js { vertical-align: middle; border-left: 1px solid var(--rule); }
.bk-table tbody tr:hover > * { background: inherit; }
.bk--native { --bk: var(--ink-3); } .bk--expo, .bk--flutter { --bk: var(--fw); } .bk--ionic, .bk--pwa { --bk: var(--web); }
.bk-g { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 7px; vertical-align: -5px;
  color: var(--fx-kill); background: color-mix(in srgb, var(--fx-kill) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--fx-kill) 35%, var(--rule)); }
.bk-g svg { width: 14px; height: 14px; display: block; }
@media (max-width: 760px) {
  .bk-table { background: var(--surface) !important; }
  .bk-table .data-table tbody th, .bk-table .data-table thead th:first-child { position: static; box-shadow: none; min-width: 0; }
  .bk-table .data-table th, .bk-table .data-table td { padding: 11px 10px; }
  .bk-table .data-table tbody th { padding-left: 30px; }
}
@media (max-width: 420px) { .bk-table .data-table tbody th { width: 40%; font-size: .9rem; } .bk-table td { font-size: .92rem; } }

/* ---------- Back to your message, then the rule (the film's verdict card): the shared .verdict of mobile.css ---------- */

/* ---------- Recap: one glyph per card (leave, no code runs, the two kills, four builds), and the table of the two kills ---------- */
.recap li { padding-right: 40px; }
.recap li::after { content: ""; position: absolute; top: 16px; right: 14px; width: 18px; height: 18px; background: var(--ink-3);
  -webkit-mask: var(--g) center / contain no-repeat; mask: var(--g) center / contain no-repeat; }
.recap li:nth-child(1) { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='3' width='12' height='15' rx='2.5'/%3E%3Cpath d='M5 7v11.5A2.5 2.5 0 0 0 7.5 21H15'/%3E%3C/svg%3E"); }
.recap li:nth-child(2) { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H10l-4 4v-4H4z'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E"); }
.recap li:nth-child(3) { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M20 4L8.1 15.9M14.5 14.5L20 20M8.1 8.1L12 12'/%3E%3C/svg%3E"); }
.recap li:nth-child(4) { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1.5'/%3E%3Crect x='13' y='13' width='7' height='7' rx='1.5'/%3E%3C/svg%3E"); }
.recap li.recap__kills { grid-column: 1 / -1; }
.recap li.recap__kills + li:last-child { grid-column: 1 / -1; }
.recap-kills { width: 100%; max-width: 620px; margin: 10px 0 0; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: .86rem; line-height: 1.3; }
.recap-kills thead td:first-child { width: 36%; }
.recap-kills th, .recap-kills td { padding: 6px 8px; text-align: left; vertical-align: middle; border: 0; }
.recap-kills thead th { font: 600 .78rem/1.25 var(--font-body); color: var(--ink-2); }
.recap-kills tbody th { font: 600 .84rem/1.3 var(--font-body); color: var(--ink); }
.recap-kills thead th > span[data-i18n] { display: inline-block; max-width: calc(100% - 26px); vertical-align: top; }
.rk-g { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 6px; vertical-align: -5px; color: var(--fx-kill); background: color-mix(in srgb, var(--fx-kill) 9%, var(--surface)); }
.rk-g--swipe { color: var(--ink-2); background: var(--surface-2); }
.rk-g svg { width: 14px; height: 14px; display: block; }
.kt__chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 999px; font: 600 .74rem/1.3 var(--font-body); white-space: nowrap; }
.kt__chip::before { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; font: 700 .66rem/1 var(--font-body); color: #fff; }
.kt__chip.is-kept { color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, var(--surface)); }
.kt__chip.is-kept::before { content: "\2713"; content: "\2713" / ""; background: var(--ok); }
.kt__chip.is-lost { color: var(--no); background: color-mix(in srgb, var(--no) 9%, var(--surface)); }
.kt__chip.is-lost::before { content: "\2715"; content: "\2715" / ""; background: var(--no); }
.kt__v { font-weight: 700; }
:root[data-theme="dark"] .kt__chip::before { color: #0b1420; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .kt__chip::before { color: #0b1420; } }
.recap-kills tr.is-diff > * { --rk-line: color-mix(in srgb, var(--os) 60%, transparent); background: color-mix(in srgb, var(--os) 7%, var(--surface));
  box-shadow: inset 0 1.5px 0 var(--rk-line), inset 0 -1.5px 0 var(--rk-line); }
.recap-kills tr.is-diff > :first-child { border-radius: 9px 0 0 9px; box-shadow: inset 1.5px 0 0 var(--rk-line), inset 0 1.5px 0 var(--rk-line), inset 0 -1.5px 0 var(--rk-line); }
.recap-kills tr.is-diff > :last-child { border-radius: 0 9px 9px 0; box-shadow: inset -1.5px 0 0 var(--rk-line), inset 0 1.5px 0 var(--rk-line), inset 0 -1.5px 0 var(--rk-line); }
@media (max-width: 420px) {
  .recap-kills th, .recap-kills td { padding: 5px 4px; } .recap-kills .rk-g { display: none; } .recap-kills .kt__chip { font-size: .7rem; }
  .recap-kills thead th > span[data-i18n] { display: inline; max-width: none; }
  .recap li.recap__kills .recap-kills { width: calc(100% + 66px); max-width: none; margin-left: -40px; }
  .recap-kills thead td:first-child { width: 38%; }
}
/* Its first view (capsule.js): the left column pops top to bottom, then the right one, then the row that differs glows. */
.recap-kills.is-pre .kt__chip { opacity: 0; transform: scale(.6); }
.recap-kills.is-in .kt__chip { transition: opacity var(--fx-t-short) var(--fx-ease-pop), transform var(--fx-t-short) var(--fx-ease-pop); }
.recap-kills.is-in tr:nth-child(2) td:nth-child(2) .kt__chip { transition-delay: 120ms; }
.recap-kills.is-in tr:nth-child(3) td:nth-child(2) .kt__chip { transition-delay: 240ms; }
.recap-kills.is-in tr:nth-child(1) td:nth-child(3) .kt__chip { transition-delay: 560ms; }
.recap-kills.is-in tr:nth-child(2) td:nth-child(3) .kt__chip { transition-delay: 680ms; }
.recap-kills.is-in tr:nth-child(3) td:nth-child(3) .kt__chip { transition-delay: 800ms; }
.recap-kills.is-in tr.is-diff > * { animation: rk-glow 1.3s ease 1.05s; }
@keyframes rk-glow { 40% { background: color-mix(in srgb, var(--os) 24%, var(--surface)); } }

/* ---------- Try it ---------- */
.ck-before { margin: 0 0 6px !important; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); font-size: .95rem; color: var(--ink-2); }
.ck-before b { color: var(--ink); }
.try__reset { padding: 9px 14px; border-radius: 12px; border: 1px dashed var(--rule-strong); font-size: .95rem !important; line-height: 1.5; color: var(--ink-2); }
.try__reset b { color: var(--ink); }

/* Try it, step 2: its three actions, one per line, read as one short list (no paragraph gap between them). */
#check .try > li > .try__do + :is(.try__do, .try__more), #check .try > li > .try__more + .try__do { margin-top: 4px !important; }

/* Figure 2's caption reads in the prose column, as chapter 02's figure captions do, not from the wide figure's edge. */
#where .tk-cap { max-width: 680px; margin: 12px auto 0 !important; }

/* ---------- Presentation mode ---------- */
[data-teaching="true"] .fx { margin-block: 12px 8px; }

@media print {
  .fx-fallback[hidden] { display: block !important; }
  .fx.is-mounted > .fx__stage { display: none !important; }
  .lad { break-inside: avoid; }
  .lad__fill { background: #c9c6d6 !important; }
  .lad.is-pre .lad__fill { --fill: 70%; }
  .lad.is-pre .lad__cell--cut { background: transparent; box-shadow: inset 0 0 0 1.5px var(--cut); opacity: .9; }
  .lad.is-pre .lad__cell--cut::before, .lad.is-pre .lad__scis, .lad.is-pre .lad__enough, .lad.is-pre .lad__ni,
  .lad.is-pre .lad__rung--fg::after, .lad.is-pre .lad__rung--vis::after { opacity: 1; }
  .lad.is-pre .lad__scis, .lad.is-pre.s2 .lad__scis { left: 118px; top: 19px; }
  .lad__odds > i { background: #d9d6e2; }   /* the unlit pips are white at 14 % in the night palette: invisible on paper */
  .lad__odds[data-odds="1"] > i:nth-child(-n+1), .lad__odds[data-odds="2"] > i:nth-child(-n+2) { background: #474756; }
  .lad__replay { display: none !important; }
  .lad__cell, .lad__odds > i, .bk-g, .kt__chip::before, .recap li::after, .recap-kills tr.is-diff > *, .rk-g, .bk-table tbody th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .recap-kills.is-pre .kt__chip { opacity: 1 !important; transform: none !important; }
  .recap li.recap__kills, .bk-table { break-inside: avoid; }
  :root:is([data-theme], :not([data-theme])) { --ok: #17784f; --no: #b3261e; }
  .kt__chip::before { color: #fff !important; }
}