.qr-color-choices{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:12px 0 16px}
.qr-color-choice{position:relative;display:inline-grid;place-items:center;width:30px;height:30px;flex:none;padding:4px;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:transparent;font-size:0;cursor:pointer}
.qr-color-choice::before{content:"";display:block;width:20px;height:20px;border:1px solid rgba(255,255,255,.55);border-radius:50%;background:var(--qr-choice)}
.qr-color-choice[aria-pressed="true"]{border:2px solid #d5e4ff;box-shadow:0 0 0 2px rgba(149,184,255,.15)}
.qr-color-choice:hover{background:rgba(255,255,255,.1)}
.qr-color-choice:focus-visible{outline:3px solid #a2c6ff;outline-offset:3px}
.qr-copy .qr-color-choices{justify-content:flex-start}
.qr-frame{background:transparent!important;padding:0!important;border-radius:0!important;overflow:hidden}
.qr-frame canvas{display:block;width:100%;height:100%;image-rendering:pixelated}
.qr-frame>#audienceQr{width:100%;height:100%;min-width:0;overflow:hidden}

.qr-style-controls{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;width:100%;max-width:360px;text-align:left;margin:12px auto 16px}
.qr-hue-control{display:grid;grid-template-columns:1fr auto;gap:5px 12px;color:inherit;font:inherit;font-size:12px}
.qr-hue-control>output{opacity:.7;font-variant-numeric:tabular-nums}
.qr-hue-control>input[type=range]{grid-column:1/-1;width:100%;min-width:0;height:14px;padding:0;margin:0;accent-color:#bda7ff;cursor:pointer;background:linear-gradient(to right,#f44,#ff4,#4f4,#4ff,#44f,#f4f,#f44);border-radius:8px}
.qr-hue-control>input:disabled{opacity:.35;cursor:default}
.qr-neutral,.qr-invert-control{display:inline-flex;align-items:center;gap:6px;font-size:12px;cursor:pointer}
.qr-neutral input,.qr-invert-control input{width:14px;height:14px;padding:0;margin:0;accent-color:#bda7ff}
.qr-neutral{grid-column:1/-1;opacity:.85}
.qr-style-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}
.qr-style-reset{font:inherit;font-size:12px;color:inherit;padding:5px 8px;border:1px solid rgba(255,255,255,.25);border-radius:6px;background:transparent;cursor:pointer}
.qr-style-reset:focus-visible,.qr-hue-control>input:focus-visible,.qr-neutral input:focus-visible,.qr-invert-control input:focus-visible{outline:2px solid #bda7ff;outline-offset:3px}
.qr-copy .qr-style-controls{margin-left:0}