*{box-sizing:border-box} :root{--ink:#242235;--muted:#7d7b88;--purple:#7155d9;--line:#eae9ef} body{margin:0;background:#f7f7f2;color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px;-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,a:focus-visible{outline:3px solid #a18ce9;outline-offset:4px}.wrap{max-width:1184px;margin:auto;padding-left:32px;padding-right:32px}.header{height:100px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e5e5df}.brand{text-decoration:none;color:var(--ink);font-size:26px;font-weight:800;letter-spacing:-1px;display:flex;align-items:center;gap:0}.brand-icon{background:#e3dbfb;color:#5b3cb0;border-radius:11px;font-size:34px;width:43px;height:43px;display:grid;place-items:center;margin-right:10px;line-height:1}.brand-light{font-weight:400}.brand-dot{font-size:10px;align-self:flex-start;margin:7px 0 0 3px;letter-spacing:0}.header-right{display:flex;align-items:center;gap:25px}.privacy{font-size:12px;color:#6f6e79}.privacy i,.live i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#7b9e75;margin-right:7px}.free-pill{border:1px solid #ddded5;padding:8px 12px;border-radius:20px;font-size:11px;color:#686b60}.intro{display:flex;align-items:center;justify-content:space-between;padding:46px 0 34px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.6px;display:flex;align-items:center;gap:8px;color:#7c7987;margin-bottom:17px}.eyebrow>span{width:6px;height:6px;background:#a58bde;border-radius:50%}h1{font-size:46px;line-height:1.12;letter-spacing:-1.9px;font-weight:600;margin:0 0 17px}h1>span{color:var(--purple)}.intro p{font-size:14px;line-height:1.7;color:var(--muted);margin:0}.intro-note{display:flex;align-items:center;gap:14px;transform:rotate(-6deg);font-size:13px;color:#8d879b;line-height:1.6;margin-right:16px}.note-icon{font-size:56px;font-weight:200;color:#b3a2dd;line-height:1}.workspace{display:grid;grid-template-columns:1fr 1fr;border:1px solid #e2e1e9;border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 8px 35px #25223504}.editor{padding:28px 32px 24px}.panel-title{display:flex;align-items:center;justify-content:space-between;gap:10px}h2{font-size:15px;letter-spacing:-.3px;font-weight:600;margin:0;display:flex;align-items:center;gap:10px}.step{color:#a6a0b4;font-size:10px;font-weight:500;border:1px solid #e7e3ed;width:23px;height:23px;display:inline-grid;place-items:center;border-radius:50%;letter-spacing:0}.reset{border:0;background:none;color:#96909f;font-size:11px;padding:5px}.reset:hover{color:var(--purple)}.tabs{display:flex;padding:4px;border-radius:10px;background:#f5f4f8;margin:22px 0;gap:4px}.tab{flex:1;display:flex;justify-content:center;align-items:center;gap:8px;padding:11px 6px;border:0;background:none;color:#888390;border-radius:7px;font-size:16px}.tab span{font-size:12px;font-weight:500}.tab.active{background:#fff;color:var(--purple);box-shadow:0 2px 5px #31224f0b}.tab svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.6}.content-panel{min-height:98px}label{display:block;font-size:11px;color:#666171;font-weight:600;margin-bottom:9px}input:not([type=color]):not([type=checkbox]),select,textarea{width:100%;border:1px solid #e4e1eb;border-radius:8px;background:#fff;color:var(--ink);padding:12px;outline:none;transition:border-color .15s}input:focus,select:focus,textarea:focus{border-color:var(--purple)!important;box-shadow:0 0 0 3px #7155d912}input::placeholder,textarea::placeholder{color:#aaa5b2}input[type=url]{font-size:12px}.input-icon{position:relative}.input-icon>span{position:absolute;left:13px;top:11px;color:#a69bb8;font-size:17px}.input-icon input{padding-left:37px!important}.field-help{font-size:10px;color:#9a93a4;margin:9px 0 0;line-height:1.5}.divider{height:1px;background:var(--line);margin:24px 0}.custom-title{margin-bottom:21px}.design-row{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}.swatches{display:flex;align-items:center;gap:9px;height:37px}.swatch{position:relative;background:var(--swatch);width:25px;height:25px;border:0;border-radius:50%;padding:0}.swatch.selected:before{content:"";position:absolute;inset:-4px;border:1px solid var(--swatch);border-radius:50%}.swatch.selected:after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:white;font-size:12px}.color-picker{position:relative;width:27px;height:27px;border-radius:50%;border:1px dashed #c6bfce;overflow:hidden;margin-left:2px}.color-picker input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:1}.color-picker span{display:grid;place-items:center;height:100%;color:#9b92a6}.color-picker:focus-within{outline:3px solid #a18ce9;outline-offset:3px}.hex-field{width:122px}.hex-field input{font-size:11px;padding:10px 11px!important;letter-spacing:.4px}.options-row,.wifi-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}select{font-size:11px;padding:11px 8px!important}.local-note{font-size:10px;color:#96909e;display:flex;align-items:center;gap:7px;margin:24px 0 0}.local-note svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.8}.check{display:flex;align-items:center;font-size:11px;font-weight:400;margin:12px 0 0}.check input{accent-color:var(--purple);margin-right:8px}.preview-panel{background:#f0edf9;padding:29px 32px 25px;display:flex;align-items:center;flex-direction:column;border-left:1px solid #e5e0f0;position:relative;overflow:hidden}.preview-heading{display:flex;justify-content:space-between;align-items:center;width:100%;font-size:9px;letter-spacing:1.5px;color:#888097}.live{font-size:9px;letter-spacing:0;color:#9b90ad;display:flex;align-items:center}.live i{width:5px;height:5px;background:#9a84c4}.qr-area{position:relative;margin-top:31px}.qr-card{width:242px;height:242px;padding:19px;background:white;border-radius:17px;box-shadow:0 5px 14px #4c356b0a;transform:rotate(-3deg);position:relative;z-index:1;display:flex;align-items:center;justify-content:center;transition:transform .2s}.qr-card:hover{transform:rotate(0deg)}.qr-card svg{width:100%;height:100%;display:block}.qr-card.empty{color:#9b93aa;font-size:12px;text-align:center;transform:none}.qr-shadow{position:absolute;inset:5px -7px -5px 7px;background:#e6e0f4;border-radius:17px;transform:rotate(3deg)}.scan-caption{font-size:11px;color:#978ba6;margin-top:21px;display:flex;align-items:center;gap:7px}.scan-caption>span{font-size:20px;line-height:1}.status{font-size:10px;text-align:center;margin:12px 0;min-height:28px;line-height:1.5;color:#7f6f98;max-width:330px}.status.error{color:#a1384e}.downloads{display:flex;gap:10px;width:100%;margin-top:auto}.downloads button{height:46px;border-radius:9px;font-size:12px;font-weight:500;transition:background .15s,transform .15s}.downloads button:hover:not(:disabled){transform:translateY(-2px)}.primary{display:flex;align-items:center;justify-content:center;gap:10px;flex:1;background:var(--purple);color:white;border:1px solid var(--purple);box-shadow:0 3px 7px #7155d91a}.primary:hover:not(:disabled){background:#6346c6}.primary svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.5}.primary>span{margin-left:auto;font-size:17px}.primary{padding:0 16px}.secondary{background:#fff8;border:1px solid #dcd5ec;color:#76638f;min-width:95px;display:flex;align-items:center;justify-content:center;gap:17px}.secondary span{font-size:17px}.export-note{font-size:8px;color:#a497b4;text-align:center;margin:12px 0 0}.bottom-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:35px;margin:30px 0 40px}.benefit{display:flex;gap:13px;align-items:flex-start;padding-top:8px}.benefit-icon{color:#8f7eb1;font-size:27px;width:33px;line-height:1}.benefit h3{font-size:12px;font-weight:600;margin:0 0 8px}.benefit p{color:#93909c;font-size:10px;line-height:1.7;margin:0}.tip{border:1px solid #e4e1d8;background:#f2f1e9;border-radius:12px;display:flex;align-items:center;gap:13px;padding:15px 18px;color:#8f8b72}.tip>span{font-size:25px}.tip p{font-size:10px;line-height:1.7;margin:0}.tip strong{font-weight:600;display:block;font-size:11px;color:#77725e;margin-bottom:3px}.footer{border-top:1px solid #e5e5df;display:flex;justify-content:space-between;padding-top:21px;padding-bottom:24px;font-size:10px;color:#a3a09f}.footer-dot{padding:0 9px}.spark{color:#9c86c9;font-size:15px;margin-left:7px}[hidden]{display:none!important}
@media(min-width:1500px){.wrap{max-width:1250px}.intro{padding-top:58px;padding-bottom:42px}h1{font-size:52px}.editor{padding:34px 38px}.preview-panel{padding:35px 38px}.qr-card{width:260px;height:260px}.qr-area{margin-top:37px}.bottom-grid{margin-top:38px}}
@media(max-width:900px){.header-right .privacy{display:none}.intro-note{display:none}h1{font-size:40px}.wrap{padding-left:24px;padding-right:24px}.editor,.preview-panel{padding:25px 22px}.live{font-size:8px}.preview-heading{font-size:8px;letter-spacing:.7px}.design-row{gap:15px}.swatches{gap:7px}.hex-field{width:100px}.qr-card{width:215px;height:215px}.bottom-grid{gap:18px}.tip{padding:12px}.tip br{display:none}}
@media(max-width:640px){.wrap{padding-left:18px;padding-right:18px}.header{height:78px}.brand{font-size:23px}.brand-icon{width:36px;height:36px;font-size:29px}.free-pill{font-size:9px;padding:7px 9px}.intro{padding:30px 0 25px}.eyebrow{font-size:8px;letter-spacing:1px;margin-bottom:14px}h1{font-size:35px;letter-spacing:-1.4px}.intro p{font-size:12px}.workspace{grid-template-columns:1fr;border-radius:17px}.editor{padding:24px}.preview-panel{border-left:0;border-top:1px solid #e5e0f0;padding:24px}.preview-heading{font-size:9px}.live{font-size:9px}.qr-area{margin-top:28px}.qr-card{width:240px;height:240px}.status{margin:10px 0;min-height:15px}.downloads{margin-top:8px}.export-note{font-size:8px}.bottom-grid{grid-template-columns:1fr 1fr;gap:22px 13px;margin:27px 0}.tip{grid-column:1/-1;justify-content:center;gap:20px}.tip strong{display:inline;margin-right:8px}.tip br{display:none}.benefit{gap:8px}.benefit h3{font-size:11px}.benefit p{font-size:9px}.footer{font-size:9px;gap:20px}.footer>span:last-child{font-size:8px}.design-row{gap:20px}.hex-field{width:115px}.swatches{gap:10px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@media(max-width:380px){.editor,.preview-panel{padding:20px}.design-row{flex-wrap:wrap;gap:14px}.hex-field{width:100%}.hex-field input{max-width:140px}.preview-heading{flex-wrap:wrap;gap:8px}.qr-area{width:min(240px,100%)}.qr-card{width:100%;height:auto;aspect-ratio:1;padding:12px}.downloads{gap:7px}.primary{padding:0 10px;gap:6px}.secondary{min-width:65px;gap:10px}.export-note{line-height:1.6}.intro h1{font-size:30px}.options-row{gap:10px}.footer{gap:10px}.free-pill{font-size:8px}}