*{box-sizing:border-box} :root{font-family:Inter,Arial,Helvetica,sans-serif;color:#20204d;background:#f7f8fc;font-synthesis:none}body{margin:0}button,input,textarea,select{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.sprite{display:none}header{height:96px;display:flex;align-items:center;justify-content:space-between;padding:0 5.5%;border-bottom:1px solid #e2e3ef;background:#fff}.brand{display:flex;align-items:center;gap:12px;font-size:23px;font-weight:750;letter-spacing:-.8px}.brand-sub{display:block;font-size:10px;letter-spacing:2px;color:#72728a;margin-top:5px}.brandmark{width:40px;height:43px;display:flex;align-items:flex-end;gap:4px;padding:8px;background:#20204d;border-radius:9px}.brandmark i{width:6px;background:#4d4cff;height:16px}.brandmark i:nth-child(2){height:27px}.brandmark i:nth-child(3){height:21px}.header-label{font-size:12px;letter-spacing:2px;font-weight:600}.small-pill{padding:5px 8px;background:#eeeefe;border-radius:4px;letter-spacing:0;margin-left:8px}.back-link{font-size:14px;color:#64647e;display:flex;gap:18px}.back-link span{font-size:19px}main{max-width:1320px;margin:auto;padding:51px 5.5% 0}.intro{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:38px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:700;color:#4d4cff;margin-bottom:19px}h1{font-size:clamp(34px,3.3vw,47px);line-height:1.1;letter-spacing:-1.8px;font-weight:550;margin:0}h1 span{color:#4d4cff}.intro p{font-size:16px;line-height:1.6;color:#696982;margin:18px 0 0}.intro-label{font-size:10px;letter-spacing:2px;text-transform:uppercase;writing-mode:vertical-rl;color:#85859e}.workspace{display:grid;grid-template-columns:1.12fr 1fr;border:1px solid #dfe0ee;border-radius:18px;overflow:hidden;background:white;box-shadow:0 8px 25px #24246b05}.editor{padding:34px 36px 28px}.section-heading{display:flex;align-items:center;gap:11px}.step{font-size:11px;font-weight:600;border:1px solid #dfe0ee;width:27px;height:27px;display:grid;place-items:center;border-radius:50%;color:#77778f}h2{font-size:17px;letter-spacing:-.3px;margin:0;font-weight:650}.type-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:24px 0 25px}.type-picker button{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;padding:15px 3px 13px;color:#707089;background:white;border:1px solid #e0e0ed;border-radius:9px;font-size:14px;transition:background .15s,border .15s}.type-picker button:hover{background:#f5f5ff}.type-picker button[aria-checked=true]{background:#f0f0ff;border-color:#4d4cff;box-shadow:0 0 0 1px #4d4cff;color:#3e3ecc}.type-picker svg{width:21px;height:21px}.fields label,.customize label{display:block;font-size:14px;font-weight:550;margin-bottom:10px}.fields label:not(:first-child){margin-top:17px}input:not([type=color]),textarea,select{width:100%;border:1px solid #ddddeb;background:#fff;border-radius:7px;color:#292949;padding:13px 14px;outline:none;font-size:15px;line-height:1.4}textarea{resize:vertical;min-height:90px}input::placeholder,textarea::placeholder{color:#8c8ca2}input:focus,textarea:focus,select:focus{border-color:#4d4cff;box-shadow:0 0 0 3px #e6e6ff}button:focus-visible,a:focus-visible{outline:3px solid #4d4cff;outline-offset:4px}.hint{font-size:12px;line-height:1.6;color:#75758b;margin:11px 0 0}.appearance-heading{border-top:1px solid #eaeaf3;margin-top:28px;padding-top:26px}.customize{display:grid;grid-template-columns:1.3fr 1fr;gap:18px;margin-top:22px}.color-controls{display:flex;gap:8px;align-items:center;height:45px}.customize .color-input{display:flex;align-items:center;gap:6px;border:1px solid #ddddeb;padding:7px;border-radius:7px;margin:0;height:45px;flex:1;font-size:12px;min-width:108px}input[type=color]{height:26px;width:27px;border:0;padding:0;background:transparent;cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:0;border-radius:4px}.swatch{flex-shrink:0;border:3px solid white;box-shadow:0 0 0 1px #ddddeb;border-radius:50%;width:22px;height:22px;background:var(--swatch);padding:0}.swatch[aria-pressed=true]{box-shadow:0 0 0 1px #4d4cff}.customize select{height:45px;font-size:13px;padding:8px}.privacy{display:flex;align-items:center;gap:11px;background:#f7f7fc;border-radius:8px;padding:15px 13px;margin-top:29px;color:#70708c}.privacy svg{width:21px}.privacy strong{font-size:12px;font-weight:600;color:#484868}.privacy p{font-size:12px;margin:5px 0 0;line-height:1.5}.preview-panel{background:#eeeefe;padding:29px 34px 23px;display:flex;align-items:center;flex-direction:column;min-width:0;border-left:1px solid #dfe0ee}.preview-heading{display:flex;align-items:center;justify-content:space-between;width:100%;gap:12px;font-size:10px;letter-spacing:1.7px;font-weight:650;color:#656586}.status{background:#dfdfff;border-radius:20px;padding:6px 9px;display:flex;gap:5px;align-items:center;letter-spacing:0;font-size:11px;font-weight:500}.status svg{width:12px;height:12px}.qr-stage{flex:1;display:flex;align-items:center;justify-content:center;width:100%;padding:29px 0 22px}.qr-paper{width:256px;max-width:100%;aspect-ratio:1;border-radius:11px;background:white;box-shadow:0 9px 23px #38389914;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:8px}.qr-paper svg{width:100%;height:100%;stroke:none}.qr-paper .empty{font-size:14px;text-align:center;line-height:1.7;color:#808096;padding:30px}.destination{text-align:center;width:100%}.destination>span{font-size:10px;letter-spacing:1.6px;font-weight:650;color:#757593}.destination p{font-size:14px;color:#3e3e67;margin:9px 0 23px;overflow-wrap:anywhere;line-height:1.5;max-height:63px;overflow:auto;white-space:pre-wrap}.downloads{display:flex;gap:9px;width:100%;margin-top:4px}.downloads button{display:flex;align-items:center;justify-content:center;gap:10px;border-radius:8px;min-height:49px;font-size:14px;font-weight:550;padding:12px 15px}.download-primary{background:#4d4cff;color:#fff;border:1px solid #4d4cff;flex:1}.download-primary:hover{background:#3e3ecc}.download-secondary{background:transparent;border:1px solid #b9b9e0;color:#3e3ecc}.download-secondary:hover{background:#dfdfff}.downloads svg{width:17px;height:17px}.downloads button:disabled{opacity:.4;cursor:not-allowed}.download-hint{font-size:11px;color:#75758c;text-align:center;margin:13px 0 0;line-height:1.5}.feedback{font-size:12px;color:#3e3ecc;min-height:15px;margin:10px 0 0}.below{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:23px 0 48px;color:#85859c}.below>div{display:flex;align-items:center;gap:10px}.below p{font-size:12px;line-height:1.7;margin:0}.below strong{color:#61617f;font-weight:550}.tiny-qr{font-size:22px;color:#4d4cff}footer{border-top:1px solid #e0e0ef;padding:24px 0 26px;display:flex;justify-content:space-between;gap:15px;font-size:11px;color:#84849c;line-height:1.5}.optional{font-size:12px;color:#85859b;font-weight:400;margin-left:5px}.error{font-size:13px;color:#a23b24;line-height:1.5;margin:12px 0 0}[hidden]{display:none!important}@media(min-width:1500px){main{padding-left:38px;padding-right:38px}}@media(max-width:1000px){.editor{padding:26px}.preview-panel{padding:25px}.customize{grid-template-columns:1fr}.customize .color-input{flex:initial;width:125px}.intro-label{display:none}}@media(max-width:700px){header{height:79px;padding:0 22px}.header-label{display:none}.brand{font-size:20px}.back-link{font-size:12px;gap:7px}main{padding:32px 18px 0}.eyebrow{font-size:10px;letter-spacing:1.5px}h1{font-size:35px}.intro p{font-size:14px}.intro{margin-bottom:26px}.workspace{grid-template-columns:1fr}.editor{padding:24px 21px}.customize{grid-template-columns:1.25fr 1fr;gap:12px}.color-controls{gap:5px}.customize .color-input{min-width:103px;width:103px}.swatch{width:18px;height:18px}.preview-panel{border-left:0;border-top:1px solid #dfe0ee;padding:24px}.qr-stage{padding:29px 0 24px}.below{align-items:flex-start;flex-direction:column;gap:8px;margin-bottom:30px}footer{flex-direction:column;gap:8px}}@media(max-width:380px){.customize{grid-template-columns:1fr}.back-link{display:none}.type-picker{gap:6px}h1{font-size:30px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.brand-logo{display:block;object-fit:contain;flex-shrink:0}.brandmark{display:none}h1 span{background:linear-gradient(110deg,#4d4cff,#3e3ecc);background-clip:text;-webkit-background-clip:text;color:transparent}.preview-panel{background:linear-gradient(145deg,#f1f1ff,#e7e7ff)}.download-primary{background:linear-gradient(105deg,#4d4cff,#3e3ecc)}.download-primary:hover{background:#3e3ecc}.qr-paper{width:280px;padding:0}.preview-heading,.header-label{font-size:12px}.status{font-size:12px}.download-hint,.hint,.privacy strong,.privacy p{font-size:12px}

/* Color controls: an editable value and separate, wrapping presets. */
.customize{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:start}
.customize>div{min-width:0}
.color-controls{display:flex;gap:10px;height:auto;width:100%;align-items:center}
.color-controls input[type=color]{display:block;flex:0 0 44px;width:44px;height:44px;padding:5px;border:1px solid #ddddeb;border-radius:7px;background:#fff}
.color-controls #color-hex{flex:1;min-width:0;width:0;height:44px;padding:10px 12px;font-size:14px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase;letter-spacing:.4px}
.color-controls input[type=color]::-moz-color-swatch{border:0;border-radius:4px}
.color-controls input[aria-invalid=true]{border-color:#a23b24}
.color-controls input:focus-visible{outline:2px solid #4d4cff;outline-offset:2px}
.color-presets{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.color-presets .swatch{display:flex;align-items:center;gap:6px;flex:0 0 auto;width:auto;height:auto;min-height:36px;padding:7px 9px;border:1px solid #ddddeb;border-radius:7px;background:#fff;box-shadow:none;color:#64647e;font-size:13px;line-height:1.4}
.color-presets .swatch>span{width:14px;height:14px;border-radius:50%;background:var(--swatch);flex-shrink:0}
.color-presets .swatch[aria-pressed=true]{border-color:#4d4cff;background:#f0f0ff;color:#3e3ecc;box-shadow:0 0 0 1px #4d4cff}
.color-presets .swatch:hover{background:#f0f0ff}
@media(max-width:1000px){.customize{grid-template-columns:minmax(0,1fr)}}

:root{color-scheme:light}
.header-actions{display:flex;align-items:center;gap:24px}
.theme-toggle{display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:8px 11px;border:1px solid #ddddeb;border-radius:9px;background:#fff;color:#535373;font-size:13px;white-space:nowrap}
.theme-toggle>svg{width:17px;height:17px}
.theme-toggle:hover{background:#f0f0ff}
.theme-track{display:block;width:30px;height:18px;padding:3px;border-radius:12px;background:#d8d8e7}
.theme-track>span{display:block;width:12px;height:12px;border-radius:50%;background:#fff}
.theme-toggle[aria-checked=true] .theme-track{background:#7776ff}
.theme-toggle[aria-checked=true] .theme-track>span{transform:translateX(12px)}
:root[data-theme=dark]{color-scheme:dark;color:#ededfa;background:#10101c}
[data-theme=dark] header{background:#151522;border-color:#303046}
[data-theme=dark] .theme-toggle{color:#d7d7ef;border-color:#41415c;background:#202033}
[data-theme=dark] .theme-toggle:hover{background:#2b2b44}
[data-theme=dark] .brand-sub,[data-theme=dark] .back-link{color:#b0b0cb}
[data-theme=dark] .small-pill{background:#292941;color:#cecefa}
[data-theme=dark] .eyebrow{color:#a2a1ff}
[data-theme=dark] h1 span{background:none;color:#aaa9ff}
[data-theme=dark] .intro p,[data-theme=dark] .intro-label{color:#b0b0c8}
[data-theme=dark] .workspace{background:#181827;border-color:#343449;box-shadow:0 8px 25px #00000020}
[data-theme=dark] .step{border-color:#45455f;color:#b5b5d3}
[data-theme=dark] .type-picker button{background:#202032;border-color:#404057;color:#c0c0d8}
[data-theme=dark] .type-picker button:hover{background:#2a2a42}
[data-theme=dark] .type-picker button[aria-checked=true]{background:#30305a;color:#dfdfff;border-color:#9392ff;box-shadow:0 0 0 1px #9392ff}
[data-theme=dark] input:not([type=color]),[data-theme=dark] textarea,[data-theme=dark] select,[data-theme=dark] .color-controls input[type=color]{background:#202032;color:#ededfa;border-color:#47475f}
[data-theme=dark] input::placeholder,[data-theme=dark] textarea::placeholder{color:#a0a0b8}
[data-theme=dark] input:focus,[data-theme=dark] textarea:focus,[data-theme=dark] select:focus{border-color:#a2a1ff;box-shadow:0 0 0 3px #8584ff26}
[data-theme=dark] button:focus-visible,[data-theme=dark] a:focus-visible,[data-theme=dark] .color-controls input:focus-visible{outline-color:#b5b4ff}
[data-theme=dark] .appearance-heading{border-color:#343449}
[data-theme=dark] .hint,[data-theme=dark] .optional{color:#b0b0ca}
[data-theme=dark] .color-presets .swatch{background:#202032;color:#c2c2de;border-color:#47475f}
[data-theme=dark] .color-presets .swatch:hover{background:#2a2a42}
[data-theme=dark] .color-presets .swatch[aria-pressed=true]{background:#30305a;border-color:#9392ff;color:#e0dfff;box-shadow:0 0 0 1px #9392ff}
[data-theme=dark] .color-presets .swatch>span{outline:1px solid #ffffff55}
[data-theme=dark] .privacy{background:#222234;color:#b2b2ce}
[data-theme=dark] .privacy strong{color:#ddddef}
[data-theme=dark] .preview-panel{background:linear-gradient(145deg,#25253e,#1c1c32);border-color:#343449}
[data-theme=dark] .preview-heading,[data-theme=dark] .destination>span{color:#bbbbdc}
[data-theme=dark] .status{background:#37375f;color:#e0e0ff}
[data-theme=dark] .destination p{color:#e1e1f5}
[data-theme=dark] .qr-paper{background:#fff;color-scheme:light;box-shadow:0 10px 32px #00000026}
[data-theme=dark] .download-secondary{border-color:#77779e;color:#dddfff}
[data-theme=dark] .download-secondary:hover{background:#353558}
[data-theme=dark] .download-hint,[data-theme=dark] .below,[data-theme=dark] footer{color:#b0b0ca}
[data-theme=dark] .below strong{color:#d1d1e7}
[data-theme=dark] .tiny-qr,[data-theme=dark] .feedback{color:#b2b1ff}
[data-theme=dark] footer{border-color:#343449}
[data-theme=dark] .error{color:#ffb4a1}
[data-theme=dark] .color-controls input[aria-invalid=true]{border-color:#ffb4a1}
@media(max-width:1050px){.header-actions{gap:15px}.header-label{display:none}}
@media(max-width:700px){.header-actions .back-link{display:none}.theme-toggle{gap:7px;padding:7px 9px;font-size:12px}.theme-toggle>svg{display:none}.header-actions{gap:0}}
@media(max-width:380px){header{padding:0 14px}.brand{gap:7px;font-size:18px}.brand-logo{width:42px;height:42px}.theme-toggle{padding:7px}.theme-track{display:none}}