/* The run viewer's styles (index.html), a file of the page's own origin so its policy allows no inline style. */
  /* The agentrun.ai look: square corners everywhere. */
  *, *::before, *::after { border-radius: 0 !important; }
  /* The agentrun.ai palette and type by default; a framing page may ask for the light one (embed protocol). */
  :root {
    color-scheme: dark;
    --bg: #080809; --panel: #111113; --ink: #f2f2f2; --muted: #a4a4ad; --rule: #2c2c30;
    --band-0: #23493a; --band-1: #2c3560; --band-2: #5a4421; --band-3: #4a3058;
    --kill: #e5484d; --done: #8ec9ac; --open: #ff8700; --failed: #e5484d; --focus: #b4a0ff;
    --token: #ff8700; --token-ink: #080809; --glow: rgba(255, 135, 0, 0.4);
    --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }
  :root[data-theme="light"] {
    color-scheme: light;
    --bg: #fbfaf7; --panel: #ffffff; --ink: #1d1d1b; --muted: #6b6a66; --rule: #dedbd3;
    --band-0: #cfe3d9; --band-1: #d7dcf0; --band-2: #f0e2c9; --band-3: #e6d4ec;
    --kill: #c8322a; --done: #3b7d5c; --open: #c79a2b; --failed: #c8322a; --focus: #2f5fd0;
    --token: #e8a317; --token-ink: #2a1c00; --glow: rgba(232, 163, 23, 0.45);
  }
  * { box-sizing: border-box; }
  body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.45 var(--sans); }
  h1, h2, h3 { font-family: var(--mono); font-weight: 500; }
  #viewer { max-width: 1200px; margin: 0 auto; padding: 16px; }
  html.embed #viewer { max-width: none; margin: 0; padding: 8px; }
  h1 { font-size: 22px; margin: 0 0 4px; }
  h2 { font-size: 17px; margin: 24px 0 8px; }
  h3 { font-size: 14px; margin: 0 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
  h4 { font-size: 13px; margin: 8px 0 4px; }
  .meta { color: var(--muted); margin: 0; }
  .problems { color: var(--failed); }
  .result { display: inline-block; margin-top: 8px; }
  .counters { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
  .counter { background: var(--panel); border: 1px solid var(--rule); border-radius: 8px; padding: 6px 10px; min-width: 96px; }
  .counter .value { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
  .counter .label { font-size: 12px; color: var(--muted); }
  .counter.alarm .value { color: var(--failed); }
  .counter.observed .label::after { content: " (observed)"; }
  .counter.fact { border-style: dashed; }
  .timeline-wrap { background: var(--panel); border: 1px solid var(--rule); border-radius: 8px; padding: 8px; }
  .timeline { width: 100%; height: auto; display: block; cursor: pointer; }
  .lane-label { font-size: 12px; fill: var(--muted); }
  .lane-rule { stroke: var(--rule); }
  .band-0 { fill: var(--band-0); } .band-1 { fill: var(--band-1); } .band-2 { fill: var(--band-2); } .band-3 { fill: var(--band-3); }
  .band-label { font-size: 11px; fill: var(--ink); }
  .kill { fill: var(--kill); }
  .kill-label { font-size: 12px; fill: var(--kill); font-weight: 600; }
  .open-tick { fill: var(--muted); }
  .restore { stroke: var(--open); stroke-dasharray: 4 3; }
  .restore-label { font-size: 11px; fill: var(--open); }
  .baseline .counters { margin-top: 4px; opacity: 0.85; }
  .span.done { fill: var(--done); } .span.open { fill: var(--open); } .span.failed { fill: var(--failed); }
  .span.has-path { cursor: zoom-in; }
  .playhead { stroke: var(--focus); stroke-width: 2; }
  .controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
  .controls input[type=range] { flex: 1 1 240px; }
  .position { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; }
  button, select { font: inherit; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--rule); background: var(--panel); color: var(--ink); cursor: pointer; }
  .chapters { display: flex; flex-wrap: wrap; gap: 6px; }
  .chapters button.current { border-color: var(--focus); }
  .focus { margin: 8px 0; color: var(--focus); display: flex; gap: 8px; align-items: center; }
  .panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; }
  .panel { background: var(--panel); border: 1px solid var(--rule); border-radius: 8px; padding: 12px; overflow: auto; max-height: 520px; }
  .featured { margin: 12px 0; }
  .featured .panel { max-height: none; overflow: visible; }
  .panel ol { margin: 0; padding-left: 20px; font-size: 13px; }
  .panel li.live { color: var(--muted); }
  .has-path { cursor: zoom-in; }
  .focused { outline: 2px solid var(--focus); outline-offset: 1px; }
  .dim { opacity: 0.4; }
  .empty { color: var(--muted); }
  .turn { border: 1px solid var(--rule); padding: 4px 8px; margin: 6px 0; }
  .turn.assistant { border-color: var(--done); }
  .turn.error { border-color: var(--failed); }
  .turn .who { font-size: 12px; color: var(--muted); }
  .turn p { margin: 4px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
  .turn code { display: block; font-size: 12px; overflow-wrap: anywhere; }
  .turn img, img.blob { max-width: 100%; image-rendering: auto; border: 1px solid var(--rule); }
  /* A run's picture is small and drawn whole: shown at the panel's width, its pixels kept sharp. */
  img.picture { display: block; width: 100%; image-rendering: pixelated; border: 1px solid var(--rule); }
  .picture-gap { aspect-ratio: 16 / 9; display: grid; place-items: center; border: 1px dashed var(--rule); color: var(--muted); }
  .streaming { color: var(--open); }
  .has-cite { cursor: pointer; }
  .panel:has(.vz) { grid-column: 1 / -1; max-height: none; }
  .vz h5 { margin: 0 0 6px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
  .vz-top { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; font-size: 12px; }
  .vz-badge { padding: 2px 7px; border: 1px solid var(--rule); border-radius: 4px; color: var(--muted); }
  .vz-badge.red { border-color: var(--kill); color: var(--kill); } .vz-badge.ok { border-color: var(--done); color: var(--done); }
  .vz-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 0.8fr); gap: 14px; align-items: start; }
  @media (max-width: 900px) { .vz-grid { grid-template-columns: minmax(0, 1fr); } }
  .vz-lane { margin-bottom: 14px; }
  .vz-cells { display: flex; height: 12px; margin: 4px 0 6px; border-radius: 2px; overflow: hidden; background: var(--rule); }
  .vz-cell { flex: 1; } .vz-cell.read { background: var(--band-2); } .vz-cell.missed { background: var(--failed); }
  .vz-cell.reading { background: repeating-linear-gradient(45deg, var(--open) 0 3px, transparent 3px 6px); } .vz-cell.cited { background: var(--focus); }
  .vz-strip { display: flex; flex-wrap: wrap; gap: 4px; } .vz-strip figure { margin: 0; text-align: center; font-size: 10px; color: var(--muted); }
  .vz-frame { display: block; width: 76px; height: 48px; object-fit: cover; border: 1px solid var(--rule); border-radius: 2px; }
  .vz-nopic { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; background: var(--rule); color: var(--muted); font-size: 10px; text-align: center; }
  .vz-page { position: relative; display: inline-block; max-width: 100%; }
  .vz-scan { display: block; width: 260px; max-width: 100%; border: 1px solid var(--rule); }
  .vz-box { outline: 2px dashed var(--focus); background: rgba(47, 95, 208, 0.14); pointer-events: none; }
  .vz-said { margin: 6px 0 0; max-height: 220px; overflow: auto; font: 12px/1.4 ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
  .vz-typed > div { padding-left: 7.5em; text-indent: -7.5em; }
  .vz-account { max-height: 560px; overflow: auto; padding-right: 4px; }
  .vz-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 3px; }
  .vz-tile { position: relative; aspect-ratio: 1; overflow: hidden; border: 2px solid transparent; border-radius: 3px; }
  .vz-thumb { display: block; width: 100%; height: 100%; object-fit: cover; }
  .vz-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 1px 3px; font-size: 9px; color: #fff; background: rgba(0, 0, 0, 0.55); }
  .vz-c0 .vz-label { background: #5d6a7a; } .vz-c1 .vz-label { background: #2f5c8f; } .vz-c2 .vz-label { background: #8a6f3a; } .vz-c3 .vz-label { background: #6b4f7a; } .vz-c4 .vz-label { background: #3f7a5c; }
  .vz-tile.right { border-color: var(--done); } .vz-tile.wrong { border-color: var(--failed); }
  .vz-tile.missed { border: 2px dashed var(--failed); opacity: 0.6; } .vz-tile.cited { outline: 2px solid var(--focus); outline-offset: 1px; }
  .vz-entry { margin: 0 0 8px; font-size: 13px; } .vz-entry.cited { border: 1px solid var(--focus); padding: 2px 6px; }
  .vz-time { font: 11px ui-monospace, monospace; color: var(--open); } .vz-name { font-weight: 600; }
  .vz-keyframes { display: inline-block; margin-left: 4px; vertical-align: middle; }
  .vz-keyframe { display: block; height: 54px; max-width: 120px; object-fit: cover; border: 1px solid var(--rule); border-radius: 2px; }
  .vz-cite { display: inline-block; margin-left: 3px; padding: 0 4px; font: 10px ui-monospace, monospace; color: var(--focus); border: 1px solid var(--focus); border-radius: 3px; }
  .vz-cite.hot { background: var(--focus); color: #fff; }
  .vz-accuracy, .vz-weak { margin-top: 12px; } .vz-weak { max-height: 260px; overflow: auto; } .vz-weak p { margin: 0 0 4px; font-size: 13px; } .vz-accuracy p { margin: 0; } .vz-accuracy ul { margin: 2px 0 0; padding-left: 18px; font-size: 12px; }
  .vz-note { margin: 0 0 4px; font-size: 12px; color: var(--muted); } .vz-weak-page { margin: 4px 0; font-size: 12px; } .vz-stamp { display: flex; gap: 12px; margin-left: 10px; }
  .vz-drop { color: var(--failed); font-weight: 700; } .vz-stamp .vz-read { color: var(--muted); } .vz-stamp.exact .vz-read { color: var(--done); }
  .vz-meters { margin-bottom: 8px; font-size: 13px; }
  .vz-meter { display: flex; justify-content: space-between; gap: 8px; padding: 1px 0; } .vz-meter b { font-variant-numeric: tabular-nums; text-align: right; }
  .vz-meter.alarm b { color: var(--failed); } .vz-meter.zero b { color: var(--done); }
  .vz-receipt { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--rule); font: 11px/1.45 ui-monospace, monospace; }
  .vz-receipt.missed h5 { color: var(--failed); }
  .vz-row { display: grid; grid-template-columns: 58px 1fr; gap: 6px; } .vz-row .k { color: var(--muted); } .vz-row span { max-height: 160px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
  .vz-flight { margin-top: 10px; font-size: 12px; color: var(--open); } .vz-flight ul { margin: 0; padding-left: 16px; }
  .frame { width: 100%; aspect-ratio: 16 / 10; background: #000; display: block; }
  .frame.gap { background: repeating-linear-gradient(45deg, var(--rule) 0 6px, transparent 6px 12px); color: var(--ink); display: flex; align-items: center; justify-content: center; }
  .frame.none { background: var(--rule); color: var(--muted); display: flex; align-items: center; justify-content: center; }
  .transport .why { font-size: 12px; color: var(--muted); }
  .transport h4 { margin: 10px 0 4px; font-size: 13px; }
  .tcounters { list-style: none; padding: 0; margin: 10px 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; }
  .tcounters li { background: var(--panel); border: 1px solid var(--rule); border-radius: 8px; padding: 4px 10px; display: flex; flex-direction: column; min-width: 96px; max-width: 100%; overflow-wrap: anywhere; }
  .tcounters .k { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
  .tcounters b { font-size: 15px; font-variant-numeric: tabular-nums; }
  .transport .lanes { font-size: 12px; }
  .transport .lane { display: flex; align-items: center; gap: 8px; margin: 2px 0; }
  .transport .lname { width: 108px; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .transport .cells { display: flex; flex: 1; height: 14px; }
  .transport .cell { flex: 1; background: transparent; border-bottom: 1px solid var(--rule); }
  .transport .cell.alive { background: var(--band-0); }
  .transport .cell.token { background: var(--focus); }
  .transport .cell.wait { background: repeating-linear-gradient(45deg, var(--rule) 0 3px, transparent 3px 6px); }
  .transport .cell.kill-box, .transport .cell.kill-process { background: var(--kill); }
  .transport .cell.kill-process { opacity: 0.55; }
  .transport .legend { font-size: 11px; color: var(--muted); margin: 2px 0; }
  .transport .flight .proof { font-size: 11px; color: var(--muted); }
  .transport .flight .proof.durable { color: var(--done); }
  .transport .flight.lost, .transport .box.killed { text-decoration: line-through; text-decoration-color: var(--kill); }
  .transport .kill .back { font-size: 12px; color: var(--muted); margin-left: 16px; }
  .transport .wait { color: var(--open); }
  /* The transport stage (src/transport-view.ts). Motion is a function of the playback clock: a view sets --row (where the token is) and --age
     (seconds since an event), and a paused animation with a negative delay draws that frame, so a scrub and a replay show the same screen. */
  .transport { --rowh: 46px; }
  .tstory { padding: 6px 12px; margin-bottom: 6px; border-radius: 8px; border: 1px solid var(--rule); background: var(--panel); font-size: 15px; }
  .tstory .why { font-size: 11px; color: var(--muted); }
  .tstory.dead { border-color: var(--kill); }
  .tstory.dead b { color: var(--kill); }
  .tstory.flying { border-color: var(--token); }
  .phases { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px; padding: 0; font-size: 12px; }
  .phase { padding: 1px 8px; border-radius: 999px; border: 1px solid var(--rule); color: var(--muted); }
  .phase.done { color: var(--ink); background: var(--band-0); }
  .phase.now { background: var(--token); color: var(--token-ink); border-color: var(--token); font-weight: 600; }
  .stage { position: relative; padding-bottom: 18px; }
  .stage .rail { position: absolute; left: 21px; top: calc(var(--rowh) / 2); height: calc((var(--rows) - 1) * var(--rowh)); width: 2px; background: var(--rule); }
  .stage .beam { position: absolute; left: 19px; width: 6px; border-radius: 3px; top: calc((var(--a) + 0.5) * var(--rowh)); height: calc((var(--b) - var(--a)) * var(--rowh)); background: var(--token); opacity: 0.45; }
  .tlane { height: var(--rowh); display: grid; grid-template-rows: var(--rowh); grid-template-columns: 44px 1fr 176px; align-items: center; gap: 0 8px; border-radius: 8px; position: relative; }
  .tlane .tdot { width: 10px; height: 10px; border-radius: 50%; background: var(--rule); border: 2px solid var(--bg); justify-self: center; z-index: 1; }
  .tlane.has-token .tdot, .tlane.arriving .tdot { background: var(--token); }
  .tcard { background: var(--panel); border: 1px solid var(--rule); border-radius: 8px; padding: 3px 10px 0; min-width: 0; height: calc(var(--rowh) - 6px); overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; }
  .tlane.has-token .tcard { border-color: var(--token); box-shadow: 0 0 0 2px var(--glow); }
  .tlane.arriving .tcard { border-color: var(--token); border-style: dashed; }
  .tlane.dead .tcard { border-color: var(--kill); }
  .tlane.dead .lname { text-decoration: line-through; text-decoration-color: var(--kill); }
  .thead { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; overflow: hidden; font-size: 13px; }
  .thead .lname { font-size: 15px; }
  .tfacts, .tstatus { color: var(--muted); font-size: 12px; }
  .tnote { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
  .tnote.kill { color: var(--kill); }
  .tnote.proc { color: var(--open); }
  .tnote.mark { color: var(--ink); font-weight: 600; margin-left: auto; }
  .tnote.mark.leaving, .tnote.mark.arriving { color: var(--token); }
  .skipband { font-size: 12px; padding: 0 6px; border-radius: 4px; background: repeating-linear-gradient(45deg, var(--rule) 0 4px, transparent 4px 8px); animation: slidein 0.6s ease-out both paused; animation-delay: calc(var(--age) * -1s); }
  .tcells { display: flex; height: 7px; margin-bottom: 2px; }
  .tcells .cell { flex: 1; border-bottom: 1px solid var(--rule); }
  .tcells .cell.alive { background: var(--band-0); }
  .tcells .cell.token { background: var(--token); }
  .tcells .cell.wait { background: repeating-linear-gradient(45deg, var(--muted) 0 2px, transparent 2px 4px); }
  .tcells .cell.kill-box, .tcells .cell.kill-process { background: var(--kill); }
  .tcells .cell.kill-process { opacity: 0.55; }
  .ttile { align-self: start; height: calc(var(--rowh) * 2.6); border-radius: 8px; overflow: hidden; z-index: 2; }
  .ttile.none { display: none; }
  .ttile .frame { width: 100%; height: 100%; object-fit: cover; object-position: top left; border: 1px solid var(--rule); border-radius: 8px; display: block; }
  .ttile .frame.gap, .ttile .frame.none { display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--muted); padding: 6px; text-align: center; background: var(--panel); }
  .tlane.flash::after { content: ""; position: absolute; inset: 0; border-radius: 8px; background: var(--kill); pointer-events: none; animation: flash 2.4s ease-out both paused; animation-delay: calc(var(--flash-age) * -1s); }
  .tok { position: absolute; left: 0; width: 44px; top: calc((var(--row) + 0.5) * var(--rowh) - 14px); display: flex; flex-direction: column; align-items: center; z-index: 3; pointer-events: none; }
  .tbadge { min-width: 28px; height: 28px; padding: 0 5px; border-radius: 14px; background: var(--token); color: var(--token-ink); font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px var(--glow), 0 2px 6px rgba(0, 0, 0, 0.3); }
  .tcap { margin-top: 2px; font-size: 10px; line-height: 1.1; text-align: center; color: var(--ink); background: var(--bg); border-radius: 4px; padding: 1px 3px; max-width: 84px; }
  .tok.look-drain .tbadge { animation: breathe 0.9s ease-in-out infinite paused; animation-delay: calc(var(--age) * -1s); }
  .tok.look-seal .tbadge, .tok.look-ship .tbadge, .tok.look-take .tbadge { border-radius: 7px; background: repeating-linear-gradient(135deg, var(--token) 0 6px, color-mix(in srgb, var(--token) 70%, black) 6px 12px); }
  .tok.look-ship .tbadge { animation: shake 0.5s linear infinite paused; animation-delay: calc(var(--age) * -1s); }
  .tok.look-resume .tbadge { animation: unpack 0.8s ease-out both paused; animation-delay: calc(var(--age) * -1s); }
  .tok.look-ghost .tbadge { background: var(--bg); color: var(--kill); border: 2px dashed var(--kill); box-shadow: none; }
  .tok.look-ghost .tcap { color: var(--kill); }
  .tok.blink .tbadge { animation: blink 1.2s steps(1, end) both paused; animation-delay: calc(var(--age) * -1s); }
  .tok.pop .tbadge { animation: pop 1.3s cubic-bezier(.2, 1.4, .4, 1) both paused; animation-delay: calc(var(--age) * -1s); }
  .tok.pop.reborn .tbadge { box-shadow: 0 0 0 5px var(--glow), 0 0 18px 5px var(--done); }
  .tcounters b.bump { display: inline-block; animation: bump 1.2s ease-out both paused; animation-delay: calc(var(--age) * -1s); }
  .filmcard { margin: 8px 0; padding: 12px; border-radius: 12px; border: 2px solid var(--done); background: var(--panel); text-align: center; }
  .filmcard .ftitle { font-size: 20px; font-weight: 700; }
  .filmcard .fsub { color: var(--muted); margin: 4px 0 8px; }
  .filmcard .fbutton { display: inline-block; padding: 8px 18px; border-radius: 999px; background: var(--done); color: #fff; text-decoration: none; font-weight: 600; }
  .tdetails { margin-top: 8px; font-size: 13px; }
  .tdetails summary { cursor: pointer; color: var(--muted); }
  .legend { margin: 4px 0; }
  @keyframes flash { 0% { opacity: 0.7; } 25% { opacity: 0.45; } 100% { opacity: 0; } }
  @keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.72); } }
  @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
  @keyframes unpack { 0% { transform: scale(0.6); border-radius: 7px; } 100% { transform: scale(1); } }
  @keyframes blink { 0%, 100% { opacity: 1; } 15%, 45%, 75% { opacity: 0.08; } 30%, 60% { opacity: 1; } }
  @keyframes pop { 0% { transform: scale(0.1); opacity: 0; } 60% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
  @keyframes bump { 0% { transform: translateY(8px); color: var(--token); } 40% { transform: translateY(-2px); color: var(--token); } 100% { transform: none; } }
  @keyframes slidein { 0% { opacity: 0; transform: translateX(-12px); } 100% { opacity: 1; transform: none; } }
  @media (max-width: 640px) {
    .transport { --rowh: 54px; }
    .tlane { grid-template-columns: 44px 1fr 72px; }
    .tfacts { display: none; }
    .tstatus { display: none; }
    /* The lane's words get a row of their own and wrap there: nothing is clipped at 390 px. */
    .thead { flex-wrap: wrap; gap: 0 8px; white-space: normal; }
    .thead .lname { flex: 1 0 100%; }
    .tnote, .skipband { white-space: normal; margin-left: 0; font-size: 11px; line-height: 1.2; }
    .tcounters { gap: 4px 6px; }
    .tcounters li { min-width: 0; padding: 4px 8px; }
  }
  /* No motion: nothing animates and nothing is hidden by an animation; every state is told by a class and a word (the lane marks, the token's look and
     caption, the dead lane's red border and struck name), so a reader who asks for no motion sees the same states. */
  @media (prefers-reduced-motion: reduce) {
    .tok .tbadge, .skipband, .tcounters b.bump { animation: none !important; }
    .tlane.flash::after { animation: none !important; opacity: 0; }
  }

  .gallery { padding-left: 20px; }
  .drop { margin-top: 16px; padding: 24px; border: 2px dashed var(--rule); border-radius: 8px; color: var(--muted); }
  .panel:has(.wm) { grid-column: 1 / -1; max-height: none; }
  .wm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(26px, 1fr)); gap: 4px; max-width: 640px; margin: 8px 0; }
  .wm-glyph { display: grid; place-items: center; aspect-ratio: 1; border: 1px solid var(--rule); border-radius: 6px; font-size: 16px; line-height: 1; color: var(--muted); }
  .wm-glyph.working { color: var(--open); } .wm-glyph.done { color: var(--done); } .wm-glyph.finding { color: var(--failed); border-color: var(--failed); }
  .wm-glyph.cut { box-shadow: 0 0 0 2px var(--kill); } .wm-glyph.zoomed { outline: 2px solid var(--focus); outline-offset: 1px; }
  .wm-legend, .wm-kills { color: var(--muted); font-size: 13px; } .wm-kill { margin-left: 10px; color: var(--kill); } .wm-kill-count { font-weight: 600; color: var(--kill); }
  .wm.zoom { display: grid; grid-template-columns: minmax(240px, 1fr) 2fr; gap: 16px; align-items: start; }
  .wm-branch h4 { margin: 0 0 6px; } .wm-graph { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
  .wm-node { border: 1px solid var(--rule); border-radius: 6px; padding: 2px 8px; font-size: 12px; color: var(--muted); }
  .wm-node.done { color: var(--done); border-color: var(--done); } .wm-node.open, .wm-node.working { color: var(--open); border-color: var(--open); }
  .wm-evidence { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .wm-evidence h5 { margin: 0 0 4px; font-size: 12px; color: var(--muted); }
  .wm-evidence ul { margin: 0; padding-left: 18px; font-size: 13px; } .wm-evidence li.outside { color: var(--failed); font-weight: 600; }
  .wm-log { margin: 6px 0 0; padding: 6px; font-size: 11px; background: var(--bg); border: 1px solid var(--rule); border-radius: 4px; white-space: pre-wrap; }
  .wm-shot { max-width: 100%; border: 1px solid var(--rule); border-radius: 4px; } .wm-facts, .wm-notes { font-size: 13px; }
  .wm-ledger { grid-column: 1 / -1; } .wm-ledger table { border-collapse: collapse; } .wm-ledger th, .wm-ledger td { padding: 3px 14px 3px 0; text-align: left; font-size: 14px; }
  .wm-ledger tr.alarm td { color: var(--failed); font-weight: 600; } .wm-price { font-weight: 600; }
  /* A public replay draws no part that tells a kill and a resume, nor a cell's mark of a kill that cut it; ?debug=durability
     draws them (PANELS.md, "What a public replay shows"). */
  .hide-durability .durability { display: none !important; }
  .hide-durability .wm-glyph.cut { box-shadow: none; }
  /* No dollar figure is drawn by default: a part marked cost shows only with ?debug=cost (or ?debug=durability). */
  .hide-cost .cost { display: none !important; }
  /* The receipts and a look's picture, one click away. */
  .counters > details.receipts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .counters > details.receipts > summary { cursor: pointer; color: var(--muted); font-size: 13px; }
  .counters > details.receipts[open] { flex-basis: 100%; }
  details.vz-receipts > summary, details.vz-picture > summary { cursor: pointer; color: var(--muted); font-size: 13px; margin: 6px 0; }
  .vz-cited { margin: 4px 0; font-size: 13px; color: var(--muted); }
  /* The document panel: each cited page drawn whole at the panel's width, its boxes placed over it in percent. */
  .panel:has(.doc-panel) { grid-column: 1 / -1; max-height: none; overflow: visible; }
  .doc-title { margin: 0 0 10px; }
  .doc-final { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
  .doc-page { margin: 0 0 18px; }
  /* An outline, not a border: a box in percent is placed on the page itself, edge to edge. */
  .doc-sheet { position: relative; width: 100%; max-width: 820px; background: #fff; outline: 1px solid var(--rule); }
  .doc-sheet .pdf-picture { display: block; width: 100%; height: 100%; }
  .doc-sheet.pdf-wait { aspect-ratio: 8.5 / 11; display: grid; place-items: center; padding: 16px; text-align: center; color: var(--muted); background: var(--panel); outline-style: dashed; }
  .doc-box { border: 2px solid var(--focus); background: rgba(47, 95, 208, 0.08); }
  .doc-box.hot { border-color: var(--token); background: var(--glow); }
  /* A label is no wider than its box or 14em, cut short with an ellipsis: the rows under the page and the box's title hold its words whole. */
  .doc-box-label { position: absolute; left: -2px; bottom: 100%; max-width: max(calc(100% + 4px), 14em); overflow: hidden; text-overflow: ellipsis; padding: 0 4px; font-size: 11px; line-height: 1.4; white-space: nowrap; color: #fff; background: var(--focus); border-radius: 3px 3px 0 0; }
  /* On a narrow page a box keeps only its row's number; the rows under the page say the rest. */
  @media (max-width: 700px) { .doc-box-words { display: none; } }
  .doc-box.hot .doc-box-label { color: var(--token-ink); background: var(--token); }
  .doc-page figcaption { margin: 6px 0 4px; font-size: 13px; color: var(--muted); }
  .doc-marks { margin: 0; padding-left: 22px; font-size: 14px; }
  .doc-marks li::marker { font-weight: 700; color: var(--focus); }
  .doc-mark.hot { background: var(--glow); }
  .doc-note { color: var(--muted); }