:root{--bg:transparent;--text:#111111;--accent:#d4af37;--muted:#6b6b6b;--radius:12px;--pad:28px;--gap:18px;--letterspace:.1em;--maxw:960px;--aspect: 1.59;--h1-size:clamp(22px,5vw,36px);--code-font-size:clamp(18px,4vw,28px);--code-gap:6px;--cell-radius:8px;--cell-bg:transparent;--cell-pad-v:.45rem;--cell-pad-h:.55rem;--key-size:72px;--key-color:#000}.wrapper{width:min(92vw,var(--maxw));margin:auto;padding:2vw;min-height:50vh;display:grid;place-items:center}.frame{aspect-ratio:var(--aspect);border-radius:var(--radius);padding:var(--pad);background:var(--bg);display:grid;gap:var(--gap);place-content:center;text-align:center}.frame h1{margin:0;letter-spacing:var(--letterspace);font-weight:600;font-size:var(--h1-size);color:var(--text)}.sub{margin:0;color:var(--muted)}.key-wrap{display:flex;justify-content:center;align-items:center;margin:clamp(12px,3vh,32px) 0}.code{display:flex;justify-content:center;gap:var(--code-gap);font-weight:600;font-size:var(--code-font-size);cursor:pointer}.code .cell{padding:var(--cell-pad-v) var(--cell-pad-h);border-radius:var(--cell-radius);background:var(--cell-bg);color:var(--accent)}.keyhole{cursor:pointer;position:relative;display:inline-block;width:50px;height:50px;border:50px solid transparent;border-left-color:#000;border-top-color:#000;border-right-color:#000;border-radius:50%;background:transparent;box-sizing:content-box}.keyhole:before{content:"";display:block;position:absolute;top:19px;left:-35px;height:50px;width:31px;border:25px solid transparent;border-left:45px solid #000;border-bottom:45px solid #000;border-right:45px solid #000}.keyhole:focus{outline:2px solid #666;outline-offset:4px}.frame .key-wrap{line-height:0;overflow:visible}.frame .keyhole,.frame .keyhole:before{box-sizing:content-box!important}.frame .keyhole{line-height:0;vertical-align:middle;overflow:visible;z-index:0}.frame .keyhole:before{pointer-events:none;z-index:1}.frame .code-label{position:relative;height:0;line-height:1;overflow:visible;margin:0;font-weight:700;letter-spacing:var(--letterspace);font-size:clamp(14px,3.2vw,20px);color:var(--muted);opacity:0;transform:translateY(-6px);transition:opacity 2s ease,transform .5s ease}.frame.label-on .code-label{opacity:1;transform:translateY(-6px)}.frame .code{transition:transform 4s cubic-bezier(.22,1,.36,1)}.frame.revealing .code,.frame.revealed .code{transform:translateY(24px)}.frame .checkout-hint{position:relative;height:0;line-height:1;overflow:visible;margin:8px 0 0;font-weight:600;font-size:clamp(12px,2.6vw,14px);color:var(--muted);opacity:0;transform:translateY(6px);transition:opacity .6s ease,transform .6s ease}.frame.checkout-on .checkout-hint{opacity:1;transform:translateY(0)}.code{position:relative}.copied-tooltip{position:absolute;bottom:-28px;left:50%;transform:translate(-50%);background:#000000d9;color:#fff;padding:6px 12px;border-radius:6px;font-size:13px;font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .3s ease}.copied-tooltip.show{opacity:1}.collect-btn{display:inline-block;margin-top:clamp(18px,4vh,32px);padding:14px 32px;background:var(--key-color);color:#fff;text-decoration:none;border-radius:8px;font-weight:600;font-size:clamp(14px,3vw,16px);letter-spacing:.05em;opacity:0;transform:translateY(8px);transition:opacity .6s ease,transform .6s ease,background .2s ease;pointer-events:none}.frame.button-on .collect-btn{opacity:1;transform:translateY(0);pointer-events:auto}.collect-btn:hover{background:#333}@media(max-width:768px){.wrapper{min-height:60vh;padding:4vw 2vw}.frame{place-content:start;padding-top:clamp(32px,8vw,48px)}}
/*# sourceMappingURL=/cdn/shop/t/8/assets/qr-page.css.map */