.qr{display:flex;flex-direction:column;gap:20px}.qr__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:20px;align-items:start}.qr__inputs{gap:22px;padding:24px}.qr__fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}.qr__colors,.qr__fields{align-items:end}.qr__colors>:last-child{grid-column:1/-1;justify-self:start}.qr__switch{padding-bottom:8px}.qr__result{display:flex;flex-direction:column;gap:16px;min-width:0;position:sticky;top:88px}.qr__stage{display:flex;justify-content:center;padding:16px;border-radius:var(--radius);border:1px solid var(--line)}.qr__img{display:block;width:min(100%,320px);height:auto;aspect-ratio:1;image-rendering:pixelated}.qr__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}.qr__warn{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 10px;margin-top:12px;padding:12px 14px;border-radius:var(--radius);border:1px solid color-mix(in oklab,var(--warning) 35%,transparent);background:color-mix(in oklab,var(--warning) 8%,transparent);font-size:var(--text-sm);line-height:1.6}.qr__empty,.qr__warn{color:var(--fg-muted)}.qr__empty{padding:28px 8px;text-align:center}@media (max-width:960px){.qr__grid{grid-template-columns:minmax(0,1fr)}.qr__result{position:static}}@media (max-width:520px){.qr__fields,.qr__stats{grid-template-columns:minmax(0,1fr)}}@media (pointer:coarse){.qr__colors .ui-btn{--h:44px}}