/* QR prototype: isolated, responsive styling (no global rule changes). */
.qr-hero{padding-bottom:24px}
.qr-kicker{color:#11685e;font-size:12px;letter-spacing:.07em;text-transform:uppercase;font-weight:800;margin-bottom:12px}
.qr-tool-area{margin-top:0}
.qr-tool-area .toolbox{overflow-wrap:anywhere}
.qr-input{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:19px 12px 13px}
.qr-input h2{font-size:clamp(19px,3vw,24px);margin:0;line-height:1.35}
.qr-input p{margin:0;color:#55665f;line-height:1.55}
.qr-symbol{font-size:43px;line-height:1;color:#0b806f;background:#e4f3ed;border:1px solid #bddfd2;border-radius:19px;padding:17px 22px}
.qr-choose{display:inline-flex;justify-content:center;max-width:100%;cursor:pointer;margin-top:9px}
#qrFile{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#qrFile:focus-visible+.qr-choose{outline:3px solid #2b8d7d;outline-offset:3px}
.qr-input small{color:#5c6c66;font-size:12px}
.qr-status{margin:8px 0 0;padding:12px 14px;background:#eff7f3;border-radius:12px;color:#164d42;font-size:14px;line-height:1.45}
.qr-status[data-error=true]{background:#fff4ee;color:#8c3b19}
.qr-result{margin-top:18px;border:1px solid #c9dcd5;background:white;border-radius:16px;padding:clamp(16px,3vw,26px);overflow-wrap:anywhere}
.qr-result[hidden]{display:none}
.qr-result-title{font-size:20px;line-height:1.3;margin:0 0 6px}
.qr-kind-note,.qr-limit-note{font-size:13px;color:#566862;line-height:1.55}
.qr-fields{display:grid;gap:12px;margin:18px 0;padding:14px;background:#f6faf8;border-radius:12px}
.qr-field{min-width:0}
.qr-field dt{font-size:12px;color:#56665f;margin:0 0 5px}
.qr-field dd{margin:0;font-size:14px;font-weight:650;white-space:pre-wrap;overflow-wrap:anywhere;user-select:text}
.qr-signals{display:grid;gap:9px;margin:12px 0}
.qr-signal{font-size:14px;line-height:1.6;margin:0;padding:11px 13px;border-left:3px solid #328477;border-radius:8px;background:#edf7f3}
.qr-signal.qr-caution{border-left-color:#b77020;background:#fff7e9}
.qr-raw{margin-top:18px;padding:12px;background:#f8faf9;border:1px solid #dae6e0;border-radius:12px}
.qr-raw summary{font-size:13px;font-weight:650;cursor:pointer}
.qr-payload{font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:220px;overflow-y:auto;padding:12px;background:white;border:1px solid #dde4e0;border-radius:8px}
.qr-examples{margin-top:28px}
.qr-examples h2{font-size:22px;margin:0 0 8px}
.qr-examples>p{color:#5d6b65;font-size:14px;line-height:1.65;max-width:760px}
.qr-example-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}
.qr-example{display:flex;flex-direction:column;align-items:flex-start;gap:9px;min-width:0;text-align:left;padding:19px;border:1px solid #d3e1da;border-radius:16px;background:#f7fbf9;color:#1b342e;cursor:pointer;font:inherit}
.qr-example:hover{background:#edf8f3;border-color:#8fc2ad}
.qr-example:focus-visible,.qr-choose:focus-visible{outline:3px solid #267e70;outline-offset:3px}
.qr-example strong{font-size:15px}
.qr-example span{font-size:13px;color:#53675e;line-height:1.5}
.qr-article{max-width:900px;margin:30px auto 52px}
.qr-article .article-copy{max-width:900px}
.qr-article .article-copy p,.qr-article .faq p{line-height:1.75}
.qr-related{margin-top:25px;font-size:14px;color:#58665e}
.qr-related a{color:#147267;text-decoration:underline}
@media(max-width:700px){.qr-example-grid{grid-template-columns:1fr}.qr-example{padding:15px}.qr-input{padding:9px 0}.qr-tool-area{width:100%;max-width:100%}.qr-result{padding:15px}}
@media(prefers-reduced-motion:reduce){.qr-example,.qr-choose{scroll-behavior:auto}}
/* Scoped QR guide: make long illustrative URLs wrap on 320px screens. */
.qr-education code{white-space:normal;overflow-wrap:anywhere;word-break:break-word}