@font-face{font-family:"Fell";src:url(/fonts/fell.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Fell";font-style:italic;src:url(/fonts/fell-italic.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Comfortaa";src:url(/fonts/comfortaa.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Bokor";src:url(/fonts/bokor.woff2) format("woff2");font-display:swap}
:root{--bg:#000;--bg2:#0d0c0a;--card:#141210;--line:#2b261d;--text:#fcf8f0;--muted:#a19c91;--gold:#c59d46;--gold2:#dcbf7e;--ink:#000;--err:#ff8a7a;--ok:#9fd39a;--btnt:#000;--r:14px}
[data-theme=light]{--bg:#fcf8f0;--bg2:#f3ecdc;--card:#fffdf8;--line:#e2d8c2;--text:#111;--muted:#5d574b;--gold:#6f5419;--gold2:#5c4512;--btnt:#fff;--err:#a3271a;--ok:#2d6a27}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.7 Comfortaa,system-ui,sans-serif;background-image:radial-gradient(ellipse 80% 50% at 50% -10%,rgba(197,157,70,.13),transparent 70%);background-repeat:no-repeat;overflow-x:hidden}
a{color:var(--gold2)}a:hover{color:var(--gold)}
h1,h2,h3{font-family:Fell,Georgia,serif;font-weight:400;line-height:1.2;letter-spacing:.01em}
h1{font-size:clamp(2rem,5vw,3.2rem);margin:.2em 0}
h2{font-size:1.7rem;margin:1.6em 0 .5em}
.eyebrow{font-family:Bokor,serif;color:var(--gold);letter-spacing:.15em;text-transform:uppercase;font-size:.95rem}
.tag{font-family:Fell,serif;font-style:italic;color:var(--muted);font-size:1.2rem}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--gold);color:#000;padding:8px;z-index:9}
header.site{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px clamp(14px,4vw,40px);border-bottom:1px solid var(--line);position:sticky;top:0;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);z-index:5}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-family:Fell,serif;font-size:1.45rem}
.brand svg{width:28px;height:28px;color:var(--gold)}
nav.top{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
nav.top a{color:var(--text);text-decoration:none;font-size:.9rem}nav.top a:hover{color:var(--gold)}
@media(max-width:700px){nav.top .hide-sm{display:none}}
button,.btn{font:inherit;cursor:pointer;border-radius:999px;border:1px solid var(--gold);background:var(--gold);color:var(--btnt);padding:10px 22px;font-weight:700;text-decoration:none;display:inline-block}
button.ghost,.btn.ghost{background:transparent;color:var(--text);border-color:var(--line)}
button:hover{filter:brightness(1.08)}button:disabled{opacity:.5;cursor:wait}
:focus-visible{outline:2px solid var(--gold2);outline-offset:2px}
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(14px,4vw,40px)}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:start}
@media(max-width:980px){.layout{grid-template-columns:minmax(0,1fr)}.sidebar{display:none}}
.ad{border:1px dashed var(--line);border-radius:var(--r);color:var(--muted);font-size:.75rem;display:flex;align-items:center;justify-content:center;text-align:center;letter-spacing:.08em;text-transform:uppercase}
.ad-top{min-height:90px;margin:18px 0}.ad-side{min-height:600px;position:sticky;top:90px}
.hero{text-align:center;padding:56px 0 26px}
.search{max-width:620px;margin:22px auto 0;position:relative}
.search input{width:100%;padding:16px 22px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--text);font:inherit;font-size:1.05rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.card{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;text-decoration:none;color:var(--text);transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--gold);transform:translateY(-2px);color:var(--text)}
.card b{font-family:Fell,serif;font-weight:400;font-size:1.2rem;display:block;color:var(--gold2)}
.card span{color:var(--muted);font-size:.85rem}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);border:0;margin:40px 0;opacity:.5}
.tool{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(16px,3vw,28px)}
.drop{border:1.5px dashed var(--gold);border-radius:var(--r);padding:34px 16px;text-align:center;cursor:pointer;background:var(--bg2)}
.drop.over{background:color-mix(in srgb,var(--gold) 12%,var(--bg2))}
.drop input{position:absolute;width:1px;height:1px;opacity:0}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin:14px 0}
label{display:flex;flex-direction:column;gap:4px;font-size:.85rem;color:var(--muted)}
label.inline{flex-direction:row;align-items:center}
input,select,textarea{font:inherit;color:var(--text);background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:9px 11px;min-width:0}
textarea{width:100%;min-height:180px;resize:vertical}
input[type=range]{padding:0}
.out{margin-top:18px}
.out img,.out video,.out canvas,.out audio{max-width:100%;border-radius:10px;display:block;margin:8px 0}
.files li{margin:4px 0}
.msg{padding:10px 14px;border-radius:10px;margin:10px 0;font-size:.9rem}
.msg.err{border:1px solid var(--err);color:var(--err)}.msg.ok{border:1px solid var(--ok);color:var(--ok)}.msg.info{border:1px solid var(--line);color:var(--muted)}
.thumbs{display:flex;flex-wrap:wrap;gap:10px}.thumbs figure{margin:0;width:120px;text-align:center;font-size:.75rem;background:var(--bg2);padding:6px;border-radius:8px}
.thumbs canvas{width:100%;height:auto;margin:0}.thumbs button{padding:2px 8px;font-size:.75rem}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin:12px 0}.stats div{background:var(--bg2);border-radius:10px;padding:10px;text-align:center}.stats b{display:block;font-size:1.4rem;color:var(--gold2)}
.prose{max-width:760px}.faq details{border-bottom:1px solid var(--line);padding:12px 0}.faq summary{cursor:pointer;font-family:Fell,serif;font-size:1.15rem}
.crumbs{font-size:.8rem;color:var(--muted);margin-top:18px}.crumbs a{color:var(--muted)}
footer.site{border-top:1px solid var(--line);margin-top:60px;padding:30px 0;color:var(--muted);font-size:.85rem;text-align:center}
footer.site p{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px}footer.site a{color:var(--muted)}
.prog{height:6px;background:var(--bg2);border-radius:9px;overflow:hidden;margin:10px 0}.prog i{display:block;height:100%;background:var(--gold);width:0;transition:width .2s}
table.items{width:100%;border-collapse:collapse}table.items td,table.items th{padding:4px;text-align:left}table.items input{width:100%}
.sig{background:#fff;border-radius:10px;touch-action:none;max-width:100%}
.pagepick{position:relative;display:inline-block;max-width:100%}.pagepick canvas{cursor:crosshair}
.cropbox{position:relative;display:inline-block;max-width:100%;touch-action:none}.cropbox .sel{position:absolute;border:2px solid var(--gold);box-shadow:0 0 0 9999px rgba(0,0,0,.5);pointer-events:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#tool{min-height:300px}#tool[data-ui=invoice]{min-height:1180px}#tool[data-ui=words],#tool[data-ui=case],#tool[data-ui=json],#tool[data-ui=csv]{min-height:520px}#tool[data-ui=units]{min-height:330px}#tool[data-ui=sign]{min-height:520px}
@media(min-width:700px){#tool[data-ui=invoice]{min-height:860px}}
/* hide ad slots until a real AdSense <ins> is inserted */
.ad:not(:has(ins)){display:none!important}
.layout:not(:has(aside ins)){grid-template-columns:minmax(0,1fr)!important;max-width:880px;margin-left:auto;margin-right:auto}.sidebar:not(:has(ins)){display:none!important}