:root {
  color-scheme: light;
  --qr-surface: #fff;
  --qr-text: #17352f;
  --qr-line: #6e8c82;
  --qr-hover: #dceee7;
  --qr-active: #c3dfd3;
  --qr-muted: #4a625a;
  --qr-disabled: #e1e9e5;
  --qr-focus: #805100;
  /* At most two cards; a larger default font or a narrow host gives one column. */
  --qr-pair-columns: repeat(auto-fit, minmax(min(100%, max(9.5rem, calc((100% - .75rem) / 2))), 1fr));
}
:root[data-qr-theme="dark"] {
  color-scheme: dark;
  --qr-surface: #11241e;
  --qr-text: #f4fbf8;
  --qr-line: #6e9787;
  --qr-hover: #234e40;
  --qr-active: #315d4e;
  --qr-muted: #b7cbc3;
  --qr-disabled: #243d32;
  --qr-focus: #f6cf74;
}
.qr-theme-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  margin: 0 0 .85rem;
  color: var(--qr-text);
}
.qr-theme-control[hidden] { display: none; }
.qr-theme-control label { margin: 0; color: var(--qr-text); font-size: .85rem; font-weight: 700; }
.qr-theme-control select {
  width: auto;
  min-width: 8rem;
  max-width: 100%;
  min-height: 44px;
  margin: 0;
  border: 1px solid var(--qr-line);
  border-radius: 10px;
  padding: .5rem .65rem;
  color: var(--qr-text);
  background: var(--qr-surface);
  font: inherit;
  font-size: .9rem;
}
.qr-theme-control select:hover, .qr-theme-control select:focus-visible { color: var(--qr-text); background: var(--qr-hover); }
.qr-theme-control select:active { color: var(--qr-text); background: var(--qr-active); }
.qr-theme-control select:focus-visible { outline: 3px solid var(--qr-focus); outline-offset: 2px; }
.qr-theme-control select:disabled { color: var(--qr-muted); background: var(--qr-disabled); opacity: 1; }
.qr-theme-status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }