:root{font-family:Inter,'Segoe UI','Malgun Gothic',sans-serif;font-synthesis:none;color:#293c30;background:#f7f9f6;color-scheme:light}*{box-sizing:border-box}body{margin:0}button{font:inherit;cursor:pointer;border:0;touch-action:manipulation}button:focus-visible{outline:3px solid #94ad84;outline-offset:5px}button:disabled{opacity:.5;cursor:wait}[hidden]{display:none!important}.front{min-height:100svh;display:flex;align-items:center;justify-content:center;position:relative;padding:60px 24px 100px}.start{text-align:center;margin-top:-4vh}.logo{display:block;width:240px;height:110px;object-fit:contain;margin:0 auto 20px}h1{font-size:15px;font-weight:400;letter-spacing:-.35px;margin:0 0 39px;color:#77816f}.primary{display:inline-flex;align-items:center;justify-content:center;gap:30px;background:#d9ebce;color:#365135;font-size:13px;font-weight:500;padding:16px 23px;border-radius:11px;box-shadow:inset 0 1px 0 #ffffff80;transition:background .15s}.primary:hover{background:#cde2c0}.primary span{font-size:19px;line-height:16px;font-weight:400}.formats{font-size:9px;letter-spacing:1px;color:#a0a898;margin:15px 0 0}.privacy{position:absolute;bottom:28px;left:0;right:0;text-align:center;font-size:10px;color:#9ca494;margin:0}.editor{height:100svh;display:flex;flex-direction:column;background:#eff3ed}.editor-header{height:80px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#f7f9f6;border-bottom:1px solid #e2e8de}.back{display:flex;align-items:center;gap:11px;background:none;color:#6e7c65;font-size:12px;padding:10px 0}.back span{font-size:21px;line-height:16px}.save{padding:12px 21px;gap:25px;border-radius:9px;font-size:12px}.save span{font-size:17px}.stage{overflow:auto;flex:1;padding:40px 28px 76px;overscroll-behavior:contain;scrollbar-color:#c2cdba transparent}.image-wrap{position:relative;margin:0 auto;max-width:100%;box-shadow:0 9px 35px #30442610;line-height:0}canvas{width:100%;height:auto;display:block;cursor:crosshair;touch-action:pan-y;user-select:none;-webkit-user-select:none}.stroke{position:absolute;border:1px solid #759665;background:#c4dbb378;pointer-events:none}.hint{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);font-size:11px;color:#7a896e;background:#f7f9f6ef;border:1px solid #e0e7d9;border-radius:30px;padding:10px 20px;margin:0;text-align:center;white-space:nowrap;pointer-events:none;transition:opacity .25s}.hint.faded{opacity:0}#toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,15px);background:#2d3e30f5;color:#f4f8ef;border-radius:10px;padding:12px 22px;font-size:12px;max-width:90%;text-align:center;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;z-index:5}#toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:600px){.logo{width:205px;height:94px;margin-bottom:18px}.start{margin-top:-3vh}h1{font-size:13px;margin-bottom:33px}.primary{font-size:12px;padding:15px 21px;gap:27px}.formats{font-size:8px}.privacy{font-size:9px;bottom:25px}.editor-header{height:67px;padding:0 20px}.back{font-size:11px;gap:8px}.save{font-size:11px;padding:11px 17px;gap:20px}.stage{padding:25px 14px 75px}.hint{font-size:10px;padding:9px 15px;bottom:20px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@media(prefers-color-scheme:dark){
 :root{color-scheme:dark;color:#e4edde;background:#131b17}
 h1{color:#a5b19e}.formats,.privacy{color:#87967e}
 .primary{background:#bed5ae;color:#263f28;box-shadow:inset 0 1px 0 #e7f5dd40}
 .primary:hover{background:#cce1bd}button:focus-visible{outline-color:#bbd3a9}
 .editor{background:#0e1611}.editor-header{background:#131b17;border-bottom-color:#2b392e}
 .back{color:#b0bda7}.stage{scrollbar-color:#485c41 transparent}
 .image-wrap{box-shadow:0 9px 35px #00000038}
 .stroke{border-color:#bfdcae;background:#b6d09d55}
 .hint{color:#b9c8ad;background:#1c2a20f2;border-color:#364831}
 #toast{background:#d9ebcef5;color:#293e2c}
}

.editor-actions{display:flex;align-items:center;gap:12px}button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.back span{font-size:12px}.tool{display:flex;align-items:center;justify-content:center;width:38px;height:38px;background:transparent;color:#718367;border-radius:9px}.tool:hover{background:#e8eee3}.tool:disabled{cursor:default;opacity:.3}.magnet[aria-pressed=true]{background:#e0ecd6;color:#557348;box-shadow:inset 0 0 0 1px #c7d9ba}.save{gap:14px}.stage,canvas{touch-action:none}.image-wrap{max-width:none}.loupe{position:fixed;width:172px;height:92px;padding:3px;border-radius:18px;border:1px solid #ffffffc0;background:#f5f8f0;box-shadow:0 6px 24px #162b2438,0 1px 4px #162b2426;pointer-events:none;z-index:8;overflow:hidden}.loupe canvas{width:100%;height:100%;border-radius:14px}.stage{overflow-anchor:none}
@media(max-width:600px){.editor-header{padding:0 15px}.editor-actions{gap:8px}.back span{font-size:11px}.tool{width:34px;height:36px}.save{padding:10px 14px;gap:10px}.back{gap:5px}}
@media(prefers-color-scheme:dark){.tool{color:#a9bc9b}.tool:hover{background:#263629}.magnet[aria-pressed=true]{background:#31462d;color:#c6ddb4;box-shadow:inset 0 0 0 1px #4b6341}.loupe{background:#24352a;border-color:#647d5770}}

html,body{touch-action:none;overscroll-behavior:none}body{overflow:hidden}.loupe{width:216px;height:100px}

@media(max-width:600px){.stage{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}}
.discard-dialog{width:min(360px,calc(100vw - 40px));margin:auto;border:1px solid #dbe4d4;border-radius:18px;padding:26px;background:#f7f9f6;color:#293c30;box-shadow:0 16px 60px #14241630}.discard-dialog::backdrop{background:#15221866;backdrop-filter:blur(3px)}.discard-dialog h2{margin:0 0 12px;font-size:18px;font-weight:600}.discard-dialog p{margin:0;color:#6e7c65;font-size:13px;line-height:1.7;word-break:keep-all}.discard-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}.discard-actions button{padding:12px 16px;font-size:13px;border-radius:10px}.dialog-secondary{background:#e8eee3;color:#4d6143}@media(prefers-color-scheme:dark){.discard-dialog{background:#1c2a20;color:#e4edde;border-color:#3a4c34}.discard-dialog p{color:#b0bda7}.dialog-secondary{background:#2b3e28;color:#c6ddb4}.discard-dialog::backdrop{background:#050b0877}}
