*{box-sizing:border-box}body{margin:0;background:#f5f8ff;color:#172033;font:14px Segoe UI,Arial,sans-serif}a{text-decoration:none}.top{height:64px;background:#fff;border-bottom:1px solid #e5ebf5;display:flex;align-items:center;padding:0 18px;gap:20px;position:sticky;top:0;z-index:20;box-shadow:0 5px 25px #1e3a8a0b}.brand{display:flex;align-items:center;gap:9px;color:#172033;min-width:180px}.brand>b{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;display:grid;place-items:center}.brand span{font-weight:800}.brand small{display:block;font-size:9px;color:#64748b}.top nav{display:flex;gap:4px;flex:1}.top nav a{padding:10px;font-size:10px;font-weight:900;color:#475569}.top nav a:hover{background:#eff6ff;color:#2563eb}.top>button{display:none}.layout{display:grid;grid-template-columns:220px 1fr;min-height:calc(100vh - 64px)}#side{background:#fff;border-right:1px solid #e5ebf5;padding:16px 12px;position:sticky;top:64px;height:calc(100vh - 64px)}#side a,#side button{display:block;width:100%;border:0;background:transparent;color:#475569;padding:10px;border-radius:9px;text-align:left;font-size:11px;cursor:pointer}#side a:hover,#side button:hover{background:#eff6ff;color:#2563eb}.hero,.card,#features,#faq{max-width:1240px;margin:15px auto}.hero{padding:25px 28px;display:flex;justify-content:space-between;align-items:center}.hero i,.center i{font-style:normal;color:#2563eb;font-size:9px;font-weight:900;background:#dbeafe;border-radius:99px;padding:7px 10px}.hero h1{font-size:clamp(30px,4vw,52px);margin:12px 0 8px;letter-spacing:-1.5px}.hero p{max-width:750px;color:#64748b;line-height:1.7}.art{font-size:60px;animation:float 3s infinite}@keyframes float{50%{transform:translateY(-9px)}}.card{background:#fff;border:1px solid #e2e8f0;border-radius:15px;padding:12px}.upload{text-align:center}.drop{border:2px dashed #b7c9e5;border-radius:15px;padding:35px 15px}.drop.drag{background:#eff6ff;border-color:#2563eb}.big{font-size:45px;animation:float 2.5s infinite}.drop p{color:#64748b}.primary{background:linear-gradient(135deg,#2563eb,#7c3aed)!important;color:#fff!important;border:0!important}.drop button,.actions button,.toolbar button,.full,.tabs button,.share button{border:1px solid #dbe4f2;background:#fff;border-radius:9px;padding:9px 12px;font-size:10px;font-weight:900;cursor:pointer}.privacy{font-size:9px;color:#94a3b8;margin-top:12px}.engine{display:block;font-size:9px;margin-top:7px;color:#64748b}.actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.center{text-align:center}.hidden{display:none!important}.toolbar{max-width:1240px;margin:10px auto;background:#fff;border:1px solid #e2e8f0;border-radius:11px;padding:8px;display:flex;gap:5px;align-items:center;justify-content:center;flex-wrap:wrap;position:sticky;top:68px;z-index:10}.grid{max-width:1240px;margin:auto;display:grid;grid-template-columns:minmax(300px,1.3fr) minmax(240px,.8fr) 190px;gap:9px}.preview h3,.card h3{font-size:11px;margin:2px 0 8px}.preview h3 small{float:right;color:#64748b}.preview #stage{min-height:470px;background:#dbe5f2;border-radius:10px;display:grid;place-items:center;padding:12px;overflow:auto;position:relative}.preview canvas{max-width:100%;height:auto;box-shadow:0 15px 35px #0f172a25;background:#fff;touch-action:none}.progress{height:5px;background:#dbeafe;border-radius:99px;overflow:hidden;margin-top:8px}.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#2563eb,#7c3aed);transition:.2s}.tabs{display:flex;gap:4px;overflow:auto}.tabs button.active{background:#eff6ff;color:#2563eb}.panel{display:none;padding-top:8px}.panel.active{display:block}.panel label,#settings label{display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:9px;color:#475569;margin:8px 0}.panel input[type=range]{width:60%}.panel input[type=text],.panel input[type=number],.panel select,#settings select,#settings input[type=number]{width:55%;border:1px solid #dbe4f2;border-radius:7px;padding:7px;font-size:9px}.two{display:grid;grid-template-columns:1fr 1fr;gap:6px}.two label>*{max-width:100%}.full{width:100%;margin-top:6px}.meta{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.meta div{background:#f8fafc;border-radius:8px;padding:8px}.meta b{display:block;font-size:8px;color:#94a3b8}.meta span{font-size:9px;word-break:break-word}.share{display:flex;gap:6px;flex-wrap:wrap}.share button{padding:9px}.thumb{border:2px solid #e2e8f0;border-radius:7px;padding:3px;margin:4px 0;cursor:pointer}.thumb.active{border-color:#2563eb}.thumb canvas{display:block;width:100%}.thumb small{display:block;font-size:7px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.features article{background:#fff;border:1px solid #e2e8f0;border-radius:11px;padding:14px}.features b{font-size:11px}.features p,details p{font-size:9px;color:#64748b;line-height:1.6}.features article{font-size:18px}.content{}.card+.card{margin-top:10px}#features,#faq{padding:20px 28px}#features h2,#faq h2{font-size:24px}details{background:#fff;border:1px solid #e2e8f0;border-radius:9px;padding:10px;margin:6px 0}summary{font-size:10px;font-weight:900;cursor:pointer}footer{text-align:center;color:#94a3b8;font-size:9px;padding:35px}@media(max-width:1100px){.grid{grid-template-columns:1fr 1fr}.grid>#settings{grid-column:1/-1}.features{grid-template-columns:repeat(2,1fr)}.meta{grid-template-columns:repeat(2,1fr)}}@media(max-width:720px){.top{padding:0 12px}.top nav{display:none}.top>button{display:block;margin-left:auto;border:0;background:#eff6ff;border-radius:8px;padding:8px;font-size:18px}.layout{display:block}#side{position:fixed;left:-255px;top:64px;width:245px;z-index:30;transition:.25s;box-shadow:12px 0 30px #0f172a22}#side.open{left:0}.hero,.card,#features,#faq{margin-left:12px;margin-right:12px;padding-left:12px;padding-right:12px}.hero{padding-top:20px}.art{display:none}.grid{grid-template-columns:1fr}.grid>#settings{grid-column:auto}.toolbar{justify-content:flex-start;overflow:auto;flex-wrap:nowrap}.toolbar button{white-space:nowrap}.preview #stage{min-height:380px}.meta{grid-template-columns:1fr 1fr}.features{grid-template-columns:1fr}.brand{min-width:0}.brand span{font-size:13px}}@media print{body>*:not(.layout),#side,.top,.hero,.upload,.toolbar,#editor,#settings,#metadata,#share,#test,#features,#faq,footer{display:none!important}.layout{display:block}.preview{border:0}.preview #stage{background:#fff}.preview canvas{box-shadow:none}}
.export-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;padding-top:8px;border-top:1px solid #e5ebf5}.export-row button{border:1px solid #dbe4f2;background:#fff;border-radius:9px;padding:9px 11px;font-size:9px;font-weight:900;cursor:pointer}#stage{position:relative}#crop{position:absolute;border:2px dashed #2563eb;background:#2563eb20;display:none;z-index:4;pointer-events:none;box-shadow:0 0 0 9999px #0f172a33}

#canvas{cursor:crosshair}#crop{display:none;position:absolute;box-sizing:border-box;border:2px dashed #2563eb;background:rgba(37,99,235,.14);z-index:50;pointer-events:none;box-shadow:0 0 0 9999px rgba(15,23,42,.34);border-radius:2px}#canvas{touch-action:none}

.tool-guide{line-height:1.7}
.tool-guide h2{font-size:26px;margin-top:5px}
.tool-guide h3{font-size:17px;margin-top:22px;color:#172033}
.tool-guide p,.tool-guide li{font-size:13px;color:#475569}
.tool-guide ol,.tool-guide ul{padding-left:24px}
.tool-guide b{color:#172033}