:root{font-family:Inter,Noto Sans TC,PingFang TC,Microsoft JhengHei,sans-serif;color:#233e35;background:#f8faf7;font-synthesis:none;font-weight:400;font-size:15px;line-height:1.6;--green:#176b58;--light:#eef5ec;--border:#dfe7de;--muted:#6c7b71}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer;min-height:44px;border-radius:10px;border:1px solid transparent;padding:10px 16px;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;transition:background .16s}button:disabled{cursor:wait;opacity:.55}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible,.crop-frame:focus-visible{outline:3px solid #d2a448;outline-offset:3px}button:hover{filter:brightness(.97)}button svg{flex-shrink:0}.primary{background:var(--green);color:#fff}.secondary{background:#fff;border-color:var(--border);color:#2e5143}.full{width:100%}.text-button{color:var(--green);padding:5px 8px;background:none;border:0;font-size:13px}h1,h2,p{margin:0}h2{font-size:16px;letter-spacing:.03em}p{margin-top:12px}.muted{color:var(--muted)}.small{font-size:12px;line-height:1.8}.site-header{height:80px;max-width:1140px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid var(--border)}.brand{color:#203f34;text-decoration:none;font-weight:800;display:flex;align-items:center;gap:10px;letter-spacing:.03em}.brand-symbol{background:var(--green);color:#fff;display:grid;place-items:center;width:36px;height:36px;border-radius:11px}.header-note{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px}.header-note>span,.eyebrow>span{width:6px;height:6px;border-radius:50%;background:#729b62;display:inline-block}.home{text-align:center;max-width:620px;margin:0 auto;padding:44px 24px 30px}.eyebrow{font-size:11px;letter-spacing:.17em;color:var(--green);font-weight:700;display:flex;align-items:center;justify-content:center;gap:9px}.home h1{font-size:49px;letter-spacing:.02em;line-height:1.3;margin-top:20px;font-weight:850}.accent{color:#719855}.lead{color:#718075;font-size:15px;line-height:1.9;margin-top:14px}.mobile-break{display:none}.photo-art{position:relative;width:255px;height:246px;margin:29px auto 26px}.paper{position:absolute;width:155px;height:204px;border-radius:7px;background:#fff;box-shadow:0 7px 24px #2e4d3020}.paper.back{left:32px;top:17px;transform:rotate(-12deg);background:#e4eddf;border:8px solid white}.paper.front{left:67px;top:13px;transform:rotate(6deg);padding:10px}.portrait-art{height:160px;position:relative;overflow:hidden;background:#ecf1e9}.hair{position:absolute;left:40px;top:24px;width:58px;height:67px;background:#364b40;border-radius:45% 45% 35% 35%}.face{position:absolute;left:45px;top:40px;width:49px;height:61px;background:#d6b697;border-radius:40% 40% 48% 48%;border-top:8px solid #364b40}.shirt{position:absolute;width:114px;height:100px;top:103px;left:12px;border-radius:50% 50% 0 0;background:#92ab96}.shirt:before{content:"";position:absolute;left:45px;top:-12px;width:24px;height:27px;background:#d6b697;border-radius:0 0 50% 50%}.art-center{position:absolute;left:50%;top:0;bottom:0;border-left:1px dashed #fff9}.art-dimension{font-size:10px;color:#788779;padding-top:8px;text-align:left}.art-dimension span{float:right;color:var(--green)}.art-tag{position:absolute;bottom:4px;left:22px;font-size:11px;background:#fff;border:1px solid #e1e9da;border-radius:25px;display:flex;align-items:center;gap:6px;padding:8px 15px;box-shadow:0 4px 8px #354e3010}.corner{position:absolute;width:10px;height:10px;border:1px solid #628d69}.tl{top:-6px;left:-6px;border-right:0;border-bottom:0}.tr{top:-6px;right:-6px;border-left:0;border-bottom:0}.bl{bottom:-6px;left:-6px;border-right:0;border-top:0}.br{bottom:-6px;right:-6px;border-left:0;border-top:0}.home-actions{display:flex;gap:12px;max-width:500px;margin:auto}.big{min-height:58px;flex:1;justify-content:flex-start;font-size:15px;padding:15px 19px}.big svg:last-child{margin-left:auto}.privacy{display:flex;align-items:center;justify-content:center;gap:6px;font-size:11px;color:var(--muted);margin-top:20px}.privacy svg{flex-shrink:0}.home-steps{display:flex;justify-content:center;gap:30px;border-top:1px solid var(--border);margin-top:37px;padding-top:25px;color:#69796c;font-size:12px}.home-steps b{font-size:10px;font-weight:500;letter-spacing:.08em;color:#8a9988;margin-right:5px}footer{max-width:1076px;padding:22px 0 30px;margin:10px auto 0;border-top:1px solid var(--border);color:#819080;display:flex;justify-content:space-between;align-items:flex-start;font-size:11px}footer details{max-width:330px}summary{cursor:pointer;min-height:30px}.workspace{max-width:1040px;margin:0 auto;padding:28px 18px 24px}.workspace-intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px;gap:12px}.workspace-intro .eyebrow{justify-content:flex-start;font-size:9px}.workspace-intro h1{font-size:27px;margin-top:8px}.workspace-intro p{font-size:13px;margin-top:5px}.card{padding:23px;border:1px solid var(--border);background:#fff;border-radius:16px;margin-bottom:18px;box-shadow:0 3px 10px #233e3503}.section-heading{display:flex;align-items:center;gap:9px;margin-bottom:19px}.section-heading>.muted,.section-heading>.text-button{margin-left:auto;font-size:11px}.step-number{display:grid;place-items:center;background:var(--light);color:var(--green);width:25px;height:25px;border-radius:50%;font-size:12px;font-weight:700}.preset-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}.preset{display:flex;flex-direction:column;padding:11px 6px;gap:4px;background:#fff;border:1px solid var(--border);font-size:12px}.preset span{font-size:10px;font-weight:400;color:var(--muted)}.selected{background:#eef6ef!important;border-color:#43836b!important;color:var(--green)}.workspace-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:20px;align-items:start}.editor-stage{background:#f0f3ef;border-radius:10px;min-height:240px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:23px 14px 12px;background-image:radial-gradient(#b9c8b777 .7px,transparent .7px);background-size:12px 12px}.crop-frame{position:relative;overflow:hidden;box-shadow:0 3px 12px #22332425;touch-action:none;cursor:grab;background:#fff}.crop-frame:active{cursor:grabbing}.crop-frame canvas{display:block;width:100%;height:100%;position:absolute;top:0;right:0;bottom:0;left:0}.guides{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;color:#fff;text-shadow:0 1px 3px #243b2e}.center-line{position:absolute;left:50%;height:100%;border-left:1px dashed #ffffffb0}.size-label{font-size:10px;color:#758373;margin-top:9px;letter-spacing:.08em}.zoom-control{display:flex;align-items:center;gap:12px;font-size:12px;margin:20px 0}.zoom-control input{flex:1;min-width:0;accent-color:var(--green)}.zoom-control output{font-size:11px;color:var(--muted);width:40px}.notice{padding:11px 13px;font-size:11px;line-height:1.8;background:#fff8e9;color:#8a6229;border-radius:8px;border:1px solid #eddfc5}.checks{list-style:none;padding:0;margin:0;display:grid;gap:14px;font-size:12px}.checks li{display:flex;gap:9px;align-items:flex-start}.checks li>span{width:17px;flex-shrink:0;font-size:15px;line-height:1.4}.checks .pass>span{color:#357e57}.checks .warn>span{color:#b98332}.output-tabs{display:grid;grid-template-columns:repeat(3,1fr);padding:4px;background:#f1f4ee;border-radius:9px;gap:3px}.output-tabs button{min-height:39px;font-size:11px;padding:6px 3px;background:transparent;color:#6c7b71}.output-tabs .active{background:#fff;color:var(--green);box-shadow:0 2px 5px #32492d14}.layout-summary{display:flex;justify-content:space-between;font-size:12px}.layout-summary b{color:var(--green)}.ruler-note{background:#f7f9f5;border-radius:8px;padding:13px;margin:17px 0}.ruler{font-size:12px;display:block;text-align:center;color:#5c7562;white-space:nowrap}.ruler-note p{font-size:11px;color:var(--muted);margin-top:7px}.export-card>.primary{margin-top:16px}.export-preview{margin-top:20px;padding-top:18px;border-top:1px solid var(--border);text-align:center}.export-preview img{width:auto;max-width:100%;max-height:420px;border:1px solid var(--border);object-fit:contain;margin-bottom:14px}.external-edit summary{font-size:13px;font-weight:600}.external-actions{display:flex;gap:8px;margin-top:14px}.external-actions button{font-size:11px;flex:1}.custom-dimensions{display:flex;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap}.custom-dimensions label{font-size:11px;max-width:100px}.custom-dimensions input{display:block;width:100%;padding:8px;border:1px solid var(--border);border-radius:6px}.custom-dimensions small{width:100%;color:var(--muted)}.clear-photo{display:flex;margin:auto}.global-error{max-width:750px;margin:20px auto;padding:16px;background:#fff3e8;color:#954829;display:flex;align-items:center;justify-content:space-between}.busy-toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%);padding:13px 24px;border-radius:30px;background:#264b3d;color:#fff;box-shadow:0 4px 20px #0002;font-size:12px;white-space:nowrap;z-index:10}.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}@media(max-width:700px){.site-header{height:66px;padding:0 20px}.brand{font-size:14px;gap:8px}.brand-symbol{width:32px;height:32px}.header-note{font-size:10px}.home{padding:31px 24px 25px}.home h1{font-size:39px;margin-top:18px}.lead{font-size:13px;margin-top:13px}.mobile-break{display:block}.photo-art{transform:scale(.92);margin-top:16px;margin-bottom:7px;height:235px}.home-actions{flex-direction:column;gap:11px}.big{min-height:54px;padding:13px 21px}.privacy{font-size:10px;align-items:flex-start;line-height:1.8;max-width:320px;margin:18px auto 0}.home-steps{gap:16px;font-size:10px;padding-top:20px;margin-top:25px}.home-steps b{margin-right:3px}footer{margin:0 22px;padding-top:19px;gap:16px;font-size:10px;flex-wrap:wrap}footer details{max-width:100%}.workspace{padding:23px 14px}.workspace-intro{align-items:flex-start}.workspace-intro h1{font-size:22px}.workspace-intro p{font-size:11px}.workspace-intro>.secondary{font-size:10px;padding:8px;gap:4px;flex-shrink:0}.workspace-intro>.secondary svg{width:14px}.preset-grid{grid-template-columns:repeat(3,1fr);gap:8px}.preset{font-size:12px;padding:11px 3px}.workspace-grid{grid-template-columns:1fr;gap:0}.card{padding:18px;border-radius:13px;margin-bottom:14px}.section-heading{margin-bottom:16px}.section-heading>.muted{font-size:10px}.editor-stage{padding-top:20px}.checks,.output-tabs button{font-size:12px}.export-preview img{max-height:370px}.global-error{margin:10px 14px;font-size:12px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}.editor-card{position:relative;padding-bottom:max(18px,env(safe-area-inset-bottom))}.history-toolbar{position:sticky;top:0;z-index:6;display:flex;gap:8px;padding:8px 0 12px;background:#fff}.history-toolbar button{flex:1;min-height:48px;font-size:12px;padding:8px 5px}.editor-stage{padding:16px 12px 12px}.editor-stage{touch-action:none;overscroll-behavior:none}.editor-stage,.editor-stage *{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}.photo-pixels,.photo-pixels *,.editor-stage .size-label,.editor-stage .keyboard-hint{pointer-events:none}.crop-frame{overflow:hidden;outline:1px solid #9aafa1;isolation:isolate;box-shadow:none;user-select:none;-webkit-user-select:none}.photo-pixels{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;box-shadow:0 3px 12px #22332425}.photo-pixels>canvas{width:100%;height:100%;position:absolute;top:0;right:0;bottom:0;left:0}.rotation-controls{border-top:1px solid var(--border);padding-top:15px}.rotation-controls>label{display:flex;justify-content:space-between;font-size:12px}.rotation-controls>div{display:flex;align-items:center;gap:9px;margin-top:10px}.rotation-controls button{min-height:48px;padding:8px;font-size:11px;flex-shrink:0}.rotation-controls input{min-width:0;width:100%;accent-color:var(--green);min-height:48px;touch-action:none}.zoom-control input{min-height:48px;touch-action:none}.clear-photo{min-height:48px;margin-bottom:env(safe-area-inset-bottom)}@media(max-width:700px){.editor-card{padding:15px 12px 20px}.history-toolbar{top:0}.workspace{padding-bottom:calc(24px + env(safe-area-inset-bottom))}.external-actions button{min-height:48px}}button,summary{touch-action:manipulation}.replace-actions{display:flex;flex-wrap:wrap;gap:8px}.replace-actions button{min-height:48px}.photo-drop-zone{border-radius:16px;outline:2px dashed transparent;outline-offset:4px}.home-drop-zone{max-width:656px;margin:0 auto}.photo-drop-zone[data-dragging=true]{outline-color:var(--green);background:#eaf5ed;box-shadow:0 0 0 8px #176b5814}.photo-drop-zone[data-dragging=true] .editor-card{border-color:var(--green);background:#f8fcf8}.photo-drop-hint{text-align:center;font-size:12px;color:var(--muted);padding:10px 12px;margin:6px 0}.photo-drop-zone[data-dragging=true] .photo-drop-hint{color:var(--green);font-weight:700;background:#dcefe3;border-radius:8px}.import-notice{max-width:750px;margin:16px auto;padding:12px 16px;background:#eef5ec;color:#214a3a;border-radius:8px;font-size:13px}.replace-photo-dialog{border:1px solid var(--border);border-radius:16px;padding:24px;width:min(420px,calc(100% - 32px));color:#203f34;box-shadow:0 16px 64px #0003}.replace-photo-dialog::backdrop{background:#152f2866}.replace-photo-dialog p{font-size:14px;line-height:1.8}.replace-dialog-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}.replace-dialog-actions button{min-height:48px}.fixed-guides{overflow:hidden}.fixed-guide-zone{position:absolute;left:0;right:0;background:#f5e69938;border-top:1px solid #fff9;border-bottom:1px solid #fff9;pointer-events:none}.fixed-guide-zone i{position:absolute;top:50%;left:0;right:0;border-top:1px dashed #fff4b7;filter:drop-shadow(0 1px 1px #2348)}.fixed-guide-zone span{position:absolute;top:50%;right:4px;transform:translateY(-50%);font-size:10px;background:#23473599;border-radius:3px;padding:0 4px;font-style:normal}.template-hints{margin-top:12px;font-size:12px;color:var(--muted);line-height:1.7}.template-hints p{margin-top:6px}.mobile-only{display:none}.photo-fit{width:100%;display:grid;place-items:center;min-height:0}.zoom-control{gap:7px}.zoom-control>span{white-space:nowrap}.zoom-step{min-width:36px;min-height:44px;padding:4px}.crop-frame:focus{outline:2px solid #43836b;outline-offset:2px}.crop-frame:focus-visible{outline-color:#176b58;outline-offset:3px}.keyboard-hint{visibility:hidden;margin:4px 0 0;font-size:11px;color:var(--muted)}.editor-stage:focus-within .keyboard-hint{visibility:visible}.direction-pad{display:none}.scale-rotation{min-width:0}@media(max-width:700px){.mobile-only{display:inline-flex}.workspace[data-editor-step=choose] .workspace-grid,.workspace[data-editor-step=choose] .clear-photo,.workspace[data-editor-step=review] .preset-step,.workspace[data-editor-step=review] .photo-drop-zone{display:none}.workspace:not([data-editor-step=review]) .review-step{display:none}.review-step>.mobile-only{margin-bottom:16px}.workspace[data-editor-step=edit] .workspace-intro,.workspace[data-editor-step=edit] .preset-step,.workspace[data-editor-step=edit] .external-edit,.workspace[data-editor-step=edit] .photo-drop-hint,.workspace[data-editor-step=edit] .clear-photo{display:none}.workspace[data-editor-step=edit] .editor-card{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;width:100%;height:100dvh;margin:0;border:0;border-radius:0;padding:env(safe-area-inset-top) max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left));display:flex;flex-direction:column;overflow:hidden;overscroll-behavior:none}.workspace[data-editor-step=edit] .section-heading{flex:none;margin:0;min-height:40px;gap:8px}.workspace[data-editor-step=edit] .section-heading button{min-height:40px}.workspace[data-editor-step=edit] .history-toolbar{position:static;flex:none;padding:0 0 6px;gap:6px}.workspace[data-editor-step=edit] .history-toolbar button{min-height:40px;padding:4px}.workspace[data-editor-step=edit] .editor-stage{flex:1;min-height:0;padding:7px 8px 3px;border-radius:8px;overflow:hidden}.workspace[data-editor-step=edit] .photo-fit{flex:1;container-type:size;position:relative}.workspace[data-editor-step=edit] .crop-frame{position:absolute;margin:auto;top:0;right:0;bottom:0;left:0;width:min(100cqw,calc(100cqh * var(--photo-ratio)))!important;height:min(100cqh,calc(100cqw / var(--photo-ratio)));max-height:100%;aspect-ratio:var(--photo-ratio)}.workspace[data-editor-step=edit] .size-label{flex:none;margin-top:2px;font-size:10px;line-height:16px}.workspace[data-editor-step=edit] .editor-controls{flex:none;padding:4px 0 calc(6px + var(--editor-safe-bottom, env(safe-area-inset-bottom)));background:#fff;touch-action:manipulation}.workspace[data-editor-step=edit] .keyboard-hint{display:none}.workspace[data-editor-step=edit] .adjustment-controls{display:grid;grid-template-columns:132px minmax(0,1fr);gap:10px;align-items:center}.workspace[data-editor-step=edit] .direction-pad{display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px);touch-action:none;user-select:none;-webkit-user-select:none}.direction-center{grid-column:2;grid-row:2;place-self:center;color:var(--muted);font-size:10px;line-height:1.35;text-align:center;pointer-events:none}.direction-button{width:44px;height:44px;min-height:44px;padding:0;font-size:22px;touch-action:none;-webkit-touch-callout:none;border-radius:9px}.direction-button:active{background:var(--light);border-color:var(--green)}.direction-button[data-direction=ArrowUp]{grid-column:2;grid-row:1}.direction-button[data-direction=ArrowLeft]{grid-column:1;grid-row:2}.direction-button[data-direction=ArrowRight]{grid-column:3;grid-row:2}.direction-button[data-direction=ArrowDown]{grid-column:2;grid-row:3}.workspace[data-editor-step=edit] .scale-rotation{display:grid;gap:8px}.workspace[data-editor-step=edit] .template-hints{display:none}.workspace[data-editor-step=edit] .zoom-control{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;grid-template-rows:18px 44px;column-gap:5px;row-gap:0;margin:0;height:auto;font-size:11px}.workspace[data-editor-step=edit] .zoom-control>span{grid-column:1/3;grid-row:1}.workspace[data-editor-step=edit] .zoom-control>.zoom-step{grid-column:1;grid-row:2;width:44px}.workspace[data-editor-step=edit] .zoom-control>.zoom-step:last-of-type{grid-column:3}.workspace[data-editor-step=edit] .zoom-control input{grid-column:2;grid-row:2;width:100%;margin:0}.workspace[data-editor-step=edit] .zoom-control input{min-height:44px}.workspace[data-editor-step=edit] .zoom-control output{grid-column:3;grid-row:1;width:44px;font-size:10px;text-align:right}.workspace[data-editor-step=edit] .rotation-controls{padding:0;border:0;display:grid;grid-template-rows:18px 44px;gap:0;height:auto}.workspace[data-editor-step=edit] .rotation-controls>label{font-size:11px;gap:8px;white-space:nowrap;align-items:center}.workspace[data-editor-step=edit] .rotation-controls>div{display:grid;grid-template-columns:1fr 1fr;margin:0;gap:6px}.workspace[data-editor-step=edit] .rotation-controls button{min-height:44px;min-width:64px}.workspace[data-editor-step=edit] .rotation-controls input,.workspace[data-editor-step=edit] .rotation-controls p{display:none}.workspace[data-editor-step=edit] .editor-done{min-height:44px;padding:6px;margin-top:4px}html.mobile-editor-open .site-header,html.mobile-editor-open footer{display:none}html.mobile-editor-open .global-error,html.mobile-editor-open .import-notice{position:fixed;z-index:30;top:0;left:0;right:0;margin:0}html.mobile-editor-open .busy-toast{z-index:30;bottom:calc(196px + env(safe-area-inset-bottom))}.replace-photo-dialog{z-index:40}}.validation-card h3{font-size:13px;margin:16px 0 12px;color:var(--green)}.visual-reminders{border-top:1px solid var(--border);margin-top:18px;padding-top:2px}.visual-reminders p,.face-notice{font-size:12px;color:var(--muted);line-height:1.8}.output-tabs-four{grid-template-columns:repeat(2,minmax(0,1fr))}.export-preview img{touch-action:auto;user-select:auto;-webkit-user-select:auto;-webkit-touch-callout:default}