/* QR code as SVG (part.js draws it). The SVG has a viewBox in modules and no width/height, so CSS sizes it.

   Markup:
     <div data-qr="https://example.com/chat" data-qr-ec="M">
       <div class="qr" data-qr-canvas></div>
       <a data-qr-link>Chat from this computer</a>
     </div>

   Knobs (CSS): */
:root {
  --qr-size: 8em;        /* drawn size (Truus: .qr-code__canvas 8em = 128px at 16px; kjua size 200 is the viewBox only) */
  --qr-fill: #000;       /* dark modules (kjua fill #000000) */
  --qr-back: #fff;       /* light modules + quiet zone (kjua back #FFFFFF). Keep dark-on-light with strong contrast:
                            most phone cameras will not read a light-on-dark (inverted) code */
}
.qr { width: var(--qr-size); aspect-ratio: 1; }
.qr .qr__svg { display: block; width: 100%; height: 100%; }
.qr .qr__back { fill: var(--qr-back); }
.qr .qr__dots { fill: var(--qr-fill); }