:root { --ink:#16211b; --muted:#657168; --paper:#f7f5ef; --card:#fffefa; --line:#d9ddd4; --accent:#e85d2a; --accent-dark:#bf421b; --green:#26725a; }
* { box-sizing:border-box; }
body { margin:0; font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:linear-gradient(120deg,#edf2e9 0%,var(--paper) 50%,#f7efe5 100%); color:var(--ink); }
.shell { width:min(100% - 32px, 980px); margin:auto; padding:22px 0 54px; }
.masthead { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.brand { color:var(--ink); text-decoration:none; font-weight:760; letter-spacing:-.03em; }
.local-badge { color:var(--green); background:#e4f2e9; border:1px solid #b7ddc3; padding:6px 10px; border-radius:999px; font-size:.8rem; font-weight:700; }
.hero { padding:58px 0 28px; max-width:720px; }
.eyebrow { color:var(--accent-dark); font-size:.75rem; letter-spacing:.12em; font-weight:800; margin:0 0 12px; }
h1 { font-size:clamp(2.15rem,7vw,4.5rem); line-height:.98; letter-spacing:-.065em; margin:0; }
.lede { color:var(--muted); font-size:1.1rem; line-height:1.55; max-width:620px; margin:20px 0 0; }
.privacy { display:flex; align-items:center; flex-wrap:wrap; gap:7px; background:#e6f5ed; border:1px solid #bddfc9; padding:13px 16px; border-radius:12px; font-size:.93rem; }
.privacy span:first-child { color:var(--green); font-size:1.35rem; }
.tool { margin-top:22px; background:var(--card); border:1px solid var(--line); box-shadow:0 16px 48px rgba(31,43,34,.08); border-radius:20px; overflow:hidden; }
.steps { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--line); }
.steps span { color:var(--muted); padding:15px 12px; font-size:.82rem; border-right:1px solid var(--line); text-align:center; }
.steps span:last-child { border:0; }
.steps b { color:var(--accent); margin-right:4px; }
.drop-zone { min-height:390px; display:grid; place-content:center; text-align:center; padding:38px 20px; border:2px dashed #cdd5ca; margin:22px; border-radius:15px; background:#fbfcf8; }
.drop-icon { margin:auto; display:grid; place-items:center; width:48px; height:48px; color:var(--accent); border:1px solid #f1b49c; background:#fff0e9; border-radius:50%; font-size:1.65rem; }
.drop-zone h2 { margin:14px 0 6px; letter-spacing:-.04em; }
.drop-zone p { color:var(--muted); margin:0 0 18px; font-size:.9rem; }
.tiny { margin-top:15px!important; font-size:.78rem!important; }
button { border:0; cursor:pointer; font:inherit; font-weight:760; border-radius:10px; min-height:45px; padding:0 17px; }
button:focus-visible,input:focus-visible { outline:3px solid #f3b9a3; outline-offset:3px; }
.primary { color:white; background:var(--accent); box-shadow:0 4px 0 var(--accent-dark); }
.primary:hover { background:var(--accent-dark); }
.primary:disabled { cursor:not-allowed; opacity:.55; box-shadow:none; }
.secondary { color:var(--ink); background:#eff1eb; border:1px solid #d8ddd5; }
.editor { padding:22px; }
.canvas-wrap { position:relative; display:grid; place-items:center; max-height:min(62vh,620px); overflow:hidden; background:#eef0eb; border-radius:13px; touch-action:none; }
canvas { display:block; max-width:100%; max-height:min(62vh,620px); }
#maskCanvas { position:absolute; inset:0; width:100%; height:100%; cursor:crosshair; touch-action:none; }
.controls { padding-top:18px; }
.control-group label { display:flex; justify-content:space-between; font-size:.9rem; font-weight:700; }
output { color:var(--accent-dark); font-variant-numeric:tabular-nums; }
input[type="range"] { width:100%; accent-color:var(--accent); margin-top:9px; }
.instruction { color:var(--muted); line-height:1.45; font-size:.91rem; }
.button-row { display:flex; flex-wrap:wrap; gap:10px; }
.status { min-height:46px; margin:0; padding:0 22px 18px; color:var(--accent-dark); font-weight:650; }
.truth { margin:30px 4px 0; color:var(--muted); max-width:760px; line-height:1.58; }
.truth h2 { color:var(--ink); letter-spacing:-.035em; margin-bottom:6px; }
code { color:var(--ink); background:#ecefe8; padding:2px 5px; border-radius:4px; }
.hidden { display:none!important; }
@media (max-width:620px) { .shell { width:min(100% - 20px,980px); padding-top:13px; } .hero { padding:38px 0 22px; } .steps { grid-template-columns:repeat(2,1fr); } .steps span:nth-child(2) { border-right:0; } .steps span:nth-child(-n+2) { border-bottom:1px solid var(--line); } .drop-zone { min-height:310px; margin:12px; } .editor { padding:12px; } .button-row button { flex:1 1 140px; } }