:root{--ink:#202329;--muted:#80848e;--orange:#ff5835;--line:#e9eaed;--blue:#e6edf5;font-family:Inter,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:#fafafa;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:wait}button:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid #2768e1;outline-offset:4px}button{border:0;background:none;color:inherit}a{color:inherit;text-decoration:none}.topbar{height:88px;max-width:1320px;padding:0 48px;margin:auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;font-size:25px;font-weight:800;letter-spacing:-1px}.brand-face{display:grid;place-items:center;width:39px;height:39px;background:var(--orange);color:white;border-radius:12px;font-size:31px;line-height:1;transform:rotate(-8deg)}.brand-note{font-size:12px;color:var(--muted);letter-spacing:1px;font-weight:500;margin-left:13px;padding-left:23px;border-left:1px solid #dadce1}.local-note{font-size:12px;color:#6d737b;display:flex;gap:8px;align-items:center}.local-note i{width:6px;height:6px;border-radius:50%;background:#57a388}main{max-width:1190px;padding:0 32px;margin:0 auto}.intro{display:flex;align-items:center;justify-content:space-between;padding:42px 0 31px}.eyebrow{font-size:10px;font-weight:750;letter-spacing:2.6px;color:var(--orange)}h1{font-size:35px;margin:9px 0 10px;letter-spacing:-1px;font-weight:800}.intro p{font-size:14px;color:#787c84;margin:0}.intro-doodle{font-size:77px;color:var(--orange);margin-right:30px;transform:rotate(13deg);line-height:1}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:30px;align-items:start}.editor{background:#fff;border:1px solid #e1e4e9;border-radius:20px;overflow:hidden;position:relative;box-shadow:0 8px 24px #273b5a04}.editor-top{display:flex;align-items:center;justify-content:space-between;padding:16px 21px;font-size:12px;gap:10px}.editor-top>div{display:flex;align-items:center;gap:7px;min-width:0}#photo-name{max-width:300px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.dot{width:5px;height:5px;border-radius:50%;background:var(--orange);flex-shrink:0}.text-btn{font-size:12px;color:#7a7f87;white-space:nowrap;padding:5px}.text-btn:hover{color:var(--orange)}.stage{position:relative;background-color:var(--blue);background-image:radial-gradient(#8394ac40 .8px,transparent .8px);background-size:17px 17px;min-height:565px;display:flex;align-items:center;flex-direction:column;justify-content:center;padding:28px 25px 24px;gap:19px}.canvas-wrap{position:relative;flex-shrink:0;box-shadow:0 15px 40px #243a5426;max-width:100%;background:#fff;transform:rotate(-1.7deg);border:9px solid #fff;border-radius:3px}canvas{display:block;width:100%;height:auto;touch-action:none;cursor:crosshair}.target{position:absolute;border:1.5px dashed #fff;border-radius:50%;box-shadow:0 0 0 1px #20232930,inset 0 0 0 1px #20232920;pointer-events:none;transform:translate(-50%,-50%)}.target:after,.target:before{content:"";position:absolute;left:50%;top:50%;background:white;box-shadow:0 0 1px #333}.target:before{width:13px;height:1px;transform:translate(-50%,-50%)}.target:after{width:1px;height:13px;transform:translate(-50%,-50%)}.target span{position:absolute;left:50%;bottom:-23px;transform:translateX(-50%);font-size:9px;white-space:nowrap;color:#fff;background:#2023299e;padding:3px 6px;border-radius:4px}.stage-help{font-size:11px;color:#62738a;display:flex;align-items:center;gap:6px}.stage-help span{font-size:18px}.stage-spark{position:absolute;font-size:38px;z-index:1;color:var(--orange);pointer-events:none}.s1{top:32px;right:27px;transform:rotate(10deg)}.s2{bottom:71px;left:27px;font-size:24px}.original-label{position:absolute;left:10px;top:10px;background:#242830cb;color:white;padding:5px 10px;font-size:12px;border-radius:6px}.editor-bottom{height:65px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;gap:10px}.secondary{font-size:12px;border:1px solid #e4e5e8;border-radius:7px;padding:8px 12px}.secondary.active{color:var(--orange);border-color:var(--orange)}#dimensions{font-size:10px;color:#9a9ea6;font-variant-numeric:tabular-nums}.controls{padding-top:2px}.control-section{border-bottom:1px solid var(--line);padding:21px 0}.upload-section{padding-top:4px}.section-title{display:flex;align-items:center;gap:9px;margin-bottom:15px}h2{font-size:15px;margin:0;font-weight:700;letter-spacing:.2px}.step{font-size:10px;display:grid;place-items:center;width:21px;height:21px;border:1px solid #dfe1e6;border-radius:50%;color:#9296a0}.section-aside{margin-left:auto;font-size:10px;color:#9296a0}.upload-actions{display:flex;gap:10px}.upload-btn{flex:1;background:var(--ink);color:#fff;border-radius:9px;height:44px;font-size:13px;font-weight:600}.upload-btn span{font-size:19px;margin-right:4px}.camera-btn{border:1px solid #e0e2e7;border-radius:9px;padding:0 13px;font-size:12px;background:#fff}.hint{font-size:10px;color:#9397a0;margin:10px 0 0;line-height:1.6}.effects{display:grid;grid-template-columns:1fr 1fr;gap:9px}.effect{background:#fff;border:1px solid #e5e6ea;border-radius:11px;display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 8px 11px;transition:background .15s,border .15s;position:relative}.effect:hover{border-color:#ff9e89}.effect.selected{border-color:var(--orange);background:#fff2ed}.effect.selected:after{content:"✓";position:absolute;top:6px;right:7px;color:var(--orange);font-size:11px}.effect b{font-size:12px;font-weight:600}.effect small{font-size:10px;color:#97959a}.effect-face{font-size:37px;line-height:1.15;color:#ef9145;display:block;font-family:Arial,sans-serif;font-weight:400}.f-bulge{transform:scale(1.08)}.f-stretch{transform:scale(.75,1.1)}.f-squash{transform:scale(1.2,.75)}.f-twist{transform:rotate(-29deg);color:#6e84bd}.range-label{display:flex;align-items:center;justify-content:space-between;font-size:11px;margin-top:20px;margin-bottom:7px}.range-label output{color:var(--orange);font-size:11px;font-weight:600}.range-label.compact{margin-top:13px}input[type=range]{width:100%;height:18px;margin:0;accent-color:var(--orange);cursor:pointer}.range-scale{display:flex;justify-content:space-between;font-size:9px;color:#9b9ea6;margin-top:2px}.stickers{display:flex;gap:8px}.stickers button{display:flex;align-items:center;justify-content:center;gap:7px;flex:1;padding:9px 5px;border:1px solid #e2e4e8;border-radius:8px;background:#fff;font-size:11px}.stickers button span{font-size:17px}.stickers button[aria-pressed=true]{border-color:var(--orange);background:#fff2ed;color:var(--orange)}.caption-label{display:flex;gap:8px;font-size:11px;margin-top:17px;margin-bottom:8px}.caption-label span{color:#aaa}.caption-input{width:100%;border:1px solid #e1e3e7;border-radius:8px;padding:11px 12px;background:#fff;font-size:11px;color:var(--ink)}.caption-input::placeholder{color:#a3a7af}.download-btn{width:100%;border-radius:10px;background:var(--orange);color:white;padding:16px 20px;font-weight:650;font-size:14px;margin-top:21px;box-shadow:0 5px 11px #ff58351a;display:flex;justify-content:center;gap:8px;align-items:center}.download-btn:hover{background:#ed4928}.download-btn span{margin-left:auto;font-size:9px;font-weight:400;opacity:.75;border:1px solid #ffffff55;border-radius:3px;padding:2px 4px}.download-note{font-size:10px;color:#9598a0;text-align:center;margin:10px 0 0}footer{display:flex;justify-content:space-between;padding:26px 0 24px;gap:20px;color:#9a9ea7;font-size:10px}footer span:last-child{font-size:8px;letter-spacing:1.7px}.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);padding:13px 22px;color:white;background:#232830;border-radius:10px;font-size:13px;z-index:10;max-width:90%;box-shadow:0 5px 30px #0002;text-align:center}.drop-hint{position:absolute;inset:0;background:#fff2edf5;border:3px dashed var(--orange);z-index:5;place-items:center;font-weight:700;font-size:20px;color:var(--orange)}.drop-hint:not([hidden]){display:grid}[hidden]{display:none!important}@media(min-width:1400px){.intro{padding-top:48px}.stage{min-height:595px}}@media(max-width:900px){main{padding:0 24px}.topbar{padding:0 24px}.workspace{grid-template-columns:minmax(0,1fr) 310px;gap:20px}.stage{min-height:560px;padding:23px 18px}.intro h1{font-size:30px}}@media(max-width:730px){.topbar{height:70px;padding:0 20px}.brand{font-size:22px;gap:9px}.brand-note{display:none}.local-note{font-size:9px}.brand-face{width:33px;height:33px;font-size:27px}main{padding:0 18px}.intro{padding:27px 0 23px}h1,.intro h1{font-size:26px}.intro p{font-size:11px}.eyebrow{font-size:8px;letter-spacing:1.9px}.intro-doodle{font-size:50px;margin-right:4px}.workspace{grid-template-columns:1fr;gap:24px}.stage{min-height:420px;padding:25px 21px 18px}.editor-top{padding:14px 15px;font-size:11px}.editor-bottom{padding:0 13px;height:57px}.controls{padding:0 3px}.control-section{padding:20px 0}.upload-section{padding-top:0}.effects{grid-template-columns:repeat(4,1fr);gap:7px}.effect{padding:10px 3px}.effect small{font-size:9px}.effect b{font-size:11px}.effect-face{font-size:34px}.range-label{font-size:12px}.download-btn{padding:18px;font-size:15px}footer{line-height:1.8;padding-top:26px}footer span:last-child{display:none}.s1{right:14px;top:21px;font-size:27px}.s2{left:14px;font-size:20px}.canvas-wrap{border-width:7px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Independent layers: picture style, local distortion, and accessories. */
.styles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.style-choice{display:flex;flex-direction:column;gap:7px;align-items:center;padding:11px 3px;border:1px solid #e1e4e9;border-radius:9px;background:#fff;min-width:0}
.style-choice>span{height:25px;display:grid;place-items:center;font-size:23px;color:#8592ab;font-weight:500}
.style-choice b{font-size:10px;font-weight:550;white-space:nowrap}
.style-choice:hover{border-color:#9caedf}
.style-choice.selected{border-color:#6279c7;background:#eef2ff;color:#405aa7}
.style-choice.selected>span{color:#6279c7}
.style-choice[data-style=cartoon]>span{color:#f39145}
.style-choice[data-style=sketch]>span{color:#5b5a59}
.style-choice[data-style=pop]>span{color:#eb568a}
.style-choice[data-style=watercolor]>span{color:#729fb4}
.style-choice[data-style=retro]>span{color:#ad8057}
.style-choice.dog-style>span{font-size:20px;color:#a78345}
.effects{grid-template-columns:repeat(3,minmax(0,1fr))}
.effect small{font-size:9px}
.stickers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.stickers button{font-size:10px;gap:5px;padding:9px 4px;min-width:0}
.stickers button span{font-size:15px}
.sticker-category{font-size:10px;color:#898c96;margin:15px 0 9px}
.sticker-category:first-of-type{margin-top:0}
@media(min-width:731px){.editor{position:sticky;top:20px}}
@media(max-width:730px){.style-choice{padding:13px 3px}.style-choice b{font-size:11px}.effects{grid-template-columns:repeat(3,minmax(0,1fr))}.effect b{font-size:12px}.stickers button{font-size:11px;padding:12px 4px}.stickers button span{font-size:17px}.sticker-category{font-size:11px}}
