:root{--blue:#086cff;--navy:#07145c;--border:#dfe8f5;--muted:#53689e}*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--navy);background:#fff;font-size:13px}button,input,select{font:inherit}button{cursor:pointer}header{height:58px;border-bottom:1px solid #edf0f7}.head-wrap{max-width:1320px;margin:auto;height:100%;display:flex;align-items:center;gap:25px;padding:0 16px}.logo{width:197px;max-height:46px;object-fit:contain}.separator{height:27px;border-left:1px solid #cbd7f0}.head-wrap strong{font-size:22px}.head-wrap nav{margin-left:auto;display:flex;gap:28px}.head-wrap a{text-decoration:none;color:var(--navy)}.hero{background:radial-gradient(ellipse at -3% 110%,#729fff 0 16%,transparent 16.2%),radial-gradient(ellipse at 99% 100%,#9576ef 0 18%,transparent 18.2%),linear-gradient(108deg,#b9ddff,#edf6ff 51%,#b5baff);min-height:133px}.hero-inner{max-width:1320px;margin:auto;padding:13px 16px;display:flex;align-items:center;gap:36px}.hero-art{display:flex;align-items:center;gap:12px;font-size:36px}.hero-art span{width:94px;height:91px;border-radius:9px;background:#fff9;display:grid;place-items:center}.hero-art b{color:#0074ff}.pill{display:inline-block;background:#b5dcff;color:#0066f0;border-radius:5px;padding:3px 7px;font-weight:bold}h1{font-size:38px;color:#0966f3;margin:2px 0 3px;letter-spacing:-1px}.hero p{font-size:16px;margin:0 0 12px}.benefit-inline{display:flex;flex-wrap:wrap;gap:32px}.benefit-inline span:before,.checks li:before{content:'✓';display:inline-grid;place-items:center;background:#06b94e;color:white;border-radius:50%;font-weight:bold;width:20px;height:20px;margin-right:9px}.container{max-width:1420px;margin:10px auto 0;padding:0 12px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:12px}.work{display:grid;grid-template-columns:405px minmax(0,1fr);gap:10px;align-content:start}.controls{display:flex;flex-direction:column;gap:8px}.card{border:1px solid var(--border);border-radius:7px;background:white;padding:12px}.card h2,.card h3{margin:0 0 10px;font-size:16px;display:flex;align-items:center;gap:10px}.card h2 i{width:29px;height:29px;border-radius:50%;background:#076cff;color:white;font-style:normal;display:inline-grid;place-items:center;font-size:17px}.url-input{height:41px;border:1px solid #d8e3f3;border-radius:5px;display:flex;align-items:center;padding:0 11px;gap:8px}.url-input input{border:0;outline:0;min-width:0;flex:1;color:var(--navy)}.url-input button{background:none;border:0;color:var(--navy);font-size:22px}.primary{background:#076cff;color:white;border:0;border-radius:5px;font-weight:600}.capture{width:100%;height:48px;margin-top:10px;font-size:15px}.status{margin:5px 0 0;color:#566b9a;min-height:0}.progress{height:6px;background:#e2ebf7;border-radius:9px;margin-top:8px;overflow:hidden}.progress div{height:100%;width:20%;background:#0874ff;animation:load 2s ease-in-out infinite alternate}@keyframes load{to{width:90%}}.settings{flex:1}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0}.setting-row>label{flex:0 0 84px}.choice{display:flex;flex:1;gap:6px}.choice button{border:1px solid #d8e4f4;background:#f7f9fd;color:var(--navy);border-radius:5px;min-height:37px;flex:1;padding:5px}.choice button.selected,.thumbs button.selected{background:#076cff;color:white;border-color:#076cff}.choice.device button{font-size:20px;display:flex;align-items:center;flex-direction:column;gap:3px}.choice small{font-size:11px}.setting-row select{flex:1;min-width:0;padding:10px;border:1px solid #d9e4f4;color:var(--navy);background:white;border-radius:5px}.switch{appearance:none;width:46px;height:24px;border-radius:30px;background:#cbd2dc;position:relative;cursor:pointer;flex-shrink:0}.switch:before{content:'';position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:white;transition:.2s}.switch:checked{background:#0674ff}.switch:checked:before{transform:translateX(22px)}.preview{padding:10px 12px}.preview-title{display:flex;align-items:center;justify-content:space-between;gap:8px}.preview-title>div{display:flex;align-items:center;gap:7px}.outline{border:1px solid #c5d8fb;color:#0658da;background:white;border-radius:5px;padding:8px 12px}.success{color:#03984c;background:#ecfff6;border-radius:5px;padding:6px}.screen-frame{background:#252a30;border-radius:11px;padding:6px;min-height:296px}.browser-top{height:18px;color:#f6b650;font-size:11px;position:relative;padding-left:8px}.camera-dot{position:absolute;left:50%;color:#666}.screen-inner{height:278px;overflow:auto;background:#eef3fa}.screen-inner img{width:100%;height:auto;display:block}.screen-inner img[hidden]{display:none}.empty-preview{display:grid;place-content:center;text-align:center;height:100%;color:#6781aa}.empty-preview span{font-size:56px}.empty-preview h3{margin:10px 0 3px}.empty-preview p{margin:0}.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0}.thumbs button{border:1px solid #e0eaf5;background:#f8fafd;color:var(--navy);border-radius:6px;min-height:98px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.thumbs span{font-size:28px}.thumbs small{font-size:10px}.download-actions{display:flex;gap:12px}.download-actions button{flex:1;min-height:46px}.download-actions small{display:block;font-size:10px;font-weight:400}.side{margin-bottom:10px;padding:12px}.side h3{font-size:15px}.checks{list-style:none;padding:0;margin:0}.checks li{display:flex;align-items:start;line-height:1.35;margin:7px 0}.checks li:before{width:17px;height:17px;flex:0 0 17px;margin-right:8px}.links a{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--navy);padding:3px 0}.links a b{margin-left:auto;font-size:18px}.link-icon{width:20px;height:20px;background:#00b968;color:white;border-radius:4px;text-align:center;line-height:20px}.links a:nth-child(4n+2) .link-icon{background:#5494d7}.links a:nth-child(4n+3) .link-icon{background:#ff1642}.links a:nth-child(4n+4) .link-icon{background:#8929ff}.tips{margin:0;padding-left:22px;line-height:1.6}.how{grid-column:1/-1;background:#f3faff;text-align:center;padding:6px 16px 15px}.how h2,.faqs h2{justify-content:center;font-size:22px;margin:0}.how>p,.faqs>p{margin:0 0 10px;color:#4962a0}.steps{display:flex;align-items:center;justify-content:space-around;gap:12px}.steps>div{display:flex;align-items:center;text-align:left;gap:12px}.steps>div>span{width:68px;height:68px;flex:0 0 68px;border-radius:50%;background:#e0f7ec;display:grid;place-items:center;font-size:28px;position:relative}.steps>div:nth-of-type(2)>span{background:#f0e5ff}.steps>div:nth-of-type(3)>span{background:#e0efff}.steps span b{position:absolute;top:0;right:-4px;border-radius:50%;background:#05b94e;color:white;font-size:14px;width:27px;height:27px;display:grid;place-items:center}.steps article p{margin:5px 0;color:#4962a0}.steps em{font-size:38px;color:#0075ff}.faqs{text-align:center;margin:10px 0}.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 25px;text-align:left}.faq-grid details{border:1px solid #dae5f3;border-radius:5px}.faq-grid summary{padding:6px 12px;cursor:pointer}.faq-grid details p{padding:0 12px 8px;color:#526b98}.footnote{font-size:11px;color:#687c9d}footer{text-align:center;padding:22px;color:#7384a2}@media(max-width:1120px){.layout{grid-template-columns:1fr}.work{grid-template-columns:40% 1fr}aside{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.hero-art{display:none}}@media(max-width:720px){.head-wrap{gap:10px}.logo{width:142px}.head-wrap nav{gap:8px;font-size:11px}.head-wrap strong{font-size:16px}.hero-inner{padding:18px 14px}h1{font-size:29px}.hero p{font-size:14px}.benefit-inline{gap:9px}.work{display:flex;flex-direction:column}.controls,.preview{width:100%}.layout{display:block}aside{display:block}.steps{flex-direction:column;align-items:stretch}.steps em{display:none}.faq-grid{grid-template-columns:1fr}.download-actions{flex-direction:column}.thumbs{gap:3px}.thumbs button{min-height:80px}.preview-title{flex-wrap:wrap}}

/* Reference screenshot alignment – responsive redesign */
:root{--blue:#006cff;--navy:#06145c;--border:#e0e9f5}
body{font-family:Arial,Helvetica,sans-serif;font-size:13px}
.head-wrap{max-width:1270px}
.hero{min-height:130px;background:radial-gradient(ellipse at -6% 120%,#699aff 0 18%,transparent 18.2%),radial-gradient(ellipse at 100% 120%,#8c7df4 0 20%,transparent 20.2%),linear-gradient(105deg,#a8d3ff 0%,#d9edff 48%,#b0a9ff 100%)}
.hero-inner{max-width:1270px;gap:38px}.hero-art{min-width:250px;justify-content:center}.hero-art span{height:91px;width:106px;font-size:45px;background:linear-gradient(135deg,#fff,#f2f8ff);box-shadow:0 1px 3px #b0cafa55}.hero-art .art-window{color:#7a35ef}.hero-art .art-camera{font-size:46px}.hero-art b{font-size:37px}
.hero h1{background:linear-gradient(90deg,#007cff,#3000a8);background-clip:text;-webkit-background-clip:text;color:transparent;font-size:38px}.hero p{font-size:15px}.benefit-inline span:before{width:21px;height:21px}
.container{max-width:1420px;margin-top:11px}.layout{grid-template-columns:minmax(0,1fr) 290px;gap:12px}.work{grid-template-columns:minmax(330px,39%) minmax(0,1fr);gap:10px}.controls{gap:7px}.card{border-radius:7px}.url-card{padding:10px 14px}.settings{padding:9px 14px}.setting-row{margin:10px 0}.setting-row>label{flex-basis:86px}.preview{padding:9px 13px}.preview-title{min-height:35px}.screen-frame{min-height:299px}.screen-inner{height:273px;overflow:hidden}.empty-preview{position:relative;height:100%;display:block;overflow:hidden}.empty-preview img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}.demo-tag{position:absolute;right:8px;bottom:8px;background:#ffffffed;color:#173267;font-size:10px;padding:4px 7px;border-radius:4px;box-shadow:0 1px 6px #0014}.screen-inner:has(#shot:not([hidden])){overflow:auto}.screen-frame.frameless{background:transparent;padding:0}.screen-frame.frameless .browser-top{display:none}.screen-frame.frameless .screen-inner{height:296px}.browser-top{height:20px}.thumbs{gap:8px}.thumbs button{height:113px;padding:4px;gap:3px}.thumbs button.selected{background:#e7f3ff;color:#06145c;border-color:#86bfff}.thumb-preview{height:64px;width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}.thumb-preview img{max-width:100%;height:57px;object-fit:cover;border:2px solid #1c2a45;border-radius:4px}.thumb-tablet img{width:45px;height:60px;object-fit:cover}.thumb-mobile img{width:28px;height:60px;object-fit:cover}.thumb-full img{width:44px;height:60px;object-fit:cover;object-position:top}.thumbs b{font-size:12px}.download-actions button{height:47px}.how{background:#f2f9ff;border:0;margin-top:0}.how h2{font-size:21px}.side{padding:10px 13px;margin-bottom:7px}.side h3{font-size:15px;margin-bottom:9px}.checks li{margin:6px 0}.links a{padding:2px 0}.faqs{margin-top:8px}.faq-grid summary{padding:5px 12px}.steps>div>span{width:64px;height:64px;flex-basis:64px}
@media(max-width:1120px){.work{grid-template-columns:minmax(300px,39%) minmax(0,1fr)}}
@media(max-width:720px){.hero-art{display:none}.work{display:flex;flex-direction:column}.screen-inner{height:250px}.thumbs button{min-height:96px}.thumb-preview{height:50px}.thumb-preview img{height:45px}.thumb-tablet img,.thumb-mobile img,.thumb-full img{height:46px}.hero h1{font-size:29px}}
.empty-preview[hidden]{display:none!important}
/* Final screenshot-matched refinement */
.hero{position:relative;overflow:hidden}.hero:before,.hero:after{content:"";position:absolute;pointer-events:none;border-radius:50%;opacity:.35}.hero:before{width:440px;height:210px;left:-190px;top:-72px;background:#529aff;transform:rotate(24deg)}.hero:after{width:460px;height:240px;right:-160px;top:-110px;background:#8a52ed;transform:rotate(-18deg)}.hero-inner{position:relative;z-index:1}.hero-art .art-camera{font-family:Arial,sans-serif;background:linear-gradient(135deg,#ffffff,#edf5ff)}.hero-art .art-window{font-family:Arial,sans-serif}.primary,.outline,.choice button,.thumbs button{transition:background .15s,border-color .15s,box-shadow .15s,transform .15s}.primary:hover{background:#0058d7}.outline:hover{background:#edf5ff}.primary:disabled{opacity:.6;cursor:wait}.choice button:focus-visible,.thumbs button:focus-visible,.primary:focus-visible,.outline:focus-visible{outline:3px solid #89bbff;outline-offset:2px}.card{box-shadow:0 1px 3px rgba(18,65,131,.035)}.url-card,.settings{background:linear-gradient(135deg,#fff,#fbfdff)}.preview{background:linear-gradient(150deg,#f9fcff,#fff 55%)}.thumbs button:hover{border-color:#81baff}.side .links a:hover{color:#006cff}.side .links a:hover .link-icon{transform:scale(1.08)}.side .links a .link-icon{transition:transform .15s}.how{border-radius:8px}.steps>div:nth-of-type(2)>span b{background:#7918f9}.steps>div:nth-of-type(3)>span b{background:#006cff}.faq-grid details[open]{background:#f9fcff}.faq-grid summary:hover{color:#006cff}.screen-inner img#shot{object-fit:contain;object-position:top}.preview-title .success{font-size:11px}.status:empty{display:none}
@media(min-width:721px) and (max-width:1250px){.layout{grid-template-columns:minmax(0,1fr) 265px}.work{grid-template-columns:minmax(280px,39%) minmax(0,1fr)}.setting-row>label{flex-basis:78px}.hero-art{min-width:190px}.hero-art span{width:80px}.benefit-inline{gap:15px}}
@media(max-width:900px){.layout{grid-template-columns:1fr}.work{grid-template-columns:minmax(280px,39%) minmax(0,1fr)}aside{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.side{margin:0}.side:last-child{grid-column:1/-1}}
@media(max-width:720px){.head-wrap nav{gap:10px}.hero-inner{gap:0}.hero-art{display:none}.layout{display:block}.work{display:flex;flex-direction:column}.controls,.preview{width:100%}aside{display:block}.side{margin-bottom:10px}.side:last-child{grid-column:auto}.setting-row{gap:6px}.setting-row>label{flex-basis:88px}.screen-inner{height:250px}.benefit-inline{gap:8px 15px}.benefit-inline span{white-space:nowrap}.steps{gap:15px}.steps>div{width:100%}.faq-grid{grid-template-columns:1fr}}
@media(max-width:410px){.head-wrap{gap:7px;padding:0 9px}.logo{width:116px}.head-wrap strong{font-size:15px}.head-wrap nav{gap:7px;font-size:10px}.separator{height:21px}.hero h1{font-size:26px}.thumbs{gap:4px}.thumbs b{font-size:10px}.thumbs small{font-size:9px}.preview-title .success{display:none}}