:root { --bg:#f6f7f4; --fg:#182016; --muted:#5d6858; --line:#dfe4d9; --surface:#fff; --accent:#4f8a10; --accent-fg:#fff; --bad:#b0372d; }
@media (prefers-color-scheme: dark) { :root { --bg:#12160f; --fg:#e9eee4; --muted:#9aa594; --line:#2b3326; --surface:#1a2016; --accent:#9bd24a; --accent-fg:#12160f; --bad:#f08a7e; color-scheme: dark; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:17px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; }
.top { padding:14px 16px; }
.logo { color:var(--fg); text-decoration:none; font-size:20px; letter-spacing:-.01em; }
.logo b { color:var(--accent); }
main { max-width:720px; margin:0 auto; padding:8px 16px 64px; display:grid; gap:16px; }
h1 { margin:0; font-size:32px; line-height:1.15; text-wrap:balance; }
.lead { margin:0; color:var(--muted); }
.drop { border:2px dashed var(--line); border-radius:16px; background:var(--surface); padding:36px 16px; display:grid; gap:10px; justify-items:center; text-align:center; }
.drop.over { border-color:var(--accent); }
.btn { display:inline-block; border:0; border-radius:12px; background:var(--accent); color:var(--accent-fg); font:600 17px/1 inherit; padding:15px 22px; cursor:pointer; text-decoration:none; text-align:center; }
.btn:focus-visible, input:focus-visible, .link:focus-visible { outline:2px solid var(--fg); outline-offset:2px; }
.hint { margin:0; font-size:14px; color:var(--muted); }
.msg { margin:0; min-height:1.5em; color:var(--bad); }
.msg.busy { color:var(--muted); }
#result { display:grid; gap:12px; }
#result[hidden] { display:none; }
.cmp { position:relative; border-radius:12px; overflow:hidden; background:#000; line-height:0; touch-action:pan-y; }
.cmp img { width:100%; height:auto; display:block; }
.clip { position:absolute; inset:0; overflow:hidden; width:50%; border-right:2px solid #fff; }
.clip img { width:auto; height:100%; max-width:none; }
.cmp input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; margin:0; }
.tag { position:absolute; top:8px; font-size:12px; line-height:1; padding:5px 8px; border-radius:6px; background:rgba(0,0,0,.55); color:#fff; pointer-events:none; }
.tag.l { left:8px; } .tag.r { right:8px; }
.pay { display:grid; gap:10px; }
.pay[hidden], .btn[hidden] { display:none; }
.pay input[type=email] { font:inherit; padding:13px 14px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--fg); width:100%; }
.chk { font-size:14px; color:var(--muted); display:flex; gap:8px; align-items:flex-start; }
.link { background:none; border:0; padding:0; color:var(--muted); font:inherit; font-size:15px; text-decoration:underline; cursor:pointer; }

/* legal pages and footer */
.doc { max-width: 720px; text-align: left; line-height: 1.55; }
.doc h2 { font-size: 1.1rem; margin: 1.4em 0 .4em; }
.doc ul, .doc ol { padding-left: 1.2em; }
.foot { max-width: 720px; margin: 2.5rem auto 1.5rem; padding: 0 16px; font-size: .82rem; color: #6b7280; text-align: center; }
.foot a { color: inherit; }

/* example and description under the tool */
.about { text-align:left; margin-top:2.5rem; line-height:1.55; }
.about h2 { font-size:1.15rem; margin:1.6em 0 .5em; }
.about ul { padding-left:1.2em; margin:0; }
.demo { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.demo figure { margin:0; }
.demo img { width:100%; height:auto; display:block; border-radius:10px; }
.demo figcaption { font-size:13px; color:var(--muted); text-align:center; margin-top:4px; }
@media (max-width:520px) { .demo { grid-template-columns:1fr; } }