omkit 0.8.23 → 0.8.25

package/dist/output/writers/report/report.css

@@ -62,428 +62,1862 @@
   }
 }
 
-* { box-sizing: border-box; }
-html, body { margin: 0; height: 100%; }
+* {
+  box-sizing: border-box;
+}
+html,
+body {
+  margin: 0;
+  height: 100%;
+}
 body {
   background: var(--bg);
   color: var(--text);
   font: 13px/1.4 var(--sans);
   overflow: hidden;
 }
-button { font: inherit; color: inherit; }
-[hidden] { display: none !important; }
+button {
+  font: inherit;
+  color: inherit;
+}
+[hidden] {
+  display: none !important;
+}
 
 /* ── loader ─────────────────────────────────────────────── */
 #loader {
-  position: fixed; inset: 0; display: grid; place-items: center;
-  background: var(--bg); z-index: 100;
+  position: fixed;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  background: var(--bg);
+  z-index: 100;
+}
+.loader-card {
+  display: grid;
+  justify-items: center;
+  gap: 14px;
 }
-.loader-card { display: grid; justify-items: center; gap: 14px; }
 .loader-spin {
-  width: 42px; height: 42px; border-radius: 50%;
-  border: 3px solid var(--line); border-top-color: var(--accent);
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  border: 3px solid var(--line);
+  border-top-color: var(--accent);
   animation: spin 0.9s linear infinite;
 }
-.loader-title { font-size: 16px; font-weight: 600; }
-.loader-step { color: var(--text-3); font-size: 12px; }
-@keyframes spin { to { transform: rotate(360deg); } }
+.loader-title {
+  font-size: 16px;
+  font-weight: 600;
+}
+.loader-step {
+  color: var(--text-3);
+  font-size: 12px;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
 
 /* ── shell ──────────────────────────────────────────────── */
 #app {
-  height: 100vh; display: grid; gap: 10px; padding: 12px 14px 14px;
+  height: 100vh;
+  display: grid;
+  gap: 10px;
+  padding: 12px 14px 14px;
   grid-template-rows: auto minmax(0, 1fr) 230px;
 }
-.top { display: flex; align-items: center; gap: 14px; min-width: 0; }
-.top .titles { min-width: 0; flex: 1; }
-.top h1 { margin: 0; font-size: 19px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.top .meta { color: var(--text-2); display: flex; gap: 10px; align-items: center; margin-top: 3px; flex-wrap: wrap; }
-.top .meta .sep { color: var(--text-3); }
-.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
-.dot.ok { background: var(--ok); }
-.dot.failed { background: var(--fail); }
-.dot.cancelled { background: var(--cancel); }
-.dot.running { background: var(--running); }
+.top {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  min-width: 0;
+}
+.top .titles {
+  min-width: 0;
+  flex: 1;
+}
+.top h1 {
+  margin: 0;
+  font-size: 19px;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.top .meta {
+  color: var(--text-2);
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  margin-top: 3px;
+  flex-wrap: wrap;
+}
+.top .meta .sep {
+  color: var(--text-3);
+}
+.dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  display: inline-block;
+  flex: none;
+}
+.dot.ok {
+  background: var(--ok);
+}
+.dot.failed {
+  background: var(--fail);
+}
+.dot.cancelled {
+  background: var(--cancel);
+}
+.dot.running {
+  background: var(--running);
+}
 
-.btn-group { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); }
+.btn-group {
+  display: flex;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--panel);
+}
 .btn {
-  border: 0; background: transparent; padding: 7px 12px; cursor: pointer;
-  display: inline-flex; align-items: center; gap: 7px; color: var(--text-2); white-space: nowrap;
-}
-.btn + .btn { border-left: 1px solid var(--line); }
-.btn:hover { background: var(--raise); color: var(--text); }
-.btn.active { background: var(--accent); color: #fff; }
-.btn svg { width: 15px; height: 15px; }
-.btn.solo { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
+  border: 0;
+  background: transparent;
+  padding: 7px 12px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  color: var(--text-2);
+  white-space: nowrap;
+}
+.btn + .btn {
+  border-left: 1px solid var(--line);
+}
+.btn:hover {
+  background: var(--raise);
+  color: var(--text);
+}
+.btn.active {
+  background: var(--accent);
+  color: #fff;
+}
+.btn svg {
+  width: 15px;
+  height: 15px;
+}
+.btn.solo {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--panel);
+}
 
 .main {
-  display: grid; gap: 10px; min-height: 0;
+  display: grid;
+  gap: 10px;
+  min-height: 0;
   grid-template-columns: minmax(0, 1fr) 320px;
 }
-.main.no-details { grid-template-columns: minmax(0, 1fr); }
-.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; min-height: 0; min-width: 0; }
+.main.no-details {
+  grid-template-columns: minmax(0, 1fr);
+}
+.card {
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  min-height: 0;
+  min-width: 0;
+}
 
 /* ── timeline: tree + chart share one vertical scroll ──── */
-.timeline { display: grid; grid-template-rows: 34px minmax(0, 1fr); overflow: hidden; }
-.tl-head { display: grid; grid-template-columns: var(--tree-w, 420px) minmax(0, 1fr); border-bottom: 1px solid var(--line); }
-.tl-head .cols { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; border-right: 1px solid var(--line); }
-.tl-head .cols > div { padding: 0 12px; color: var(--text-2); font-weight: 600; font-size: 12px; }
-.tl-head .cols > div + div { border-left: 1px solid var(--line-soft); height: 100%; display: flex; align-items: center; }
-.tl-head svg { display: block; width: 100%; height: 34px; }
-.tl-body { overflow: auto; display: grid; grid-template-columns: var(--tree-w, 420px) minmax(0, 1fr); align-items: start; position: relative; }
+.timeline {
+  display: grid;
+  grid-template-rows: 34px minmax(0, 1fr);
+  overflow: hidden;
+}
+.tl-head {
+  display: grid;
+  grid-template-columns: var(--tree-w, 420px) minmax(0, 1fr);
+  border-bottom: 1px solid var(--line);
+}
+.tl-head .cols {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-items: center;
+  border-right: 1px solid var(--line);
+}
+.tl-head .cols > div {
+  padding: 0 12px;
+  color: var(--text-2);
+  font-weight: 600;
+  font-size: 12px;
+}
+.tl-head .cols > div + div {
+  border-left: 1px solid var(--line-soft);
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+.tl-head svg {
+  display: block;
+  width: 100%;
+  height: 34px;
+}
+.tl-body {
+  overflow: auto;
+  display: grid;
+  grid-template-columns: var(--tree-w, 420px) minmax(0, 1fr);
+  align-items: start;
+  position: relative;
+}
 
-.tree { border-right: 1px solid var(--line); position: sticky; left: 0; background: var(--panel); z-index: 2; }
+.tree {
+  border-right: 1px solid var(--line);
+  position: sticky;
+  left: 0;
+  background: var(--panel);
+  z-index: 2;
+}
 .row {
-  height: var(--row-h); display: grid; grid-template-columns: minmax(0, 1fr);
-  align-items: center; cursor: pointer; border-bottom: 1px solid transparent;
+  height: var(--row-h);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-items: center;
+  cursor: pointer;
+  border-bottom: 1px solid transparent;
+}
+.row:hover {
+  background: var(--raise);
+}
+.row.selected {
+  background: var(--accent-soft);
+}
+.row .name {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  min-width: 0;
+  padding-right: 8px;
 }
-.row:hover { background: var(--raise); }
-.row.selected { background: var(--accent-soft); }
-.row .name { display: flex; align-items: center; gap: 7px; min-width: 0; padding-right: 8px; }
 /* the name keeps its room; the chips shrink (each to an ellipsis) into what is left */
 /* two lines: the label (and error count), then status · duration · tags, smaller */
-.row .lines { display: flex; flex-direction: column; justify-content: center; gap: 2px; flex: 1; min-width: 0; }
-.row .l1, .row .l2 { display: flex; align-items: center; gap: 6px; min-width: 0; }
-.row .label { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.row .label .tcall { font-size: 11.5px; }
-.row .label .sep, .row .l2 .sep { color: var(--text-3); }
-.row .l2 { font-size: 11px; color: var(--text-2); font-variant-numeric: tabular-nums; }
-.row .l2 .meta { display: inline-flex; align-items: center; gap: 6px; flex: none; margin-left: auto; padding-right: 4px; }
-.row .l2 .st { display: inline-flex; align-items: center; gap: 4px; }
-.row .l2 .dot { width: 7px; height: 7px; }
-.row .l2 .du { flex: none; }
-.row .l2 .chips { flex: 0 1 auto; flex-wrap: nowrap; overflow: hidden; }
-.row .l2 .chip { flex: 0 1 auto; min-width: 24px; font-size: 10px; line-height: 14px; }
-.row .l2 .chip.more { flex: none; }
-.row .twist { width: 16px; height: 16px; flex: none; display: grid; place-items: center; color: var(--text-3); border: 0; background: none; padding: 0; cursor: pointer; }
-.row .twist svg { width: 12px; height: 12px; transition: transform 0.12s; }
-.row .twist.open svg { transform: rotate(90deg); }
-.row .icon { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 6px; }
-.row .icon svg { width: 14px; height: 14px; }
-.guide { width: 14px; flex: none; align-self: stretch; position: relative; }
-.guide::before { content: ""; position: absolute; left: 7px; top: 0; bottom: 0; border-left: 1px solid var(--line); }
+.row .lines {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 2px;
+  flex: 1;
+  min-width: 0;
+}
+.row .l1,
+.row .l2 {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+.row .label {
+  flex: 0 1 auto;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.row .label .tcall {
+  font-size: 11.5px;
+}
+.row .label .sep,
+.row .l2 .sep {
+  color: var(--text-3);
+}
+.row .l2 {
+  font-size: 11px;
+  color: var(--text-2);
+  font-variant-numeric: tabular-nums;
+}
+.row .l2 .meta {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex: none;
+  margin-left: auto;
+  padding-right: 4px;
+}
+.row .l2 .st {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.row .l2 .dot {
+  width: 7px;
+  height: 7px;
+}
+.row .l2 .du {
+  flex: none;
+}
+.row .l2 .chips {
+  flex: 0 1 auto;
+  flex-wrap: nowrap;
+  overflow: hidden;
+}
+.row .l2 .chip {
+  flex: 0 1 auto;
+  min-width: 24px;
+  font-size: 10px;
+  line-height: 14px;
+}
+.row .l2 .chip.more {
+  flex: none;
+}
+.row .twist {
+  width: 16px;
+  height: 16px;
+  flex: none;
+  display: grid;
+  place-items: center;
+  color: var(--text-3);
+  border: 0;
+  background: none;
+  padding: 0;
+  cursor: pointer;
+}
+.row .twist svg {
+  width: 12px;
+  height: 12px;
+  transition: transform 0.12s;
+}
+.row .twist.open svg {
+  transform: rotate(90deg);
+}
+.row .icon {
+  width: 22px;
+  height: 22px;
+  flex: none;
+  display: grid;
+  place-items: center;
+  border-radius: 6px;
+}
+.row .icon svg {
+  width: 14px;
+  height: 14px;
+}
+.guide {
+  width: 14px;
+  flex: none;
+  align-self: stretch;
+  position: relative;
+}
+.guide::before {
+  content: "";
+  position: absolute;
+  left: 7px;
+  top: 0;
+  bottom: 0;
+  border-left: 1px solid var(--line);
+}
 
-.chart { position: relative; min-width: 0; }
-.chart svg { display: block; overflow: hidden; }
+.chart {
+  position: relative;
+  min-width: 0;
+}
+.chart svg {
+  display: block;
+  overflow: hidden;
+}
 /* the row's hit target already spans the label — letting it through keeps the marks under it hoverable */
-.chart .bar-label { font-size: 12px; fill: var(--bar-text); font-weight: 500; pointer-events: none; }
-.chart .hit { fill: transparent; cursor: pointer; }
-.chart .hit:hover + .bar { filter: brightness(1.15); }
-.chart .bar-label.outside { fill: var(--text); }
-.chart .mark-label { font-size: 11px; fill: var(--text-2); cursor: pointer; }
-.chart .mark-label:hover { fill: var(--text); }
-.chart .grid line { stroke: var(--line-soft); }
-.chart .cursor { stroke: var(--text-2); stroke-dasharray: 3 3; pointer-events: none; }
-.chart .link { fill: none; stroke: var(--text-3); stroke-width: 1.2; }
-.chart .bar { cursor: pointer; }
-.chart .bar.selected { stroke: var(--text); stroke-width: 2; }
-.chart .mark { cursor: pointer; stroke: var(--panel); stroke-width: 1.5; }
-.axis text { fill: var(--text-2); font-size: 11px; }
-.axis line, .axis path { stroke: var(--line); }
+.chart .bar-label {
+  font-size: 12px;
+  fill: var(--bar-text);
+  font-weight: 500;
+  pointer-events: none;
+}
+.chart .hit {
+  fill: transparent;
+  cursor: pointer;
+}
+.chart .hit:hover + .bar {
+  filter: brightness(1.15);
+}
+.chart .bar-label.outside {
+  fill: var(--text);
+}
+.chart .mark-label {
+  font-size: 11px;
+  fill: var(--text-2);
+  cursor: pointer;
+}
+.chart .mark-label:hover {
+  fill: var(--text);
+}
+.chart .grid line {
+  stroke: var(--line-soft);
+}
+.chart .cursor {
+  stroke: var(--text-2);
+  stroke-dasharray: 3 3;
+  pointer-events: none;
+}
+.chart .link {
+  fill: none;
+  stroke: var(--text-3);
+  stroke-width: 1.2;
+}
+.chart .bar {
+  cursor: pointer;
+}
+.chart .bar.selected {
+  stroke: var(--text);
+  stroke-width: 2;
+}
+.chart .mark {
+  cursor: pointer;
+  stroke: var(--panel);
+  stroke-width: 1.5;
+}
+.axis text {
+  fill: var(--text-2);
+  font-size: 11px;
+}
+.axis line,
+.axis path {
+  stroke: var(--line);
+}
 
-.flow-view { position: absolute; inset: 0; }
-.flow-view svg { width: 100%; height: 100%; display: block; cursor: grab; }
-.flow-card rect.box { fill: var(--raise); stroke: var(--line); rx: 8; }
-.flow-card.selected rect.box { stroke: var(--accent); stroke-width: 2; }
-.flow-card text { fill: var(--text); font-size: 12px; }
-.flow-card text.nm { font-weight: 600; }
-.flow-card .flow-icon { pointer-events: none; }
-.flow-seq { fill: none; stroke: var(--text-3); stroke-width: 1.4; stroke-dasharray: 5 4; }
-.flow-seq.parallel { stroke-dasharray: 1 4; stroke-linecap: round; stroke-width: 2; opacity: 0.8; }
-.flow-arrowhead { fill: var(--text-3); }
-.flow-par { fill: var(--text-3); font-size: 10px; font-style: italic; }
-.flow-shot-t { fill: var(--text-3); font-size: 10.5px; pointer-events: none; stroke: var(--panel); stroke-width: 4px; paint-order: stroke; }
-.flow-card text.sub { fill: var(--text-3); font-size: 11px; }
-.flow-card .tchip text { fill: var(--text); font-size: 10.5px; }
-.flow-card .tchip.more text { fill: var(--text-3); }
-.flow-link { fill: none; stroke: var(--text-3); stroke-width: 1.3; }
+.flow-view {
+  position: absolute;
+  inset: 0;
+}
+.flow-view svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+  cursor: grab;
+}
+.flow-card rect.box {
+  fill: var(--raise);
+  stroke: var(--line);
+  rx: 8;
+}
+.flow-card.selected rect.box {
+  stroke: var(--accent);
+  stroke-width: 2;
+}
+.flow-card text {
+  fill: var(--text);
+  font-size: 12px;
+}
+.flow-card text.nm {
+  font-weight: 600;
+}
+.flow-card .flow-icon {
+  pointer-events: none;
+}
+.flow-seq {
+  fill: none;
+  stroke: var(--text-3);
+  stroke-width: 1.4;
+  stroke-dasharray: 5 4;
+}
+.flow-seq.parallel {
+  stroke-dasharray: 1 4;
+  stroke-linecap: round;
+  stroke-width: 2;
+  opacity: 0.8;
+}
+.flow-arrowhead {
+  fill: var(--text-3);
+}
+.flow-par {
+  fill: var(--text-3);
+  font-size: 10px;
+  font-style: italic;
+}
+.flow-shot-t {
+  fill: var(--text-3);
+  font-size: 10.5px;
+  pointer-events: none;
+  stroke: var(--panel);
+  stroke-width: 4px;
+  paint-order: stroke;
+}
+.flow-card text.sub {
+  fill: var(--text-3);
+  font-size: 11px;
+}
+.flow-card .tchip text {
+  fill: var(--text);
+  font-size: 10.5px;
+}
+.flow-card .tchip.more text {
+  fill: var(--text-3);
+}
+.flow-link {
+  fill: none;
+  stroke: var(--text-3);
+  stroke-width: 1.3;
+}
 
 /* ── details ────────────────────────────────────────────── */
-.details { display: grid; grid-template-rows: auto auto minmax(0, 1fr); overflow: hidden; }
-.details .dh { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; font-weight: 600; }
-.details .x { border: 0; background: none; cursor: pointer; color: var(--text-2); padding: 2px; }
-.details .who { display: flex; align-items: center; gap: 10px; padding: 4px 14px 10px; }
-.details .who .icon { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; }
-.details .who .icon svg { width: 16px; height: 16px; }
-.details .who .nm { font-size: 16px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--raise); font-size: 12px; }
-.details .scroll { overflow: auto; padding: 0 14px 14px; }
-.kv .v.mono-sm { font: 11.5px var(--mono); color: var(--text-2); }
+.details {
+  display: grid;
+  grid-template-rows: auto auto minmax(0, 1fr);
+  overflow: hidden;
+}
+.details .dh {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  font-weight: 600;
+}
+.details .x {
+  border: 0;
+  background: none;
+  cursor: pointer;
+  color: var(--text-2);
+  padding: 2px;
+}
+.details .who {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 4px 14px 10px;
+}
+.details .who .icon {
+  width: 30px;
+  height: 30px;
+  border-radius: 8px;
+  display: grid;
+  place-items: center;
+  flex: none;
+}
+.details .who .icon svg {
+  width: 16px;
+  height: 16px;
+}
+.details .who .nm {
+  font-size: 16px;
+  font-weight: 600;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 10px;
+  border-radius: 999px;
+  background: var(--raise);
+  font-size: 12px;
+}
+.details .scroll {
+  overflow: auto;
+  padding: 0 14px 14px;
+}
+.kv .v.mono-sm {
+  font: 11.5px var(--mono);
+  color: var(--text-2);
+}
 /* details accordion */
-.acc { border-top: 1px solid var(--line-soft); }
-.acc-sec { border-bottom: 1px solid var(--line-soft); }
-.acc-h { display: flex; align-items: center; gap: 6px; padding: 8px 2px; font-weight: 600; cursor: pointer; list-style: none; user-select: none; }
-.acc-h::-webkit-details-marker { display: none; }
-.acc-h svg { width: 12px; height: 12px; color: var(--text-3); transition: transform 0.12s; flex: none; }
-.acc-sec[open] > .acc-h svg { transform: rotate(90deg); }
-.acc-h:hover { color: var(--accent); }
-.acc-n { margin-left: auto; min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--raise); color: var(--text-2); font-size: 11px; font-weight: 600; text-align: center; }
-.acc-sec.errors .acc-n { background: var(--fail); color: #fff; }
-.acc-sec.empty .acc-h { color: var(--text-3); font-weight: 500; cursor: default; }
-.acc-sec.empty .acc-h svg { opacity: 0.35; }
-.acc-sec.empty .acc-n { background: none; color: var(--text-3); }
-.acc-b { padding: 0 0 12px; }
-.acc-b > .params { margin-bottom: 8px; }
-.acc-b .section-title:first-child { margin-top: 0; }
-.acc-file { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; color: var(--text-2); }
-.dshots { display: grid; gap: 6px; }
-.dshot { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 4px; border: 1px solid transparent; border-radius: 8px; cursor: pointer; }
-.dshot:hover { border-color: var(--accent); background: var(--accent-soft); }
-.dshot .thumb { width: 64px; }
-.dshot .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.dshot .t { color: var(--text-3); font-size: 11px; font-variant-numeric: tabular-nums; }
-.kv { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 6px 10px; margin: 2px 0 12px; }
-.kv .k { color: var(--text-2); }
-.kv .v { min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
-a { color: var(--accent); text-decoration: none; }
-a:hover { text-decoration: underline; }
-.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 0 0 10px; overflow-x: auto; }
-.tab { border: 0; background: none; padding: 7px 9px; cursor: pointer; color: var(--text-2); border-bottom: 2px solid transparent; white-space: nowrap; }
-.tab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
-.section-title { font-weight: 600; margin: 14px 0 8px; }
-.ev-list { list-style: none; margin: 0; padding: 0; position: relative; }
-.ev-list li { display: grid; grid-template-columns: 64px 18px minmax(0, 1fr); gap: 8px; align-items: start; padding: 4px 0; }
-.ev-list .t { color: var(--text-2); font-variant-numeric: tabular-nums; text-align: right; }
-.ev-list .m { overflow-wrap: anywhere; }
-.ev-ico { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px; }
-.ev-ico svg { width: 10px; height: 10px; }
+.acc {
+  border-top: 1px solid var(--line-soft);
+}
+.acc-sec {
+  border-bottom: 1px solid var(--line-soft);
+}
+.acc-h {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 2px;
+  font-weight: 600;
+  cursor: pointer;
+  list-style: none;
+  user-select: none;
+}
+.acc-h::-webkit-details-marker {
+  display: none;
+}
+.acc-h svg {
+  width: 12px;
+  height: 12px;
+  color: var(--text-3);
+  transition: transform 0.12s;
+  flex: none;
+}
+.acc-sec[open] > .acc-h svg {
+  transform: rotate(90deg);
+}
+.acc-h:hover {
+  color: var(--accent);
+}
+.acc-n {
+  margin-left: auto;
+  min-width: 18px;
+  padding: 0 6px;
+  border-radius: 999px;
+  background: var(--raise);
+  color: var(--text-2);
+  font-size: 11px;
+  font-weight: 600;
+  text-align: center;
+}
+.acc-sec.errors .acc-n {
+  background: var(--fail);
+  color: #fff;
+}
+.acc-sec.empty .acc-h {
+  color: var(--text-3);
+  font-weight: 500;
+  cursor: default;
+}
+.acc-sec.empty .acc-h svg {
+  opacity: 0.35;
+}
+.acc-sec.empty .acc-n {
+  background: none;
+  color: var(--text-3);
+}
+.acc-b {
+  padding: 0 0 12px;
+}
+.acc-b > .params {
+  margin-bottom: 8px;
+}
+.acc-b .section-title:first-child {
+  margin-top: 0;
+}
+.acc-file {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 6px;
+  color: var(--text-2);
+}
+.dshots {
+  display: grid;
+  gap: 6px;
+}
+.dshot {
+  display: grid;
+  grid-template-columns: 64px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 10px;
+  padding: 4px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  cursor: pointer;
+}
+.dshot:hover {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+}
+.dshot .thumb {
+  width: 64px;
+}
+.dshot .nm {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dshot .t {
+  color: var(--text-3);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+}
+.kv {
+  display: grid;
+  grid-template-columns: 92px minmax(0, 1fr);
+  gap: 6px 10px;
+  margin: 2px 0 12px;
+}
+.kv .k {
+  color: var(--text-2);
+}
+.kv .v {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  font-variant-numeric: tabular-nums;
+}
+a {
+  color: var(--accent);
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+}
+.tabs {
+  display: flex;
+  gap: 2px;
+  border-bottom: 1px solid var(--line);
+  margin: 0 0 10px;
+  overflow-x: auto;
+}
+.tab {
+  border: 0;
+  background: none;
+  padding: 7px 9px;
+  cursor: pointer;
+  color: var(--text-2);
+  border-bottom: 2px solid transparent;
+  white-space: nowrap;
+}
+.tab.active {
+  color: var(--text);
+  border-bottom-color: var(--accent);
+  font-weight: 600;
+}
+.section-title {
+  font-weight: 600;
+  margin: 14px 0 8px;
+}
+.ev-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  position: relative;
+}
+.ev-list li {
+  display: grid;
+  grid-template-columns: 64px 18px minmax(0, 1fr);
+  gap: 8px;
+  align-items: start;
+  padding: 4px 0;
+}
+.ev-list .t {
+  color: var(--text-2);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+.ev-list .m {
+  overflow-wrap: anywhere;
+}
+.ev-ico {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  margin-top: 1px;
+}
+.ev-ico svg {
+  width: 10px;
+  height: 10px;
+}
 pre.code {
-  margin: 0; padding: 10px; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 8px;
-  font: 12px/1.45 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 60vh; overflow: auto;
-}
-.muted { color: var(--text-3); }
-.thumb { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; cursor: pointer; background: var(--panel-2); aspect-ratio: 16 / 10; display: grid; place-items: center; }
-.thumb:hover { border-color: var(--accent); }
-.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
-.thumb .json-ico { font: 600 12px var(--mono); color: var(--text-3); }
+  margin: 0;
+  padding: 10px;
+  background: var(--panel-2);
+  border: 1px solid var(--line-soft);
+  border-radius: 8px;
+  font: 12px/1.45 var(--mono);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  max-height: 60vh;
+  overflow: auto;
+}
+.muted {
+  color: var(--text-3);
+}
+.thumb {
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  overflow: hidden;
+  cursor: pointer;
+  background: var(--panel-2);
+  aspect-ratio: 16 / 10;
+  display: grid;
+  place-items: center;
+}
+.thumb:hover {
+  border-color: var(--accent);
+}
+.thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.thumb .json-ico {
+  font: 600 12px var(--mono);
+  color: var(--text-3);
+}
 
 /* ── bottom strip ───────────────────────────────────────── */
-.bottom { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) 250px; min-height: 0; }
-.lower { display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
-.lower .tabs { margin: 0; padding: 0 10px; align-items: center; }
-.lower .tabs .spacer { flex: 1; }
-.filter { border: 1px solid var(--line); background: var(--panel-2); border-radius: 7px; padding: 5px 9px; color: var(--text); width: 200px; margin: 4px 0; }
-.lower .body { overflow: auto; padding: 10px 12px; }
-.gallery { display: flex; gap: 12px; }
-.gal-item { flex: none; width: 160px; cursor: pointer; border: 1px solid transparent; border-radius: 8px; padding: 4px; }
-.gal-item:hover, .gal-item.active { border-color: var(--accent); background: var(--accent-soft); }
-.gal-item .thumb { aspect-ratio: 16 / 10; }
-.gal-item .cap { display: flex; gap: 8px; margin-top: 5px; font-size: 12px; }
-.gal-item .cap .t { color: var(--text-2); font-variant-numeric: tabular-nums; }
-.gal-item .cap .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.gal-item .sz { color: var(--text-3); font-size: 11px; }
-table.list { width: 100%; border-collapse: collapse; font-size: 12px; }
-table.list td { padding: 3px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
-table.list td.t { color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; width: 1%; }
-table.list td.p { color: var(--text-3); white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; width: 1%; }
-table.list td.m { font-family: var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
-table.list tr.err td.m { color: var(--fail); }
-table.list tr { cursor: pointer; }
-table.list tr:hover td { background: var(--raise); }
-.legend { padding: 10px 14px; }
+.bottom {
+  display: grid;
+  gap: 10px;
+  grid-template-columns: minmax(0, 1fr) 250px;
+  min-height: 0;
+}
+.lower {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  overflow: hidden;
+}
+.lower .tabs {
+  margin: 0;
+  padding: 0 10px;
+  align-items: center;
+}
+.lower .tabs .spacer {
+  flex: 1;
+}
+.filter {
+  border: 1px solid var(--line);
+  background: var(--panel-2);
+  border-radius: 7px;
+  padding: 5px 9px;
+  color: var(--text);
+  width: 200px;
+  margin: 4px 0;
+}
+.lower .body {
+  overflow: auto;
+  padding: 10px 12px;
+}
+.gallery {
+  display: flex;
+  gap: 12px;
+}
+.gal-item {
+  flex: none;
+  width: 160px;
+  cursor: pointer;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: 4px;
+}
+.gal-item:hover,
+.gal-item.active {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+}
+.gal-item .thumb {
+  aspect-ratio: 16 / 10;
+}
+.gal-item .cap {
+  display: flex;
+  gap: 8px;
+  margin-top: 5px;
+  font-size: 12px;
+}
+.gal-item .cap .t {
+  color: var(--text-2);
+  font-variant-numeric: tabular-nums;
+}
+.gal-item .cap .n {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.gal-item .sz {
+  color: var(--text-3);
+  font-size: 11px;
+}
+table.list {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+table.list td {
+  padding: 3px 8px;
+  border-bottom: 1px solid var(--line-soft);
+  vertical-align: top;
+}
+table.list td.t {
+  color: var(--text-2);
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+  width: 1%;
+}
+table.list td.p {
+  color: var(--text-3);
+  white-space: nowrap;
+  max-width: 260px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 1%;
+}
+table.list td.m {
+  font-family: var(--mono);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+table.list tr.err td.m {
+  color: var(--fail);
+}
+table.list tr {
+  cursor: pointer;
+}
+table.list tr:hover td {
+  background: var(--raise);
+}
+.legend {
+  padding: 10px 14px;
+}
 /* at the end of the tree's header cell, clear of the time axis; top-right in the flow (no axis) */
-.legend-btn { position: absolute; top: 6px; left: calc(var(--tree-w, 360px) - 30px); z-index: 6; background: var(--panel); cursor: pointer; }
-.timeline.is-flow .legend-btn { left: auto; right: 8px; }
-.timeline.is-flow .legend-pop { left: auto; right: 8px; }
-.legend-btn.active { color: var(--accent); background: var(--accent-soft); }
+.legend-btn {
+  position: absolute;
+  top: 6px;
+  left: calc(var(--tree-w, 360px) - 30px);
+  z-index: 6;
+  background: var(--panel);
+  cursor: pointer;
+}
+.timeline.is-flow .legend-btn {
+  left: auto;
+  right: 8px;
+}
+.timeline.is-flow .legend-pop {
+  left: auto;
+  right: 8px;
+}
+.legend-btn.active {
+  color: var(--accent);
+  background: var(--accent-soft);
+}
 .legend-pop {
-  position: absolute; top: 34px; left: calc(var(--tree-w, 360px) - 30px); z-index: 7; width: 270px; background: var(--panel);
-  border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow);
-}
-.legend h3, .overview h3 { margin: 0 0 10px; font-size: 13px; font-weight: 600; }
-.legend .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 12px; }
-.legend .li { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 12px; }
-.overview { padding: 10px 14px; display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
-.overview .range { color: var(--text-2); font-size: 11px; text-align: right; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
-.overview svg { width: 100%; height: 100%; display: block; }
-.overview .brush .selection { fill: var(--accent-soft); stroke: var(--text-2); }
+  position: absolute;
+  top: 34px;
+  left: calc(var(--tree-w, 360px) - 30px);
+  z-index: 7;
+  width: 270px;
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  box-shadow: var(--shadow);
+}
+.legend h3,
+.overview h3 {
+  margin: 0 0 10px;
+  font-size: 13px;
+  font-weight: 600;
+}
+.legend .grid2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 9px 12px;
+}
+.legend .li {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--text-2);
+  font-size: 12px;
+}
+.overview {
+  padding: 10px 14px;
+  display: grid;
+  grid-template-rows: auto auto minmax(0, 1fr);
+}
+.overview .range {
+  color: var(--text-2);
+  font-size: 11px;
+  text-align: right;
+  margin-bottom: 4px;
+  font-variant-numeric: tabular-nums;
+}
+.overview svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+.overview .brush .selection {
+  fill: var(--accent-soft);
+  stroke: var(--text-2);
+}
 
 /* ── floating ───────────────────────────────────────────── */
 .tip {
-  position: fixed; pointer-events: none; z-index: 50; background: var(--panel); border: 1px solid var(--line);
-  border-radius: 8px; padding: 8px 10px; box-shadow: var(--shadow); max-width: 360px; font-size: 12px;
-}
-.tip .tt { font-weight: 600; margin-bottom: 2px; }
-.tip .ts { color: var(--text-2); }
-.tip.wide { max-width: 420px; min-width: 260px; }
-.tip .mono { font-family: var(--mono); font-size: 11px; overflow-wrap: anywhere; }
-.tip .small { color: var(--text-2); }
-.tip .summary { margin: 6px 0 0; line-height: 1.45; }
-.tip .sec { color: var(--text-3); margin: 8px 0 3px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
-.tip .sec.fail { color: var(--fail); }
-.params { display: grid; gap: 3px; }
-.param { font: 11px/1.4 var(--mono); }
-.param .pn { color: var(--text); }
-.param .pt { color: var(--accent); margin-left: 6px; }
-.param .pd { color: var(--text-3); margin-left: 6px; }
-.param .pdesc { font-family: var(--sans); color: var(--text-2); margin-left: 10px; }
-.kv .v.defined { display: flex; align-items: center; gap: 6px; }
-.kv .v.defined a { min-width: 0; overflow-wrap: anywhere; font-family: var(--mono); font-size: 12px; }
-.icon-btn { flex: none; border: 1px solid var(--line); background: var(--panel-2); color: var(--text-2); border-radius: 6px; width: 24px; height: 22px; display: grid; place-items: center; cursor: pointer; padding: 0; }
-.icon-btn:hover { color: var(--text); border-color: var(--accent); }
-.icon-btn svg { width: 13px; height: 13px; }
-.tip .hint { margin-top: 8px; color: var(--text-3); font-size: 11px; }
-.tip kbd { font: 600 10px var(--mono); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; color: var(--text-2); }
+  position: fixed;
+  pointer-events: none;
+  z-index: 50;
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 8px 10px;
+  box-shadow: var(--shadow);
+  max-width: 360px;
+  font-size: 12px;
+}
+.tip .tt {
+  font-weight: 600;
+  margin-bottom: 2px;
+}
+.tip .ts {
+  color: var(--text-2);
+}
+.tip.wide {
+  max-width: 420px;
+  min-width: 260px;
+}
+.tip .mono {
+  font-family: var(--mono);
+  font-size: 11px;
+  overflow-wrap: anywhere;
+}
+.tip .small {
+  color: var(--text-2);
+}
+.tip .summary {
+  margin: 6px 0 0;
+  line-height: 1.45;
+}
+.tip .sec {
+  color: var(--text-3);
+  margin: 8px 0 3px;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.tip .sec.fail {
+  color: var(--fail);
+}
+.params {
+  display: grid;
+  gap: 3px;
+}
+.param {
+  font: 11px/1.4 var(--mono);
+}
+.param .pn {
+  color: var(--text);
+}
+.param .pt {
+  color: var(--accent);
+  margin-left: 6px;
+}
+.param .pd {
+  color: var(--text-3);
+  margin-left: 6px;
+}
+.param .pdesc {
+  font-family: var(--sans);
+  color: var(--text-2);
+  margin-left: 10px;
+}
+.kv .v.defined {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.kv .v.defined a {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  font-family: var(--mono);
+  font-size: 12px;
+}
+.icon-btn {
+  flex: none;
+  border: 1px solid var(--line);
+  background: var(--panel-2);
+  color: var(--text-2);
+  border-radius: 6px;
+  width: 24px;
+  height: 22px;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  padding: 0;
+}
+.icon-btn:hover {
+  color: var(--text);
+  border-color: var(--accent);
+}
+.icon-btn svg {
+  width: 13px;
+  height: 13px;
+}
+.tip .hint {
+  margin-top: 8px;
+  color: var(--text-3);
+  font-size: 11px;
+}
+.tip kbd {
+  font: 600 10px var(--mono);
+  border: 1px solid var(--line);
+  border-bottom-width: 2px;
+  border-radius: 4px;
+  padding: 0 4px;
+  color: var(--text-2);
+}
 /* tag chips — one look everywhere a tag shows (the flow's SVG chips match it) */
-.chips { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
+.chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  min-width: 0;
+}
 .chip {
-  flex: none; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 6px;
-  border-radius: 4px; background: var(--raise); border: 1px solid var(--line); color: var(--text); font-size: 10.5px; line-height: 16px;
-}
-.chip.more { background: none; color: var(--text-3); }
-.badge-inline { display: inline-block; padding: 0 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 600; }
-.tip img { display: block; max-width: 240px; max-height: 150px; border-radius: 4px; margin: 6px 0; border: 1px solid var(--line); }
-.modal { position: fixed; inset: 0; background: rgba(5, 8, 18, 0.72); z-index: 60; display: grid; place-items: center; padding: 28px; }
-.modal .box { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); max-width: min(1200px, 100%); max-height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
-.modal .mh { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
-.modal .mh .nm { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.modal .mb { overflow: auto; padding: 14px; }
-.modal img { max-width: 100%; display: block; margin: auto; }
-.menu { position: fixed; z-index: 55; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: 4px; min-width: 200px; }
-.menu button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 7px 10px; border-radius: 6px; cursor: pointer; }
-.menu button:hover { background: var(--raise); }
-.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--raise); border: 1px solid var(--line); padding: 7px 14px; border-radius: 8px; z-index: 70; }
+  flex: none;
+  max-width: 170px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 0 6px;
+  border-radius: 4px;
+  background: var(--raise);
+  border: 1px solid var(--line);
+  color: var(--text);
+  font-size: 10.5px;
+  line-height: 16px;
+}
+.chip.more {
+  background: none;
+  color: var(--text-3);
+}
+.badge-inline {
+  display: inline-block;
+  padding: 0 7px;
+  border-radius: 999px;
+  background: var(--accent-soft);
+  color: var(--accent);
+  font-size: 11px;
+  font-weight: 600;
+}
+.tip img {
+  display: block;
+  max-width: 240px;
+  max-height: 150px;
+  border-radius: 4px;
+  margin: 6px 0;
+  border: 1px solid var(--line);
+}
+.modal {
+  position: fixed;
+  inset: 0;
+  background: rgba(5, 8, 18, 0.72);
+  z-index: 60;
+  display: grid;
+  place-items: center;
+  padding: 28px;
+}
+.modal .box {
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  box-shadow: var(--shadow);
+  max-width: min(1200px, 100%);
+  max-height: 100%;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  overflow: hidden;
+}
+.modal .mh {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--line);
+}
+.modal .mh .nm {
+  font-weight: 600;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.modal .mb {
+  overflow: auto;
+  padding: 14px;
+}
+.modal img {
+  max-width: 100%;
+  display: block;
+  margin: auto;
+}
+.menu {
+  position: fixed;
+  z-index: 55;
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  box-shadow: var(--shadow);
+  padding: 4px;
+  min-width: 200px;
+}
+.menu button {
+  display: block;
+  width: 100%;
+  text-align: left;
+  border: 0;
+  background: none;
+  padding: 7px 10px;
+  border-radius: 6px;
+  cursor: pointer;
+}
+.menu button:hover {
+  background: var(--raise);
+}
+.toast {
+  position: fixed;
+  bottom: 18px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--raise);
+  border: 1px solid var(--line);
+  padding: 7px 14px;
+  border-radius: 8px;
+  z-index: 70;
+}
 
 /* ── title info, locate, defined-at, code popover ───────── */
-.title-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
-.title-row h1 { min-width: 0; }
-.info-btn { flex: none; width: 22px; height: 22px; border: 0; border-radius: 50%; background: none; color: var(--text-3); display: grid; place-items: center; cursor: help; padding: 0; }
-.info-btn:hover, .info-btn:focus-visible { color: var(--accent); background: var(--accent-soft); }
-.info-btn svg { width: 17px; height: 17px; }
-.gal-item .cap .locate { margin-left: auto; width: 22px; height: 20px; }
-.kv .v.defined { flex-wrap: wrap; }
-.kv .v.defined .defined-name { color: var(--text-2); font-family: var(--mono); font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-a.icon-btn { text-decoration: none; }
-.chart .code-btn, .flow-card .code-btn { cursor: pointer; opacity: 0; transition: opacity 0.12s; }
-.chart g.r:hover .code-btn, .chart g.r.sel .code-btn, .flow-card:hover .code-btn, .flow-card.selected .code-btn { opacity: 1; }
-.code-btn circle { fill: var(--panel); stroke: var(--text-3); stroke-width: 1.2; }
-.code-btn text { fill: var(--text-2); font: 700 9px var(--mono); pointer-events: none; }
-.code-btn:hover circle { stroke: var(--accent); }
-.code-btn:hover text { fill: var(--accent); }
-.chart line.pin.flash { animation: pin-flash 0.6s ease-in-out 3; }
-.chart circle.mark.flash { animation: mark-flash 0.6s ease-in-out 3; transform-box: fill-box; transform-origin: center; }
-@keyframes pin-flash { 50% { stroke-width: 5; } }
-@keyframes mark-flash { 50% { transform: scale(1.9); } }
+.title-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+.title-row h1 {
+  min-width: 0;
+}
+.info-btn {
+  flex: none;
+  width: 22px;
+  height: 22px;
+  border: 0;
+  border-radius: 50%;
+  background: none;
+  color: var(--text-3);
+  display: grid;
+  place-items: center;
+  cursor: help;
+  padding: 0;
+}
+.info-btn:hover,
+.info-btn:focus-visible {
+  color: var(--accent);
+  background: var(--accent-soft);
+}
+.info-btn svg {
+  width: 17px;
+  height: 17px;
+}
+.gal-item .cap .locate {
+  margin-left: auto;
+  width: 22px;
+  height: 20px;
+}
+.kv .v.defined {
+  flex-wrap: wrap;
+}
+.kv .v.defined .defined-name {
+  color: var(--text-2);
+  font-family: var(--mono);
+  font-size: 12px;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+a.icon-btn {
+  text-decoration: none;
+}
+.chart .code-btn,
+.flow-card .code-btn {
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.12s;
+}
+.chart g.r:hover .code-btn,
+.chart g.r.sel .code-btn,
+.flow-card:hover .code-btn,
+.flow-card.selected .code-btn {
+  opacity: 1;
+}
+.code-btn circle {
+  fill: var(--panel);
+  stroke: var(--text-3);
+  stroke-width: 1.2;
+}
+.code-btn text {
+  fill: var(--text-2);
+  font: 700 9px var(--mono);
+  pointer-events: none;
+}
+.code-btn:hover circle {
+  stroke: var(--accent);
+}
+.code-btn:hover text {
+  fill: var(--accent);
+}
+.chart line.pin.flash {
+  animation: pin-flash 0.6s ease-in-out 3;
+}
+.chart circle.mark.flash {
+  animation: mark-flash 0.6s ease-in-out 3;
+  transform-box: fill-box;
+  transform-origin: center;
+}
+@keyframes pin-flash {
+  50% {
+    stroke-width: 5;
+  }
+}
+@keyframes mark-flash {
+  50% {
+    transform: scale(1.9);
+  }
+}
 .code-pop {
-  position: fixed; z-index: 58; width: 640px; max-width: 92vw; max-height: 70vh; display: flex; flex-direction: column;
-  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); overflow: hidden;
-}
-.code-pop .cp-head { display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px; background: var(--panel-2); border-bottom: 1px solid var(--line); }
-.code-pop .cp-path { font: 12px var(--mono); color: var(--text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.code-pop .cp-name { flex: 1; text-align: right; color: var(--text-3); font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.code-pop .cp-body { overflow: auto; min-height: 0; }
-.code-pop .cp-code { font: 11.5px/1.65 var(--mono); padding: 8px 0; min-width: max-content; }
-.code-pop .cl { display: grid; grid-template-columns: 48px auto; white-space: pre; }
-.code-pop .cl.at { background: var(--accent-soft); }
-.code-pop .ln { color: var(--text-3); text-align: right; padding-right: 14px; user-select: none; }
-.code-pop .lc { padding-right: 16px; }
-.code-pop .cp-more { padding: 6px 14px 10px; font-size: 12px; }
-:root { --tk-c: #6f7a99; --tk-s: #7ee0a3; --tk-n: #f0b26b; --tk-k: #c792ea; --tk-f: #82aaff; --tk-t: #ffcb6b; }
-:root[data-theme="light"] { --tk-c: #6a737d; --tk-s: #116329; --tk-n: #b35900; --tk-k: #cf222e; --tk-f: #6639ba; --tk-t: #953800; }
+  position: fixed;
+  z-index: 58;
+  width: 640px;
+  max-width: 92vw;
+  max-height: 70vh;
+  display: flex;
+  flex-direction: column;
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  box-shadow: var(--shadow);
+  overflow: hidden;
+}
+.code-pop .cp-head {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 8px 6px 12px;
+  background: var(--panel-2);
+  border-bottom: 1px solid var(--line);
+}
+.code-pop .cp-path {
+  font: 12px var(--mono);
+  color: var(--text-2);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.code-pop .cp-name {
+  flex: 1;
+  text-align: right;
+  color: var(--text-3);
+  font-size: 12px;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.code-pop .cp-body {
+  overflow: auto;
+  min-height: 0;
+}
+.code-pop .cp-code {
+  font: 11.5px/1.65 var(--mono);
+  padding: 8px 0;
+  min-width: max-content;
+}
+.code-pop .cl {
+  display: grid;
+  grid-template-columns: 48px auto;
+  white-space: pre;
+}
+.code-pop .cl.at {
+  background: var(--accent-soft);
+}
+.code-pop .ln {
+  color: var(--text-3);
+  text-align: right;
+  padding-right: 14px;
+  user-select: none;
+}
+.code-pop .lc {
+  padding-right: 16px;
+}
+.code-pop .cp-more {
+  padding: 6px 14px 10px;
+  font-size: 12px;
+}
+:root {
+  --tk-c: #6f7a99;
+  --tk-s: #7ee0a3;
+  --tk-n: #f0b26b;
+  --tk-k: #c792ea;
+  --tk-f: #82aaff;
+  --tk-t: #ffcb6b;
+}
+:root[data-theme="light"] {
+  --tk-c: #6a737d;
+  --tk-s: #116329;
+  --tk-n: #b35900;
+  --tk-k: #cf222e;
+  --tk-f: #6639ba;
+  --tk-t: #953800;
+}
 @media (prefers-color-scheme: light) {
-  :root:not([data-theme="dark"]) { --tk-c: #6a737d; --tk-s: #116329; --tk-n: #b35900; --tk-k: #cf222e; --tk-f: #6639ba; --tk-t: #953800; }
-}
-.tk-c { color: var(--tk-c); font-style: italic; }
-.tk-s { color: var(--tk-s); }
-.tk-n { color: var(--tk-n); }
-.tk-k { color: var(--tk-k); }
-.tk-f { color: var(--tk-f); }
-.tk-t { color: var(--tk-t); }
-.tk-p { color: var(--tk-f); }
+  :root:not([data-theme="dark"]) {
+    --tk-c: #6a737d;
+    --tk-s: #116329;
+    --tk-n: #b35900;
+    --tk-k: #cf222e;
+    --tk-f: #6639ba;
+    --tk-t: #953800;
+  }
+}
+.tk-c {
+  color: var(--tk-c);
+  font-style: italic;
+}
+.tk-s {
+  color: var(--tk-s);
+}
+.tk-n {
+  color: var(--tk-n);
+}
+.tk-k {
+  color: var(--tk-k);
+}
+.tk-f {
+  color: var(--tk-f);
+}
+.tk-t {
+  color: var(--tk-t);
+}
+.tk-p {
+  color: var(--tk-f);
+}
 
 /* ── popover tabs, prompt panel, flow snapshot strip ───── */
-.code-pop .cp-tabs { display: flex; gap: 2px; padding: 0 8px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
-.code-pop .cp-tabs .tab { padding: 6px 9px; font-size: 12px; }
-.pp { padding: 12px 14px 14px; display: grid; gap: 10px; }
-.pp-q { font-size: 14px; font-weight: 600; white-space: pre-wrap; }
-.pp-grid { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 4px 10px; font-size: 12px; }
-.pp-k { color: var(--text-3); font-size: 12px; }
-.pp-choices { margin: 0; padding-left: 18px; }
-.pp-choices li.picked { color: var(--accent); font-weight: 600; }
-.pp-answer { display: grid; gap: 6px; justify-items: start; }
-.pp-answer pre { width: 100%; }
-.tcall { font: 12px var(--mono); color: var(--text-3); overflow-wrap: anywhere; }
-.tcall .b { color: var(--accent); font-weight: 600; }
-.tcall .f { color: var(--text); }
-.tip .tcall { margin: 2px 0 5px; }
-.details .who-call { margin: 0 0 10px; }
-.tip .tmeta { display: flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 11px; }
-.tip .tmeta .sep { color: var(--text-3); }
-.tip .tmeta .mcp { color: var(--accent); font-weight: 600; }
-.tip .chips { margin-top: 6px; }
-.tip .tfail { margin-top: 6px; color: var(--fail); font: 11px var(--mono); overflow-wrap: anywhere; }
-.flow-shots .shot { cursor: pointer; }
-.flow-shots .shot rect { fill: var(--panel-2); stroke: var(--line); }
-.flow-shots .shot:hover rect { stroke: var(--accent); }
-.flow-shots .shot text { fill: var(--text-3); font: 600 9px var(--mono); pointer-events: none; }
+.code-pop .cp-tabs {
+  display: flex;
+  gap: 2px;
+  padding: 0 8px;
+  border-bottom: 1px solid var(--line);
+  background: var(--panel-2);
+}
+.code-pop .cp-tabs .tab {
+  padding: 6px 9px;
+  font-size: 12px;
+}
+.pp {
+  padding: 12px 14px 14px;
+  display: grid;
+  gap: 10px;
+}
+.pp-q {
+  font-size: 14px;
+  font-weight: 600;
+  white-space: pre-wrap;
+}
+.pp-grid {
+  display: grid;
+  grid-template-columns: 76px minmax(0, 1fr);
+  gap: 4px 10px;
+  font-size: 12px;
+}
+.pp-k {
+  color: var(--text-3);
+  font-size: 12px;
+}
+.pp-choices {
+  margin: 0;
+  padding-left: 18px;
+}
+.pp-choices li.picked {
+  color: var(--accent);
+  font-weight: 600;
+}
+.pp-answer {
+  display: grid;
+  gap: 6px;
+  justify-items: start;
+}
+.pp-answer pre {
+  width: 100%;
+}
+.tcall {
+  font: 12px var(--mono);
+  color: var(--text-3);
+  overflow-wrap: anywhere;
+}
+.tcall .b {
+  color: var(--accent);
+  font-weight: 600;
+}
+.tcall .f {
+  color: var(--text);
+}
+.tip .tcall {
+  margin: 2px 0 5px;
+}
+.details .who-call {
+  margin: 0 0 10px;
+}
+.tip .tmeta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--text-2);
+  font-size: 11px;
+}
+.tip .tmeta .sep {
+  color: var(--text-3);
+}
+.tip .tmeta .mcp {
+  color: var(--accent);
+  font-weight: 600;
+}
+.tip .chips {
+  margin-top: 6px;
+}
+.tip .tfail {
+  margin-top: 6px;
+  color: var(--fail);
+  font: 11px var(--mono);
+  overflow-wrap: anywhere;
+}
+.flow-shots .shot {
+  cursor: pointer;
+}
+.flow-shots .shot rect {
+  fill: var(--panel-2);
+  stroke: var(--line);
+}
+.flow-shots .shot:hover rect {
+  stroke: var(--accent);
+}
+.flow-shots .shot text {
+  fill: var(--text-3);
+  font: 600 9px var(--mono);
+  pointer-events: none;
+}
 
 /* ── returned values ───────────────────────────────────── */
-.code-btn path { fill: none; stroke: var(--text-2); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
-.code-btn:hover path { stroke: var(--accent); }
-.cp-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px 6px 14px; border-bottom: 1px solid var(--line-soft); font-size: 12px; }
-.btn.small { padding: 3px 9px; font-size: 12px; }
-.btn.small svg { width: 13px; height: 13px; }
-.code-box { border: 1px solid var(--line-soft); border-radius: 8px; background: var(--panel-2); overflow: auto; max-height: 60vh; }
-.code-box .cp-code, .code-pop .cp-code { font: 11.5px/1.65 var(--mono); padding: 8px 0; min-width: max-content; }
-.code-box .cl { display: grid; grid-template-columns: 40px auto; white-space: pre; }
-.code-box .ln { color: var(--text-3); text-align: right; padding-right: 12px; user-select: none; }
-.code-box .lc { padding-right: 14px; }
+.code-btn path {
+  fill: none;
+  stroke: var(--text-2);
+  stroke-width: 2.6;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  pointer-events: none;
+}
+.code-btn:hover path {
+  stroke: var(--accent);
+}
+.cp-tools {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 6px 10px 6px 14px;
+  border-bottom: 1px solid var(--line-soft);
+  font-size: 12px;
+}
+.btn.small {
+  padding: 3px 9px;
+  font-size: 12px;
+}
+.btn.small svg {
+  width: 13px;
+  height: 13px;
+}
+.code-box {
+  border: 1px solid var(--line-soft);
+  border-radius: 8px;
+  background: var(--panel-2);
+  overflow: auto;
+  max-height: 60vh;
+}
+.code-box .cp-code,
+.code-pop .cp-code {
+  font: 11.5px/1.65 var(--mono);
+  padding: 8px 0;
+  min-width: max-content;
+}
+.code-box .cl {
+  display: grid;
+  grid-template-columns: 40px auto;
+  white-space: pre;
+}
+.code-box .ln {
+  color: var(--text-3);
+  text-align: right;
+  padding-right: 12px;
+  user-select: none;
+}
+.code-box .lc {
+  padding-right: 14px;
+}
 
 /* ── errors ────────────────────────────────────────────── */
-.tab-count { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--raise); color: var(--text-2); font-size: 11px; text-align: center; }
-.tab-count.bad { background: rgba(239, 68, 68, 0.16); color: var(--fail); font-weight: 700; }
-.linkish { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; color: var(--accent); }
-.linkish.bad { color: var(--fail); }
-.linkish.warn { color: var(--cancel); }
-.tab-count.warn { background: rgba(245, 158, 11, 0.16); color: var(--cancel); font-weight: 700; }
-.linkish:hover { text-decoration: underline; }
-.err-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
-.segs { display: flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
-.seg { border: 0; background: var(--panel); padding: 4px 10px; cursor: pointer; color: var(--text-2); font-size: 12px; }
-.seg + .seg { border-left: 1px solid var(--line); }
-.seg.active { background: var(--accent-soft); color: var(--text); font-weight: 600; }
-.btn.small.active { background: rgba(239, 68, 68, 0.14); color: var(--fail); border-color: var(--fail); }
-.err-sec { margin-bottom: 10px; }
-.err-sec-h { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12px; color: var(--text-2); margin: 6px 0 4px; }
-.err-sec-h svg { width: 13px; height: 13px; color: var(--fail); }
-.err-entry { border: 1px solid var(--line-soft); border-left: 3px solid var(--fail); border-radius: 6px; margin-bottom: 4px; background: var(--panel); }
-.err-entry.output { border-left-color: var(--cancel); }
-.err-entry.assert { border-left-color: #f97316; }
-.err-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; cursor: pointer; min-width: 0; font-size: 12px; }
-.err-row:hover { background: var(--raise); }
-.err-row .twist { width: 14px; height: 14px; display: grid; place-items: center; color: var(--text-3); flex: none; }
-.err-row .twist svg { width: 11px; height: 11px; transition: transform 0.12s; }
-.err-row .twist.open svg { transform: rotate(90deg); }
-.err-row .t { color: var(--text-2); font-variant-numeric: tabular-nums; flex: none; min-width: 44px; }
-.err-row .who { color: var(--text); font-weight: 600; flex: none; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.err-row .err-src { color: var(--text-3); font-family: var(--mono); font-size: 11px; flex: none; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.err-row .msg { flex: 1; min-width: 0; font-family: var(--mono); color: var(--fail); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.err-entry.output .err-row .msg { color: var(--text-2); }
-.err-row .err-n { color: var(--text-3); font-size: 11px; flex: none; }
-.err-row .icon-btn { width: 22px; height: 20px; }
-.err-text { margin: 0 8px 8px 28px; max-height: 260px; }
-.err-kind { color: var(--fail); }
-.errbadge { flex: none; min-width: 16px; height: 16px; padding: 0 5px; border-radius: 999px; background: var(--fail); color: #fff; font-size: 10px; font-weight: 700; display: inline-grid; place-items: center; }
+.tab-count {
+  display: inline-block;
+  min-width: 18px;
+  padding: 0 6px;
+  border-radius: 999px;
+  background: var(--raise);
+  color: var(--text-2);
+  font-size: 11px;
+  text-align: center;
+}
+.tab-count.bad {
+  background: rgba(239, 68, 68, 0.16);
+  color: var(--fail);
+  font-weight: 700;
+}
+.linkish {
+  border: 0;
+  background: none;
+  padding: 0;
+  cursor: pointer;
+  font: inherit;
+  color: var(--accent);
+}
+.linkish.bad {
+  color: var(--fail);
+}
+.linkish.warn {
+  color: var(--cancel);
+}
+.tab-count.warn {
+  background: rgba(245, 158, 11, 0.16);
+  color: var(--cancel);
+  font-weight: 700;
+}
+.linkish:hover {
+  text-decoration: underline;
+}
+.err-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 8px;
+  flex-wrap: wrap;
+}
+.segs {
+  display: flex;
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  overflow: hidden;
+}
+.seg {
+  border: 0;
+  background: var(--panel);
+  padding: 4px 10px;
+  cursor: pointer;
+  color: var(--text-2);
+  font-size: 12px;
+}
+.seg + .seg {
+  border-left: 1px solid var(--line);
+}
+.seg.active {
+  background: var(--accent-soft);
+  color: var(--text);
+  font-weight: 600;
+}
+.btn.small.active {
+  background: rgba(239, 68, 68, 0.14);
+  color: var(--fail);
+  border-color: var(--fail);
+}
+.err-sec {
+  margin-bottom: 10px;
+}
+.err-sec-h {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 600;
+  font-size: 12px;
+  color: var(--text-2);
+  margin: 6px 0 4px;
+}
+.err-sec-h svg {
+  width: 13px;
+  height: 13px;
+  color: var(--fail);
+}
+.err-entry {
+  border: 1px solid var(--line-soft);
+  border-left: 3px solid var(--fail);
+  border-radius: 6px;
+  margin-bottom: 4px;
+  background: var(--panel);
+}
+.err-entry.output {
+  border-left-color: var(--cancel);
+}
+.err-entry.assert {
+  border-left-color: #f97316;
+}
+.err-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 6px;
+  cursor: pointer;
+  min-width: 0;
+  font-size: 12px;
+}
+.err-row:hover {
+  background: var(--raise);
+}
+.err-row .twist {
+  width: 14px;
+  height: 14px;
+  display: grid;
+  place-items: center;
+  color: var(--text-3);
+  flex: none;
+}
+.err-row .twist svg {
+  width: 11px;
+  height: 11px;
+  transition: transform 0.12s;
+}
+.err-row .twist.open svg {
+  transform: rotate(90deg);
+}
+.err-row .t {
+  color: var(--text-2);
+  font-variant-numeric: tabular-nums;
+  flex: none;
+  min-width: 44px;
+}
+.err-row .who {
+  color: var(--text);
+  font-weight: 600;
+  flex: none;
+  max-width: 220px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.err-row .err-src {
+  color: var(--text-3);
+  font-family: var(--mono);
+  font-size: 11px;
+  flex: none;
+  max-width: 180px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.err-row .msg {
+  flex: 1;
+  min-width: 0;
+  font-family: var(--mono);
+  color: var(--fail);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.err-entry.output .err-row .msg {
+  color: var(--text-2);
+}
+.err-row .err-n {
+  color: var(--text-3);
+  font-size: 11px;
+  flex: none;
+}
+.err-row .icon-btn {
+  width: 22px;
+  height: 20px;
+}
+.err-text {
+  margin: 0 8px 8px 28px;
+  max-height: 260px;
+}
+.err-kind {
+  color: var(--fail);
+}
+.errbadge {
+  flex: none;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 5px;
+  border-radius: 999px;
+  background: var(--fail);
+  color: #fff;
+  font-size: 10px;
+  font-weight: 700;
+  display: inline-grid;
+  place-items: center;
+}
 /* highlight mode — errored nodes in red, the path to them marked, the rest dimmed */
 #app.hl-on .chart g.r:not(.err):not(.err-path),
-#app.hl-on .flow-card:not(.err):not(.err-path) { opacity: 0.22; }
-#app.hl-on .tree .row:not(.err):not(.err-path) { opacity: 0.4; }
-#app.hl-on .chart g.r.err rect.bar { stroke: var(--fail); stroke-width: 2.5; filter: drop-shadow(0 0 5px rgba(239, 68, 68, 0.75)); }
-#app.hl-on .flow-card.err rect.box { stroke: var(--fail); stroke-width: 2.5; filter: drop-shadow(0 0 5px rgba(239, 68, 68, 0.6)); }
+#app.hl-on .flow-card:not(.err):not(.err-path) {
+  opacity: 0.22;
+}
+#app.hl-on .tree .row:not(.err):not(.err-path) {
+  opacity: 0.4;
+}
+#app.hl-on .chart g.r.err rect.bar {
+  stroke: var(--fail);
+  stroke-width: 2.5;
+  filter: drop-shadow(0 0 5px rgba(239, 68, 68, 0.75));
+}
+#app.hl-on .flow-card.err rect.box {
+  stroke: var(--fail);
+  stroke-width: 2.5;
+  filter: drop-shadow(0 0 5px rgba(239, 68, 68, 0.6));
+}
 #app.hl-on .chart g.r.err-path rect.bar,
-#app.hl-on .flow-card.err-path rect.box { stroke: var(--fail); stroke-width: 1.2; stroke-dasharray: 4 3; }
-#app.hl-on .tree .row.err { background: rgba(239, 68, 68, 0.1); }
-.chart g.r, .flow-card, .tree .row { transition: opacity 0.15s; }
+#app.hl-on .flow-card.err-path rect.box {
+  stroke: var(--fail);
+  stroke-width: 1.2;
+  stroke-dasharray: 4 3;
+}
+#app.hl-on .tree .row.err {
+  background: rgba(239, 68, 68, 0.1);
+}
+.chart g.r,
+.flow-card,
+.tree .row {
+  transition: opacity 0.15s;
+}
 /* cross-node links: hollow points on the caller's row, chips in the flow */
-.chart circle.mark.link { stroke-width: 2; }
-.xwire { stroke-width: 1.2; stroke-dasharray: 3 3; opacity: 0.55; pointer-events: none; }
-.xwire.hot { stroke-width: 2; opacity: 1; }
-.fwire { fill: none; stroke-width: 1.2; stroke-dasharray: 3 3; opacity: 0.5; pointer-events: none; }
-.fwire.hot { stroke-width: 2; opacity: 1; }
-.flow-shots .shot rect[stroke] { stroke-width: 1.5; }
+.chart circle.mark.link {
+  stroke-width: 2;
+}
+.xwire {
+  stroke-width: 1.2;
+  stroke-dasharray: 3 3;
+  opacity: 0.55;
+  pointer-events: none;
+}
+.xwire.hot {
+  stroke-width: 2;
+  opacity: 1;
+}
+.fwire {
+  fill: none;
+  stroke-width: 1.2;
+  stroke-dasharray: 3 3;
+  opacity: 0.5;
+  pointer-events: none;
+}
+.fwire.hot {
+  stroke-width: 2;
+  opacity: 1;
+}
+.flow-shots .shot rect[stroke] {
+  stroke-width: 1.5;
+}
 
 @media (max-width: 1100px) {
-  .bottom { grid-template-columns: minmax(0, 1fr); }
-  .overview { display: none; }
-  .main { grid-template-columns: minmax(0, 1fr); }
-  .details { display: none; }
+  .bottom {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .overview {
+    display: none;
+  }
+  .main {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .details {
+    display: none;
+  }
 }