:root{font-family:Arial,Helvetica,sans-serif;color:#202a2a;background:#f5f7f6;font-synthesis:none;text-rendering:optimizeLegibility;--ink:#202a2a;--muted:#798482;--line:#e4e9e6;--green:#315d52;--mint:#dcebe3;--serif:'Trebuchet MS',Arial,sans-serif}
*{box-sizing:border-box}body{margin:0;min-width:320px}.topbar{height:68px;border-bottom:1px solid #e8ece9;display:flex;align-items:center;justify-content:space-between;padding:0 max(32px,calc((100vw - 1200px)/2));background:#f9faf9}.brand{display:inline-flex;gap:10px;align-items:center;color:var(--ink);text-decoration:none;font:700 17px var(--serif);letter-spacing:.1px}.brand-mark{width:24px;height:24px;border:1.5px solid var(--green);border-radius:7px;display:grid;place-items:center;transform:rotate(-7deg)}.brand-mark i{width:10px;height:10px;background:#9bc8b1;border-radius:3px;display:block}.privacy-note{font-size:12px;color:#73807c;display:flex;align-items:center;gap:8px}.lock-icon{font-size:8px;border:1px solid #8ca398;border-radius:50%;width:15px;height:15px;display:grid;place-items:center;color:#658576}.app-shell{max-width:1200px;margin:0 auto;padding:44px 0 26px}.heading-row{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:27px}.eyebrow{font-size:10px;line-height:1;letter-spacing:1.2px;color:#788780;font-weight:700;margin:0 0 13px}.eyebrow span{display:inline-block;width:3px;height:3px;background:#a6b6ad;border-radius:50%;vertical-align:middle;margin:0 9px 2px}h1,h2,p{margin-top:0}h1{font:700 38px/1.12 var(--serif);letter-spacing:0;margin-bottom:8px;color:#1e2b28}.subheading{font-size:13px;color:#78837f;margin:0}.button{border:0;font:600 12px 'DM Sans',sans-serif;display:inline-flex;gap:9px;align-items:center;justify-content:center;cursor:pointer;transition:background .18s,color .18s,transform .18s}.button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #6b9d86;outline-offset:3px}.button:disabled{cursor:not-allowed;opacity:.45}.button-quiet{height:35px;background:transparent;color:#596762;padding:0 11px;border-radius:4px}.button-quiet:hover:not(:disabled){background:#e9efeb}.button-quiet span{font-size:17px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:25px;align-items:stretch}.editor-column{min-width:0}.stage-wrap{background:#e9eeeb;padding:15px;border-radius:5px}.stage{width:100%;aspect-ratio:1.44;position:relative;overflow:hidden;background:#d9e3de;border-radius:2px;user-select:none;touch-action:none}.empty-state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:4}.empty-state h2{font:600 16px var(--serif);margin:11px 0 5px}.empty-state p{font-size:12px;color:#6f7d77;margin:0 0 17px}.upload-art{width:66px;height:55px;position:relative;border:1px solid #aac0b3;border-radius:5px;background:rgba(248,251,249,.56);overflow:hidden}.art-sun{position:absolute;width:11px;height:11px;border-radius:50%;background:#c5d8cb;top:10px;right:13px}.art-hill{position:absolute;bottom:-8px;width:47px;height:36px;background:#c3d9cb;transform:rotate(42deg);border-radius:4px}.hill-one{left:3px}.hill-two{left:26px;bottom:-14px;background:#accbb9}.art-frame{position:absolute;inset:6px;border:1px solid rgba(92,132,111,.3);border-radius:3px}.button-primary{background:var(--green);color:white;border-radius:4px;padding:10px 15px}.button-primary:hover{background:#25483f}.button-primary span{font-size:17px;font-weight:400}.file-types{font-size:10px;color:#87928d;margin-top:11px}.file-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.stage>img{position:absolute;max-width:none;user-select:none;-webkit-user-drag:none;pointer-events:none}.crop-window{position:absolute;z-index:2;border:1px solid rgba(255,255,255,.95);box-shadow:0 0 0 999px rgba(19,30,27,.49);cursor:grab;touch-action:none}.crop-window:active{cursor:grabbing}.crop-grid{position:absolute;inset:0;background:linear-gradient(to right,transparent 33.15%,rgba(255,255,255,.35) 33.33%,transparent 33.55%,transparent 66.45%,rgba(255,255,255,.35) 66.66%,transparent 66.85%),linear-gradient(to bottom,transparent 33.15%,rgba(255,255,255,.35) 33.33%,transparent 33.55%,transparent 66.45%,rgba(255,255,255,.35) 66.66%,transparent 66.85%);pointer-events:none}.crop-corner{position:absolute;width:12px;height:12px;border-color:white;border-style:solid}.corner-tl{top:-2px;left:-2px;border-width:2px 0 0 2px}.corner-tr{top:-2px;right:-2px;border-width:2px 2px 0 0}.corner-bl{bottom:-2px;left:-2px;border-width:0 0 2px 2px}.corner-br{bottom:-2px;right:-2px;border-width:0 2px 2px 0}.stage-hint{position:absolute;z-index:3;bottom:12px;left:50%;transform:translateX(-50%);font-size:10px;color:#fff;background:rgba(25,36,32,.55);padding:6px 10px;border-radius:3px;white-space:nowrap;pointer-events:none}.stage-hint span{margin-right:5px}.editor-footer{display:flex;align-items:center;justify-content:space-between;padding:12px 1px}.replace-button{font-size:11px;padding-left:4px}.zoom-control{display:flex;align-items:center;gap:9px;margin-left:auto}.zoom-icon{font-size:16px;color:#687671;line-height:1;width:12px;text-align:center}.zoom-control input{width:116px;accent-color:#467461;height:3px}.zoom-control output{font-size:10px;color:#687671;width:33px;text-align:right}.rotate-button{font-size:16px!important;width:34px;padding:0;margin-left:15px}.settings-panel{background:#fff;border:1px solid var(--line);border-radius:5px;padding:22px 20px 16px;display:flex;flex-direction:column}.panel-section{padding-bottom:22px}.panel-section+.panel-section{border-top:1px solid #edf0ee;padding-top:20px}.section-title{display:flex;align-items:center;gap:9px;margin-bottom:18px}.step{font-size:9px;font-weight:700;color:#648272;background:#e7f0eb;width:23px;height:23px;border-radius:50%;display:grid;place-items:center}.section-title h2{font:600 14px var(--serif);margin:0}.field-label{display:block;font-size:9px;font-weight:700;letter-spacing:.8px;color:#86918c;margin-bottom:8px}.select-wrap{position:relative}.select-wrap select{width:100%;height:38px;appearance:none;background:#fff;border:1px solid #dfe5e1;border-radius:3px;padding:0 35px 0 11px;color:#2e3935;font:500 11px 'DM Sans',sans-serif;cursor:pointer}.select-chevron{position:absolute;right:12px;top:8px;font-size:18px;line-height:18px;color:#7d8a84;pointer-events:none}.format-summary{display:flex;align-items:center;gap:11px;margin-top:16px}.summary-icon{width:32px;height:32px;background:#eef4f0;border-radius:3px;display:grid;place-items:center;color:#56806a;font-size:18px}.format-summary strong,.format-summary span{display:block}.format-summary strong{font-size:11px;font-weight:600;margin-bottom:4px}.format-summary div span{font-size:10px;color:#83908a}.format-summary i{font-style:normal;color:#b4beb8;margin:0 3px}.custom-fields{display:flex;align-items:flex-end;gap:9px;margin-top:13px}.custom-fields label{flex:1;min-width:0}.custom-fields label span{display:block;font-size:9px;color:#7c8983;margin-bottom:5px}.custom-fields input{width:100%;height:34px;border:1px solid #dfe5e1;border-radius:3px;padding:0 8px;font:11px 'DM Sans',sans-serif;color:#2e3935}.dimension-x{font-size:12px;color:#8a9690;padding-bottom:9px}.output-section{padding-bottom:16px}.output-size{display:flex;justify-content:space-between;align-items:center;margin-top:13px;font-size:10px;color:#78847e}.output-size strong{font-size:10px;color:#3b4943;font-weight:600}.button-export{width:100%;height:42px;justify-content:space-between;padding:0 13px;background:#315d52;color:#fff;border-radius:3px;margin-top:auto}.button-export:hover:not(:disabled){background:#25483f}.download-icon{font-size:18px;width:24px;height:24px;border:1px solid rgba(255,255,255,.3);border-radius:3px;display:grid;place-items:center}.panel-footnote{font-size:9px;color:#84918b;text-align:center;margin:11px 0 0}.panel-footnote span{color:#5c9275;margin-right:4px}.page-footer{border-top:1px solid #e7ece8;margin-top:24px;padding-top:14px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.5px;color:#98a29d}.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,12px);opacity:0;pointer-events:none;background:#263b34;color:#fff;padding:10px 15px;border-radius:4px;font-size:12px;transition:opacity .2s,transform .2s;z-index:10}.toast.visible{opacity:1;transform:translate(-50%,0)}[hidden]{display:none!important}
@media(max-width:1280px){.app-shell{margin:0 32px}.topbar{padding-left:32px;padding-right:32px}}
@media(max-width:760px){.topbar{height:58px;padding:0 18px}.privacy-note{font-size:10px}.app-shell{margin:0;padding:29px 17px 18px}.heading-row{margin-bottom:20px}h1{font-size:32px}.subheading{font-size:11px;max-width:260px;line-height:1.5}.reset-button{font-size:10px;padding:0 7px}.workspace{grid-template-columns:1fr;gap:5px}.stage-wrap{padding:8px}.stage{aspect-ratio:1.15}.empty-state h2{font-size:14px}.empty-state p{font-size:10px;text-align:center}.upload-art{width:55px;height:47px}.file-types{font-size:9px}.settings-panel{padding:18px 16px 14px}.panel-section{padding-bottom:18px}.panel-section+.panel-section{padding-top:17px}.section-title{margin-bottom:14px}.button-export{margin-top:5px}.page-footer{margin-top:20px;font-size:8px}.editor-footer{padding:9px 1px}.zoom-control{gap:6px}.zoom-control input{width:95px}.rotate-button{margin-left:7px}}
@media(max-width:400px){.privacy-note{font-size:0;gap:0}.privacy-note .lock-icon{font-size:8px}.eyebrow{font-size:9px}.stage{aspect-ratio:1.04}.page-footer span:last-child{font-size:8px}.zoom-control input{width:78px}}
