:root{--ink:#17231e;--muted:#6d7872;--paper:#f4f1e9;--card:#fff;--acid:#c7f23b;--line:#d9ddd8;--danger:#e11d48}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100% - 1180px)/2));border-bottom:1px solid #d8d5cd;background:rgba(244,241,233,.92)}.brand{color:var(--ink);font-weight:900;font-size:21px;text-decoration:none;letter-spacing:-1px}.brand span{color:#729300}.privacy{font-size:12px;color:var(--muted)}.privacy:before{content:'●';color:#73a500;margin-right:8px}.shell{max-width:1180px;margin:auto;padding:55px 24px}.intro{max-width:760px;margin-bottom:34px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:800;color:#6c762f}.intro h1{font-size:clamp(42px,6vw,72px);line-height:.94;letter-spacing:-4px;margin:12px 0 22px}.intro h1 em{font-family:Georgia,serif;font-weight:400;color:#779d00}.intro>p:last-child{max-width:590px;color:var(--muted);font-size:17px;line-height:1.6}.workspace{display:grid;grid-template-columns:340px 1fr;gap:18px}.panel,.preview-card{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 28px rgba(34,43,37,.05)}.controls{padding:24px}.step{display:flex;gap:10px;align-items:center;font-size:13px;font-weight:800;margin:2px 0 14px}.step b{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:white;font-size:11px}.dropzone{height:145px;border:1.5px dashed #aeb5af;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;background:#fafbf8;margin-bottom:28px;transition:.2s}.dropzone:hover,.dropzone.drag{border-color:#769600;background:#f8ffe4}.upload-icon{font-size:28px;color:#759300}.dropzone strong{font-size:13px;margin:8px 0 5px}.dropzone small{font-size:10px;color:var(--muted)}.field{display:block;margin:16px 0}.field>span{display:flex;justify-content:space-between;font-size:12px;font-weight:700;margin-bottom:8px}.field output{color:#789900}.input-unit{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}.input-unit input{min-width:0;flex:1;border:0;padding:10px 12px;font-weight:800;outline:none}.input-unit i{padding:10px 12px;background:#f2f4ef;font-size:12px;font-style:normal;color:var(--muted)}input[type=range]{width:100%;accent-color:#769800}.color-field{display:flex;align-items:center;justify-content:space-between}.color-field>span{margin:0}.color-field input{width:40px;height:28px;padding:1px;border:1px solid var(--line);border-radius:6px;background:white}.check{font-size:12px;display:flex;gap:8px;align-items:center;margin:15px 0}.check input{accent-color:#739500}.primary{width:100%;padding:13px;border:0;border-radius:9px;background:var(--acid);font-weight:900;color:var(--ink);cursor:pointer}.primary:disabled{background:#e5e8df;color:#9ba29e;cursor:not-allowed}.preview-card{padding:18px;display:flex;flex-direction:column;min-width:0}.preview-head{display:flex;align-items:center;justify-content:space-between;padding:3px 4px 16px}.preview-head div:first-child{display:flex;flex-direction:column;gap:5px}.preview-head span{font-size:9px;letter-spacing:1.5px;color:var(--muted);font-weight:800}.preview-head strong{font-size:13px;max-width:400px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dimensions{font:700 12px monospace;color:#637068}.stage{min-height:475px;display:grid;place-items:center;background-color:#e9ebe6;background-image:linear-gradient(45deg,#dfe2dc 25%,transparent 25%),linear-gradient(-45deg,#dfe2dc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#dfe2dc 75%),linear-gradient(-45deg,transparent 75%,#dfe2dc 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;border-radius:11px;overflow:auto;padding:25px}.empty-state{text-align:center;color:#89938d}.empty-state span{font-size:55px;font-weight:100}.empty-state p{font-size:12px}.stage:not(.empty) .empty-state{display:none}#svgPreview svg{display:block;max-width:100%;max-height:425px;filter:drop-shadow(0 4px 7px rgba(0,0,0,.13))}.download-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.download-row button{border:1px solid var(--line);background:white;padding:11px;border-radius:9px;text-align:left;font-weight:800;cursor:pointer}.download-row button:last-child{background:var(--ink);color:white}.download-row button span{display:block;font-size:9px;font-weight:400;opacity:.65;margin-top:3px}.download-row button:disabled{opacity:.35;cursor:not-allowed}.tips{display:flex;gap:28px;margin-top:22px;padding:20px 23px;border:1px solid #cfd4c1;border-radius:12px;background:#eff5df}.tips b{font-size:10px;letter-spacing:1.2px;white-space:nowrap;color:#6e8c15}.tips p{font-size:12px;line-height:1.6;margin:0;color:#5e695f}footer{text-align:center;border-top:1px solid #ddd9d0;padding:25px;color:#858d88;font-size:11px}@media(max-width:800px){.shell{padding-top:35px}.workspace{grid-template-columns:1fr}.intro h1{letter-spacing:-2px}.stage{min-height:360px}.privacy{display:none}.tips{display:block}.tips b{display:block;margin-bottom:8px}}@media(max-width:480px){.download-row{grid-template-columns:1fr}.shell{padding-left:14px;padding-right:14px}.intro h1{font-size:44px}}