@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;650;750&family=Fraunces:opsz,wght@9..144,400;9..144,550;9..144,700&display=swap");
:root{--ink:#17211b;--cream:#f4f0e8;--paper:#fffdf8;--sage:#dfe8d8;--green:#456348;--line:#d9d6cd;--orange:#df7045}*{box-sizing:border-box}html{background:var(--cream)}body{margin:0;color:var(--ink);background:var(--cream);font-family:"DM Sans",sans-serif}button,input,select{font:inherit}button{color:inherit}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,5vw,78px);border-bottom:1px solid rgba(23,33,27,.13)}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-weight:750;letter-spacing:-.03em;font-size:20px}.brand-mark{width:27px;height:27px;display:grid;grid-template-columns:1fr 1fr;gap:3px}.brand-mark i{border:3px solid var(--ink);border-radius:2px}.brand-mark i:nth-child(4){background:var(--orange);border-color:var(--orange)}.privacy{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:650;color:#59645d}.privacy-dot{width:7px;height:7px;border-radius:50%;background:#6f8b68;box-shadow:0 0 0 4px rgba(111,139,104,.13)}.hero{max-width:1280px;margin:auto;display:flex;justify-content:space-between;align-items:flex-end;padding:44px 34px 48px;gap:50px}.back-link{display:inline-block;color:#687269;text-decoration:none;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:34px}.back-link:hover{color:var(--orange)}.eyebrow{margin:0 0 13px;color:var(--orange);font-size:11px;letter-spacing:.19em;font-weight:800}h1{margin:0;font-family:"Fraunces",serif;font-size:clamp(45px,5.5vw,74px);line-height:.94;letter-spacing:-.045em;font-weight:550}h1 em{color:var(--orange);font-weight:400}.hero-copy{max-width:390px;margin:0 0 6px;color:#59645d;font-size:16px;line-height:1.65}.workspace{max-width:1280px;margin:0 auto 56px;padding:0 34px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr);gap:22px;align-items:start}.controls-card,.preview-card{background:rgba(255,253,248,.8);border:1px solid rgba(23,33,27,.12);border-radius:16px;box-shadow:0 14px 40px rgba(35,42,36,.06)}.controls-card{padding:34px 34px 18px}.step{display:grid;grid-template-columns:38px 1fr;gap:10px}.step-number{font-family:"Fraunces",serif;color:var(--orange);font-size:13px;font-weight:700;padding-top:3px}.step-content>label,.field-label{display:block;font-weight:750;font-size:15px;margin-bottom:13px}.field-label small{color:#879087;font-size:9px;letter-spacing:.13em;margin-left:6px}.divider{height:1px;background:var(--line);margin:28px 0;opacity:.7}.url-input{width:100%;border:1px solid #c9c8c0;background:white;border-radius:9px;padding:13px 15px;outline:none;transition:.2s}.url-input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(69,99,72,.12)}.url-input.invalid{border-color:#b24b3e}.hint,.error-text{font-size:11px;color:#879087;margin:8px 2px 0}.error-text{color:#a54137}.style-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.style-button{height:72px;border:1px solid #d5d3cb;background:#fff;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:10px;font-weight:650;cursor:pointer}.style-button span{font-size:24px;line-height:20px}.style-button:hover,.style-button.active{border-color:var(--green);background:#eef2e9;box-shadow:inset 0 0 0 1px var(--green)}.field-row{display:flex;align-items:center;justify-content:space-between;margin-top:16px}.field-row label{font-size:12px;color:#69736b}.field-row select{border:1px solid #d5d3cb;border-radius:7px;background:#fff;padding:8px 32px 8px 10px;font-size:12px}.colors{display:grid;grid-template-columns:1fr 1fr;gap:12px}.colors>div>span{display:block;font-size:10px;color:#777f78;margin-bottom:6px}.color-field{height:43px;border:1px solid #d5d3cb;border-radius:8px;background:#fff;display:flex;align-items:center;gap:9px;padding:6px 10px;cursor:pointer}.color-field input{position:absolute;opacity:0;pointer-events:none}.color-field b{width:24px;height:24px;border-radius:5px;border:1px solid rgba(0,0,0,.1)}.color-field code{font-family:"DM Sans",sans-serif;font-size:11px;font-weight:650}.upload{border:1px dashed #b9bdb5;border-radius:10px;min-height:108px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;cursor:pointer;background:rgba(255,255,255,.5)}.upload:hover{border-color:var(--green);background:#f2f5ee}.upload input{display:none}.upload-icon{width:25px;height:25px;border-radius:50%;background:var(--sage);display:grid;place-items:center;font-size:18px}.upload strong{font-size:12px}.upload small{font-size:9px;color:#8b928b}.logo-loaded{display:flex;align-items:center;gap:12px;border:1px solid #d5d3cb;border-radius:10px;background:white;padding:9px}.logo-loaded[hidden],.range-row[hidden],.upload[hidden]{display:none}.logo-loaded img{width:43px;height:43px;object-fit:contain;border-radius:6px}.logo-loaded div{min-width:0;display:flex;flex-direction:column;flex:1}.logo-loaded strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.logo-loaded span{font-size:10px;color:#758077}.logo-loaded button{border:0;background:none;color:#a54137;font-size:10px;cursor:pointer}.range-row{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:10px;color:#758077}.range-row input{flex:1;accent-color:var(--green)}.range-row b{color:var(--ink)}.preview-card{position:sticky;top:18px;padding:33px}.preview-heading{display:flex;align-items:flex-start;justify-content:space-between}.preview-heading h2{font-family:"Fraunces",serif;font-size:25px;margin:0;font-weight:550}.status{font-size:10px;border-radius:20px;padding:7px 10px;display:flex;gap:6px;align-items:center;font-weight:700}.status i{width:6px;height:6px;border-radius:50%}.status.good{background:#e3ece0;color:#456348}.status.good i{background:#6e956c}.status.warn{background:#fae6dc;color:#9c4934}.status.warn i{background:#d06c4d}.qr-stage{margin:25px auto 22px;aspect-ratio:1;max-width:386px;background:var(--sage);border-radius:13px;display:grid;place-items:center;padding:22px;position:relative;overflow:hidden}.qr-stage:before,.qr-stage:after{content:"";position:absolute;width:65px;height:65px;border:1px solid rgba(69,99,72,.15);border-radius:50%}.qr-stage:before{top:-22px;right:32px}.qr-stage:after{bottom:-30px;left:18px}.qr-preview{width:100%;height:100%;display:grid;place-items:center;position:relative;z-index:1;filter:drop-shadow(0 7px 11px rgba(28,39,31,.08))}.qr-preview svg,.qr-preview canvas{max-width:100%;max-height:100%;border-radius:5px}.safety{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:20px}.safety>div{display:flex;gap:7px;align-items:flex-start;padding:10px 8px;border-radius:8px;background:#f7f5ef}.safety i{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:9px;flex:none}.safety .pass i{background:#dfeadb;color:#3c6641}.safety .fail i{background:#fae0d5;color:#a54234}.safety span{display:flex;flex-direction:column}.safety strong{font-size:9px}.safety small{font-size:7.5px;color:#8a908a;line-height:1.35;margin-top:2px}.download-row{display:grid;grid-template-columns:1fr 105px;gap:8px}.download-row button{height:48px;border-radius:8px;font-size:12px;font-weight:750;cursor:pointer}.download-row button:disabled{opacity:.4;cursor:not-allowed}.primary{border:0;background:var(--ink);color:white}.primary:hover{background:#2c3b32}.primary span,.secondary span{font-size:17px;margin-left:8px}.secondary{border:1px solid #b9bdb5;background:white}.secondary:hover{background:#f2f3ef}.download-note{text-align:center;font-size:8px;color:#8a908a;margin:9px 0 0}footer{border-top:1px solid rgba(23,33,27,.13);display:flex;justify-content:space-between;padding:23px clamp(24px,5vw,78px);font-size:9px;color:#7f877f;letter-spacing:.03em}
@media(max-width:850px){.hero{display:block;padding-top:30px}.hero-copy{margin-top:25px}.workspace{grid-template-columns:1fr}.preview-card{position:static;grid-row:1}.privacy{font-size:0}.privacy-dot{display:block}.controls-card,.preview-card{padding:24px}.style-grid{grid-template-columns:repeat(2,1fr)}footer{gap:20px}}
@media(max-width:480px){.hero,.workspace{padding-left:17px;padding-right:17px}.topbar{padding:0 18px}.workspace{margin-bottom:30px}.controls-card,.preview-card{border-radius:12px}.step{grid-template-columns:30px 1fr}.colors{grid-template-columns:1fr}.safety{grid-template-columns:1fr}.download-row{grid-template-columns:1fr 85px}h1{font-size:46px}}