:root{--ink:#2b1a1f;--berry:#e8344e;}
*{box-sizing:border-box}
body{margin:0;font-family:Fredoka,sans-serif;color:var(--ink);background:#fff6ea;min-height:100vh}
header{text-align:center;padding:24px 16px 4px}
h1{font-size:40px;margin:0;font-weight:600}
header p{margin:6px 0 0}
main{max-width:640px;margin:0 auto;padding:16px;display:flex;flex-direction:column;gap:16px}
.card{background:#fff;border-radius:16px;padding:16px;border:1px solid #eadbd0}
.hidden{display:none}
.drop{display:block;border:2px dashed var(--berry);border-radius:12px;padding:40px 16px;text-align:center;cursor:pointer}
.drop.over{background:#fff1f3}
.drop-big{font-size:22px;font-weight:600}
.crop-wrap,.stage-wrap{display:flex;justify-content:center}
#cropCanvas{max-width:100%;touch-action:none;cursor:move}
#canvas{width:100%;max-width:600px;aspect-ratio:1;border-radius:10px;border:1px solid #eadbd0}
.row{display:flex;gap:10px;margin-top:14px}
.row.center{justify-content:center}
.btn{font-family:inherit;font-size:15px;border:1px solid var(--ink);background:#fff;padding:9px 16px;border-radius:10px;cursor:pointer}
.btn:active{transform:translateY(2px)}
.btn.primary{background:var(--berry);color:#fff;border-color:var(--berry)}
.btn.big{font-size:18px;min-width:130px}
footer{text-align:center;padding:20px}
footer a{color:var(--berry)}