:root{color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#05060a;color:#f4f2ee;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}.qr{max-width:44rem;margin:0 auto;padding:1.5rem 1rem 3rem;display:flex;flex-direction:column;gap:1.2rem}.qr__header{display:flex;flex-direction:column;gap:.3rem}.qr__back{font-size:.8rem;color:#f4f2eea6;text-decoration:none}.qr__back:hover{color:#f4f2ee;text-decoration:underline}.qr__title{margin:0;font-size:1.5rem;font-weight:700}.qr__intro{margin:0;font-size:.88rem;color:#f4f2eea6;line-height:1.5}.qr__layout{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:flex-start}.qr__form{flex:1 1 16rem;display:flex;flex-direction:column;gap:1rem}.qr__field{display:flex;flex-direction:column;gap:.35rem}.qr__fieldLabel{font-size:.78rem;color:#f4f2eeb3;display:flex;justify-content:space-between}.qr__fieldValue{color:#f4f2ee73;font-variant-numeric:tabular-nums}.qr__fieldRow{display:flex;gap:1rem}.qr__fieldRow .qr__field{flex:1}.qr__textarea{resize:vertical;padding:.6rem .7rem;border-radius:.5rem;border:1px solid rgba(244,242,238,.18);background:#f4f2ee0d;color:#f4f2ee;font:inherit;font-size:.9rem}.qr__textarea:focus{outline:2px solid #5eead4;outline-offset:1px}.qr__color{width:100%;height:2.4rem;padding:.2rem;border-radius:.5rem;border:1px solid rgba(244,242,238,.18);background:#f4f2ee0d;cursor:pointer}.qr__range{accent-color:#5eead4;cursor:pointer}.qr__file{font-size:.82rem;color:#f4f2eeb3}.qr__hint{margin:-.4rem 0 0;font-size:.76rem;color:#f4f2ee80;line-height:1.4}.qr__error{margin:0;font-size:.82rem;color:#ff8a7a}.qr__btn{align-self:flex-start;padding:.5rem .9rem;border-radius:.5rem;border:1px solid rgba(244,242,238,.18);background:#f4f2ee0f;color:#f4f2ee;font:inherit;font-size:.85rem;cursor:pointer}.qr__btn:hover{background:#f4f2ee1f}.qr__btn--primary{align-self:stretch;background:#5eead429;border-color:#5eead466;font-weight:600}.qr__btn--primary:hover{background:#5eead447}.qr__preview{flex:1 1 16rem;display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1.2rem;border-radius:.75rem;border:1px solid rgba(244,242,238,.12);background:#f4f2ee08}.qr__canvas{width:100%;max-width:18rem;height:auto;aspect-ratio:1;border-radius:.5rem}