:root{color-scheme:light;--ink:#172c26;--muted:#727c73;--paper:#f5f5ef;--line:#dfe3d9;--green:#dcedb1;--accent:#426044;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button,select,summary{cursor:pointer}button{transition:background .15s,transform .15s}button:active:not(:disabled){transform:translateY(1px)}button:disabled{cursor:not-allowed;opacity:.42}button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #64854a;outline-offset:4px}.wrap{max-width:1120px;margin:0 auto;padding:0 32px}.site-header{height:104px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{font-size:33px;font-weight:800;letter-spacing:-1.5px;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:9px}.brand-icon{font-size:35px;line-height:1}.brand-dot{color:#819c52;margin-left:-10px}.header-note{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:9px}.status-dot{width:6px;height:6px;border-radius:50%;background:#6f8c4e;display:inline-block}.intro{padding:49px 0 35px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:#6a7d53;margin:0 0 17px}h1{font-size:clamp(34px,4.1vw,51px);font-weight:600;letter-spacing:-2.4px;margin:0 0 14px;line-height:1.1}h1 span{color:#819769}.intro>p:last-child{font-size:15px;color:var(--muted);margin:0}.mobile-break{display:none}.workspace{display:grid;grid-template-columns:1.08fr 1fr;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#fff}.editor{padding:32px 34px}.section-heading{display:flex;align-items:center;gap:10px;margin-bottom:23px}h2{font-size:17px;letter-spacing:-.4px;margin:0;font-weight:600}.step{font-size:10px;color:#6b7b62;border:1px solid var(--line);border-radius:50%;width:25px;height:25px;display:grid;place-items:center}.type-picker{display:flex;background:var(--paper);padding:5px;border:0;border-radius:9px;margin:0 0 25px;gap:5px}.type-picker label{flex:1;position:relative;text-align:center}.type-picker input,.swatches input{position:absolute;opacity:0;width:1px;height:1px}.type-picker span{display:block;font-size:13px;padding:11px 7px;border-radius:6px;color:var(--muted);cursor:pointer}.type-picker input:checked+span{background:#fff;box-shadow:0 1px 4px #172c2612;color:var(--ink);font-weight:600}.type-picker input:focus-visible+span,.swatches input:focus-visible+span{outline:3px solid #64854a;outline-offset:3px}.field>label,.settings label,.colors legend{font-size:12px;font-weight:600;display:block;margin-bottom:10px}textarea{width:100%;resize:vertical;min-height:90px;max-height:240px;border:1px solid #dbe0d7;border-radius:8px;padding:14px;color:var(--ink);background:#fff;font-size:14px;line-height:1.5}textarea::placeholder{color:#a1a59d}textarea[aria-invalid=true]{border-color:#963e27}.field-meta{display:flex;justify-content:space-between;gap:12px;font-size:10px;color:var(--muted);margin-top:7px;line-height:1.5}#counter{white-space:nowrap}.divider{height:1px;background:#edf0e9;margin:24px 0}.small{margin-bottom:20px}.small h2{font-size:15px}.optional{margin-left:auto;color:#9bA191;letter-spacing:1px;font-size:8px}.colors{padding:0;border:0;margin:0 0 22px}.swatches{display:flex;gap:12px;padding:3px}.swatches label{position:relative;cursor:pointer}.swatches label>span{background:var(--swatch);width:26px;height:26px;display:block;border-radius:50%}.swatches input:checked+span{outline:1px solid var(--swatch);outline-offset:4px}.swatches input:checked+span:after{content:'✓';display:grid;place-items:center;height:100%;color:white;font-size:13px}.settings{display:grid;grid-template-columns:1fr 1fr;gap:15px}.settings>div{min-width:0}select{width:100%;background:#fff;border:1px solid var(--line);border-radius:7px;padding:11px 9px;color:#4c594f;font-size:12px}.generate{border:0;border-radius:8px;background:var(--ink);color:#fff;width:100%;font-size:13px;font-weight:600;padding:15px 17px;display:flex;justify-content:space-between;margin-top:25px}.generate:hover{background:#2e4b3b}.privacy{font-size:10px;text-align:center;color:var(--muted);margin:14px 0 0}.privacy span{font-size:15px;margin-right:4px}.preview{background:#edf1e5;padding:33px 30px;display:flex;flex-direction:column;align-items:center;border-left:1px solid var(--line)}.preview-top{display:flex;justify-content:space-between;align-items:center;align-self:stretch}.preview-top h2{font-size:13px}.live{font-size:8px;letter-spacing:1px;color:#71815c;display:flex;align-items:center;gap:6px}.code-stage{width:100%;flex:1;min-height:302px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px 0 17px;background-image:radial-gradient(#c6ceba 1px,transparent 1px);background-size:14px 14px;background-position:center;margin-top:23px;mask-image:linear-gradient(transparent,#000 12%,#000 90%,transparent)}.code-card{width:230px;height:230px;background:white;border-radius:13px;box-shadow:0 12px 30px #35462e0f;padding:15px;transform:rotate(-3deg)}canvas{display:block;width:100%;height:100%;image-rendering:pixelated}.corner-note{font-family:Georgia,serif;font-style:italic;font-size:12px;color:#81906d;margin-top:22px}.preview>p{margin:0;text-align:center}#preview-caption{font-size:12px;font-weight:600;max-width:100%;overflow-wrap:anywhere;line-height:1.5;margin-top:15px}.preview .preview-status{font-size:11px;color:var(--muted);margin-top:7px;min-height:28px}.downloads{display:flex;gap:9px;width:100%;margin-top:20px}.downloads button{border:1px solid #cbd5bc;background:var(--green);border-radius:8px;padding:14px 12px;font-size:12px;font-weight:600;color:var(--ink)}.downloads button:first-child{flex:1}.downloads button:last-child{background:transparent;min-width:90px}.downloads button:hover:not(:disabled){background:#c9dfa0}.preview .download-note{font-size:9px;color:#8a947f;margin-top:13px}.benefits{display:flex;justify-content:space-between;gap:20px;padding:24px 2px}.benefits p{font-size:10px;color:var(--muted);line-height:1.8;margin:0}.benefits strong{color:#4b5948;font-weight:600}.benefits span{font-size:17px;color:#7b8f64;margin-right:7px;vertical-align:middle}.help{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:12px 0 35px}.help summary{font-size:12px;padding:20px 0;list-style:none;display:flex;justify-content:space-between}.help summary::-webkit-details-marker{display:none}.help summary span{font-size:17px}.help[open] summary span{transform:rotate(45deg)}.help>div{max-width:760px;padding-bottom:15px;font-size:12px;line-height:1.8;color:var(--muted)}footer{display:flex;align-items:center;justify-content:space-between;padding-bottom:30px!important;color:#8b9485;font-size:10px}.footer-brand{font-size:21px;font-weight:700;letter-spacing:-1px;color:#627258}footer>span:last-child{font-size:8px;letter-spacing:1px}.error{color:#963e27;font-size:12px;line-height:1.5}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.noscript{padding:20px;background:#fff1d7;text-align:center}
@media(min-width:1400px){.intro{padding-top:65px}.workspace{min-height:595px}}
.contact-fields{border:0;padding:0;margin:0;min-width:0}.contact-fields legend{font-size:15px;font-weight:600}.contact-fields label{display:block;font-size:12px;font-weight:600;margin:14px 0 8px}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.contact-grid>div{min-width:0}.contact-fields input{width:100%;padding:11px 9px;border:1px solid var(--line);border-radius:7px;font-size:12px;color:var(--ink)}.contact-preview{width:100%;margin-top:20px;padding:18px;background:#ffffffa6;border:1px solid var(--line);border-radius:10px}.contact-preview h3{font-size:13px;margin:0 0 12px}.contact-preview dl{margin:0;font-size:12px}.contact-preview dt{font-size:10px;color:var(--muted);margin-top:12px}.contact-preview dd{margin:4px 0 0;overflow-wrap:anywhere;white-space:pre-wrap;line-height:1.5}.vcf-download{width:100%;margin-top:10px;border:1px solid #cbd5bc;border-radius:8px;background:#fff;padding:12px;color:var(--ink);font-size:12px;font-weight:600}.vcf-download:hover:not(:disabled){background:var(--green)}.preview{justify-content:flex-start}.code-stage{flex:0 0 auto}.type-picker span{font-size:12px;padding-inline:4px}[hidden]{display:none!important}
@media(max-width:390px){.contact-grid{grid-template-columns:1fr}.type-picker{flex-wrap:wrap}.type-picker label{flex-basis:40%}}
.phone-settings{margin-bottom:18px}.phone-settings input{width:100%;padding:11px;border:1px solid var(--line);border-radius:7px;color:var(--ink)}.control-hint{font-size:10px;color:var(--muted);line-height:1.6;margin:8px 0 0}.logo-controls{margin-top:22px}.logo-controls label{display:block;font-size:12px;font-weight:600;margin-bottom:10px}#upload-controls{margin-top:14px}#logo-file{display:block;width:100%;font-size:11px}#logo-file::file-selector-button{padding:9px;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink);margin-right:8px;cursor:pointer}.remove-logo{margin-top:10px;border:0;background:transparent;color:var(--accent);padding:5px 0;font-size:11px;text-decoration:underline}input:focus-visible{outline:3px solid #64854a;outline-offset:3px}select:disabled{background:var(--paper);color:var(--muted)}
.developer-contact{display:flex;align-items:center;justify-content:space-between;gap:32px;margin:0 0 35px;padding:28px;background:#edf1e5;border:1px solid var(--line);border-radius:16px}.developer-info .eyebrow{font-size:9px;margin-bottom:12px}.developer-info h2{font-size:25px;letter-spacing:-.8px}.developer-info>p:not(.eyebrow){font-size:12px;color:var(--muted);line-height:1.6;margin:10px 0}.developer-location{font-size:10px;color:#627258}.contact-links{display:grid;gap:10px;min-width:0;font-style:normal}.contact-links a{display:grid;gap:7px;padding:13px 16px;border:1px solid #d5ddcb;border-radius:8px;background:#fff;color:var(--ink);text-decoration:none;transition:background .15s}.contact-links a:hover{background:#f5f9ee}.contact-label{display:flex;justify-content:space-between;gap:24px;font-size:12px;font-weight:600}.contact-value{font-size:11px;color:#627258;overflow-wrap:anywhere}
@media(max-width:760px){.developer-contact{align-items:stretch;flex-direction:column;gap:22px;padding:23px}.contact-links{width:100%}}
@media(max-width:760px){.wrap{padding-left:20px;padding-right:20px}.site-header{height:80px}.header-note{font-size:10px}.intro{padding:35px 0 28px}h1{letter-spacing:-1.5px}.workspace{grid-template-columns:1fr}.editor{padding:26px 23px}.preview{border-left:0;border-top:1px solid var(--line);padding:26px 23px}.code-stage{flex:auto;min-height:290px}.benefits{flex-wrap:wrap;gap:8px;padding:20px 0}.benefits p{width:100%}.help{margin-top:4px}footer p{display:none}.downloads{max-width:400px}}
@media(max-width:390px){.header-note{max-width:135px;line-height:1.6}.mobile-break{display:block}.field-meta{flex-direction:column;gap:3px}.settings{gap:8px}.preview-top{gap:15px}}