:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#eef2ff;background:#0b1020;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 78% 7%,#1a2150 0,transparent 36%),#0b1020}button,input{font:inherit}button{cursor:pointer}.shell{max-width:1160px;margin:auto;padding:24px 28px 32px}.topbar{display:flex;justify-content:space-between;align-items:center}.brand{display:flex;align-items:center;gap:5px;color:white;text-decoration:none;font-size:21px;font-weight:800;letter-spacing:-.7px}.brand-icon{display:inline-grid;place-items:center;background:#6d5dfc;width:35px;height:35px;border-radius:11px;margin-right:6px;font-size:25px}.brand-light{font-weight:400;color:#abb2cb}.top-chip{border:1px solid #30364e;border-radius:99px;color:#aeb7d3;padding:9px 14px;font-size:12px}.intro{margin:68px 0 36px}.eyebrow{font-size:11px;color:#aba1ff;font-weight:800;letter-spacing:2.6px}.intro h1{font-size:clamp(36px,5vw,55px);letter-spacing:-2px;margin:13px 0 10px;line-height:1.12}.dot{color:#8a78ff}.intro p{color:#a9b1c8;font-size:16px;margin:0}.workspace{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(340px,.78fr);gap:22px}.panel{background:#141b30;border:1px solid #293149;border-radius:23px;box-shadow:0 20px 60px #00000020}.editor{padding:32px}.step{display:flex;gap:20px}.number{color:#9388ff;font-weight:800;font-size:12px;letter-spacing:.6px;padding-top:5px}.step-body{min-width:0;flex:1}.section-title{display:block;font-size:16px;font-weight:750}.hint{font-size:13px;color:#8f9bb8;margin:7px 0 20px}.url-wrap{height:53px;display:flex;align-items:center;gap:10px;background:#0c1224;border:1px solid #39415b;border-radius:12px;padding:0 15px;transition:border-color .2s}.url-wrap:focus-within{border-color:#978cff;box-shadow:0 0 0 3px #7766ff22}.link-icon{color:#8c9aba;font-size:22px}.url-wrap input{color:#fff;outline:0;border:0;background:transparent;width:100%;min-width:0;font-size:14px}.url-wrap input::placeholder{color:#6c7692}.field-error{font-size:12px;color:#ffb7b7;min-height:17px;margin-top:7px}.rule{height:1px;background:#2c354e;margin:22px 0}.designs{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.design{position:relative;cursor:pointer}.design input{position:absolute;opacity:0;pointer-events:none}.design-card{display:flex;min-height:117px;align-items:center;justify-content:center;flex-direction:column;gap:11px;background:#0e1528;color:#aeb8ce;border:1px solid #333d57;border-radius:13px;font-size:12px;font-weight:700;transition:.2s}.design input:checked+.design-card{background:#211f45;border:2px solid #9185ff;color:#eeeaff}.design input:focus-visible+.design-card{outline:3px solid #a9a1ff;outline-offset:3px}.pattern{display:block;width:50px;height:50px;background-color:white;background-image:linear-gradient(90deg,#111827 50%,transparent 50%),linear-gradient(#111827 50%,transparent 50%);background-size:13px 13px;mix-blend-mode:screen;border:4px solid #fff}.pattern.rounded{border-radius:12px;background-image:radial-gradient(ellipse at center,#111827 58%,transparent 61%);background-size:12px 12px}.pattern.dots{background-image:radial-gradient(circle,#111827 48%,transparent 52%);background-size:11px 11px;border:0;border-radius:4px}.swatches{display:flex;gap:13px;flex-wrap:wrap}.swatch{width:34px;height:34px;border-radius:50%;border:4px solid #141b30;background:var(--swatch);outline:2px solid transparent}.swatch.active{outline-color:#fff}.swatch:focus-visible{outline-color:#a9a1ff}.custom-color{display:flex;justify-content:space-between;align-items:center;background:#10172a;border:1px solid #333d57;border-radius:12px;padding:10px 13px;margin-top:21px;font-size:13px;color:#c0c8dd}.custom-side{display:flex;gap:12px;align-items:center}.custom-side input{width:33px;height:30px;border:0;padding:0;background:transparent;cursor:pointer}.custom-side output{font-size:12px;color:#a9b5cd;font-family:ui-monospace,monospace}.preview-panel{display:flex;flex-direction:column;padding:27px 29px 26px;align-items:center}.preview-heading{align-self:flex-start;font-size:13px;color:#c6cce3;font-weight:700;display:flex;align-items:center;gap:9px}.live-dot{height:8px;width:8px;background:#30d6a1;border-radius:50%;box-shadow:0 0 0 4px #30d6a120}.qr-stage{background:#fff;border-radius:19px;width:min(100%,310px);aspect-ratio:1;margin:29px 0 12px;padding:17px;display:grid;place-items:center}.qr-stage #qr-code{width:100%;height:100%;display:grid;place-items:center}.qr-stage #qr-code canvas,.qr-stage #qr-code svg{display:block;max-width:100%;max-height:100%;width:100%;height:100%}.preview-status{font-size:12px;color:#94a0b9;margin:8px 0 26px;text-align:center}.download{border:0;background:#806dff;border-radius:12px;width:100%;max-width:310px;min-height:53px;color:white;font-weight:750;font-size:14px;box-shadow:0 8px 24px #6958f93d;transition:background .2s}.download:hover{background:#9485ff}.download:disabled{opacity:.45;cursor:not-allowed}.download span{font-size:21px;margin-right:8px}.fineprint{font-size:11px;color:#7f8ba8;text-align:center;margin:16px 0 0}footer{text-align:center;margin:43px 0 0;color:#727d99;font-size:12px}footer span{padding:0 5px}@media(max-width:760px){.shell{padding:20px 16px}.intro{margin:47px 0 28px}.workspace{grid-template-columns:1fr}.editor{padding:24px 18px}.preview-panel{padding:24px 20px}.qr-stage{width:min(100%,300px)}.design-card{min-height:105px}.step{gap:13px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}