*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:#071858;background:#fff;font:14px Arial,Helvetica,sans-serif}button,input{font:inherit}button{cursor:pointer}a{text-decoration:none;color:inherit}header{height:58px;border-bottom:1px solid #e4ebf5}.head{max-width:1400px;padding:0 20px;margin:auto;display:flex;align-items:center;height:100%;gap:22px}.logo{height:45px;max-width:215px;object-fit:contain}.bar{height:28px;border-left:1px solid #c9d5eb}.head strong{font-size:21px}.head nav{margin-left:auto;display:flex;gap:30px;font-size:13px}.hero{background:radial-gradient(ellipse 300px 170px at -5% 130%,#85b8ff 0 75%,transparent 76%),radial-gradient(ellipse 280px 190px at 104% -35%,#ba9bff 0 80%,transparent 81%),linear-gradient(110deg,#c7e4ff,#e8f5ff 60%,#d2c5ff);min-height:138px}.hero-inner{max-width:1400px;margin:auto;padding:12px 20px;display:flex;gap:30px;align-items:center}.hero-art{display:flex;align-items:center;gap:15px;min-width:270px;justify-content:center;color:#0876ff;font-size:40px}.hero-tile{height:90px;width:85px;border-radius:9px;background:#fff;display:grid;place-items:center;box-shadow:0 5px 12px #749bd83d;font-size:58px}.hero-tile.purple{color:#8817ef}.hero-tile.gold{color:#ffa300}.chip{background:#b8dbff;color:#0670fa;border-radius:6px;padding:3px 8px;font-weight:bold}.hero h1{font-size:38px;color:#075fe8;margin:4px 0 2px;letter-spacing:-1px}.hero p{font-size:16px;margin:0 0 12px}.benefit-strip{display:flex;flex-wrap:wrap;gap:27px}.benefit-strip span:before{content:'✓';display:inline-grid;place-items:center;width:21px;height:21px;background:#00b75d;border-radius:50%;color:white;margin-right:9px;font-weight:bold}.container{max-width:1400px;padding:12px 20px;margin:auto}.layout{display:grid;grid-template-columns:minmax(350px,440px) minmax(450px,1fr) 305px;gap:10px}.card{border:1px solid #e0e8f4;border-radius:7px;background:#fff;padding:12px}.card h3{font-size:15px;margin:0 0 12px;display:flex;align-items:center;gap:10px}.card h3 i{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#0876ff;color:#fff;font-size:16px;font-style:normal}.left h3:not(:first-child){margin-top:14px}.left h3 small{font-weight:normal}.drop{height:162px;border:1.5px dashed #1680ff;border-radius:6px;background:#fbfdff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;text-align:center}.drop.drag{background:#e5f2ff}.cloud{font-size:43px;color:#0876ff;line-height:1}.drop span{font-size:13px;color:#4d649b}.drop small{font-size:11px;color:#526a9e}.primary,.green{background:#0878ff;color:white;border:0;border-radius:5px;font-weight:bold;padding:10px 22px}.green{background:#00b65a}.crop-flex{display:grid;grid-template-columns:185px minmax(0,1fr);gap:14px}.crop-box{position:relative;width:185px;height:185px;background-color:#fff;background-image:linear-gradient(45deg,#d9dfe8 25%,transparent 25%),linear-gradient(-45deg,#d9dfe8 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d9dfe8 75%),linear-gradient(-45deg,transparent 75%,#d9dfe8 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;display:grid;place-items:center;overflow:hidden;border-radius:5px}#crop{width:155px;height:155px}.crop-outline{position:absolute;inset:15px;border:2px solid #0781ff;pointer-events:none}.crop-outline:before,.crop-outline:after{content:'■';position:absolute;color:#087aff;font-size:15px;top:-10px}.crop-outline:before{left:-5px}.crop-outline:after{right:-5px}.adjust label{display:grid;grid-template-columns:65px 1fr 42px;align-items:center;gap:5px;font-size:12px;margin-bottom:10px}.adjust input,.round-row input[type=range]{min-width:0;width:100%;accent-color:#087bff}.adjust output,.round-row output{font-size:12px;color:#354e8c;text-align:right}.adjust-buttons{display:flex;gap:5px}.adjust-buttons button{border:1px solid #d9e3f1;border-radius:5px;background:#fff;color:#07246c;padding:7px 12px}.swatches{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.swatch{width:35px;height:35px;border:1px solid #dce5f0;border-radius:5px}.swatch.active{outline:2px solid #0780ff;outline-offset:2px}.transparent{background:conic-gradient(#dce1e9 25%,white 0 50%,#dce1e9 0 75%,white 0) 0 0/14px 14px}#customColor{width:36px;height:36px;border:0;background:transparent;padding:0}.round-row{display:grid;grid-template-columns:1fr 1fr 45px;gap:10px;align-items:center;margin-top:18px;font-size:12px}.round-row label{white-space:nowrap}.round-row input[type=checkbox],.section-heading input{accent-color:#087bff}.center{display:flex;flex-direction:column;gap:10px}.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.tabs button{border:1px solid #e0e7f1;background:#f6f8fb;color:#091c60;border-radius:5px;padding:12px 4px;font-size:12px}.tabs button.active{background:#0878ff;color:#fff}.preview-panes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.preview-pane{border:1px solid #e1e8f3;border-radius:7px;padding:10px;min-width:0}.preview-pane h4{font-size:12px;margin:0 0 12px}.browser-mock{background:#f0f2f6;border-radius:8px;padding:10px 9px 5px;min-height:95px}.browser-tab{display:flex;align-items:center;gap:8px;border-radius:8px 8px 0 0;background:#fff;padding:7px;font-size:12px;width:90%}.browser-tab span:last-child{margin-left:auto}.address{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:white;color:#607292;font-size:11px;padding:8px}.app-icons{display:flex;justify-content:space-around;gap:5px}.app-icons>div{text-align:center;font-size:11px}.app-icons canvas{display:block;border:1px solid #e3e9f3;border-radius:10px;margin:auto auto 5px;padding:5px}.generated{flex:1}.section-heading{display:flex;justify-content:space-between;align-items:center}.section-heading label{font-size:12px;white-space:nowrap}.sizes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.size-card{border:1px solid #dce5f0;border-radius:6px;text-align:center;padding:7px 3px;position:relative;min-height:117px}.size-card input{position:absolute;top:5px;left:5px;accent-color:#0878ff}.size-card canvas{width:53px;height:53px;display:block;margin:12px auto 5px}.size-card b{display:block;font-size:12px}.size-card small{font-size:10px;color:#526da1}.downloads{display:grid;grid-template-columns:1.5fr 1fr;gap:12px;margin-top:12px}.downloads button{min-height:45px;font-size:13px}.outline{background:#fff;color:#086bfa;border:1px solid #8cbaff;border-radius:5px;font-weight:bold;padding:9px}#status{font-size:12px;color:#365e99;min-height:12px;margin:6px 0 0}.side{margin-bottom:10px}.side h3{font-size:14px}.check-list{list-style:none;padding:0;margin:0}.check-list li{position:relative;padding-left:28px;margin:0 0 9px;font-size:13px}.check-list li:before{content:'✓';position:absolute;left:2px;top:-2px;color:#fff;background:#00b657;border-radius:50%;height:17px;width:17px;text-align:center;line-height:17px}.links a{display:flex;justify-content:space-between;font-size:13px;padding:5px 2px 5px 28px;position:relative}.links a:before{content:'▣';position:absolute;left:2px;color:#fff;background:#087aff;border-radius:4px;padding:1px 4px}.links a:nth-child(3n+1):before{background:#00b75c}.links a:nth-child(3n+2):before{background:#8d25f6}.links a span{font-size:20px}.tips{padding-left:20px;margin:0}.tips li{margin-bottom:7px;font-size:13px}.how{background:linear-gradient(110deg,#f0f9ff,#f9fcff);margin-top:10px;border-radius:8px;padding:10px 20px 16px;text-align:center}.how h2,.faq h2{font-size:23px;margin:0}.how>p{color:#5772a5;margin:4px 0 14px}.steps{display:flex;align-items:center;justify-content:space-around;gap:10px}.step{display:flex;align-items:center;gap:14px;text-align:left;max-width:260px}.step p{margin:5px 0;color:#5b74a6}.step-icon{position:relative;display:grid;place-items:center;flex-shrink:0;width:70px;height:70px;border-radius:50%;font-size:35px}.step-icon b{position:absolute;right:-2px;top:-3px;border-radius:50%;background:#0876ff;color:white;font-size:13px;width:25px;height:25px;display:grid;place-items:center}.greenish{background:#def8ec;color:#00ae57}.purplish{background:#f0e8ff;color:#8821f4}.blueish{background:#e0f0ff;color:#0876ff}.arrow{color:#087bff;font-size:35px}.faq{text-align:center;padding-top:15px}.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 20px;text-align:left;margin-top:15px}.faq details{border:1px solid #e0e8f4;border-radius:5px;font-size:12px}.faq summary{padding:8px;cursor:pointer}.faq details p{padding:0 10px 8px;color:#52699a}footer{text-align:center;color:#7084a7;padding:25px}@media(max-width:1180px){.layout{grid-template-columns:minmax(320px,420px) minmax(430px,1fr)}aside{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.side{margin:0}.hero h1{font-size:32px}}@media(max-width:830px){.layout{grid-template-columns:1fr}.left{max-width:none}.crop-flex{grid-template-columns:185px 1fr}aside{grid-template-columns:1fr}.hero-art{min-width:150px;transform:scale(.8);margin:0 -20px}.hero h1{font-size:27px}.benefit-strip{gap:9px}.steps{flex-direction:column;align-items:stretch}.arrow{display:none}}@media(max-width:540px){.head{gap:10px;padding:0 10px}.logo{height:32px;max-width:140px}.head strong{font-size:16px}.head nav{gap:9px;font-size:11px}.head nav a:nth-child(2){display:none}.hero-art{display:none}.container{padding:10px}.preview-panes{grid-template-columns:1fr}.sizes{grid-template-columns:repeat(3,1fr)}.downloads{grid-template-columns:1fr}.crop-flex{grid-template-columns:1fr}.crop-box{margin:auto}.faq-grid{grid-template-columns:1fr}}