/* QR: a printed label. The code sits on a white square card like a sticker, always dark on white so it scans;
   everything around it stays quiet. Neutral page, near-black actions. */
:root { --page: #f3f3f1; --card: #ffffff; --ink: #171717; --soft: #5b5b58; --line: #d9d9d4; --field: #ececea; --act: #171717; --on-act: #ffffff; --stop: #b3261e; color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --page: #121212; --card: #1c1c1c; --ink: #ededeb; --soft: #a6a6a1; --line: #333331; --field: #121212; --act: #ededeb; --on-act: #121212; --stop: #ff8a80; color-scheme: dark; }
}
#form > div { display: grid; gap: 12px; }
#form label { flex: 1 1 140px; }
.out { justify-items: center; text-align: center; }
.code { width: min(100%, 320px); aspect-ratio: 1; background: #fff; border-radius: 12px; box-shadow: 0 2px 12px rgb(0 0 0 / .14); display: grid; place-items: center; }
.code svg { width: 100%; height: 100%; display: block; }
.code .empty { color: #8a8a86; padding: 24px; }
.out fieldset { justify-self: stretch; } .out .chips { justify-content: center; }
.chip.swatch::before { content: ""; display: inline-block; width: 14px; height: 14px; border-radius: 3px; background: var(--sw); margin-right: 8px; vertical-align: -2px; }
.out .row { justify-content: center; }