---
---
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <g fill="none" fill-rule="evenodd" stroke="#206bc4" stroke-width=".025" opacity=".5">
    <rect x="4" y="2" width="16" height="20" rx="3" stroke-dasharray=".5 .5"/>
    <rect x="2" y="4" width="20" height="16" rx="3" stroke-dasharray=".5 .5"/>
    <rect x="3" y="3" width="18" height="18" rx="3" />
    <circle cx="12" cy="12" r="5" />
    <circle cx="12" cy="12" r="10" />
    <line x1="0" y1="12" x2="24" y2="12" />
    <line x1="12" y1="0" x2="12" y2="24" />
  </g>
  <g font-family="system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji">
    {% for i in (1..24) %}
    <g fill="#ccc" font-size=".3">
      <text x="0" y="{{ i | plus: 0.35 }}" >{{ i }}</text>
      <text x="{{ i | plus: 0.1 }}" y=".25" >{{ i }}</text>
    </g>
    <g stroke="#666" stroke-width=".01">
      <line x1="0" y1="{{ i }}" x2="24" y2="{{ i }}" />
      <line x1="{{ i }}" y1="0" x2="{{ i }}" y2="24" />
    </g>
{% endfor %}
  </g>
</svg>