@charset "UTF-8";
:root{--red:#d83c2d;--red-dark:#b82b22;--ink:#302d29;--muted:#8e8b82;--cream:#f7f5ee;--line:#eeeae2;--font:"Microsoft YaHei","PingFang SC","Noto Sans CJK SC",sans-serif;--round:"YouYuan","幼圆","STYuanti",var(--font)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:22px}body{margin:0;color:var(--ink);font-family:var(--font);font-size:14px;background:var(--cream);-webkit-font-smoothing:antialiased}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit}button:disabled{cursor:wait;opacity:.65}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #e89369;outline-offset:5px}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}button{border:0;background:none}h1,h2,h3,p{margin:0}.icon-library{position:absolute;width:0;height:0;overflow:hidden}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.site-header{height:91px;max-width:1160px;margin:auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e8e4da;gap:24px}.brand{display:flex;gap:11px;align-items:center;font-size:21px;font-weight:800;letter-spacing:-.7px}.brand-dot{color:var(--red);margin-left:2px}.brand-mark{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--red);color:#ffe5a0;font-size:28px;transform:rotate(-7deg);padding:1px 5px 0 0}.brand-mark span{position:absolute;font-size:15px;right:2px;top:1px}.site-header nav{display:flex;gap:32px;align-items:center;margin-left:65px;font-size:13px}.nav-active{font-weight:700;position:relative}.nav-active:after{content:"";position:absolute;bottom:-13px;left:calc(50% - 3px);height:5px;width:5px;background:var(--red);border-radius:50%}.nav-help{color:#858076;padding:8px 0;font-size:13px}.nav-help span{font-size:17px;margin-left:4px}.nav-help:hover{color:var(--red)}.date-tag{display:flex;align-items:center;gap:8px;font-size:12px;color:#777367;border:1px solid #e5dfd0;border-radius:30px;padding:8px 13px}.status-dot{display:inline-block;flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--red)}
main{max-width:1060px;margin:0 auto}.hero{display:flex;justify-content:space-between;align-items:center;padding:55px 43px 50px 26px;min-height:364px}.eyebrow{display:inline-flex;gap:8px;align-items:center;color:#a77347;font-size:12px;letter-spacing:1.1px;margin-bottom:19px}.eyebrow>span{font-size:19px;color:#c2874b}h1{font-size:51px;font-weight:900;line-height:1.32;letter-spacing:1px}.red-word,.red-period{color:var(--red)}.red-word{position:relative;white-space:nowrap}.red-word svg{position:absolute;bottom:-8px;left:0;width:100%;height:12px;stroke:#e9b091;stroke-width:3;fill:none;z-index:-1}.hero-copy>p{color:#7e7a72;font-size:13px;line-height:1.9;margin-top:22px;letter-spacing:.4px}.mobile-break{display:none}.hero-features{display:flex;align-items:center;gap:20px;margin-top:15px;color:#8e8b81;font-size:11px}.hero-features>span{display:flex;align-items:center;gap:4px}.hero-features svg{width:13px;height:13px;color:#8b966d;stroke-width:2}
.hero-art{position:relative;width:400px;height:265px;margin-top:-3px}.postcard{position:absolute;background:#fffefa;box-shadow:0 9px 22px #60493013;border:1px solid #e9e1d3;padding:10px 10px 0;width:177px;height:215px}.postcard canvas{width:155px;height:155px;display:block;border-radius:3px}.postcard>span:not(.tape){display:block;text-align:center;font-size:8px;letter-spacing:1.1px;color:#948574;margin-top:13px}.postcard-back{left:27px;top:17px;transform:rotate(-13deg)}.postcard-front{left:180px;top:34px;transform:rotate(10deg);z-index:1}.postcard-front>span:not(.tape){font-family:var(--round);letter-spacing:1px;font-size:10px;color:#8b6450}.tiny-heart{color:var(--red)}.tape{position:absolute;top:-11px;left:52px;width:66px;height:26px;background:#ebd7afad;transform:rotate(-6deg);clip-path:polygon(0 4%,100% 0,97% 15%,100% 30%,97% 50%,100% 68%,98% 87%,100% 100%,0 97%,3% 80%,0 65%,3% 43%,0 25%)}.art-spark{position:absolute;color:#d89742}.spark-one{font-size:42px;right:8px;top:-8px;transform:rotate(15deg)}.spark-two{font-size:22px;left:2px;top:165px}.art-caption{position:absolute;bottom:-9px;left:15px;transform:rotate(-6deg);font-family:var(--round);font-size:13px;color:#8d816e;letter-spacing:1px}.art-caption svg{width:42px;height:37px;position:absolute;right:-50px;top:-12px;stroke:#ab987a;stroke-width:1.6}.round-stamp{position:absolute;right:-28px;bottom:-18px;z-index:2;width:86px;height:86px;border:1px dashed #b65444;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;color:#b65444;font-size:9px;background:#f7f2e9e8;transform:rotate(15deg);outline:1px solid #c780706e;outline-offset:-5px}.round-stamp span{font-size:23px;font-family:Georgia,serif;letter-spacing:2px;font-weight:700}.round-stamp{font-size:7px;letter-spacing:1px}
.workshop{border:1px solid #e5e0d5;border-radius:22px;background:#fffefa;box-shadow:0 8px 30px #7a664809;overflow:hidden;scroll-margin-top:18px}.workshop-heading{height:65px;border-bottom:1px solid var(--line);padding:0 30px;display:flex;align-items:center;justify-content:space-between}.workshop-heading>div{display:flex;align-items:center;gap:10px}.small-star{color:var(--red);font-size:22px}.workshop-heading h2{font-size:15px;letter-spacing:.5px;font-weight:700}.heading-note{font-size:11px;color:#a19a8f}.editor-layout{display:grid;grid-template-columns:43% 57%}.controls-panel{padding:30px 31px 20px;border-right:1px solid var(--line);background:#fffefb}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:16px}.section-heading h3{font-size:13px;display:flex;align-items:center;gap:9px;font-weight:700}.step-number{font-family:Georgia,serif;font-size:13px;font-weight:500;color:#ac9d88;background:#f4f0e8;width:24px;height:24px;border-radius:50%;display:grid;place-items:center}.text-button{color:var(--red);font-size:11px;padding:5px 0}.text-button:hover{text-decoration:underline;text-underline-offset:4px}.upload-zone{width:100%;min-height:157px;background:#fcfaf5;border:1.5px dashed #ddd5c7;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:background .2s,border-color .2s;position:relative;padding:18px}.upload-zone:hover,.upload-zone.is-dragging{background:#fff0e9;border-color:#d65d46}.upload-icon{width:34px;height:34px;background:white;border:1px solid #eee8dd;border-radius:10px;display:grid;place-items:center;color:#bd9a73;margin-bottom:9px;box-shadow:0 2px 4px #795b3b05}.upload-icon svg{width:18px;height:18px}.upload-title{font-size:12px;font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.upload-hint{font-size:10px;color:#9d978d;margin-top:5px}.file-formats{font-size:9px;color:#b3aa9b;margin-top:10px;letter-spacing:.4px}.styles-section{margin-top:26px}.mini-note{color:#b1a89a;font-size:10px}.style-tabs{display:flex;background:#f4f1eb;border-radius:9px;padding:4px;gap:4px;margin-bottom:17px}.style-tabs button{height:36px;flex:1;border-radius:6px;display:flex;align-items:center;justify-content:center;gap:7px;color:#959082;font-size:12px;transition:background .2s,color .2s}.style-tabs button[aria-selected=true]{background:#fffefa;color:var(--red);font-weight:700;box-shadow:0 2px 5px #514b4210}.style-tabs svg{width:15px;height:15px}.style-tabs button>span{font-size:21px;line-height:1}.style-options{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.style-option{min-width:0;padding:0;font-size:10px;color:#8e877c}.thumbnail-wrap{position:relative;display:block;padding:4px;border:1.5px solid transparent;border-radius:12px;background:#f6f1e7;transition:border-color .2s,transform .2s}.style-option:hover .thumbnail-wrap{transform:translateY(-2px)}.style-option.is-selected .thumbnail-wrap{border-color:var(--red);background:#fff2e9}.thumbnail-wrap canvas{width:100%;aspect-ratio:1;display:block;border-radius:7px}.variant-label{display:block;margin-top:8px}.style-option.is-selected .variant-label{color:var(--red);font-weight:700}.selected-badge{display:none;position:absolute;bottom:0;right:0;align-items:center;justify-content:center;width:20px;height:20px;background:var(--red);border-radius:7px 0 10px 0;color:#fff}.selected-badge svg{width:13px;height:13px;stroke-width:2.5}.is-selected .selected-badge{display:flex}.range-heading{display:flex;justify-content:space-between;font-size:11px;margin-top:19px;margin-bottom:9px}.range-heading output{font-family:Arial,sans-serif;font-size:11px;color:var(--red);font-weight:600}.range-input{--fill:68.75%;appearance:none;-webkit-appearance:none;width:100%;height:4px;border-radius:8px;display:block;margin:8px 0;background:linear-gradient(to right,var(--red) 0 var(--fill),#e8e3d9 var(--fill) 100%);cursor:pointer;touch-action:pan-y}.range-input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;background:var(--red);width:12px;height:12px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #d83c2d55}.range-input::-moz-range-thumb{background:var(--red);width:9px;height:9px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #d83c2d55}.range-input:focus-visible{outline:2px solid #e89369;outline-offset:7px}.range-endpoints{display:flex;justify-content:space-between;font-size:9px;color:#b0a799;margin-top:11px}.text-section{margin-top:25px;padding-top:21px;border-top:1px solid var(--line)}.caption-option{display:flex;align-items:center;justify-content:space-between}.caption-option>div{display:flex;align-items:center;gap:13px}.caption-sample{font-family:var(--round);font-size:22px;font-weight:900;letter-spacing:1px;color:#d7422f;transform:rotate(-3deg);text-shadow:1px 1px 0 #f2c99e}.caption-description{font-size:10px;color:#a29787}.toggle{width:33px;height:19px;border-radius:20px;background:#ddd6cb;padding:3px;transition:background .2s;flex-shrink:0}.toggle>span{display:block;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0001;transition:transform .2s}.toggle[aria-checked=true]{background:var(--red)}.toggle[aria-checked=true]>span{transform:translateX(14px)}.privacy-note{font-size:9px;color:#b0a99d;display:flex;align-items:center;justify-content:center;gap:5px;margin-top:25px;line-height:1.5}.privacy-note svg{width:12px;height:12px}
.preview-panel{padding:29px 45px 23px;background-color:#faf8f3;background-image:radial-gradient(#c6bda42e .7px,transparent .7px);background-size:9px 9px;display:flex;flex-direction:column;align-items:center}.preview-heading{width:100%;display:flex;align-items:center;justify-content:space-between}.preview-heading h3{font-size:12px;font-weight:500;color:#8e8273}.preview-heading>span{font-size:10px;display:flex;align-items:center;gap:6px;color:#9a948a}.preview-heading .status-dot{background:#8b9a6f;width:5px;height:5px}.canvas-stage{width:100%;text-align:center;margin-top:25px}.stage-label{font-family:Arial,sans-serif;font-size:8px;letter-spacing:2.3px;color:#b7a792;display:block;margin-bottom:18px}.stage-label>span{color:#ca8e76}.canvas-wrap{position:relative;width:min(100%,336px);margin:auto;border-radius:23px;box-shadow:0 13px 35px #78624017;background:#eddabc;isolation:isolate}.canvas-wrap canvas{width:100%;height:auto;aspect-ratio:1;display:block;border-radius:23px;cursor:grab;touch-action:none}.canvas-wrap canvas.is-panning{cursor:grabbing}.canvas-corner{position:absolute;width:17px;height:17px;border:1px solid #c8bca5;pointer-events:none}.corner-tl{left:-9px;top:-9px;border-right:0;border-bottom:0;border-radius:4px 0 0 0}.corner-tr{right:-9px;top:-9px;border-left:0;border-bottom:0;border-radius:0 4px 0 0}.corner-bl{left:-9px;bottom:-9px;border-right:0;border-top:0;border-radius:0 0 0 4px}.corner-br{right:-9px;bottom:-9px;border-left:0;border-top:0;border-radius:0 0 4px 0}.drag-hint{margin-top:20px;font-size:10px;color:#ac9f8c;display:flex;align-items:center;justify-content:center;gap:5px}.drag-hint svg{width:12px;height:12px}.photo-tools{display:flex;align-items:center;gap:12px;width:min(100%,350px);height:47px;margin-top:12px;padding:6px 13px;border:1px solid #e8e1d5;border-radius:9px;background:#fffdf7}.zoom-icon{width:14px;height:14px;color:#a89983}.zoom-range{flex:1;min-width:20px;--fill:0%;height:3px}.photo-tools output{width:31px;font-family:Arial,sans-serif;font-size:10px;color:#998c7b;flex-shrink:0}.tools-divider{width:1px;height:17px;background:#e7e0d5}.icon-button{width:25px;height:28px;display:grid;place-items:center;padding:3px;color:#998c7b;border-radius:5px;flex-shrink:0}.icon-button:hover{background:#f1e9dc;color:var(--red)}.icon-button svg{width:16px;height:16px}.save-button{width:100%;min-height:47px;background:var(--red);color:white;display:flex;align-items:center;justify-content:center;gap:9px;border-radius:9px;font-size:13px;font-weight:600;letter-spacing:.5px;box-shadow:0 4px 8px #c7412910;transition:background .2s,transform .2s;padding:12px 20px}.save-button:hover{background:var(--red-dark);transform:translateY(-1px)}.preview-panel>.save-button{width:min(100%,350px);margin-top:20px}.save-button svg{width:17px;height:17px}.save-arrow{margin-left:auto}.preview-panel>.save-button>svg:first-child{margin-left:auto}.save-note{font-size:9px;color:#afa393;line-height:1.7;text-align:center;margin-top:11px;letter-spacing:.3px}.save-note>span{margin:0 7px}
.little-note{display:flex;align-items:center;gap:18px;margin:29px 4px 0;padding:20px 26px;border:1px solid #e8e1d1;border-radius:12px;background:#f2eee2}.note-flower{color:#c89659;font-size:41px;line-height:1}.little-note h2{font-size:13px;font-weight:600;letter-spacing:.5px}.little-note p{font-size:11px;color:#a29580;margin-top:7px}.note-handwriting{margin-left:auto;font-family:var(--round);font-size:14px;color:#ad9170;transform:rotate(-4deg);white-space:nowrap}.note-handwriting>span{font-size:27px;margin-left:10px;display:inline-block;transform:rotate(20deg)}footer{max-width:1160px;margin:39px auto 0;border-top:1px solid #e8e4da;padding:26px 0 31px;display:flex;justify-content:space-between;gap:20px;color:#a59c8c;font-size:10px}.footer-brand>span{margin:0 10px}.footer-heart{color:#c77b66;margin-left:3px}
dialog{border:1px solid #e6ded1;border-radius:21px;background:#fffcf5;box-shadow:0 22px 90px #372c2433;color:var(--ink);width:min(calc(100% - 32px),455px);padding:30px;max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain}dialog::backdrop{background:#30271e66;backdrop-filter:blur(5px)}.dialog-close{position:absolute;top:15px;right:14px}.dialog-spark{display:block;color:#c49755;font-size:26px;margin-bottom:10px}dialog h2{font-size:21px;line-height:1.5}.help-steps{padding-left:23px;margin:25px 0}.help-steps li{padding-left:5px;margin-bottom:21px}.help-steps li::marker{color:var(--red);font-weight:700}.help-steps strong{font-size:14px}.help-steps p{font-size:12px;color:#928575;line-height:1.9;margin-top:5px}.dialog-privacy{font-size:11px;color:#9a8d78;display:flex;align-items:center;gap:5px;margin-bottom:20px}.dialog-privacy svg{width:14px;height:14px}.save-dialog{text-align:center}.success-tag{color:#979c70;display:inline-flex;align-items:center;gap:4px;font-size:11px;margin:0 0 10px}.success-tag svg{width:15px;height:15px}.result-description{font-size:12px;color:#aa9a84;margin-top:8px}#resultImage{max-width:100%;width:290px;height:auto;display:block;margin:24px auto;border-radius:15px;box-shadow:0 7px 20px #5c493317;-webkit-touch-callout:default}.toast{position:fixed;bottom:max(28px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%,20px);z-index:10;background:#3c342ded;color:#fff9ef;padding:12px 20px;max-width:calc(100vw - 36px);width:max-content;box-shadow:0 5px 18px #46342622;border-radius:10px;font-size:12px;text-align:center;line-height:1.6;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}.toast.visible{opacity:1;transform:translate(-50%,0)}
@media(min-width:1400px){.site-header{height:100px}.hero{padding-top:66px;padding-bottom:62px}.workshop-heading{height:69px}.controls-panel{padding-top:32px;padding-bottom:24px}.preview-panel{padding-top:32px}.canvas-stage{margin-top:28px}.canvas-wrap{width:350px}.preview-panel>.save-button{margin-top:23px}.little-note{margin-top:32px}}
@media(max-width:1200px){.site-header,footer{margin-left:36px;margin-right:36px}main{margin:0 52px}.hero{padding-left:8px;padding-right:24px}.hero-art{transform:scale(.9);transform-origin:right center;width:380px}.hero-copy{flex-shrink:0}h1{font-size:46px}.controls-panel{padding-left:25px;padding-right:25px}.preview-panel{padding-left:35px;padding-right:35px}.caption-description{font-size:9px}.caption-option>div{gap:9px}}
@media(max-width:950px){main{margin:0 32px}.site-header,footer{margin-left:32px;margin-right:32px}.hero{padding-top:40px;padding-bottom:38px}.hero-art{transform:scale(.76);width:300px}.hero-features{gap:13px}h1{font-size:43px}.hero-copy>p{font-size:12px}.editor-layout{grid-template-columns:45% 55%}.controls-panel{padding:25px 21px 20px}.preview-panel{padding:27px 28px 20px}.style-options{gap:8px}.caption-description{display:none}.canvas-stage{margin-top:35px}.canvas-wrap{max-width:310px}.photo-tools{margin-top:22px;gap:8px}.preview-panel>.save-button{margin-top:24px}.hero-art .round-stamp{right:-25px}.heading-note{display:none}.workshop-heading{padding:0 23px}}
@media(max-width:700px){.site-header{height:75px;margin:0 22px}.brand{font-size:19px;gap:9px}.brand-mark{width:33px;height:33px;font-size:24px;border-radius:10px}.brand-mark span{font-size:13px}.site-header nav{margin:0;gap:0}.nav-active{display:none}.nav-help{font-size:11px}.date-tag{display:none}main{margin:0 20px}.hero{min-height:0;padding:32px 3px 36px;position:relative;overflow:visible;gap:0}.eyebrow{font-size:10px;letter-spacing:.4px;margin-bottom:13px;gap:5px}.eyebrow>span{font-size:15px}h1{font-size:36px;line-height:1.35;letter-spacing:0}.hero-copy>p{font-size:11px;line-height:1.8;margin-top:18px;letter-spacing:0}.mobile-break{display:block}.hero-features{gap:10px;margin-top:13px;font-size:9px}.hero-features svg{width:11px;height:11px}.hero-art{position:absolute;right:-2px;top:52px;width:400px;height:265px;transform:scale(.48);transform-origin:right top;pointer-events:none}.hero-art .postcard-back{left:70px;top:15px;transform:rotate(-12deg)}.hero-art .postcard-front{left:197px;top:55px;transform:rotate(10deg)}.hero-art .spark-one{right:5px;top:15px}.hero-art .spark-two{left:51px;top:176px}.hero-art .art-caption{left:119px;bottom:-10px;font-size:15px;white-space:nowrap}.hero-art .art-caption svg{display:none}.hero-art .round-stamp{right:-11px;bottom:-20px;width:76px;height:76px}.workshop{border-radius:17px}.workshop-heading{height:56px;padding:0 20px}.workshop-heading h2{font-size:13px}.small-star{font-size:20px}.editor-layout{grid-template-columns:1fr}.controls-panel{padding:23px 22px 20px;border-right:0;border-bottom:1px solid var(--line)}.upload-zone{min-height:129px;padding:13px}.upload-title{font-size:12px}.upload-icon{margin-bottom:7px}.upload-hint{font-size:10px}.file-formats{margin-top:7px}.styles-section{margin-top:22px}.style-options{gap:13px;max-width:420px;margin:auto}.thumbnail-wrap{padding:5px}.style-tabs{margin-bottom:14px}.style-tabs button{height:37px}.variant-label{font-size:11px}.range-heading{font-size:12px;margin-top:20px}.range-endpoints{font-size:10px}.range-input{height:5px;margin:12px 0}.range-input::-webkit-slider-thumb{height:16px;width:16px}.range-input::-moz-range-thumb{height:12px;width:12px}.text-section{margin-top:21px;padding-top:18px}.text-section .section-heading{margin-bottom:15px}.caption-description{display:inline;font-size:10px}.caption-option>div{gap:15px}.toggle{width:38px;height:23px;padding:3px}.toggle>span{width:17px;height:17px}.toggle[aria-checked=true]>span{transform:translateX(15px)}.privacy-note{margin-top:20px;font-size:9px}.preview-panel{padding:22px 25px 24px}.preview-heading h3{font-size:12px}.canvas-stage{margin-top:24px}.canvas-wrap{max-width:336px;width:calc(100% - 10px)}.stage-label{font-size:7px;margin-bottom:18px}.canvas-wrap canvas,.canvas-wrap{border-radius:19px}.drag-hint{font-size:10px;margin-top:21px}.photo-tools{margin-top:18px;width:100%;max-width:350px;height:46px;gap:11px}.photo-tools .range-input{height:3px}.preview-panel>.save-button{margin-top:17px;min-height:49px}.save-note{font-size:9px;margin-top:11px}.little-note{margin:20px 0 0;padding:19px 18px;gap:12px}.note-flower{font-size:30px}.little-note h2{font-size:12px}.little-note p{font-size:10px;line-height:1.8;margin-top:5px}.note-handwriting{display:none}footer{margin:25px 23px 0;display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 0 28px;font-size:9px}.footer-brand>span{margin:0 6px}}
@media(max-width:390px){main{margin:0 14px}.site-header{margin:0 17px}.hero{padding-left:3px}.hero-art{right:0;top:60px;transform:scale(.40)}h1{font-size:32px}.hero-features{font-size:8px;gap:8px}.hero-copy>p{font-size:10px}.controls-panel{padding-left:19px;padding-right:19px}.preview-panel{padding-left:22px;padding-right:22px}.section-heading h3{font-size:12px}.caption-description{font-size:9px}}
.upload-hint{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}