500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');
:root{--bg:#080d1b;--panel:#101a2c;--panel2:#152239;--border:#24334d;--ink:#eff6ff;--muted:#9eb0ca;--cyan:#6ae6db;--purple:#a88aff;--accent:#718eff;--bad:#ff8d9f}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 85% 0%,#19224b 0,transparent 35%),var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif;line-height:1.5}h1,h2,h3{font-family:Outfit,sans-serif;line-height:1.14}h1{font-size:clamp(2.25rem,5vw,4.2rem);letter-spacing:-.055em;margin:12px 0}h2{font-size:1.5rem;margin:0 0 12px}h3{font-size:1.05rem;margin:0 0 12px}a{color:inherit;text-decoration:none}header{max-width:1260px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:24px 22px;gap:16px}.logo{font-family:Outfit;font-weight:800;font-size:1.4rem;letter-spacing:-.04em}.logo span{color:var(--cyan)}nav{display:flex;gap:18px;align-items:center}nav a{font-size:.88rem;color:var(--muted)}nav a:hover,nav a.active{color:#fff}.pill{display:inline-flex;border-radius:100px;padding:6px 12px;color:var(--cyan);border:1px solid #365760;background:#113138;font-size:.75rem;font-weight:700}.container{max-width:1260px;margin:auto;padding:25px 22px 70px}.hero{text-align:center;margin:25px auto 36px;max-width:780px}.hero p{color:var(--muted);font-size:1.08rem}.hero strong{color:var(--cyan)}.card{border:1px solid var(--border);background:linear-gradient(155deg,var(--panel),#0e1627);border-radius:20px;padding:23px;box-shadow:0 15px 45px #0002}.workspace{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(320px,.82fr);gap:20px;align-items:start}.stack{display:grid;gap:20px}.field{margin-bottom:16px}label,.label{display:block;font-weight:700;font-size:.83rem;margin-bottom:7px;color:#dce8fa}input,select,textarea{background:#091325;color:var(--ink);width:100%;border:1px solid #30425c;border-radius:10px;padding:11px 12px;font:inherit;outline:none;min-height:43px}input:focus,select:focus,textarea:focus{border-color:var(--cyan)}textarea{min-height:96px;resize:vertical}input[type=color]{padding:3px;width:52px;min-height:41px;cursor:pointer}input[type=range]{padding:0;min-height:25px;accent-color:var(--cyan)}input[type=checkbox]{min-height:auto;width:auto;accent-color:var(--cyan)}.twocol{display:grid;grid-template-columns:1fr 1fr;gap:12px}.threecol{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:20px}.tab{background:#19253a;color:#cad8ed;border:1px solid #293b55;padding:9px 14px;border-radius:10px;cursor:pointer;font-weight:700;font-size:.82rem}.tab.active{background:#244a60;border-color:#418a9b;color:#96fff0}.button{background:linear-gradient(110deg,#65dccf,#7598ff);color:#071426;border:0;border-radius:11px;padding:12px 18px;cursor:pointer;font-weight:800;font-family:inherit}.button:hover{filter:brightness(1.1)}.button.secondary{background:#20314a;color:#e5efff;border:1px solid #39506c}.button.small{padding:8px 12px;font-size:.8rem}.buttons{display:flex;gap:9px;flex-wrap:wrap}.controlhead{display:flex;align-items:center;justify-content:space-between}.muted{color:var(--muted)}.smallprint{font-size:.77rem;color:var(--muted)}.preview{display:flex;flex-direction:column;align-items:center;gap:17px;min-height:320px;justify-content:center;padding:22px;border-radius:15px;background:radial-gradient(circle at center,#223351,#142035)}#qrPreview{display:flex;align-items:center;justify-content:center;max-width:100%;overflow:hidden}#qrPreview canvas,#qrPreview svg{max-width:100%;height:auto}section.note{margin-top:24px;border:1px solid var(--border);background:#0e1726;border-radius:16px;padding:24px}.note p,.note li{color:var(--muted)}footer{padding:30px 20px;border-top:1px solid var(--border);text-align:center;color:var(--muted);font-size:.82rem}.status{color:var(--cyan);font-size:.84rem;min-height:20px}.chip{display:inline-flex;padding:5px 10px;border-radius:8px;background:#1c2c43;color:#a9c0dc;font-size:.77rem}.file-list{display:grid;gap:12px;max-height:440px;overflow:auto}.file-row{border:1px solid #293c54;border-radius:13px;padding:12px;display:grid;grid-template-columns:68px 1fr;gap:12px;align-items:center;background:#101e30}.thumb{width:68px;height:68px;object-fit:contain;background:#22314a;border-radius:7px}.meter{height:6px;background:#29405a;border-radius:8px;overflow:hidden}.meter>div{height:100%;background:var(--cyan)}.drop{border:2px dashed #466083;border-radius:17px;padding:42px 18px;text-align:center;cursor:pointer;background:#121f32}.drop:hover,.drop.drag{border-color:var(--cyan);background:#173244}.grid-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.feature{border:1px solid var(--border);padding:26px;border-radius:18px;background:linear-gradient(135deg,#182640,#10192a);transition:transform .2s}.feature:hover{transform:translateY(-4px)}.feature .em{font-size:2.4rem}.feature p{color:var(--muted)}.feature b{color:var(--cyan)}.intro{padding:40px 0}.accent{color:var(--cyan)}.detail{display:none}.detail.active{display:block}.warn{color:#ffbd95}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.full{width:100%}@media(max-width:820px){.workspace{grid-template-columns:1fr}header{padding:18px 15px}nav{gap:11px}nav a{font-size:.76rem}.container{padding:16px 15px 45px}.grid-cards{grid-template-columns:1fr}.card{padding:17px}}@media(max-width:420px){.twocol,.threecol{grid-template-columns:1fr}.hero{margin-top:12px}.tabs{gap:5px}.tab{padding:7px 9px}}

/* V4 visual system: original QR Studio layout inspired by common QR creator workflows */
body{background:radial-gradient(ellipse at 12% 8%,rgba(37,99,235,.17),transparent 35%),radial-gradient(ellipse at 88% 15%,rgba(25,195,172,.12),transparent 30%),#090f20}
header{max-width:1370px}header .logo{font-size:1.55rem}.container{max-width:1340px}
.hero{max-width:920px;padding:24px 0}.hero h1{font-size:clamp(2.7rem,5.4vw,5.2rem);line-height:1.04}.hero p{max-width:700px;margin:20px auto}
.studio-steps{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin:0 0 25px}.studio-steps span{padding:10px 17px;border:1px solid #314562;background:#141f34;border-radius:99px;color:#c6d4e9;font-size:.88rem}.studio-steps b{color:#76e8d8;margin-right:9px}
.qr-workspace{grid-template-columns:minmax(0,1.16fr) minmax(340px,.84fr)}.qr-workspace>.stack:nth-child(2){position:sticky;top:12px}
.card{border-radius:23px;background:linear-gradient(160deg,#142139,#0d182c);box-shadow:0 20px 55px #0004;animation:rise .45s ease both}
.tab{padding:12px 13px;transition:transform .15s,background .15s,border-color .15s}.tab:hover{transform:translateY(-2px);border-color:#72aaff}.tab.active{background:linear-gradient(135deg,#214b6b,#183c55);box-shadow:inset 0 0 0 1px #4aa3a9}
.button{transition:transform .15s,filter .15s,box-shadow .15s}.button:hover{transform:translateY(-2px);box-shadow:0 8px 22px #6ae6db25}
.preview{background:radial-gradient(circle at center,#2c4264,#111f34);position:relative;overflow:hidden}.preview:before{content:'';position:absolute;width:320px;height:320px;border:1px solid #ffffff16;border-radius:50%;pointer-events:none}.preview-decoration{position:relative;z-index:1;color:#a1bdd5;font-size:.63rem;letter-spacing:.15em;font-weight:800;text-align:center}#qrPreview{position:relative;z-index:1;background:#fff;padding:17px;border-radius:18px;box-shadow:0 18px 50px #0006}#qrPreview:empty{padding:0}
.readability{font-size:.82rem;border-radius:12px;border:1px solid #2b5664;background:#102e36;padding:12px 14px;color:#aff3e0;margin:16px 0}.readability.warning{background:#403018;border-color:#987338;color:#ffda9c}
input,select,textarea{transition:border-color .17s,box-shadow .17s}input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px #56d8d31d}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media(max-width:820px){.qr-workspace{grid-template-columns:1fr}.qr-workspace>.stack:nth-child(2){position:static}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Launch improvements */
html{scroll-behavior:smooth}body{overflow-wrap:anywhere}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #6ae6db;outline-offset:3px}button:disabled{opacity:.55;cursor:not-allowed}.feature{min-width:0}footer a{text-decoration:underline}header nav{flex-wrap:wrap;justify-content:flex-end}.card,.workspace,.stack{min-width:0}.drop:focus-visible{outline:3px solid #6ae6db;outline-offset:3px}.content-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.content-box{border:1px solid var(--border);border-radius:16px;padding:19px;background:var(--panel)}.content-box p{color:var(--muted)}.content-box a{color:var(--cyan);text-decoration:underline}.breadcrumbs{margin:5px 0 28px;color:var(--muted);font-size:.87rem}.breadcrumbs a{color:var(--cyan)}.faq{margin:18px 0}.faq details{border:1px solid var(--border);border-radius:12px;padding:14px 17px;margin-bottom:11px}.faq summary{cursor:pointer;font-weight:700}.faq p{color:var(--muted)}@media(max-width:600px){header{align-items:flex-start;flex-wrap:wrap}header nav{width:100%;justify-content:flex-start}.hero{padding:0}.hero h1{font-size:clamp(2.1rem,8vw,3rem)}.content-grid{grid-template-columns:1fr}.buttons>.button{flex:1 1 auto}.preview{padding:12px;min-height:255px}.studio-steps{gap:5px}.studio-steps span{font-size:.7rem;padding:7px 9px}}

/* V5 polished accessibility and navigation */
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #a292ff!important;outline-offset:3px}button{cursor:pointer} .tab{min-height:42px} @media(max-width:700px){.qr-workspace{display:block}.qr-workspace>.stack{margin-bottom:18px}.tabs{max-height:230px;overflow:auto}.buttons{flex-wrap:wrap}.preview svg{max-width:100%;height:auto}input,select,textarea{max-width:100%}}