.continuation-demo { display: contents; }
/* Scope every new rule so the vetted opening keeps its existing layout and motion. */
    :is(#continuation, .continuation-demo) .filecard-body {
      max-height: 390px;
    }
    :is(#continuation, .continuation-demo) .fline {
      white-space: normal;
      align-items: baseline;
    }
    :is(#continuation, .continuation-demo) .fline .txt {
      min-width: 0;
      overflow-wrap: anywhere;
    }
    :is(#continuation, .continuation-demo) .fline .lno {
      min-width: 28px;
    }
    :is(#continuation, .continuation-demo) .filecard-head {
      color: var(--muted);
      letter-spacing: 0;
      text-transform: none;
      font-size: 11px;
    }
    :is(#continuation, .continuation-demo) .filecard-foot {
      font-family: "Public Sans", system-ui, sans-serif;
      font-size: 12px;
      letter-spacing: 0;
    }
    :is(#continuation, .continuation-demo) .demo-left .filecard {
      width: 100%;
    }
    :is(#continuation, .continuation-demo) .plain-label {
      font-size: 12px;
      color: var(--muted);
      margin: 0 0 6px;
    }
    :is(#continuation, .continuation-demo) .ledger {
      padding: 10px 12px;
      font-family: "IBM Plex Mono", monospace;
      font-size: 11px;
    }
    :is(#continuation, .continuation-demo) .ledger-row {
      display: flex;
      gap: 8px;
      justify-content: space-between;
      padding: 5px 0;
      border-bottom: 1px solid var(--line);
    }
    :is(#continuation, .continuation-demo) .ledger-row:last-child {
      border: 0;
    }
    :is(#continuation, .continuation-demo) .ledger-row span:last-child {
      text-align: right;
    }
    :is(#continuation, .continuation-demo) .good {
      color: var(--ok);
    }
    :is(#continuation, .continuation-demo) .bad {
      color: var(--danger);
    }
    :is(#continuation, .continuation-demo) .muted {
      color: var(--muted);
    }
    :is(#continuation, .continuation-demo) .queue {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    :is(#continuation, .continuation-demo) .ticket {
      border: 1px solid var(--line-2);
      padding: 6px 10px;
      border-radius: 4px;
      font:
        11px "IBM Plex Mono",
        monospace;
    }
    :is(#continuation, .continuation-demo) .ticket.active {
      border-color: var(--accent);
      background: var(--accent-bg);
    }
    :is(#continuation, .continuation-demo) .ticket.done {
      border-color: var(--ok);
      color: var(--ok);
    }
    :is(#continuation, .continuation-demo) .ticket.rejected {
      border-color: var(--danger);
      color: var(--danger);
    }
    :is(#continuation, .continuation-demo) .pending {
      margin: 10px 12px;
      border: 1px dashed var(--work);
      border-radius: 4px;
      padding: 8px;
      font:
        11px/1.8 "IBM Plex Mono",
        monospace;
    }
    :is(#continuation, .continuation-demo) .pending.aborted {
      border-color: var(--danger);
      color: var(--danger);
    }
    :is(#continuation, .continuation-demo) .commit-boundary {
      border-top: 2px solid var(--ok);
      margin: 8px 12px;
      padding-top: 5px;
      color: var(--ok);
      font:
        10px "IBM Plex Mono",
        monospace;
    }
    :is(#continuation, .continuation-demo) .pair {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    :is(#continuation, .continuation-demo) .pair > * {
      min-width: 0;
    }
    :is(#continuation, .continuation-demo) .browser-value {
      padding: 20px 12px;
      font-size: 22px;
      font-weight: 600;
    }
    :is(#continuation, .continuation-demo) .browser-hats {
      display: block;
      font-size: 30px;
      line-height: 1.2;
      letter-spacing: 3px;
      margin-bottom: 8px;
    }
    :is(#continuation, .continuation-demo) .browser-hats:empty {
      display: none;
    }
    :is(#continuation, .continuation-demo) .browser-value small {
      display: block;
      font-size: 11px;
      color: var(--muted);
      font-weight: 400;
      margin-top: 4px;
    }
    :is(#continuation, .continuation-demo) .browser-value.changed {
      animation: row-hit 620ms var(--ease-out);
    }
    :is(#continuation, .continuation-demo) .mini-code {
      margin: 0;
      border: 0;
      border-radius: 0;
      font-size: 11px;
    }
    :is(#continuation, .continuation-demo) .read-note {
      padding: 8px 12px;
      border-top: 1px solid var(--line);
      color: var(--purple);
      font:
        11px/1.7 "IBM Plex Mono",
        monospace;
    }
    :is(#continuation, .continuation-demo) .path {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      padding: 12px;
    }
    :is(#continuation, .continuation-demo) .path span {
      font:
        10px/1.6 "IBM Plex Mono",
        monospace;
      color: var(--muted);
    }
    :is(#continuation, .continuation-demo) .path .active {
      color: var(--ink);
      background: var(--accent-bg);
      box-shadow: 0 0 0 4px var(--accent-bg);
      border-radius: 2px;
    }
    :is(#continuation, .continuation-demo) .full-demo {
      grid-template-columns: minmax(0, 1fr);
    }
    :is(#continuation, .continuation-demo) .snapshot-control {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
      font-size: 12px;
    }
    :is(#continuation, .continuation-demo) input[type="range"] {
      max-width: 150px;
    }
    :is(#continuation, .continuation-demo) .idxrow {
      flex-wrap: wrap;
    }
    :is(#continuation, .continuation-demo) .codepane {
      overflow: visible;
    }
    /* Keep the commit path explicit: runners propose, the committer checks,
           and only accepted writes travel on to the database. */
    :is(#continuation, .continuation-demo) .cmt-demo {
      grid-template-columns: minmax(0, 1fr);
      gap: 14px;
    }
    :is(#continuation, .continuation-demo) .cmt-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 64px minmax(0, 0.9fr) 64px minmax(
          0,
          1.1fr
        );
      align-items: start;
      gap: 8px;
    }
    :is(#continuation, .continuation-demo) .cmt-node {
      min-width: 0;
      min-height: 315px;
    }
    :is(#continuation, .continuation-demo) .cmt-node > .filecard-head {
      font:
        600 14px "Public Sans",
        system-ui,
        sans-serif;
      padding: 12px;
      color: var(--ink);
    }
    :is(#continuation, .continuation-demo) .cmt-node.is-active {
      border-color: var(--accent);
      box-shadow: 0 0 0 2px var(--accent-bg);
    }
    :is(#continuation, .continuation-demo) .cmt-node.is-good {
      border-color: var(--ok);
      box-shadow: 0 0 0 2px var(--ok-bg);
    }
    :is(#continuation, .continuation-demo) .cmt-node.is-bad {
      border-color: var(--danger);
      box-shadow: 0 0 0 2px var(--danger-bg);
    }
    :is(#continuation, .continuation-demo) .cmt-demo .ticket {
      font-size: 10px;
      padding: 5px 7px;
    }
    :is(#continuation, .continuation-demo) .cmt-validation {
      padding: 12px;
      font-size: 13px;
      border-bottom: 1px solid var(--line);
      min-height: 46px;
    }
    :is(#continuation, .continuation-demo) .cmt-check {
      padding: 10px 12px;
      border-bottom: 1px solid var(--line);
      font:
        11px/1.7 "IBM Plex Mono",
        monospace;
    }
    :is(#continuation, .continuation-demo) .cmt-check {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    :is(#continuation, .continuation-demo) .cmt-check .check-verdict {
      color: var(--muted);
      text-align: right;
    }
    :is(#continuation, .continuation-demo) .cmt-check.good .check-verdict {
      color: var(--ok);
    }
    :is(#continuation, .continuation-demo) .cmt-check.bad .check-verdict {
      color: var(--danger);
    }
    :is(#continuation, .continuation-demo) .cmt-demo > .filecard-foot {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 6px;
      min-height: 58px;
      padding: 12px;
      font-size: 13px;
    }
    :is(#continuation, .continuation-demo) .cmt-link {
      display: grid;
      gap: 16px;
      margin-top: 120px;
    }
    :is(#continuation, .continuation-demo) .cmt-route {
      color: var(--faint);
    }
    :is(#continuation, .continuation-demo) .cmt-route.is-active {
      color: var(--work);
    }
    :is(#continuation, .continuation-demo) .cmt-route.is-good {
      color: var(--ok);
    }
    :is(#continuation, .continuation-demo) .cmt-route.is-bad {
      color: var(--danger);
    }
    :is(#continuation, .continuation-demo) .cmt-rail {
      position: relative;
      height: 10px;
      width: 100%;
    }
    :is(#continuation, .continuation-demo) .cmt-rail::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 4px;
      border-top: 1px solid currentColor;
    }
    :is(#continuation, .continuation-demo) .cmt-rail::after {
      content: "";
      position: absolute;
      right: 0;
      top: 1px;
      width: 6px;
      height: 6px;
      border-top: 1px solid currentColor;
      border-right: 1px solid currentColor;
      transform: rotate(45deg);
    }
    :is(#continuation, .continuation-demo) .cmt-return .cmt-rail::after {
      left: 0;
      right: auto;
      transform: rotate(-135deg);
    }
    :is(#continuation, .continuation-demo) .cmt-packet {
      position: absolute;
      left: 0;
      top: 1px;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: currentColor;
      opacity: 0;
    }
    :is(#continuation, .continuation-demo) .cmt-route-label {
      display: block;
      margin-top: 3px;
      text-align: center;
      font:
        10px/1.4 "IBM Plex Mono",
        monospace;
    }
    /* On a phone, retain the same topology and turn both connections vertical. */
    @container demo (max-width: 900px) {
      :is(#continuation, .continuation-demo) .cmt-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
      }
      :is(#continuation, .continuation-demo) .cmt-demo > .ctl {
        position: sticky;
        top: 8px;
        z-index: 1;
        background: var(--bg);
        padding: 8px 0;
      }
      :is(#continuation, .continuation-demo) .cmt-node {
        min-height: 0;
      }
      :is(#continuation, .continuation-demo) .cmt-link {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        margin: 10px auto;
        width: min(240px, 100%);
        gap: 24px;
      }
      :is(#continuation, .continuation-demo) .cmt-route {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      :is(#continuation, .continuation-demo) .cmt-rail {
        width: 10px;
        height: 48px;
        flex: none;
      }
      :is(#continuation, .continuation-demo) .cmt-rail::before {
        left: 4px;
        top: 0;
        bottom: 0;
        right: auto;
        border-top: 0;
        border-left: 1px solid currentColor;
      }
      :is(#continuation, .continuation-demo) .cmt-rail::after {
        top: auto;
        bottom: 0;
        left: 1px;
        right: auto;
        transform: rotate(135deg);
      }
      :is(#continuation, .continuation-demo) .cmt-return .cmt-rail::after {
        top: 0;
        bottom: auto;
        left: 1px;
        transform: rotate(-45deg);
      }
      :is(#continuation, .continuation-demo) .cmt-packet {
        left: 1px;
        top: 0;
      }
      :is(#continuation, .continuation-demo) .cmt-route-label {
        text-align: left;
        margin: 0;
      }
    }
    /* Two persistent executions feed one committer. Their progress happens
           together; only their finished transactions wait in the commit queue. */
    :is(#continuation, .continuation-demo) .cmt-layout {
      align-items: center;
    }
    :is(#continuation, .continuation-demo) .cmt-runners {
      display: grid;
      gap: 12px;
      min-width: 0;
    }
    :is(#continuation, .continuation-demo) .cmt-lane {
      min-height: 205px;
    }
    :is(#continuation, .continuation-demo) .cmt-lane .filecard-head {
      align-items: baseline;
      flex-wrap: wrap;
      gap: 6px;
    }
    :is(#continuation, .continuation-demo) .cmt-lane-title {
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 8px;
    }
    :is(#continuation, .continuation-demo) .cmt-lane-title code {
      font-size: 11px;
      font-weight: 400;
      color: var(--muted);
    }
    :is(#continuation, .continuation-demo) .cmt-lane-state {
      font:
        10px "IBM Plex Mono",
        monospace;
      color: var(--muted);
    }
    :is(#continuation, .continuation-demo) .cmt-lane[data-state="running"] .cmt-lane-state {
      color: var(--work);
    }
    :is(#continuation, .continuation-demo) .cmt-lane[data-state="committed"] .cmt-lane-state {
      color: var(--ok);
    }
    :is(#continuation, .continuation-demo) .cmt-lane[data-state="retry"] .cmt-lane-state,
    :is(#continuation, .continuation-demo) .cmt-lane[data-state="error"] .cmt-lane-state {
      color: var(--danger);
    }
    /* Use the same quiet scrollbar chrome in every code and data panel. */
    :is(pre, .codepane, .cmdlog, .filecard-body) {
      color-scheme: dark;
      scrollbar-width: thin;
      scrollbar-color: var(--faint) var(--panel);
    }
    @supports selector(::-webkit-scrollbar) {
      /* Let the custom track and thumb take over where supported. */
      :is(pre, .codepane, .cmdlog, .filecard-body) {
        scrollbar-width: auto;
        scrollbar-color: auto;
      }
      :is(pre, .codepane, .cmdlog, .filecard-body)::-webkit-scrollbar {
        width: 8px;
        height: 8px;
      }
      :is(pre, .codepane, .cmdlog, .filecard-body)::-webkit-scrollbar-track {
        background: var(--panel);
      }
      :is(pre, .codepane, .cmdlog, .filecard-body)::-webkit-scrollbar-thumb {
        background: var(--faint);
        background-clip: padding-box;
        border: 1px solid var(--panel);
        border-radius: 999px;
      }
      :is(
          pre,
          .codepane,
          .cmdlog,
          .filecard-body
        )::-webkit-scrollbar-thumb:hover {
        background-color: var(--muted);
      }
      :is(pre, .codepane, .cmdlog, .filecard-body)::-webkit-scrollbar-corner {
        background: var(--panel);
      }
    }
    /* Hide captions visually while preserving live announcements for readers
       using assistive technology. Empty live regions must remain mounted too. */
    .demo .filecard-foot {
      display: block !important;
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip-path: inset(50%) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }
    /* Empty captions stay quiet. Data areas keep their section labels. */
    .demo .flow-copy:empty,
    .demo .read-note:empty {
      display: none;
    }
    :is(#continuation, .continuation-demo) .cmt-group .read-note:empty {
      display: block;
    }
    /* Inset groups show what each mutation owns and what lives in the committer. */
    :is(#continuation, .continuation-demo) .cmt-group {
      margin: 12px;
      min-width: 0;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 5px;
      background: var(--bg);
    }
    :is(#continuation, .continuation-demo) .cmt-group-title {
      padding: 9px 10px 7px;
      font:
        600 12px "Public Sans",
        sans-serif;
    }
    :is(#continuation, .continuation-demo) .cmt-group .ledger,
    :is(#continuation, .continuation-demo) .cmt-group .read-note {
      padding: 0 10px 9px;
      min-height: 68px;
      border: 0;
    }
    :is(#continuation, .continuation-demo) .cmt-queue {
      flex-direction: column;
      padding: 0 10px 10px;
      min-height: 68px;
      gap: 6px;
    }
    :is(#continuation, .continuation-demo) .cmt-queue .ticket {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 8px;
      font-size: 11px;
    }
    :is(#continuation, .continuation-demo) .cmt-ticket-state {
      font-size: 10px;
      color: var(--muted);
    }
    :is(#continuation, .continuation-demo) .cmt-queue .plain-label {
      margin: 0;
    }
    :is(#continuation, .continuation-demo) .cmt-link {
      margin-top: 0;
      align-self: center;
    }
    :is(#continuation, .continuation-demo) .cmt-fork {
      position: relative;
      min-width: 0;
      align-self: stretch;
    }
    :is(#continuation, .continuation-demo) .cmt-fork svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    :is(#continuation, .continuation-demo) .cmt-fork .cmt-route {
      display: inline;
    }
    :is(#continuation, .continuation-demo) .cmt-branch,
    :is(#continuation, .continuation-demo) .cmt-arrow {
      fill: none;
      stroke: currentColor;
      stroke-width: 1;
    }
    :is(#continuation, .continuation-demo) .cmt-fork .cmt-packet {
      fill: currentColor;
    }
    @container demo (max-width: 900px) {
      /* Route A past B through the side gutter, instead of through B's card. */
      :is(#continuation, .continuation-demo) .cmt-runners {
        padding-right: 30px;
      }
      :is(#continuation, .continuation-demo) .cmt-lane {
        min-height: 205px;
      }
      :is(#continuation, .continuation-demo) .cmt-fork {
        height: 60px;
      }
    }
    /* Reads bypass the committer along the outside of the diagram. */
    :is(#continuation, .continuation-demo) .cmt-layout {
      position: relative;
      padding: 34px 0;
    }
    :is(#continuation, .continuation-demo) .cmt-reads-overlay {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: visible;
      pointer-events: none;
    }
    :is(#continuation, .continuation-demo) .cmt-reads-overlay .cmt-route {
      display: inline;
    }
    :is(#continuation, .continuation-demo) .cmt-reads-overlay .cmt-packet {
      fill: currentColor;
    }
    :is(#continuation, .continuation-demo) .cmt-reads-overlay text {
      fill: currentColor;
      font:
        10px "IBM Plex Mono",
        monospace;
    }
    @container demo (max-width: 900px) {
      :is(#continuation, .continuation-demo) .cmt-layout {
        padding-left: 38px;
      }
    }
    :is(#continuation, .continuation-demo) [hidden] {
      display: none !important;
    }
    @container demo (max-width: 600px) {
      :is(#continuation, .continuation-demo) .pair {
        grid-template-columns: minmax(0, 1fr);
      }
      :is(#continuation, .continuation-demo) .filecard-body {
        max-height: 330px;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      :is(#continuation, .continuation-demo) *,
      :is(#continuation, .continuation-demo) *::before,
      :is(#continuation, .continuation-demo) *::after {
        animation: none !important;
        transition: none !important;
      }
    }
    /* Every diagram uses the same message paths. These opt-in rules also reach
       the opening examples without changing the author's prose or byte animations. */
    .demo.flow-diagram {
      position: relative;
      isolation: isolate;
    }
    .demo.flow-diagram:not(.flow-network) {
      grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
      column-gap: 88px;
    }
    .demo.flow-diagram > .wire {
      display: none;
    }
    .flow-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: visible;
      pointer-events: none;
      z-index: 2;
    }
    .flow-edge {
      color: var(--faint);
    }
    .flow-edge path {
      fill: none;
      stroke: currentColor;
      stroke-width: 1.2;
    }
    .flow-edge circle {
      fill: currentColor;
      opacity: 0;
    }
    .flow-edge text {
      fill: currentColor;
      font:
        10px "IBM Plex Mono",
        monospace;
      text-anchor: middle;
      paint-order: stroke;
      stroke: var(--bg);
      stroke-width: 5px;
      stroke-linejoin: round;
    }
    .flow-edge[data-tone="active"] {
      color: var(--work);
    }
    .flow-edge[data-tone="good"] {
      color: var(--ok);
    }
    .flow-edge[data-tone="bad"] {
      color: var(--danger);
    }
    .flow-node {
      border-radius: 6px;
      transition:
        outline-color 160ms,
        box-shadow 160ms;
      outline: 1px solid transparent;
      outline-offset: 2px;
    }
    .flow-node[data-flow="active"] {
      outline-color: var(--work);
      box-shadow: 0 0 0 3px var(--work-bg);
    }
    .flow-node[data-flow="good"] {
      outline-color: var(--ok);
      box-shadow: 0 0 0 3px var(--ok-bg);
    }
    .flow-node[data-flow="bad"] {
      outline-color: var(--danger);
      box-shadow: 0 0 0 3px var(--danger-bg);
    }
    .flow-diagram .flow-stack {
      display: grid;
      gap: 58px;
      min-width: 0;
    }
    .flow-diagram .flow-stack > .filecard {
      min-width: 0;
    }
    :is(#continuation, .continuation-demo) .flow-network {
      grid-template-columns: minmax(0, 1fr);
      gap: 16px;
    }
    .flow-network .flow-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 62px 74px;
      padding-right: 30px;
      align-items: start;
    }
    .flow-network .flow-grid > .filecard {
      min-width: 0;
    }
    :is(#continuation, .continuation-demo) .flow-network .filecard-head {
      font:
        600 14px "Public Sans",
        sans-serif;
      color: var(--ink);
    }
    .flow-network .filecard-head {
      font:
        600 13px "Public Sans",
        sans-serif;
      color: var(--ink);
    }
    .flow-copy {
      padding: 12px;
      font-size: 12px;
      color: var(--muted);
    }
    .flow-network .filecard-foot {
      min-height: 52px;
    }
    #whole-client-a {
      grid-column: 1;
      grid-row: 1;
    }
    #whole-sync {
      grid-column: 2;
      grid-row: 1;
    }
    #whole-client-b {
      grid-column: 3;
      grid-row: 1;
    }
    #whole-runner {
      grid-column: 1;
      grid-row: 2;
    }
    #whole-judge {
      grid-column: 2;
      grid-row: 2;
    }
    #whole-log {
      grid-column: 3;
      grid-row: 2;
    }
    #whole-subs {
      grid-column: 2;
      grid-row: 3;
    }
    :is(#continuation, .continuation-demo) .flow-query {
      margin-top: 56px;
    }
    @container demo (max-width: 900px) {
      .demo.flow-diagram:not(.flow-network) {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 72px;
        padding-right: 28px;
      }
      .demo.flow-diagram .demo-left {
        gap: 12px;
      }
      .flow-network .flow-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 64px;
        padding-right: 32px;
      }
      :is(#continuation, .continuation-demo) .flow-network > .ctl {
        position: sticky;
        top: 8px;
        z-index: 4;
        background: var(--bg);
        padding: 8px 0;
      }
      :is(#continuation, .continuation-demo) .flow-network .flow-grid > .filecard {
        grid-column: 1;
        grid-row: auto;
      }
      :is(#continuation, .continuation-demo) .flow-query {
        margin-top: 0;
      }
      .flow-diagram .flow-stack {
        gap: 58px;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .flow-node {
        transition: none;
      }
    }

.commit-window { margin: 28px 0; }
.window-controls { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.window-controls fieldset { border: 0; padding: 0; margin: 0 16px 0 0; }
.window-controls legend { color: var(--muted); font-size: 12px; margin-bottom: 7px; }
.window-controls [aria-pressed="true"] { color: var(--work); border-color: var(--work); background: var(--work-bg); }
.window-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 30px; align-items: start; }
.window-request, .window-log { min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
.commit-window h3 { background: var(--panel-2); font: 600 14px "Public Sans", sans-serif; margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.window-request dl { margin: 0; padding: 16px; }
.window-request dl > div { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 6px 0; }
.window-request dt { font-size: 12px; color: var(--muted); }
.window-request dd { margin: 0; font: 12px/1.7 "IBM Plex Mono", monospace; }
.window-verdict:empty { display: none; }
.window-verdict { margin: 0; border-top: 1px solid var(--line); padding: 16px; font-size: 14px; }
.window-verdict.window-failure { color: var(--danger); }
.window-verdict.window-success { color: var(--ok); }
.window-entries { padding: 10px 0; margin: 0; list-style: none; }
.window-entries li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding: 12px 16px; border-left: 2px solid transparent; }
.window-entries code, .window-stamp, .window-match { font: 12px/1.6 "IBM Plex Mono", monospace; }
.window-stamp { min-width: 24px; color: var(--purple); }
.window-past { opacity: .55; }
.window-entries .window-boundary { border-left: 0; border-top: 1px solid var(--work); border-bottom: 1px solid var(--work); color: var(--work); font-size: 12px; }
.window-entries .window-conflict { border-left-color: var(--danger); background: var(--danger-bg); }
.window-entries .window-clear { border-left-color: var(--ok); background: var(--ok-bg); }
.window-match { margin-left: auto; }
.window-conflict .window-match { color: var(--danger); }
.window-clear .window-match { color: var(--ok); }
@container demo (max-width: 650px) { .window-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

.window-log-columns { display: flex; gap: 10px; padding: 8px 18px 0; color: var(--muted); font: 11px "IBM Plex Mono", monospace; }
.window-log-columns span:first-child { min-width: 24px; }

.window-entries code { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.window-entries code .k { color: var(--work); }
.timestamp-log { width: 100%; border-collapse: collapse; text-align: left; }
.timestamp-log th, .timestamp-log td { padding: 10px 16px; font: 12px/1.7 "IBM Plex Mono", monospace; }
.timestamp-log th { color: var(--muted); font-weight: 400; }
.timestamp-log td:first-child { width: 32px; color: var(--purple); }
.timestamp-log code { white-space: pre-wrap; overflow-wrap: anywhere; }
.timestamp-log .k { color: var(--work); }

/* Focused index examples share the article's colours and keep all code wrapped. */
.iv-example { margin: 26px 0 34px; }
.iv-diagram { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1.1fr); gap: 80px; align-items: center; padding: 40px 0; }
.iv-users, .iv-storage { display: grid; gap: 24px; }
.iv-card { position: relative; min-width: 0; }
.iv-card .filecard-head { align-items: center; flex-wrap: wrap; }
.iv-card-meta { margin-left: auto; color: var(--muted); font: 11px/1.4 "Public Sans", sans-serif; letter-spacing: normal; text-transform: none; }

.iv-card > div:not(.filecard-head, .idx, .filecard-body) { padding: 12px; font-family: "IBM Plex Mono", monospace; font-size: 11px; line-height: 1.8; min-height: 48px; }
.iv-card > div[data-content="committer"] { padding: 0; }
.iv-commit-result { min-height: 30px; padding: 0 12px 10px; color: var(--ok); }
.iv-card code { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.iv-card p { font: 13px/1.6 "Public Sans", sans-serif; margin: 10px 0 0; }
.iv-row { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 8px; border-bottom: 1px solid var(--line); transition: opacity .2s; }
.iv-row:last-child { border-bottom: 0; }
.iv-ts { color: var(--purple); }
.iv-key { color: var(--work); }
.iv-number { color: var(--ok); }
.iv-pointer { color: #87c8d0; }
.iv-error { color: var(--err, #db6488); margin-top: 10px; }
.iv-selected { background: color-mix(in srgb, var(--ok) 12%, transparent); }
.iv-read { padding-top: 12px; font: 12px/1.7 "IBM Plex Mono", monospace; }
.iv-active { border-color: var(--work); }
.iv-good { border-color: var(--ok); }
.iv-bad { border-color: #db6488; }
.iv-arrows { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.iv-arrows > path { fill: none; stroke: var(--faint); color: var(--faint); stroke-width: 1.2; }
.iv-arrows > path.iv-good { stroke: var(--ok); color: var(--ok); stroke-width: 1.2; }
.iv-arrows > path.iv-bad { stroke: #db6488; color: #db6488; stroke-width: 1.2; }

/* The two snapshot examples use matching read/write lanes. Keep their cards
   steady while stepping, so a new result cannot move a wire mid-flight. */
.iv-phase { min-height: 3.2em; margin: 14px 0 0; color: var(--muted); font: 14px/1.6 "Public Sans", sans-serif; }
.iv-snapshot-diagram { gap: 56px 64px; padding: 18px 0 28px; }
.iv-snapshot-diagram [data-node="a"] { grid-column: 1; grid-row: 1; }
.iv-snapshot-diagram [data-node="reader"] { grid-column: 2; grid-row: 1; }
.iv-snapshot-diagram [data-node="index"] { grid-column: 3; grid-row: 1; }
.iv-snapshot-diagram [data-node="b"] { grid-column: 1; grid-row: 2; }
.iv-snapshot-diagram [data-node="committer"] { grid-column: 2; grid-row: 2; }
.iv-snapshot-diagram [data-node="log"] { grid-column: 3; grid-row: 2; }
.iv-snapshot-diagram > .iv-card > [data-content="a"] { min-height: 130px; }
.iv-snapshot-diagram > .iv-card > [data-content="b"] { min-height: 100px; }
.iv-snapshot-diagram > .iv-card > [data-content="reader"] { min-height: 178px; }
.iv-snapshot-diagram [data-content="index"] { min-height: 78px; }
.iv-snapshot-diagram [data-content="log"] { min-height: 118px; }
:is(#continuation, .continuation-demo) .iv-snapshot-diagram .cmt-queue { min-height: 94px; }
.iv-snapshot-diagram [data-node="committer"] .iv-commit-result { min-height: 38px; }
.iv-waiting { color: var(--muted); }
.iv-read-steps { margin: 10px 0 0; padding-left: 20px; }
.iv-read-steps li { margin: 0 0 8px; padding-left: 2px; }
.iv-read-steps li span { display: block; color: var(--muted); }
.iv-read-steps [data-read-value] { color: var(--ink); }
.iv-snapshot-diagram .iv-arrows > path.iv-read-route { stroke-dasharray: 4 4; }

.iv-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
#index-growth > .ctl { margin-bottom: 20px; }
/* The growth example must be allowed to get tall. That is the point of it. */
#index-growth .filecard-body { max-height: none; }
.iv-slider { display: block; max-width: 520px; font: 13px/1.8 "IBM Plex Mono", monospace; margin-bottom: 20px; }
.iv-slider input { width: 100%; accent-color: var(--work); display: block; margin-top: 10px; }
.iv-pruned { opacity: .28; text-decoration: line-through; }
.iv-example [aria-pressed="true"] { border-color: var(--work); background: color-mix(in srgb, var(--work) 12%, transparent); }
@container demo (max-width: 700px) {
  .iv-diagram { grid-template-columns: minmax(0, 1fr); gap: 44px; margin: 0 16px; }
  .iv-users, .iv-storage { gap: 18px; }
  .iv-tables { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .iv-snapshot-diagram > [data-node] { grid-column: auto; grid-row: auto; }
  .iv-snapshot-diagram { gap: 32px; }
}
@media(prefers-reduced-motion: reduce) { .iv-arrows > path { animation: none; } }

/* Queries, subscriptions and actions reuse the side-effects network layout. */
#qry-client { grid-column: 1; grid-row: 1; }
#qry-runner { grid-column: 2; grid-row: 1; }
#qry-db { grid-column: 3; grid-row: 1; }
#subs-a { grid-column: 1; grid-row: 1; }
#subs-sync { grid-column: 2; grid-row: 1; }
#subs-runner { grid-column: 3; grid-row: 1; }
#subs-b { grid-column: 1; grid-row: 2; }
#subs-mgr { grid-column: 2; grid-row: 2; }
#subs-log { grid-column: 3; grid-row: 2; }
#subs-judge { grid-column: 2; grid-row: 3; }
/* The scheduler hangs off the committer on the right, under the database.
   The action appears below the committer when its scheduled call runs. */
#sched-mutation { grid-column: 1; grid-row: 1 / span 2; }
#sched-judge { grid-column: 2; grid-row: 1; }
#sched-db { grid-column: 3; grid-row: 1; }
#sched-queue { grid-column: 3; grid-row: 2; }
#sched-action { grid-column: 2; grid-row: 2; }
#sched .codepane:empty, #sched .flow-copy:empty { display: none; }
#sched .cmt-group .ledger { min-height: 30px; }
#sched #sched-mutation-writes { min-height: 85px; }
#sched .ledger-row { flex-wrap: wrap; }
.sched-table { padding: 8px 10px 10px; font: 11px/1.7 "IBM Plex Mono", monospace; }
.sched-row { display: grid; grid-template-columns: 1.1fr 1fr .6fr .7fr; gap: 10px; padding: 4px 8px; border: 1px solid transparent; border-bottom-color: var(--line); border-radius: 4px; }
.sched-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sched-row:last-child { border-bottom-color: transparent; }
.sched-head { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.sched-row.active { border-color: var(--accent); background: var(--accent-bg); }
.sched-row.done { color: var(--muted); }
.sched-row.done > span:last-child { color: var(--ok); }
.sched-empty { padding: 6px 8px; font-size: 12px; color: var(--faint); font-family: "Public Sans", sans-serif; }
@container demo (max-width: 900px) {
  #sched-mutation, #sched-judge, #sched-db, #sched-queue, #sched-action { grid-column: auto; grid-row: auto; }
}
/* The browser and action span both rows so the two small external cards,
   mutation and Stripe, stack in the right column. */
#act-client { grid-column: 1; grid-row: 1 / span 2; }
#act-action { grid-column: 2; grid-row: 1 / span 2; }
#act-mutation { grid-column: 3; grid-row: 1; }
#act-stripe { grid-column: 3; grid-row: 2; }
:is(#qry, #subs, #act) :is(.browser-value, .codepane, .ledger):empty { display: none; }
/* Finale: browsers, functions, committer and storage, in four columns. */
#finale > .ctl { column-gap: 18px; row-gap: 10px; }
#finale .finale-speed-control { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 12px/1.6 "IBM Plex Mono", monospace; color: var(--muted); }
#finale-speed { width: 130px; }
#finale-speed-value { min-width: 5ch; color: var(--ink); font-variant-numeric: tabular-nums; }
#finale .finale-subscription-title { display: flex; flex-basis: 100%; align-items: center; justify-content: space-between; gap: 8px; }
#finale .finale-subscription-icon { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#finale .finale-subscription-icon.working { animation: finale-subscription-spin 900ms linear infinite; }
@keyframes finale-subscription-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  #finale .finale-subscription-icon.working { animation: none; }
}
#finale-a { grid-column: 1; grid-row: 1; }
#finale-b { grid-column: 1; grid-row: 2; }
#finale-mutation { grid-column: 2; grid-row: 1; }
#finale-query { grid-column: 2; grid-row: 2; }
#finale-action { grid-column: 2; grid-row: 3; }
#finale-committer { grid-column: 3; grid-row: 1; }
#finale-subs { grid-column: 3; grid-row: 2; }
#finale-stripe { grid-column: 3; grid-row: 3; }
#finale-index { grid-column: 4; grid-row: 1; }
#finale-log { grid-column: 4; grid-row: 2; }
#finale-scheduler { grid-column: 4; grid-row: 3; }
#finale .flow-grid { row-gap: 44px; column-gap: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); padding-bottom: 36px; }
#finale .filecard-body { min-height: 0; max-height: 150px; }
#finale .flow-edge text { display: none; }
#finale .cmt-group .ledger { min-height: 30px; }
#finale .sched-row { grid-template-columns: 1.1fr .8fr .5fr .8fr; gap: 6px; font-size: 10px; }
#finale .codepane:empty { display: none; }
#finale .flow-state { margin-left: auto; font: 10px/1.6 "IBM Plex Mono", monospace; color: var(--muted); letter-spacing: .04em; }
#finale .browser-page { position: relative; padding: 12px 12px 8px; }
/* Purchase/sale confirmations and errors stay inside their fake browser. */
#finale .browser-modal { position: absolute; inset: 0; display: grid; place-items: center; padding: 12px; background: rgba(20, 18, 11, 0.72); z-index: 2; }
#finale .browser-modal[hidden] { display: none; }
#finale .browser-dialog { width: min(100%, 260px); padding: 14px 16px 12px; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 8px; box-shadow: 0 10px 30px #0008; text-align: center; animation: row-land 320ms var(--ease-out) backwards; }
#finale .browser-dialog-title { font: 600 15px "Public Sans", sans-serif; color: var(--ink); margin-bottom: 6px; }
#finale .browser-dialog p { margin: 0 0 12px; font-size: 12px; color: var(--muted); }
#finale .browser-dialog .ctl { justify-content: center; }
#finale .browser-modal.success .browser-dialog { border-color: var(--ok); }
#finale .browser-modal.success .browser-dialog-title { color: var(--ok); }
#finale .browser-modal.success button { color: var(--ok); border-color: var(--ok); background: var(--ok-bg); }
#finale .browser-value { padding: 6px 0 4px; }
#finale .browser-actions { margin: 8px 0 6px; }
#finale .browser-note { min-height: 20px; font: 12px/1.6 "Public Sans", sans-serif; color: var(--muted); }
#finale .browser-note.good { color: var(--ok); }
#finale .browser-note.bad { color: var(--danger); }
@container demo (max-width: 900px) {
  #finale .flow-grid { grid-template-columns: minmax(0, 1fr); }
  #finale .flow-grid > .filecard { grid-column: auto; grid-row: auto; }
}
/* The query's boxes stay visible while empty: they are its properties, not a log. */
#qry .cmt-group .ledger { min-height: 30px; }
#qry .cmt-group .ledger:empty { display: block; }
/* Browser cards get window chrome so they read as a browser at a glance. */
:is(#continuation, .continuation-demo) .browser-card .filecard-head { align-items: center; gap: 10px; }
:is(#continuation, .continuation-demo) .browser-card .filecard-head::before {
  content: ""; flex: none; width: 36px; height: 10px;
  background:
    radial-gradient(circle at 5px 5px, #ff5f57 4px, transparent 4.6px),
    radial-gradient(circle at 18px 5px, #febc2e 4px, transparent 4.6px),
    radial-gradient(circle at 31px 5px, #28c840 4px, transparent 4.6px);
}
:is(#continuation, .continuation-demo) .browser-card .browser-honk::before {
  /* Flat line-art globe, coloured like the toolbar text rather than an emoji. */
  content: ""; display: block; width: 15px; height: 15px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E") center / contain no-repeat;
}
:is(#continuation, .continuation-demo) .browser-user {
  order: 2; flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  font: 600 10px "Public Sans", sans-serif; color: var(--work); background: var(--work-bg); border: 1px solid var(--work);
}
/* Two browsers stack beside the manager; the manager and committer span both rows. */
#subs-client-a { grid-column: 1; grid-row: 1; }
#subs-client-b { grid-column: 1; grid-row: 2; }
#subs-manager { grid-column: 2; grid-row: 1 / span 2; }
#subs-committer { grid-column: 3; grid-row: 1 / span 2; }
#subs-committer .cmt-group .ledger { min-height: 30px; }
#subs-committer .cmt-group .ledger:empty { display: block; }
:is(#continuation, .continuation-demo) .browser-url {
  order: 1; flex: 1; min-width: 0; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 11px/1.6 "IBM Plex Mono", monospace; color: var(--muted);
  background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px;
}
:is(#qry, #subs, #act) .filecard-head code { font-size: 12px; font-weight: 500; }
#subs-watch .ledger-row { flex-wrap: wrap; }
#act .flow-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr) minmax(0, .8fr); column-gap: 56px; }
@container demo (max-width: 900px) { #act .flow-grid { grid-template-columns: minmax(0, 1fr); } }

/* Keep only the current lesson's pieces on screen, using the existing cards. */
.lesson .flow-grid > [hidden] { display: none; }
.lesson .codepane:empty, .lesson .flow-copy:empty { display: none; }
.lesson-phase { align-self: center; color: var(--muted); font-size: 13px; }
.lesson-phase.bad { color: var(--danger); }
/* Step narration remains available to screen readers without crowding controls. */
.demo-announcement {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
#act.lesson .flow-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.4fr) minmax(0, .5fr); row-gap: 18px; }
@container demo (max-width: 900px) {
  #act.lesson .flow-grid { grid-template-columns: minmax(0, 1fr); }
  #act-client, #act-action, #act-mutation, #act-stripe { grid-column: auto; grid-row: auto; }
}

/* The process loses power, but its already-written cart entry stays on disk. */
#d2b .power-cut-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid var(--danger);
  border-radius: 5px;
  background: var(--panel);
  color: var(--danger);
  font: 600 12px/1.4 "IBM Plex Mono", monospace;
}
#d2b .power-cut-badge[hidden] { display: none; }
#d2b .power-cut-badge svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#d2b.power-off #d2b-code {
  animation: power-cut-jolt 480ms ease-out;
  border-color: var(--danger);
}
#d2b.power-off .codeline:not(.err) {
  filter: grayscale(1);
  opacity: .42;
}
#d2b.power-off .codeline.err > .syntax-key,
#d2b.power-off .codeline.err > .syntax-str,
#d2b.power-off .codeline.err > .syntax-fn,
#d2b.power-off .codeline.err > .syntax-num { color: var(--muted); }
#d2b.power-off .power-cut-badge { animation: power-cut-arrive 360ms ease-out; }
#d2b.power-off .power-cut-plug {
  transform-origin: 13px 16px;
  animation: power-cut-unplug 480ms ease-out;
}
@keyframes power-cut-jolt {
  0%, 100% { transform: translateX(0); }
  18% { transform: translateX(-5px) rotate(-.4deg); }
  38% { transform: translateX(4px) rotate(.3deg); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(1px); }
}
@keyframes power-cut-arrive {
  from { opacity: 0; transform: translateY(-5px) scale(.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes power-cut-unplug {
  35% { transform: translateY(3px) rotate(-12deg); }
  70% { transform: rotate(5deg); }
}
@media (prefers-reduced-motion: reduce) {
  #d2b.power-off #d2b-code,
  #d2b.power-off .power-cut-badge,
  #d2b.power-off .power-cut-plug { animation: none; }
}

/* Keep the shared database centred between the two concurrent callers. */
@container demo (min-width: 901px) {
  :is(#d2c, #d2o, #d2q, #capture) > .demo-right { align-self: center; }
  /* These examples show substantial function code but only a few JSON rows.
     Give the code more of the capped width, not the small database panel. */
  .demo.flow-diagram:is(#d2a, #d2b, #d2t, #d2c, #d2q, #d2o, #capture) {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  }
}

/* The read and write sets live inside the mutation card, so they read as part of it. */
#capture-mutation .codepane {
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
}
/* A set row being read back lights up yellow, like a file line being read. */
:is(#continuation, .continuation-demo) .ledger-row.hit {
  background: var(--work-bg);
  /* Like file rows, read sets must stay inside their scrolling panel. */
  animation: row-hit 620ms var(--ease-out);
}
/* A row that has just been recorded lands with the same green flash as a db.json line. */
:is(#continuation, .continuation-demo) .ledger-row.landed {
  animation: row-land var(--motion-land) var(--ease-out) backwards;
}

/* The side effects example reuses the committer demo and adds one card, Stripe,
   below the committer. Charges take the gap beside the mutation cards
   straight to Stripe, without passing through the committer. */
:is(#continuation, .continuation-demo) .cmt-effects .cmt-layout {
  grid-template-columns: minmax(0, 1.15fr) 64px minmax(0, 0.8fr) 64px minmax(0, 0.9fr);
  padding-bottom: 34px;
}
:is(#continuation, .continuation-demo) .cmt-middle {
  display: grid;
  gap: 24px;
  align-content: start;
  min-width: 0;
}
:is(#continuation, .continuation-demo) .cmt-effects .cmt-lane {
  min-height: 0;
}
:is(#continuation, .continuation-demo) .cmt-effects .cmt-group .ledger {
  min-height: 40px;
}
/* Code at the top of a lane reads as part of the card, like the read set demo. */
:is(#continuation, .continuation-demo) .cmt-lane > .filecard-head + .codepane {
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
}
:is(#continuation, .continuation-demo) .cmt-external {
  min-height: 0;
  border: 1px dashed var(--line-2);
}
:is(#continuation, .continuation-demo) .cmt-external .filecard-head {
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}
@container demo (max-width: 900px) {
  :is(#continuation, .continuation-demo) .cmt-effects .cmt-layout {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 46px;
    padding-right: 32px;
  }
}

/* Keep the retention example at reading width with room for each column. */
#index-retention { max-width: 660px; margin-inline: auto; }
#index-retention .index-table :is(th, td) { padding: 8px 12px; }
#index-retention .index-table td { border-bottom: 1px solid var(--line); }
#index-retention .index-table tr:last-child td { border-bottom: 0; }

:is(#continuation, .continuation-demo) .browser-card .browser-honk {
  order: 3; flex: none; display: grid; place-items: center;
  width: 24px; height: 24px; min-width: 0; padding: 0; margin: -4px;
  color: var(--muted); background: transparent; border: 0; box-shadow: none;
}
:is(#continuation, .continuation-demo) .browser-card .browser-honk:hover { color: var(--ink); }
:is(#continuation, .continuation-demo) .browser-card .browser-honk:focus-visible { outline: 2px solid var(--work); outline-offset: 2px; }

/* Value packets use coordinates relative to their committer demo. */
.cmt-demo { position: relative; }

/* Decorative copies live on the diagram, outside code/file scroll panels. */
.set-copy-slot { visibility: hidden; }
.set-copy-packet {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 25;
  pointer-events: none;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid var(--work);
  border-radius: 4px;
  background: var(--panel);
  color: var(--ink);
  font: 12px/1.6 "IBM Plex Mono", monospace;
}
.set-copy-original, .set-copy-summary {
  position: absolute;
  inset: 0;
  margin: 0 !important;
  padding: 4px 10px;
  overflow: hidden;
}
.set-copy-original { white-space: pre-wrap; }
.set-copy-original *, .set-copy-summary * { animation: none !important; transition: none !important; }
.set-copy-original .result-anchor { position: static; }
.set-copy-original .read-result { position: static; margin-left: 8px; }
.set-copy-summary { display: flex; justify-content: space-between; gap: 12px; }
.set-copy-summary > :last-child { text-align: right; }

/* Here the new idea is the external charge. The earlier demo already taught
   read/write sets; show the outcome once, in Stripe, instead of three ledgers. */
#effects .cmt-lane > .cmt-group { display: none; }
#effects-b:has(#effects-retry:not([hidden])) > #effects-code-b { display: none; }
#effects #effects-judge,
#effects #effects-card { min-height: 0; align-self: center; }
#effects .cmt-queue { min-height: 0; }
#effects .cmt-layout { padding-top: 28px; }
#effects .cmt-route text { display: none; }