{#
  Chrome endpoint diamond: 2-layer rotated rects with glow class on the outer.
  All colors flow through CSS vars so custom chrome genomes skin from their
  own palette (rose-titanium, obsidian-prism, liquid-mercury, ...).
  Context: {x, y, s1, s2, h1, h2}.
#}
<g data-hw-zone="endpoint" transform="translate({{ m.x }},{{ m.y }})">
  <rect class="hw-chart-endpoint" x="{{ m.neg_h1 }}" y="{{ m.neg_h1 }}"
        width="{{ m.s1 }}" height="{{ m.s1 }}" rx="{{ m.rx1 }}" transform="rotate(45)"
        fill="var(--hw-core, var(--dna-signal))"/>
  <rect x="{{ m.neg_h2 }}" y="{{ m.neg_h2 }}" width="{{ m.s2 }}" height="{{ m.s2 }}" rx="{{ m.rx2 }}"
        transform="rotate(45)" fill="var(--dna-ink-primary)"
        stroke="var(--dna-surface-deep)" stroke-width="1"/>
</g>
