*{box-sizing:border-box}body{margin:0;background:#f5f4f0;color:#243429;font:15px/1.6 system-ui,"Microsoft YaHei",sans-serif}header{max-width:1200px;margin:auto;padding:24px 30px;display:flex;justify-content:space-between;border-bottom:1px solid #dddfd7}header a{font-weight:800;color:inherit;text-decoration:none}header span,.hint{color:#788175;font-size:12px}main{max-width:1200px;margin:auto;padding:30px}.intro{margin:10px 0 34px}.eyebrow{font-size:11px;letter-spacing:3px;color:#66846b;font-weight:700}h1{font-size:42px;letter-spacing:-2px;margin:8px 0}h1 em{font-style:normal;color:#6c8c58}.intro p{color:#788175;margin:0}.studio{display:grid;grid-template-columns:350px 1fr;gap:24px;align-items:start}.panel,.preview{border:1px solid #e0e3d9;border-radius:22px;background:#fff;padding:24px}.step{font-size:11px;letter-spacing:1.5px;color:#7a856f;font-weight:800;margin:0 0 12px}.step:not(:first-child){margin-top:24px}label{display:block;font-size:12px;font-weight:600;margin-bottom:10px}input,textarea,select{width:100%;border:1px solid #dfe3d8;border-radius:9px;padding:9px;background:#fafbf8;font:inherit;color:inherit;margin-top:5px}textarea{resize:vertical;min-height:80px}input[type=color]{padding:3px;height:38px}input[type=range]{accent-color:#526d3e;padding:0}.grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.upload{background:#edf2e7;border:1px dashed #a8ba96;padding:15px;text-align:center;border-radius:12px;cursor:pointer}.upload input{font-size:11px;background:none;border:0}button{width:100%;padding:12px;border:0;border-radius:10px;background:#2c4731;color:#fff;font:600 14px system-ui;cursor:pointer;margin-top:8px}button:disabled{opacity:.4;cursor:not-allowed}.secondary{background:#eef1e9;color:#52644b}details{margin:12px 0}summary{cursor:pointer;font-size:13px;margin-bottom:12px}.preview{position:sticky;top:20px}.preview-head{display:flex;align-items:center;justify-content:space-between;font-weight:700}.preview-head button{width:auto;margin:0;font-size:12px}#stage{height:480px;display:flex;align-items:center;justify-content:center;margin-top:20px;border-radius:14px;background-color:#f2f2ee;background-image:linear-gradient(45deg,#e7e9e1 25%,transparent 25%),linear-gradient(-45deg,#e7e9e1 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e7e9e1 75%),linear-gradient(-45deg,transparent 75%,#e7e9e1 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}#empty{text-align:center;color:#7e8b73}#empty h2{font-size:20px}.empty-icon{font-size:72px;color:#78905e}canvas{max-width:100%;max-height:100%;object-fit:contain;touch-action:none}#status{font-size:13px;overflow-wrap:anywhere}footer{text-align:center;color:#8a9381;font-size:12px;padding:40px}#widthLabel{float:right;font-weight:400}@media(max-width:760px){main{padding:20px}header{padding:18px 20px}h1{font-size:31px}.studio{display:flex;flex-direction:column}.panel,.preview{width:100%;padding:18px}.preview{position:static;order:-1}#stage{height:280px}.intro{margin-bottom:22px}}
/* Editing zoom is independent of the exported bitmap dimensions. */
.preview-head{gap:10px;flex-wrap:wrap}.preview-head select{width:auto;margin:0;font-size:12px}.preview-head>span{margin-right:auto}#stage{overflow:auto}#canvas{flex-shrink:0;max-width:none;max-height:none}#previewInfo{font-size:13px;color:#52644b}