:root{font-family:system-ui,-apple-system,"Microsoft YaHei",sans-serif;color:#243b36;background:#f4f5ef;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{max-width:1200px;margin:auto;padding:44px 28px}h1{font-size:clamp(30px,4vw,48px);letter-spacing:-2px;margin:14px 0}p{line-height:1.7;color:#65756c}.eyebrow{font-size:12px;letter-spacing:3px;color:#71856b}.hero{margin-bottom:32px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:24px;align-items:start}.stage,aside,.stage{min-width:0}.drop{border:2px dashed #c9d4c1;border-radius:14px;min-height:420px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:15px;background:#f8faf5;text-align:center;cursor:pointer;padding:22px}.drop.drag{background:#e6efda;border-color:#54724d}.drop span:last-of-type{font-size:12px;color:#788575}.plus{font-size:60px;font-weight:200;color:#64815a}#file{max-width:100%;font-size:12px}.preview{min-height:420px;display:flex;align-items:center;justify-content:center;background:repeating-conic-gradient(#e9ece5 0% 25%,#fff 0% 50%) 0/20px 20px;border-radius:0;overflow:hidden}.preview canvas{max-width:100%;max-height:560px;object-fit:contain}.stage-bottom,.panel-title,.result-title{display:flex;align-items:center;justify-content:space-between;gap:12px}.stage-bottom{margin-top:20px;font-size:12px;color:#6e7d70;flex-wrap:wrap}button,input,select{font:inherit}button{cursor:pointer;border:1px solid #d6dfd1;background:white;color:#3c5d43;border-radius:9px;padding:10px 14px}button:hover{filter:brightness(.95)}button:disabled{opacity:.5;cursor:default}.primary{background:#345a43;color:#fff;border-color:#345a43}.secondary{background:#eef3e8}.panel-title h2{font-size:20px}.panel-title button{font-size:12px;border:0;padding:0}fieldset{margin:0;border:0;padding:0;min-width:0}fieldset>button{width:100%;margin-top:12px}h3{font-size:12px;color:#8b9c80;letter-spacing:1px;margin:0 0 18px}h3 span{font-size:16px;color:#344c39;margin-left:10px}.control{padding:22px 0;border-top:1px solid #e9ede3}.control label{display:block;font-size:13px;margin:10px 0}.control output{float:right;color:#5b7954}.control p{font-size:12px;margin-bottom:0}.control input[type=text],select{width:100%;padding:10px;border:1px solid #dbe1d5;border-radius:8px;background:#fff;color:#314a37}.control input[type=range]{width:100%;accent-color:#54764a}.pair{display:grid;grid-template-columns:1fr 70px;gap:12px}input[type=color]{width:100%;height:40px;border:1px solid #dbe1d5;background:white;border-radius:8px}.check{display:flex!important;gap:8px;align-items:center}.guide{padding:24px 4px;max-width:800px}.guide h2{font-size:22px}footer{font-size:12px;color:#8a9684;padding:16px 0}#status{font-size:13px;margin-bottom:0}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}[hidden]{display:none!important}:focus-visible{outline:3px solid #c18e42;outline-offset:3px}html[data-embedded=true] .hero,html[data-embedded=true] .guide,html[data-embedded=true] footer{display:none}html[data-embedded=true] main{padding:16px}html[data-embedded=true] aside .panel-title h2{display:none}@media(max-width:760px){main{padding:24px 14px}.workspace{grid-template-columns:1fr}.stage,aside{padding:18px}.drop,.preview{min-height:260px}.result-title{align-items:flex-start;flex-direction:column}.result-title h2{font-size:20px}}

#photo-list{display:flex;flex-direction:column;gap:7px;margin-top:10px}.photo-card{display:flex;align-items:center;gap:8px;min-width:0;border:1px solid #dce1d4;border-radius:8px;padding:7px;background:#fff;cursor:grab}.photo-card img{width:64px;height:48px;object-fit:cover;border-radius:4px;flex-shrink:0}.photo-card>span:not(.drag-handle){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.photo-card button{padding:6px 9px;font-size:12px;flex-shrink:0}.drag-handle{font-size:25px;color:#819277;touch-action:none;cursor:grab;padding:8px 3px;user-select:none}.photo-card.dragging{opacity:.5}.photo-card.drop-target{border-color:#52784b;box-shadow:0 -3px 0 #52784b}.list-hint{font-size:12px;margin-bottom:0}@media(max-width:480px){.photo-card{gap:4px;padding:5px}.photo-card img{width:42px;height:36px}.photo-card button{padding:5px 7px}.drag-handle{padding:8px 0}}
.stage .drop{min-height:150px}.stage .plus{font-size:32px}

.photo-card .delete-photo{color:#b42332;border-color:#edb9bf;background:#fff2f3}.photo-card .delete-photo:hover{background:#ffe2e6}