@font-face{font-family:"EB Garamond";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/ebgaramond-latin-400.woff2) format("woff2")}
@font-face{font-family:"EB Garamond";font-weight:400;font-style:italic;font-display:swap;src:url(../fonts/ebgaramond-latin-400i.woff2) format("woff2")}
@font-face{font-family:"EB Garamond";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/ebgaramond-latin-600.woff2) format("woff2")}
/* Recoleta is a commercial font and cannot be bundled. If you own a licence, drop the files in /fonts and they are picked up automatically.
   Until then, Fraunces (open source, SIL OFL) is used as a close soft-serif stand-in. */
@font-face{font-family:"Recoleta";font-weight:600;font-display:swap;src:local("Recoleta SemiBold"),local("Recoleta-SemiBold"),url(../fonts/Recoleta-SemiBold.woff2) format("woff2"),url(../fonts/fraunces-latin-600.woff2) format("woff2")}
@font-face{font-family:"Recoleta";font-weight:400;font-display:swap;src:local("Recoleta Regular"),local("Recoleta-Regular"),url(../fonts/Recoleta-Regular.woff2) format("woff2"),url(../fonts/fraunces-latin-400.woff2) format("woff2")}

:root{
  --cream:#f7f0e4;--paper:#fffaf1;--sand:#eadcc3;--sand-d:#d8c5a3;
  --brown:#3a2a1f;--brown-l:#6b5444;--terra:#b5532f;--terra-d:#8f3e20;
  --olive:#6c7a3b;--olive-l:#e4e7c9;--ochre:#d49a3a;
  --radius:16px;--shadow:0 6px 24px rgba(90,60,30,.12);
  --head:"Recoleta","Fraunces",Georgia,serif;--body:"EB Garamond",Georgia,serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--brown);font:400 1.2rem/1.55 var(--body);
  background-image:radial-gradient(circle at 10% 0,#fff6e2 0,transparent 40%),radial-gradient(circle at 100% 30%,#f1e3c8 0,transparent 35%)}
h1,h2,h3,.logo{font-family:var(--head);font-weight:600;line-height:1.15;color:var(--brown);margin:0 0 .5em}
h1{font-size:clamp(2.1rem,5vw,3.3rem)}h2{font-size:clamp(1.5rem,3vw,2.1rem)}h3{font-size:1.25rem}
a{color:var(--terra-d)}a:hover{color:var(--terra)}
.wrap{max-width:1080px;margin:0 auto;padding:0 1.25rem}
header.site{position:sticky;top:0;z-index:20;background:rgba(247,240,228,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--sand)}
header.site .wrap{display:flex;align-items:center;gap:1rem;height:64px}
.logo{display:flex;align-items:center;gap:.5rem;font-size:1.5rem;text-decoration:none;color:var(--brown)}
.logo svg{width:32px;height:32px}
nav.main{margin-left:auto;display:flex;gap:1.25rem;align-items:center}
nav.main a{text-decoration:none;color:var(--brown-l)}nav.main a:hover{color:var(--terra)}
.chip{background:var(--olive-l);color:#3f4a1c;border-radius:999px;padding:.15rem .8rem;font-size:1rem;text-decoration:none;white-space:nowrap}
.hero{padding:3.5rem 0 2rem;text-align:center}
.hero p.lead{max-width:640px;margin:0 auto 1rem;font-size:1.35rem;color:var(--brown-l)}
.badges{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:1rem}
.badges span{background:var(--paper);border:1px solid var(--sand-d);border-radius:999px;padding:.2rem .9rem;font-size:1rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:1.1rem;margin:1.5rem 0 3rem}
.card{display:block;background:var(--paper);border:1px solid var(--sand);border-radius:var(--radius);padding:1.2rem;text-decoration:none;color:var(--brown);box-shadow:var(--shadow);transition:transform .15s,border-color .15s}
.card:hover{transform:translateY(-3px);border-color:var(--terra);color:var(--brown)}
.card .ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:1.5rem;margin-bottom:.6rem;background:var(--c,var(--terra));color:#fff}
.card h3{margin-bottom:.25rem}.card p{margin:0;color:var(--brown-l);font-size:1.05rem;line-height:1.35}
.tool-head{padding:2.5rem 0 1rem;text-align:center}
.tool-head p{max-width:620px;margin:0 auto;color:var(--brown-l);font-size:1.3rem}
.crumbs{font-size:1rem;color:var(--brown-l);margin-bottom:.5rem}.crumbs a{color:var(--brown-l)}
.panel{background:var(--paper);border:1px solid var(--sand);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.5rem;margin:1rem 0}
.drop{border:2.5px dashed var(--sand-d);border-radius:var(--radius);padding:2.5rem 1rem;text-align:center;cursor:pointer;background:#fdf5e6;transition:.15s}
.drop.over,.drop:hover{border-color:var(--terra);background:#fbeedb}
.drop strong{font-family:var(--head);font-size:1.4rem;display:block}
.drop small{color:var(--brown-l);font-size:1.05rem}
.btn{display:inline-block;border:0;border-radius:999px;padding:.65rem 1.6rem;font:600 1.15rem var(--body);cursor:pointer;background:var(--terra);color:#fff;text-decoration:none;box-shadow:0 3px 0 var(--terra-d)}
.btn:hover{background:var(--terra-d);color:#fff}.btn:active{transform:translateY(2px);box-shadow:none}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.alt{background:var(--olive);box-shadow:0 3px 0 #4e5a28}.btn.alt:hover{background:#4e5a28}
.btn.ghost{background:transparent;color:var(--brown);border:1.5px solid var(--sand-d);box-shadow:none}
.btn.ghost:hover{background:var(--sand)}
.btn.sm{padding:.2rem .8rem;font-size:1rem;box-shadow:none}
.files{list-style:none;margin:1rem 0;padding:0;display:grid;gap:.5rem}
.files li{display:flex;align-items:center;gap:.7rem;background:#fff;border:1px solid var(--sand);border-radius:12px;padding:.5rem .8rem}
.files li.dragging{opacity:.4}
.files .name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.files .meta{color:var(--brown-l);font-size:1rem}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin:1rem 0}
.opts label{display:block;font-weight:600;margin-bottom:.2rem}
.opts input[type=text],.opts input[type=number],.opts select{width:100%;padding:.5rem .7rem;border:1.5px solid var(--sand-d);border-radius:10px;background:#fff;font:inherit;color:var(--brown)}
.opts input[type=color]{width:60px;height:38px;border:1.5px solid var(--sand-d);border-radius:10px;background:#fff}
.opts small{display:block;color:var(--brown-l);font-size:.95rem;line-height:1.25}
.actions{text-align:center;margin-top:1rem}
.status{text-align:center;margin:.8rem 0;color:var(--brown-l);min-height:1.5em}
.status.err{color:#a3231a}
progress{width:100%;height:10px;accent-color:var(--terra)}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.8rem;margin:1rem 0}
.thumb{background:#fff;border:1px solid var(--sand);border-radius:12px;padding:.5rem;text-align:center;font-size:.95rem;cursor:grab}
.thumb.del{opacity:.35}.thumb.dragging{opacity:.4}
.thumb .pic{height:130px;display:grid;place-items:center;overflow:hidden}
.thumb canvas{max-width:100%;max-height:130px;box-shadow:0 1px 6px rgba(0,0,0,.2);transition:transform .2s}
.thumb .tb{display:flex;gap:.25rem;justify-content:center;margin-top:.3rem}
.result{display:flex;gap:.8rem;align-items:center;padding:.5rem 0;border-bottom:1px dashed var(--sand-d)}
.result .name{flex:1;overflow:hidden;text-overflow:ellipsis}
.donate{background:linear-gradient(135deg,#fbefd5,#f4e1bd);border:1px solid var(--sand-d);border-radius:var(--radius);padding:1.2rem 1.5rem;margin-top:1.2rem;text-align:center}
.donate h3{margin-bottom:.3rem}.donate p{margin:.3rem 0}
.donate .row{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:.7rem}
.prose{max-width:760px;margin:2.5rem auto}
.prose ol{padding-left:1.4rem}.prose li{margin:.3rem 0}
details{background:var(--paper);border:1px solid var(--sand);border-radius:12px;padding:.6rem 1rem;margin:.5rem 0}
summary{cursor:pointer;font-weight:600}
.tags{display:flex;flex-wrap:wrap;gap:.5rem}.tags a{background:var(--sand);border-radius:999px;padding:.15rem .9rem;text-decoration:none;color:var(--brown)}
.tags a:hover{background:var(--terra);color:#fff}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem;margin:2rem 0}
.features div{padding:1rem}
footer.site{border-top:1px solid var(--sand);margin-top:3rem;padding:2rem 0;color:var(--brown-l);font-size:1.05rem}
footer.site .wrap{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between}
footer.site a{color:var(--brown-l);margin-right:1rem}
footer.site .wrap>div{min-width:0;max-width:100%}
footer.site .wrap>div:last-child a{overflow-wrap:anywhere}
[hidden]{display:none!important}
@media(max-width:640px){nav.main a.hide-s{display:none}}

/* ---- software-style shell ---- */
header.site .bar{display:flex;align-items:center;gap:.4rem;height:44px;padding:0 .8rem}
header.site .logo{font-size:1.15rem;margin-right:.6rem}
header.site .logo svg{width:24px;height:24px}
.menus{display:flex;gap:.1rem}
.menu{position:relative}
.menu>button{background:none;border:0;border-radius:6px;padding:.2rem .7rem;font:inherit;font-size:1.05rem;color:var(--brown);cursor:pointer}
.menu:hover>button,.menu:focus-within>button{background:var(--sand)}
.menu .dd{display:none;position:absolute;left:0;top:100%;min-width:200px;background:var(--paper);border:1px solid var(--sand-d);border-radius:10px;box-shadow:var(--shadow);padding:.3rem;z-index:30}
.menu:hover .dd,.menu:focus-within .dd{display:block}
.menu .dd a{display:block;padding:.25rem .7rem;border-radius:6px;text-decoration:none;color:var(--brown);font-size:1.05rem;white-space:nowrap}
.menu .dd a:hover{background:var(--terra);color:#fff}
header.site nav.main a{font-size:1.05rem}
body.shell{display:flex;flex-direction:column;min-height:100vh}
.app{display:flex;min-height:calc(100vh - 44px - 28px)}
.rail{width:168px;flex:none;background:var(--sand);border-right:1px solid var(--sand-d);display:flex;flex-direction:column;align-items:stretch;gap:.15rem;padding:.6rem .5rem}
.rail a{height:44px;border-radius:10px;display:flex;align-items:center;gap:.7rem;padding:0 .7rem;text-decoration:none;font-size:1.15rem;color:var(--brown)}.rail .ri{width:1.6rem;text-align:center;font-size:1.35rem}.rail .rl{font-weight:600}
.rail a:hover{background:var(--paper)}
.rail a.active{color:#fff;background:var(--terra);box-shadow:0 2px 0 var(--terra-d)}
.work{flex:1;min-width:0;max-width:860px;margin:0 auto;padding:.8rem 1.2rem 1.5rem}
.titlebar{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.3rem;border-bottom:1px solid var(--sand);padding-bottom:.4rem}
.titlebar h1{font-size:1.35rem;margin:0}
.titlebar p{margin:0;color:var(--brown-l);font-size:1.05rem;max-width:640px;line-height:1.35}
.work .panel{margin:.8rem 0}
.work .drop{padding:3rem 1rem}
.statusbar{height:28px;display:flex;gap:1.5rem;align-items:center;padding:0 .8rem;background:var(--sand);border-top:1px solid var(--sand-d);font-size:.95rem;color:var(--brown-l);position:sticky;bottom:0;z-index:10}
@media(max-width:640px){.statusbar span:nth-child(n+2){display:none}.menus .menu>button{padding:.2rem .4rem}}



@media(max-width:700px){.app{flex-direction:column;min-height:0}.rail{width:auto;flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--sand-d);padding:.4rem;gap:.3rem;position:sticky;top:44px;z-index:15;scrollbar-width:none}.rail::-webkit-scrollbar{display:none}.rail a{flex:none;height:56px;flex-direction:column;justify-content:center;gap:0;padding:0 .8rem;min-width:76px;text-align:center}.rail .ri{font-size:1.3rem;line-height:1.2}.rail .rl{font-size:.95rem}.work{padding:.6rem .8rem 1.2rem}.titlebar p{display:none}.statusbar{position:static}}


.welcome{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:rgba(58,42,31,.55);backdrop-filter:blur(3px);padding:1rem}
.wbox{background:var(--paper);border:2px solid var(--terra);border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.35);max-width:520px;width:100%;padding:1.8rem 2rem;text-align:center}
.wbox h2{font-size:1.9rem}
.wbox ul{list-style:none;padding:0;margin:1rem 0 1.4rem;text-align:left;font-size:1.25rem}
.wbox li{margin:.7rem 0;line-height:1.4}


.rail .ri{display:grid;place-items:center}.ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}


.rt{display:none}.rn{display:contents}
@media(max-width:700px){
.rail{flex-direction:column;align-items:stretch;overflow:visible;padding:.4rem .5rem;gap:.4rem;top:44px}
.rt{display:block;width:100%;border:1.5px solid var(--sand-d);background:var(--paper);color:var(--brown);border-radius:10px;padding:.5rem;font:600 1.1rem var(--body);cursor:pointer}
.rn{display:flex;gap:.3rem;overflow-x:auto;scrollbar-width:none}.rn::-webkit-scrollbar{display:none}
.rail.open .rn{flex-wrap:wrap;max-height:50vh;overflow-y:auto}
.rail.open .rn a{flex:1 0 30%;min-width:0}
.alltools{display:none}
}

.cookie-note{position:fixed;left:.8rem;bottom:2.4rem;z-index:50;max-width:380px;background:var(--paper);border:1px solid var(--sand-d);border-radius:14px;box-shadow:var(--shadow);padding:.7rem .9rem;font-size:1rem;line-height:1.35}
.cookie-note p{margin:0 0 .5rem}.cookie-note div{display:flex;gap:.5rem}
.cookie-note .btn.sm{padding:.2rem .9rem;box-shadow:none}
@media(max-width:700px){.cookie-note{left:.5rem;right:.5rem;max-width:none;bottom:.5rem}}

.statusbar{justify-content:center;gap:1rem}
.statusbar .ticker{width:min(560px,60vw);overflow:hidden;white-space:nowrap;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.tk{display:inline-flex;animation:tick 28s linear infinite}
.tk span{padding-right:3rem;display:inline-block}
.statusbar .ticker:hover .tk{animation-play-state:paused}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.statusbar .chip{padding:.05rem .8rem;font-size:.95rem;font-weight:600}

@media(max-width:700px){.statusbar span:nth-child(n+2){display:inline-block!important}.statusbar .ticker{width:auto;flex:1}}

header.site .bar{position:relative}.chip.dn{position:absolute;left:50%;transform:translateX(-50%);font-weight:600}
header.site nav.main{position:absolute;right:.8rem;top:50%;transform:translateY(-50%)}
/* on the app shell the donate chip centres over the work area, i.e. exactly above the tool */
@media(min-width:701px){body.shell header.site .chip.dn{left:calc(168px + (100% - 168px) / 2)}}
@media(max-width:700px){
header.site .chip.dn{left:auto;right:.5rem;top:50%;transform:translateY(-50%);font-size:.82rem;padding:.15rem .45rem}
header.site .logo{font-size:1.1rem;gap:.3rem;margin-right:6.5rem}
header.site .logo svg{width:24px;height:24px}
}

@media(max-width:700px){.statusbar .ticker{flex:none;width:100%}}


.thumb.ro{cursor:default}.thumb.ro span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thumb img{max-width:100%;max-height:130px;box-shadow:0 1px 6px rgba(0,0,0,.2)}
.thumbs .more{grid-column:1/-1;margin:0;color:var(--brown-l);text-align:center}
.prev{margin-top:.8rem}.prev small{color:var(--brown-l);font-size:1rem}
.txtprev{background:#fff;border:1px solid var(--sand);border-radius:12px;padding:.8rem;max-height:260px;overflow:auto;white-space:pre-wrap;font-size:.9rem;margin:.8rem 0}
.limits{margin:.6rem 0 0;color:var(--brown-l);font-size:1rem;text-align:center;line-height:1.35}.limits b{color:var(--brown)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1rem;margin:1.2rem 0}
.cards .card{padding:1rem;text-align:center}.cards .card .ico{margin:0 auto .6rem}.cards .card .ico .ic{width:24px;height:24px}
#home .features{margin:1.5rem 0 0}#home .features div{text-align:center}
@media(max-width:700px){.cards{grid-template-columns:1fr 1fr;gap:.6rem}.cards .card{padding:.7rem .5rem}.cards .card h3{font-size:1.1rem}.cards .card p{font-size:.95rem}}
@media(max-width:700px){
.panel{padding:.8rem;margin:.6rem 0;border-radius:14px}
.work .panel{padding:.8rem}
.drop{padding:1.4rem .7rem}
.drop strong{font-size:1.15rem}
.files{margin:.6rem 0;gap:.35rem}
.files li{min-width:0;gap:.35rem;padding:.35rem .45rem}
.files .name{min-width:0;font-size:.9rem}
.files .meta{font-size:.78rem;white-space:nowrap}
.files .btn.sm{padding:.15rem .45rem;font-size:.85rem}
.opts{grid-template-columns:minmax(0,1fr);gap:.65rem}
.result{min-width:0;gap:.4rem;font-size:.85rem}
.result .name{min-width:0;overflow-wrap:anywhere}
.result .meta{white-space:nowrap;font-size:.78rem}
.result .btn{flex:none;padding:.3rem .65rem;font-size:.9rem}
.prev .thumbs{display:flex;gap:.5rem;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:.15rem 0 .5rem;margin:.5rem 0;max-width:100%}
.prev .thumb{flex:0 0 82px;width:82px;min-width:0;padding:.3rem;font-size:.78rem;scroll-snap-align:start}
.prev .thumb .pic{height:78px}
.prev .thumb canvas,.prev .thumb img{max-width:100%;max-height:76px}
.prev .thumb span{font-size:.74rem}
.prev .thumb .tb{gap:.2rem}
.prev .thumb .tb .btn{padding:.1rem .4rem;font-size:.85rem}
.prev .thumbs .more{flex:0 0 auto;align-self:center;font-size:.8rem;white-space:normal}
.txtprev{max-width:100%;box-sizing:border-box}
.limits{text-align:left;font-size:.88rem}
}
.opts input[type=range]{width:100%;accent-color:var(--terra,#b5651d)}
.estimate{margin:.6rem 0;padding:.55rem .8rem;background:var(--sand,#f3e7d3);border-radius:10px;font-weight:600}
.tip-toast{position:fixed;left:50%;bottom:4.5rem;transform:translateX(-50%);z-index:60;max-width:min(92vw,28rem);padding:.8rem 1.1rem;background:var(--brown,#30251f);color:#fffaf1;border-radius:14px;box-shadow:0 8px 28px rgba(0,0,0,.3);font-weight:600;text-align:center}

.editor{margin:1rem 0}
.ed-bar{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.ed-tool.on{background:var(--terra,#b5532f);color:#fff;border-color:transparent}
.ed-sizel{display:flex;align-items:center;gap:.3rem;font-size:.9rem;margin-left:auto}
.ed-size{width:3.6rem;padding:.25rem .3rem}
.ed-hint{margin:.5rem 0;color:var(--brown-l);font-size:.92rem}
.ed-nav{display:flex;align-items:center;justify-content:center;gap:.8rem;margin:.4rem 0}
.ed-stage{position:relative;margin:0 auto;max-width:100%;background:#fff;box-shadow:0 4px 18px rgba(48,37,31,.25);border-radius:3px;touch-action:pan-y}
.ed-canvas{display:block;width:100%}
.ed-layer{position:absolute;inset:0;overflow:hidden}
.ed-stage.armed .ed-layer{cursor:crosshair;outline:3px dashed var(--terra,#b5532f);outline-offset:-3px;touch-action:none}
.ed-item{position:absolute;box-sizing:border-box;border:1px dashed transparent;touch-action:none}
.ed-item.sel,.ed-item:hover{border-color:var(--terra,#b5532f)}
.ed-item img,.ed-item svg{width:100%;height:100%;display:block;pointer-events:none}
.ed-sig,.ed-img,.ed-check,.ed-cross{cursor:move}
.ed-mark{fill:none;stroke:#1a1a33;stroke-width:2.6;stroke-linecap:round}
.ed-ta{display:block;box-sizing:content-box;border:0;padding:0;margin:0;background:rgba(255,250,200,.35);color:#1a1a33;font-family:Helvetica,Arial,sans-serif;resize:none;overflow:hidden;white-space:pre;outline:0}
.ed-grip,.ed-del,.ed-rs{position:absolute;display:none;width:22px;height:22px;line-height:22px;text-align:center;border-radius:50%;background:var(--terra,#b5532f);color:#fff;font-size:12px;border:0;padding:0;cursor:pointer;touch-action:none}
.ed-item.sel .ed-grip,.ed-item.sel .ed-del,.ed-item.sel .ed-rs{display:block}
.ed-grip{left:-24px;top:-2px;cursor:move}
.ed-del{right:-11px;top:-24px}
.ed-rs{right:-11px;bottom:-11px;cursor:nwse-resize;border-radius:4px}
.ed-modal{position:fixed;inset:0;z-index:80;background:rgba(48,37,31,.55);display:flex;align-items:center;justify-content:center;padding:1rem}
.ed-card{background:var(--cream,#fffaf1);border-radius:16px;padding:1rem;width:min(560px,100%);display:grid;gap:.6rem}
.ed-pad{width:100%;height:auto;aspect-ratio:3/1;border:1.5px dashed var(--sand-d);border-radius:12px;background:#fff;touch-action:none;cursor:crosshair}
.ed-row{display:flex;gap:.5rem;justify-content:flex-end}
@media(max-width:700px){.ed-sizel{margin-left:0}.ed-bar .btn{padding:.35rem .55rem}.ed-grip{left:-2px;top:-24px}}.wbox .wcookie{font-size:1.05rem;margin:0 0 1rem;line-height:1.4}
.wbox .wbtns{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.wbox .wno{background:none;border:0;padding:.2rem;margin-top:.7rem;font:inherit;font-size:1.05rem;color:var(--muted,#7a6350);text-decoration:underline;cursor:pointer}