/* image-to-svg: styles only it uses, split out of site.css by scripts/split-css.mjs. */
.svg-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 16px 0; }
.svg-compare figure { margin: 0; display: grid; gap: 6px; }
.svg-compare figcaption { color: var(--slate); font-size: 0.85rem; font-weight: 600; }
.svg-compare figcaption span { font-weight: 400; }
.svg-box { position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--paper); overflow: hidden; }
.svg-box img { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: contain; }
.svg-checker { background: repeating-conic-gradient(#E6EAF0 0 25%, #fff 0 50%) 0 0 / 18px 18px; }
@media (max-width: 600px) { .svg-compare { grid-template-columns: minmax(0, 1fr); } }