:root{color-scheme:light;--ink:#181a20;--muted:#737784;--line:#e4e6ea;--accent:#d9f99d;--paper:#f5f6f8;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none;scroll-behavior:smooth}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #779d2e;outline-offset:4px}button{border:0}button:not(:disabled),a{transition:background .16s,color .16s,transform .16s}button:active:not(:disabled){transform:translateY(1px)}[hidden]{display:none!important}.wrap{max-width:1280px;margin:auto;padding-left:48px;padding-right:48px}.header{height:104px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;gap:12px;align-items:center;font-size:25px;font-weight:760;letter-spacing:-1px}.brand-mark{font-size:34px;line-height:1;color:var(--ink)}.brand-lab{font-size:13px;letter-spacing:1.8px;font-weight:550;margin-left:4px}.header nav{display:flex;gap:32px;font-size:14px;color:#777b85}.header nav a:hover,.header nav .active{color:var(--ink)}.header nav .active{font-weight:600}.intro{display:flex;align-items:center;justify-content:space-between;padding:46px 0 36px;gap:24px}.eyebrow{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;letter-spacing:1.4px;color:var(--muted);margin:0 0 19px}.pill{display:inline-block;color:#384125;background:#e8efdE;padding:5px 9px;border-radius:4px;margin-right:10px;letter-spacing:.5px;font-family:inherit}.intro h1{font-size:42px;line-height:1.4;letter-spacing:-1.5px;margin:0 0 10px;font-weight:700}.intro h1 span{margin-left:8px}.intro-copy{margin:0;font-size:15px;line-height:1.7;color:var(--muted)}.local-note{display:flex;align-items:center;gap:12px;padding-left:26px;border-left:1px solid #dadde3}.local-note strong{display:block;font-size:14px;font-weight:550;margin-bottom:7px}.local-note span{font-size:12px;color:var(--muted)}.workspace{display:grid;grid-template-columns:290px minmax(0,1fr);background:#fff;border:1px solid #dde0e6;border-radius:16px;box-shadow:0 5px 22px #181a2004;overflow:hidden;scroll-margin-top:20px}.controls{padding:26px 24px;border-right:1px solid var(--line)}.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.section-title h2,.preview-toolbar h2{font-size:14px;font-weight:650;margin:0}.count{font-size:12px;color:var(--muted);background:#f3f4f6;padding:3px 7px;border-radius:5px}.add-button{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--ink);color:#fff;width:100%;height:44px;border-radius:8px;font-size:14px;font-weight:500}.add-button:hover{background:#34383f}.add-button span{font-size:22px;font-weight:300}.hint{font-size:11px;line-height:1.7;color:var(--muted);text-align:center;margin:9px -8px 14px}.image-list{display:grid;gap:8px;max-height:225px;overflow-y:auto}.image-item{display:flex;align-items:center;gap:8px;padding:7px;background:#f7f8fa;border:1px solid #e9eaee;border-radius:8px}.image-item img{height:40px;width:36px;object-fit:cover;background:#fff;border-radius:3px;border:1px solid var(--line)}.image-info{min-width:0;flex:1}.image-info strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:500}.image-info span{display:block;font-size:11px;color:var(--muted);margin-top:4px}.image-actions{display:flex;gap:1px}.image-actions button{width:23px;height:28px;background:transparent;color:#737784;border-radius:4px}.image-actions button:hover{background:#e8eaf0;color:#181a20}.list-footer{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#8c909b;margin-top:12px;min-height:20px}.text-button{padding:3px;background:transparent;color:var(--muted);font-size:12px}.settings-title{border-top:1px solid var(--line);padding-top:24px;margin-top:20px}.small-icon{color:#8b919b;font-size:18px}.direction{margin:0 0 22px;border:0;padding:4px;background:#f1f2f5;border-radius:8px;display:flex;gap:4px}.direction label{flex:1;position:relative;text-align:center}.direction input{position:absolute;opacity:0;width:100%;height:100%;inset:0;margin:0;cursor:pointer}.direction span{display:block;padding:9px 4px;font-size:13px;color:#777b85;border-radius:6px}.direction input:checked+span{background:white;color:#181a20;box-shadow:0 1px 4px #181a2010}.direction input:focus-visible+span{outline:2px solid #779d2e}.field-label{font-size:13px;display:flex;justify-content:space-between;align-items:center;margin-top:21px;margin-bottom:11px}.field-label>span:last-child:not(:first-child),.field-label output{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:#7e8290}select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:7px;color:var(--ink);background:white;font-size:13px}input[type=range]{width:100%;height:5px;margin:5px 0;accent-color:#202329;cursor:pointer}input[type=range]:focus-visible{outline-offset:7px}.swatches{display:flex;gap:12px;align-items:center}.swatch,.custom-color{width:30px;height:30px;border-radius:50%;border:1px solid #dde0e5;position:relative}.swatch{background:var(--swatch)}.swatch.selected:after{content:"";position:absolute;inset:-4px;border:1.5px solid #6b727f;border-radius:50%}.custom-color{display:flex;align-items:center;justify-content:center;border:1px dashed #b5bac4;overflow:hidden;font-size:19px;color:#737784;cursor:pointer}.custom-color input{position:absolute;inset:-2px;width:34px;height:34px;opacity:0;cursor:pointer}.download{width:100%;height:46px;display:flex;align-items:center;justify-content:center;gap:9px;margin-top:29px;border-radius:8px;background:var(--accent);color:#293319;font-size:14px;font-weight:650}.download:hover:not(:disabled){background:#caf17e}.download:disabled{background:#edf1e5;color:#89917a;opacity:1}.export-note{text-align:center;color:#9296a0;font-size:11px;margin:10px 0 0}.preview-panel{display:flex;flex-direction:column;min-width:0}.preview-toolbar{height:62px;flex-shrink:0;padding:0 25px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.preview-heading{display:flex;align-items:center;gap:9px}.preview-dot{width:7px;height:7px;background:#9ca3af;border-radius:50%}#dimensions{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#8b8f9a;font-size:12px}.stage{position:relative;background-color:#f5f6f8;background-image:radial-gradient(#d9dce2 .8px,transparent .8px);background-size:18px 18px;min-height:594px;flex:1;display:flex;align-items:center;justify-content:center;padding:30px;overflow:auto}.empty{text-align:center;padding:40px 10px}.empty h3{font-size:21px;letter-spacing:.2px;margin:30px 0 10px;font-weight:550}.empty p{font-size:14px;color:#8b909b;margin:0 0 25px}.empty-symbol{display:flex;justify-content:center;align-items:center;height:105px;margin-bottom:32px}.empty-symbol>div{width:74px;height:92px;border:1px solid #d7dbe2;background:white;box-shadow:0 4px 8px #00000004;padding:14px 12px;border-radius:7px;transform:rotate(-12deg)}.empty-symbol>div:nth-child(2){background:#eaf4d9;height:104px;transform:translateY(-6px);z-index:1;margin:0 -8px;border-color:#d3dfc1}.empty-symbol>div:nth-child(3){transform:rotate(12deg)}.empty-symbol span{display:block;text-align:left;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:#8b9380;margin-bottom:18px}.empty-symbol i{display:block;height:4px;background:#e7e9ed;border-radius:2px;margin-top:6px}.empty-symbol i:last-child{width:65%}.empty-symbol>div:nth-child(2) i{background:#d4e0c2}.choose{font-size:13px;font-weight:550;padding:11px 22px;background:white;border:1px solid #d7dce3;border-radius:7px;box-shadow:0 1px 3px #00000003}.choose:hover{background:#fafafa}.demo{display:block;margin:16px auto 0;background:transparent;color:#868c97;font-size:12px;text-decoration:underline;text-decoration-color:#c5c9d0;text-underline-offset:4px}.demo:hover{color:#272b31}.preview-footer{min-height:45px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 22px;border-top:1px solid var(--line);color:#979ca6;font-size:11px}.shortcut{white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.canvas-container{width:100%;text-align:center;line-height:0}.canvas-container canvas{max-width:100%;max-height:570px;width:auto;height:auto;object-fit:contain;box-shadow:0 6px 28px #181a2020}.drop-overlay{display:none;position:absolute;inset:12px;border:2px dashed #84a348;border-radius:10px;background:#edf6e0f5;align-items:center;justify-content:center;color:#48671e;font-size:20px;z-index:3;pointer-events:none}.drag-over .drop-overlay{display:flex}.status{font-size:13px;min-height:22px;margin:12px 0;color:#596348;line-height:1.6}.status.error{color:#bd3b3b}.about{padding:60px 0 68px;display:grid;grid-template-columns:1fr 1fr;gap:70px;border-bottom:1px solid var(--line)}.about h2{font-size:27px;line-height:1.65;font-weight:550;letter-spacing:-.5px;margin:0}.about h2 span{color:#9a9da6}.about .eyebrow{font-size:11px;letter-spacing:1px;margin-bottom:15px}.about-copy{padding-top:27px;font-size:14px;color:var(--muted);line-height:1.95}.about-copy p{margin:0 0 12px}.about-copy a{display:inline-block;font-size:13px;color:#333842;margin-top:8px}.footer{display:flex;align-items:center;justify-content:space-between;padding-top:25px;padding-bottom:30px;font-size:11px;color:#9a9ea8}.footer span:nth-child(2){font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip{position:fixed;top:-100px;left:10px;padding:12px;background:var(--accent);z-index:9}.skip:focus{top:10px}
@media(min-width:1500px){.wrap{max-width:1380px}.intro{padding-top:55px;padding-bottom:45px}.stage{min-height:650px}.canvas-container canvas{max-height:625px}}
@media(max-width:1000px){.wrap{padding-left:28px;padding-right:28px}.intro h1{font-size:34px}.local-note{padding-left:18px}.local-note strong{font-size:12px}.local-note span{font-size:11px}.workspace{grid-template-columns:260px minmax(0,1fr)}.controls{padding:24px 20px}.stage{padding:20px}.preview-footer .shortcut{display:none}.about{gap:30px}}
@media(max-width:720px){.wrap{padding-left:20px;padding-right:20px}.header{height:80px}.brand{font-size:22px;gap:8px}.brand-mark{font-size:28px}.brand-lab{font-size:11px}.header nav{gap:20px;font-size:12px}.header nav a:nth-child(2){display:none}.intro{display:block;padding:32px 0 25px}.intro h1{font-size:31px;letter-spacing:-1px}.intro h1 span{margin-left:0}.intro-copy{font-size:13px;line-height:1.8}.eyebrow{font-size:10px;letter-spacing:1px;margin-bottom:15px}.local-note{margin-top:22px;border:0;padding:0;gap:9px}.local-note svg{width:17px;height:17px}.local-note div{display:flex;gap:9px;align-items:center}.local-note strong{margin:0;font-size:11px}.local-note span{font-size:10px}.workspace{display:flex;flex-direction:column;border-radius:12px}.controls{border:0;padding:22px}.preview-panel{border-top:1px solid var(--line)}.stage{min-height:360px;padding:20px}.preview-toolbar{padding:0 20px;height:52px}.empty{padding:30px 0}.empty h3{font-size:18px;margin-top:20px}.empty p{font-size:12px}.empty-symbol{transform:scale(.85);margin-bottom:15px}.image-list{max-height:220px}.hint{font-size:12px}.list-footer{font-size:12px}.field-label{font-size:14px}.direction span{font-size:14px}.download{font-size:15px}.about{padding:35px 0;grid-template-columns:1fr;gap:0}.about h2{font-size:24px}.about-copy{padding-top:22px}.footer{font-size:10px;gap:12px}.footer span:nth-child(2){display:none}.canvas-container canvas{max-height:500px}.preview-footer{padding:12px 20px}.image-actions button{min-width:32px;height:32px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.render-error{font-size:14px;line-height:1.8;color:#9d3d3d;padding:30px;max-width:400px;margin:auto}
@media(max-width:720px){.preview-panel{order:-1;border-top:0;border-bottom:1px solid var(--line)}.preview-toolbar{background:#fff}.stage{min-height:330px}.empty-symbol{margin-bottom:6px}.empty{padding:18px 0}.canvas-container canvas{max-height:390px}}