:root {
  color-scheme: light dark;
  font-family: system-ui, sans-serif;
}
body { margin: 0; background: Canvas; color: CanvasText; }
header {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid color-mix(in srgb, CanvasText 15%, transparent);
}
nav a { margin-right: 1rem; }
main { padding: 1.25rem; max-width: 1100px; }
figure { margin: 0; }
svg {
  width: 100%;
  height: auto;
  border: 1px solid color-mix(in srgb, CanvasText 12%, transparent);
  border-radius: 6px;
}
.node rect {
  fill: color-mix(in srgb, CanvasText 6%, Canvas);
  stroke: color-mix(in srgb, CanvasText 35%, transparent);
}
.node.root rect { stroke-width: 2.5; }
.node text { font-size: 12px; }
.edge { fill: none; stroke: color-mix(in srgb, CanvasText 30%, transparent); }
.panel {
  border: 1px solid color-mix(in srgb, CanvasText 20%, transparent);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin: 1rem 0;
}
.receipt { font-size: 0.85rem; opacity: 0.85; }
.bounds { font-size: 0.85rem; }