@font-face{font-family:XiHuan;src:url('./assets/xihuanti.woff2') format('woff2');font-display:block}
:root{--ink:#1d1d1f;--muted:#6e6e73;--line:#d2d2d7;--blue:#0071e3;--surface:#f5f5f7}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:28px}body{margin:0;background:#fff;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Microsoft YaHei',sans-serif;font-size:14px;-webkit-font-smoothing:antialiased}button,input,select{font:inherit;color:inherit}button,a,input,select{outline-offset:5px}a{text-decoration:none;color:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.5}.masthead{background:#fff}.nav-inner{max-width:1100px;margin:auto;padding:28px 40px;display:flex;align-items:center;justify-content:space-between;min-height:100px}.wordmark{display:block;line-height:0}.wordmark img{width:176px;height:auto}.nav-action{font-size:13px;color:var(--blue);padding:10px 0}.hero{min-height:calc(100svh - 100px);padding:130px 28px 160px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}h1{font-size:clamp(48px,5.4vw,76px);line-height:1.16;letter-spacing:-3px;font-weight:650;margin:0}.hero p{font-size:21px;line-height:1.65;letter-spacing:-.3px;color:var(--muted);margin:32px 0 28px}.hero-action{display:flex;align-items:center;gap:9px;font-size:18px;color:var(--blue)}.hero-action svg{width:17px;height:17px}.hero-action:hover,.nav-action:hover{text-decoration:underline}.workspace{background:var(--surface);padding:100px 40px 120px}.workspace-heading{max-width:1056px;margin:0 auto 42px}.workspace-heading h2{font-size:34px;letter-spacing:-1px;font-weight:600;margin:0 0 13px}.workspace-heading p{font-size:16px;line-height:1.6;color:var(--muted);margin:0}.editor-grid{max-width:1056px;margin:auto;display:grid;grid-template-columns:minmax(300px,420px) minmax(340px,500px);gap:32px;justify-content:space-between;align-items:stretch}.controls,.preview{background:#fff;padding:28px;border-radius:20px;min-width:0}.step{margin-top:25px;padding-top:25px;border-top:1px solid #e8e8ed}.step:first-child{margin:0;padding:0;border:0}.step>label{font-size:16px;line-height:24px;font-weight:600;display:flex;align-items:center;gap:10px;margin-bottom:16px}.number{width:23px;height:23px;border-radius:50%;background:var(--surface);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;color:var(--muted);flex-shrink:0}input[type=text]{width:100%;padding:15px 16px;line-height:24px;font-size:17px;border:1px solid var(--line);border-radius:12px;background:#fff}input[type=text]:focus{border-color:var(--blue);outline:3px solid #0071e322;outline-offset:0}.hint{font-size:12px;line-height:1.6;color:var(--muted);margin:10px 0 0}.step .upload{font-weight:400;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;min-height:135px;padding:21px 12px;border:1px dashed #b8b8be;border-radius:12px;background:#fafafa;cursor:pointer;margin:0;transition:background .2s,border-color .2s}.upload:hover,.upload.over{background:#f0f6ff;border-color:var(--blue)}.upload svg{height:25px;width:25px;color:var(--muted);margin-bottom:3px}.upload strong{font-size:14px;font-weight:500}.upload span{font-size:12px;color:var(--muted)}.upload input{position:absolute;width:1px;height:1px;opacity:0}.upload:focus-within{outline:2px solid var(--blue);outline-offset:4px}.zoom-row{display:flex;justify-content:space-between;font-size:12px;margin-top:20px;color:var(--muted)}input[type=range]{accent-color:var(--blue);width:100%;height:16px;margin:12px 0 9px}.photo-tools{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;line-height:1.6;color:var(--muted)}.photo-tools button{padding:4px 0;background:none;border:0;color:var(--blue);white-space:nowrap}.export-options{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px;font-size:12px;color:var(--muted)}select{border:1px solid var(--line);border-radius:9px;padding:9px 26px 9px 10px;background:#fff;font-size:12px}.primary{display:block;width:100%;border:0;border-radius:12px;background:var(--blue);color:#fff;padding:15px;line-height:22px;font-size:15px;font-weight:500;transition:background .2s}.primary:hover{background:#0077ed}.reset{display:block;margin:12px auto 0;padding:6px;background:none;border:0;color:var(--muted);font-size:12px}.reset:hover{color:var(--ink)}.status{font-size:12px;line-height:1.6;min-height:20px;color:var(--muted);margin:18px 0 0}.status:empty{display:none}.status.error{color:#b52727}.preview-top{font-size:16px;font-weight:600;line-height:24px;margin-bottom:16px}.poster-wrap{width:100%;position:relative;overflow:hidden;border-radius:3px;box-shadow:0 4px 20px #0000000a}canvas{display:block;width:100%;height:auto;touch-action:none;cursor:grab;background:#eee}canvas:active{cursor:grabbing}.loading,.drop-hint{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;background:#ffffffee;color:var(--muted);font-size:14px;pointer-events:none}.loading[hidden]{display:none}.drop-hint{display:none;background:#ffffffdf;border:2px dashed var(--blue);color:var(--blue);font-size:22px}.poster-wrap.over .drop-hint{display:flex}@media(min-width:1600px){.hero{padding-top:160px;padding-bottom:190px}}@media(max-width:800px){.nav-inner{padding:22px 24px;min-height:84px}.wordmark img{width:145px}.hero{min-height:calc(100svh - 84px);padding:100px 24px 130px}h1{font-size:52px;letter-spacing:-2px}.hero p{font-size:18px;margin:28px 0}.hero-action{font-size:17px}.workspace{padding:60px 20px 70px}.workspace-heading{margin-bottom:28px}.workspace-heading h2{font-size:28px}.workspace-heading p{font-size:14px}.editor-grid{grid-template-columns:1fr;gap:20px;max-width:500px}.controls,.preview{padding:24px;border-radius:18px}.preview{grid-row:2}.workspace-heading{max-width:500px}.photo-tools{font-size:11px}.export-options{font-size:11px}.status{margin-bottom:0}}@media(max-width:380px){h1{font-size:45px}.controls,.preview{padding:20px}.wordmark img{width:132px}.workspace{padding-left:14px;padding-right:14px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* Handwritten typography and open layout, with the supplied film artwork. */
@font-face{font-family:XiHuanUI;src:url('./assets/xihuanti-ui.woff2') format('woff2');font-display:swap}
body,button,input,select{font-family:XiHuanUI,XiHuan,'Microsoft YaHei',sans-serif}body{font-size:21px}.nav-inner{max-width:1180px;padding-top:28px;padding-bottom:20px;min-height:88px}.wordmark img{width:160px}.hero{min-height:0;padding:65px 24px 78px;overflow:hidden;position:relative;display:block;text-align:center}h1{font-family:XiHuanUI,XiHuan,serif;font-size:clamp(35px,5.4vw,76px);font-weight:700;letter-spacing:0;line-height:1.2;white-space:nowrap;margin:0 auto 42px}.hero p.gesture-hint{font-size:19px;line-height:1.4;color:#777;margin:20px 0 4px}.poster-stage{--rx:0deg;--ry:0deg;--px:0px;--py:0px;position:relative;width:min(820px,90vw);height:550px;margin:0 auto;perspective:1400px;touch-action:pan-y;outline-offset:12px;cursor:grab;isolation:isolate}.poster-stage:active{cursor:grabbing}.showcase-poster{position:absolute;width:290px;top:30px;will-change:transform;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.19,1,.22,1);box-shadow:0 20px 40px #33221824,0 2px 6px #33221818;user-select:none;line-height:0;background:#f2f0e9}.showcase-poster img{width:100%;height:auto;border-radius:2px;pointer-events:none}.poster-left{left:calc(50% - 305px);z-index:2;transform:rotateX(var(--rx)) rotateY(var(--ry)) translate3d(var(--px),var(--py),30px) rotateZ(-9deg)}.poster-right{right:calc(50% - 305px);top:60px;z-index:3;transform:rotateX(var(--rx)) rotateY(var(--ry)) translate3d(calc(var(--px)*-0.6),calc(var(--py)*-0.6),60px) rotateZ(8deg)}.poster-stage.moving .showcase-poster{transition:transform .12s ease-out}.paper-stack{position:absolute;left:50%;top:165px;width:550px;height:310px;border-radius:4px;background:#c9ab7c;transform:translateX(-50%) rotate(-2deg);box-shadow:0 12px 22px #4b30151a;z-index:0;background-image:repeating-linear-gradient(3deg,#ffffff09 0px,#ffffff09 1px,transparent 1px,transparent 3px)}.paper-stack:before{content:'';position:absolute;top:-28px;left:0;width:190px;height:35px;border-radius:9px 17px 0 0;background:#c9ab7c}.paper-stack:after{content:'';position:absolute;inset:8px;border:1px solid #95744850;border-radius:2px}.doodle{position:absolute;pointer-events:none;z-index:4;overflow:visible}.doodle-star{width:75px;left:24px;top:83px;transform:rotate(-12deg)}.doodle-loop{width:140px;right:-18px;top:360px;transform:rotate(4deg)}.doodle-spark{width:58px;left:119px;bottom:40px;transform:rotate(9deg)}.bottom-doodle{width:270px;height:59px;margin:0 auto;display:block}.workspace{padding:80px 40px 110px;background:#fff;border-top:1px solid #ececea}.workspace-heading{max-width:1056px;margin-bottom:46px}.workspace-heading h2{font-size:44px;font-weight:700;letter-spacing:0}.workspace-heading p{font-size:20px;line-height:1.5}.editor-grid{grid-template-columns:minmax(300px,390px) minmax(340px,470px);gap:70px;max-width:1056px;align-items:start}.controls,.preview{padding:0;background:none;border-radius:0}.step>label,.preview-top{font-size:27px;font-weight:700;line-height:36px;margin-bottom:16px}.number{font-family:XiHuanUI,XiHuan,serif;width:26px;height:26px;font-size:20px;background:none;color:#96938e}.step{padding-top:25px;margin-top:25px}.hint,.photo-tools{font-size:17px}.upload strong{font-size:22px}.upload span{font-size:17px}.step .upload{border-radius:3px;background:#f8f8f6;border-color:#c9c7c2;min-height:146px}.step .upload:hover,.step .upload.over{background:#f1efea;border-color:#777}.zoom-row,.export-options,.reset,.status{font-size:17px}input[type=text]{font-family:XiHuan,XiHuanUI,serif;font-size:25px;border-radius:3px;padding:13px 15px}.zoom-row{margin-top:17px}input[type=range]{accent-color:#282623}.photo-tools button{color:#4c4b48}.export-options select{font-size:18px;border-radius:3px;padding-right:20px}.primary{font-size:24px;background:#242321;border-radius:4px;padding:16px;line-height:28px}.primary:hover{background:#45443f}.reset{margin-top:11px}.poster-wrap{border-radius:0;box-shadow:0 8px 24px #0000000a}.loading{font-size:20px}.drop-hint{font-size:26px;border-color:#282623;color:#282623}@media(max-width:800px){.nav-inner{padding:22px 25px 16px;min-height:78px}.wordmark img{width:145px}.hero{padding:52px 12px 54px}h1{font-size:clamp(29px,5.2vw,46px);margin-bottom:34px;white-space:nowrap}.poster-stage{height:430px;width:min(650px,94vw)}.showcase-poster{width:230px;top:25px}.poster-left{left:calc(50% - 235px)}.poster-right{right:calc(50% - 235px);top:48px}.paper-stack{width:425px;height:250px;top:135px}.paper-stack:before{width:140px;top:-23px;height:29px}.doodle-star{width:56px;left:0;top:36px}.doodle-loop{width:90px;right:0;top:310px}.doodle-spark{width:45px;left:47px;bottom:8px}.hero p.gesture-hint{font-size:17px;margin-top:14px}.bottom-doodle{width:225px;height:50px}.workspace{padding:54px 25px 70px}.workspace-heading{max-width:500px;margin-bottom:28px}.workspace-heading h2{font-size:36px}.workspace-heading p{font-size:19px}.editor-grid{grid-template-columns:1fr;max-width:500px;gap:45px}.controls,.preview{padding:0;border-radius:0}.preview{grid-row:2}.export-options{font-size:17px}.photo-tools{font-size:16px}}@media(max-width:520px){.hero{padding-top:44px}h1{font-size:clamp(27px,6.5vw,35px);letter-spacing:0}.poster-stage{height:330px;width:94vw}.showcase-poster{width:168px;top:20px}.poster-left{left:calc(50% - 170px)}.poster-right{right:calc(50% - 170px);top:40px}.paper-stack{top:106px;width:300px;height:186px}.paper-stack:before{width:110px;top:-21px;height:25px}.doodle-star{width:43px;left:5px;top:2px}.doodle-loop{width:65px;right:0;top:235px}.doodle-spark{width:36px;left:28px;bottom:1px}.hero p.gesture-hint{font-size:16px}.bottom-doodle{height:42px;width:205px}.workspace-heading h2{font-size:34px}.step>label,.preview-top{font-size:26px}.export-options{gap:7px}.export-options select{font-size:17px}}@media(max-width:360px){h1{font-size:25px}.showcase-poster{width:150px}.poster-stage{height:300px}.poster-left{left:calc(50% - 150px)}.poster-right{right:calc(50% - 150px)}.paper-stack{width:270px;height:155px}.doodle-loop{top:217px}.hero p.gesture-hint{font-size:15px}}@media(prefers-reduced-motion:reduce){.poster-stage .showcase-poster{transform:rotateZ(-5deg)!important}.poster-stage .poster-right{transform:rotateZ(5deg)!important}}
/* Small doodles stay in the margins, outside interactive controls. */
.workspace{background:#fcfbf7}.workspace-heading h2{display:flex;align-items:center;gap:17px}.heading-doodle{width:85px;height:47px;flex-shrink:0;transform:rotate(5deg)}.controls,.preview{position:relative}.tool-doodle{position:absolute;pointer-events:none}.tool-doodle-arrow{left:-62px;top:184px;width:48px;height:60px;transform:rotate(-9deg)}.number{background:#f7e8b3;color:#544b30;border-radius:44% 56% 51% 49%/50% 42% 58% 50%;width:29px;height:29px}.step:nth-of-type(2) .number{background:#f4d8e5}.step:nth-of-type(3) .number{background:#d9e5d2}input[type=text]{border-color:#c8c3b8;background:#fffefb;border-radius:9px 5px 10px 4px}.step .upload{background:#faf5e9;border-color:#c6b991;border-radius:9px 4px 12px 5px}.step .upload svg{color:#8b805f}.preview-top{display:flex;align-items:center;justify-content:space-between}.preview-doodle{width:85px;height:34px;flex-shrink:0}.preview-foot-doodle{display:block;margin:16px auto 0;width:240px;height:60px;pointer-events:none}.primary{background:#eccd60;color:#302a20;border-radius:7px 11px 6px 9px;border:1px solid #dac16f}.primary:hover{background:#e6c246}.step{border-color:#ded8ca}.status.error{font-family:'Microsoft YaHei',sans-serif;font-size:13px}@media(max-width:1180px){.tool-doodle-arrow{left:-32px;top:192px;width:26px;height:40px}}@media(max-width:800px){.tool-doodle-arrow{left:auto;right:-6px;top:133px;width:35px;transform:rotate(-18deg)}.heading-doodle{width:65px;height:40px}.preview-doodle{width:75px}}
.hint,.photo-tools,.zoom-row,.status,.upload span,.workspace-heading p,.hero p.gesture-hint{font-weight:600;color:#655f55}.hint{font-size:20px}.workspace-heading p{font-size:22px}.hero p.gesture-hint{font-size:22px}.photo-tools{font-size:18px}@media(max-width:520px){.showcase-poster{width:150px}.poster-stage{height:306px}.poster-left{left:calc(50% - 149px)}.poster-right{right:calc(50% - 149px)}.paper-stack{width:270px;height:164px}.hero p.gesture-hint{font-size:20px}.workspace-heading p{font-size:20px}.photo-tools{font-size:18px}}
/* Warm paper separates the workbench from the white homepage. */
.workspace{background:#f5e9c8;border-top:0;position:relative;padding-top:90px}.workspace:before{content:'';position:absolute;top:0;left:0;width:100%;height:22px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 22' fill='none'%3E%3Cpath d='M-5 9C28 1 53 18 84 10S143 1 176 11s50 5 79-2 72 10 95 2 39-2 57 2' stroke='%23bca276' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E");background-size:400px 22px;background-repeat:repeat-x;pointer-events:none}.step .upload{background:#fff9eb}input[type=text]{background:#fffdf7}.number{background:#edd28e}.step:nth-of-type(2) .number{background:#f0cadb}.step:nth-of-type(3) .number{background:#c8dcb5}.touch-help{display:none}@media(max-width:800px){.workspace{display:flex;flex-direction:column;padding-top:55px}.editor-grid{display:contents}.preview{order:1;width:100%;max-width:500px;margin:0 auto 45px;grid-row:auto}.workspace-heading{order:2;width:100%;max-width:500px;margin:0 auto 30px}.controls{order:3;width:100%;max-width:500px;margin:0 auto}.desktop-help{display:none}.touch-help{display:inline}.tool-doodle-arrow{top:145px}.preview-foot-doodle{margin-bottom:0}}