.qr-root{--qr-ink: #1d1d1f;--qr-ink-2: #6e6e73;--qr-ink-3: #9a9aa0;--qr-line: #e6e6ea;--qr-surface: #ffffff;--qr-ground: #f5f5f7;--qr-field-bg: #f2f2f5;--qr-field-border: #e0e0e6;--qr-accent: var(--color-brand-700, #1b7a00);--qr-accent-soft: #eef7ea;--qr-warn: #8a6d1a;--qr-warn-soft: #fdf6e3;--qr-radius: 20px;--qr-ease: cubic-bezier(.32, .72, 0, 1);position:relative;max-width:920px;margin-inline:auto;font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI Variable Text,Segoe UI,system-ui,sans-serif;color:var(--qr-ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.qr-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.qr-root[data-entrance=waiting] .qr-console,.qr-root[data-entrance=waiting] .qr-cta{opacity:0}.qr-root[data-entrance=running] .qr-console,.qr-root[data-entrance=running] .qr-cta{animation:qr-fade .3s ease-out both}.qr-root[data-entrance=running] [data-enter]{animation:qr-rise .4s var(--qr-ease) both}.qr-root[data-entrance=running] [data-enter="1"]{animation-delay:60ms}.qr-root[data-entrance=running] [data-enter="2"]{animation-delay:.15s}.qr-root[data-entrance=running] [data-enter="3"]{animation-delay:.24s}@keyframes qr-rise{0%{opacity:0;transform:translateY(6px);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}}@keyframes qr-fade{0%{opacity:0}to{opacity:1}}.qr-console{background:var(--qr-surface);border:1px solid var(--qr-line);border-radius:var(--qr-radius);padding:1.5rem}.qr-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;grid-template-areas:"controls stage" "design   stage";gap:1.5rem 2rem;align-items:start}.qr-controls{grid-area:controls;min-width:0}.qr-design{grid-area:design;min-width:0}.qr-stage{grid-area:stage;align-self:center}.qr-label{display:flex;align-items:baseline;gap:.5rem;font-size:.8125rem;font-weight:600;letter-spacing:-.005em;color:var(--qr-ink);margin-bottom:.5rem}.qr-optional{font-size:.75rem;font-weight:500;color:var(--qr-ink-3)}.qr-types{display:flex;flex-wrap:wrap;gap:.375rem}.qr-type{position:relative;isolation:isolate;appearance:none;border:1px solid var(--qr-field-border);background:var(--qr-surface);border-radius:var(--radius-full, 999px);padding:.625rem .875rem;font:inherit;font-size:.875rem;line-height:1.25rem;font-weight:500;color:var(--qr-ink-2);cursor:pointer;transition:color .18s ease-out,border-color .18s ease-out,background-color .18s ease-out,scale .12s ease-out}.qr-type:hover{color:var(--qr-ink);border-color:var(--qr-ink-3)}.qr-type:active{scale:.96}.qr-type:focus-visible{outline:2px solid var(--qr-accent);outline-offset:2px}.qr-type[data-on=true]{color:var(--qr-surface);border-color:transparent}.qr-type-pill{position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:var(--qr-ink)}.qr-type-text{position:relative;white-space:nowrap}.qr-fields{margin-top:1.25rem;overflow:hidden}.qr-fields[data-settled=true]{overflow:visible}.qr-fields-inner{display:flex;flex-direction:column;gap:1rem}.qr-field{min-width:0}.qr-input{display:flex;background:var(--qr-field-bg);border:1px solid var(--qr-field-border);border-radius:12px;padding:0 .875rem;transition:border-color .18s ease-out,background-color .18s ease-out,box-shadow .18s ease-out}.qr-input[data-block=true]{padding:.25rem .875rem}.qr-input:focus-within{background:var(--qr-surface);border-color:var(--qr-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--qr-accent) 16%,transparent)}.qr-input[data-wrong=true]{border-color:color-mix(in srgb,var(--color-error, #ef4444) 55%,var(--qr-field-border))}.qr-input[data-wrong=true]:focus-within{border-color:var(--color-error, #ef4444);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-error, #ef4444) 16%,transparent)}.qr-input-control{flex:1;min-width:0;border:0;background:none;outline:none;font:inherit;font-size:1rem;color:var(--qr-ink);padding:.6875rem 0;resize:none}textarea.qr-input-control{line-height:1.5;padding:.5rem 0}.qr-input-control::placeholder{color:var(--qr-ink-3)}.qr-problem,.qr-notice{overflow:hidden;margin:0;font-size:.8125rem;line-height:1.5;text-wrap:pretty}.qr-problem>span{display:block;padding-top:.5rem;color:var(--color-error-strong, #dc2626)}.qr-notice>span{display:block;margin-top:.125rem;padding:.625rem .75rem;border-radius:10px;background:var(--qr-warn-soft);color:var(--qr-warn)}.qr-notice[data-tone=bad]>span{background:#fdecec;color:#a81c1c}.qr-stage{display:flex;flex-direction:column;gap:.75rem}.qr-design-block+.qr-design-block{margin-top:1.25rem}.qr-design-text{overflow:hidden}.qr-design-text>div{padding-top:1.25rem}.qr-frames{display:flex;flex-wrap:wrap;gap:.5rem}.qr-frame{display:flex;flex-direction:column;align-items:center;gap:.375rem;width:74px;padding:.5rem .25rem .4375rem;appearance:none;border:1px solid var(--qr-field-border);border-radius:12px;background:var(--qr-surface);color:var(--qr-ink-2);font:inherit;cursor:pointer;transition:border-color .18s ease-out,color .18s ease-out,box-shadow .18s ease-out,scale .12s ease-out}.qr-frame:hover{border-color:var(--qr-ink-3);color:var(--qr-ink)}.qr-frame:active{scale:.96}.qr-frame:focus-visible{outline:2px solid var(--qr-accent);outline-offset:2px}.qr-frame[data-on=true]{color:var(--qr-ink);border-color:var(--qr-ink);box-shadow:inset 0 0 0 1px var(--qr-ink)}.qr-frame-mark{display:block;width:44px;height:44px}.qr-frame-mark path{vector-effect:non-scaling-stroke;stroke-width:1.5px}.qr-frame-mark-code{fill:currentColor;opacity:.2}.qr-frame-mark-text{fill:currentColor}.qr-frame-mark-text[data-on-band=true]{fill:var(--qr-surface)}.qr-frame-name{font-size:.6875rem;font-weight:600;line-height:1.1;max-width:100%;text-align:center;hyphens:auto;overflow-wrap:anywhere}.qr-colour+.qr-colour{margin-top:1rem}.qr-colour-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.qr-swatches{display:flex;gap:.5rem}.qr-swatch{position:relative;width:32px;height:32px;padding:0;appearance:none;border:1px solid rgba(0,0,0,.14);border-radius:9px;background:var(--swatch);cursor:pointer;transition:box-shadow .18s ease-out,scale .12s ease-out}.qr-swatch:after{content:"";position:absolute;inset:-4px}.qr-swatch:active{scale:.9}.qr-swatch:focus-visible{outline:2px solid var(--qr-accent);outline-offset:3px}.qr-swatch[data-on=true]{box-shadow:0 0 0 2px var(--qr-surface),0 0 0 4px var(--qr-ink)}.qr-hex-wrap{position:relative}.qr-hex{display:inline-flex;align-items:center;gap:.5rem;height:40px;padding:0 .625rem;background:var(--qr-field-bg);border:1px solid var(--qr-field-border);border-radius:11px;transition:border-color .18s ease-out,background-color .18s ease-out,box-shadow .18s ease-out}.qr-hex:focus-within{background:var(--qr-surface);border-color:var(--qr-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--qr-accent) 16%,transparent)}.qr-hex[data-wrong=true]{border-color:color-mix(in srgb,var(--color-error, #ef4444) 55%,var(--qr-field-border))}.qr-hex-chip{position:relative;width:22px;height:22px;padding:0;flex-shrink:0;appearance:none;border-radius:6px;border:1px solid rgba(0,0,0,.14);cursor:pointer;transition:scale .12s ease-out}.qr-hex-chip:after{content:"";position:absolute;inset:-9px -6px}.qr-hex-chip:active{scale:.92}.qr-hex-chip:focus-visible{outline:2px solid var(--qr-accent);outline-offset:2px}.qr-picker{position:absolute;z-index:30;top:calc(100% + 8px);right:0;width:212px;padding:10px;background:var(--qr-surface);border:1px solid var(--qr-line);border-radius:18px;box-shadow:0 12px 32px #0000001f,0 2px 6px #0000000f;transform-origin:top right}.qr-picker-area{position:relative;height:132px;border-radius:8px;cursor:crosshair;touch-action:none;background:linear-gradient(to top,#000,#0000),linear-gradient(to right,#fff,#fff0),var(--hue)}.qr-picker-thumb{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:var(--radius-full, 999px);border:2px solid #ffffff;box-shadow:0 0 0 1px #00000059;pointer-events:none}.qr-picker-hue{display:block;width:100%;height:14px;margin-top:10px;padding:0;appearance:none;-webkit-appearance:none;border-radius:var(--radius-full, 999px);outline:none;cursor:pointer;background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.qr-picker-hue::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:16px;height:16px;border-radius:var(--radius-full, 999px);background:#fff;border:2px solid #ffffff;box-shadow:0 0 0 1px #00000059;cursor:pointer}.qr-picker-hue::-moz-range-thumb{width:16px;height:16px;border-radius:var(--radius-full, 999px);background:#fff;border:2px solid #ffffff;box-shadow:0 0 0 1px #00000059;cursor:pointer}.qr-picker-hue:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--qr-accent) 30%,transparent)}.qr-hex-input{width:7.5ch;border:0;background:none;outline:none;font:inherit;font-size:.875rem;font-variant-numeric:tabular-nums;text-transform:uppercase;color:var(--qr-ink)}.qr-paper{position:relative;display:grid;place-items:center;aspect-ratio:1;padding:.875rem;background:var(--qr-surface);border:1px solid var(--qr-line);border-radius:var(--qr-radius)}.qr-svg{display:block;width:100%;height:100%}.qr-svg-resting{fill:var(--qr-line)}.qr-resting-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;padding:0 1rem;text-align:center;text-wrap:balance;font-size:.875rem;font-weight:500;color:var(--qr-ink-3)}.qr-paper[data-forming=true] .qr-wash{animation:qr-wash .52s 60ms var(--qr-ease) both}.qr-paper[data-forming=true] .qr-eye{transform-box:fill-box;transform-origin:50% 50%;animation:qr-eye-in .42s var(--qr-ease) both;animation-delay:calc(var(--i) * 70ms)}.qr-paper[data-forming=true] .qr-dressing{animation:qr-fade .26s .24s ease-out both}@keyframes qr-wash{0%{clip-path:circle(0% at 50% 50%)}to{clip-path:circle(85% at 50% 50%)}}@keyframes qr-eye-in{0%{opacity:0;scale:.25;filter:blur(4px)}to{opacity:1;scale:1;filter:blur(0)}}.qr-actions{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.qr-action{display:inline-flex;align-items:center;justify-content:center;gap:.4375rem;min-height:40px;padding:.5rem .75rem;border:1px solid var(--qr-field-border);border-radius:11px;background:var(--qr-surface);font:inherit;font-size:.875rem;font-weight:600;color:var(--qr-ink);cursor:pointer;transition:background-color .18s ease-out,border-color .18s ease-out,color .18s ease-out,opacity .18s ease-out,scale .12s ease-out}.qr-action-primary{background:var(--qr-ink);border-color:var(--qr-ink);color:var(--qr-surface)}.qr-action:hover:not(:disabled){border-color:var(--qr-ink-3)}.qr-action-primary:hover:not(:disabled){background:#000;border-color:#000}.qr-action:active:not(:disabled){scale:.96}.qr-action:focus-visible{outline:2px solid var(--qr-accent);outline-offset:2px}.qr-action:disabled{opacity:.4;cursor:default}.qr-action-icon{position:relative;display:grid;place-items:center;width:16px;height:16px;flex-shrink:0}.qr-action-icon>span{position:absolute;display:grid;place-items:center}.qr-cta{display:flex;align-items:center;gap:1rem;margin-top:.75rem;padding:1rem 1.25rem;border:1px solid var(--qr-line);border-radius:16px;background:var(--qr-ground)}.qr-cta-mark{flex-shrink:0;color:var(--qr-accent)}.qr-cta-body{flex:1;min-width:0}.qr-cta-title{margin:0;font-size:.9375rem;font-weight:700}.qr-cta-text{margin:.125rem 0 0;font-size:.8125rem;line-height:1.5;color:var(--qr-ink-2);text-wrap:pretty}.qr-cta-button{flex-shrink:0;display:inline-flex;align-items:center;min-height:40px;padding:.5rem 1rem;border-radius:11px;background:var(--qr-accent);color:#fff;font-size:.875rem;font-weight:600;text-decoration:none;white-space:nowrap;transition:background-color .18s ease-out,scale .12s ease-out}.qr-cta-button:hover{background:color-mix(in srgb,var(--qr-accent) 88%,#000000)}.qr-cta-button:active{scale:.96}@media(max-width:860px){.qr-grid{grid-template-columns:1fr;grid-template-areas:"controls" "stage" "design";gap:1.5rem}.qr-stage{max-width:320px;width:100%;margin-inline:auto}}@media(max-width:560px){.qr-console{padding:1.125rem}.qr-type{padding:.625rem .75rem;font-size:.8125rem}.qr-frame{flex:1 1 0;width:auto;min-width:0;padding:.4375rem .125rem .375rem}.qr-frame-mark{width:36px;height:36px}.qr-frame-name{font-size:.625rem}.qr-picker{right:auto;left:0;transform-origin:top left}.qr-cta{flex-wrap:wrap;padding:1rem}.qr-cta-button{width:100%;justify-content:center}}@media(prefers-reduced-motion:reduce){.qr-root[data-entrance] .qr-console,.qr-root[data-entrance] .qr-cta,.qr-root[data-entrance] [data-enter]{animation:none;opacity:1;transform:none;filter:none}.qr-paper[data-forming=true] .qr-wash,.qr-paper[data-forming=true] .qr-eye,.qr-paper[data-forming=true] .qr-dressing{animation:none}.qr-type:active,.qr-frame:active,.qr-swatch:active,.qr-hex-chip:active,.qr-action:active:not(:disabled),.qr-cta-button:active{scale:1}}