:root{--bg:#f7f8fb;--surface:#fff;--ink:#14213d;--muted:#5b6479;--line:#e3e7ef;--accent:#4f46e5;--accent-d:#4338ca;--img:#2563eb;--pdf:#dc2626;--file:#0d9488;--r:14px;--w:1160px}
*{box-sizing:border-box}html{scroll-padding-top:72px}
body{margin:0;font:16px/1.6 "Inter",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}
a{color:inherit}a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.wrap{max-width:var(--w);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:#fff;padding:8px 12px;z-index:99}
header.site{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.bar{display:flex;align-items:center;gap:20px;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:1.05rem}
nav#nav{display:flex;gap:4px;margin-left:auto}
nav#nav a{padding:8px 12px;border-radius:10px;text-decoration:none;color:var(--muted);font-weight:500;font-size:.95rem}
nav#nav a:hover,nav#nav a[aria-current]{background:#eef0ff;color:var(--accent-d)}
#menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:10px;padding:8px 12px;font:inherit;cursor:pointer}
.ad{margin:24px auto;min-height:90px;border:1px dashed #c9cfdd;border-radius:10px;display:grid;place-items:center;color:#8a93a8;font-size:.8rem;max-width:var(--w)}
.hero{padding:56px 0 40px;text-align:center}
.hero h1{font-size:clamp(2rem,5vw,3.2rem);line-height:1.15;margin:0 0 14px;letter-spacing:-.02em}
.hero p{max-width:620px;margin:0 auto 26px;color:var(--muted);font-size:1.1rem}
.search{position:relative;max-width:620px;margin:0 auto}
.search input{width:100%;padding:16px 18px;font:inherit;border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:0 2px 10px rgba(20,33,61,.06)}
#results{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:0 10px 30px rgba(20,33,61,.12);text-align:left;overflow:hidden;z-index:5}
#results a{display:block;padding:11px 16px;text-decoration:none}#results a:hover,#results a:focus{background:#eef0ff}#results p{margin:0;padding:12px 16px;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px}
.chips a{padding:6px 14px;border:1px solid var(--line);background:#fff;border-radius:99px;font-size:.9rem;text-decoration:none}.chips a:hover{border-color:var(--accent);color:var(--accent-d)}
section.block{padding:32px 0}
section.block h2{font-size:1.6rem;margin:0 0 6px;letter-spacing:-.01em}
.lead{margin:0 0 20px;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.tool{display:flex;gap:14px;align-items:flex-start;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);text-decoration:none}
.tool:hover{border-color:var(--accent);box-shadow:0 4px 14px rgba(79,70,229,.1)}
.tool strong{display:block;line-height:1.3}.tool small{display:block;color:var(--muted);font-size:.85rem;line-height:1.4;margin-top:2px}
.tool-ic{flex:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;color:#fff}
.tool-ic.image{background:var(--img)}.tool-ic.pdf{background:var(--pdf)}.tool-ic.file{background:var(--file)}
.ic{width:22px;height:22px}
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px}
.why h3{margin:0 0 4px;font-size:1.05rem}.why p{margin:0;color:var(--muted);font-size:.95rem}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;counter-reset:s;padding:0;list-style:none;margin:0}
.steps li{counter-increment:s;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px}
.steps li::before{content:counter(s);display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;font-weight:600;margin-bottom:8px}
.steps b{display:block}
details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin-bottom:10px}
summary{cursor:pointer;font-weight:600}details p{margin:10px 0 0;color:var(--muted)}
.seo{max-width:780px}.seo p{color:var(--muted)}
footer.site{margin-top:40px;background:#14213d;color:#c8cfe0;padding:40px 0 24px}
footer.site .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px}
footer.site h3{color:#fff;font-size:.95rem;margin:0 0 10px}footer.site a{display:block;text-decoration:none;padding:3px 0;font-size:.92rem}footer.site a:hover{color:#fff;text-decoration:underline}
footer.site .copy{border-top:1px solid #2c3a5e;margin-top:28px;padding-top:16px;font-size:.85rem}
@media(max-width:820px){#menu-btn{display:block}nav#nav{display:none;position:absolute;left:0;right:0;top:64px;flex-direction:column;background:#fff;border-bottom:1px solid var(--line);padding:10px 20px}nav#nav.open{display:flex}footer.site .cols{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.crumb{padding-top:14px;font-size:.88rem;color:var(--muted)}.crumb a{text-decoration:none}.crumb a:hover{text-decoration:underline}
h1{letter-spacing:-.02em}.seo h1{font-size:2rem;margin:0 0 12px}.seo h2{font-size:1.2rem;margin:24px 0 6px}.seo a{color:var(--accent-d)}
section.block>.wrap>h1{font-size:2rem;margin:0 0 6px}
/* tool UI */
.toolbox{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;margin:18px 0}
.drop{display:grid;gap:4px;place-items:center;text-align:center;padding:36px 16px;border:2px dashed #b9c0d4;border-radius:var(--r);background:#fafbff;cursor:pointer}
.drop:hover,.drop.over{border-color:var(--accent);background:#eef0ff}.drop span{color:var(--muted);font-size:.9rem}
.files,.outs{list-style:none;margin:12px 0;padding:0}.files li,.outs li{display:flex;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:10px;margin-bottom:6px}
.fn{flex:1;overflow-wrap:anywhere}.fs{color:var(--muted);font-size:.88rem;white-space:nowrap}
.mini{border:1px solid var(--line);background:#fff;border-radius:8px;width:30px;height:30px;cursor:pointer}.mini:disabled{opacity:.4}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:14px 0}
.opt{display:grid;gap:4px;align-content:start}.opt[hidden]{display:none}.opt label{font-weight:600;font-size:.9rem}.opt.chk{display:flex;gap:8px;align-items:center}.opt.chk label{font-weight:500}
.opt input:not([type=checkbox]),.opt select{padding:9px 10px;border:1px solid var(--line);border-radius:10px;font:inherit;background:#fff;width:100%}
.opt input[type=color]{padding:2px;height:40px}.opt small{color:var(--muted);font-size:.8rem}
.ta{width:100%;margin:10px 0;padding:12px;border:1px solid var(--line);border-radius:10px;font:14px/1.5 ui-monospace,Menlo,Consolas,monospace;resize:vertical}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:10px 0}
.btn{display:inline-block;padding:11px 20px;border-radius:12px;border:0;background:var(--accent);color:#fff;font:inherit;font-weight:600;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--accent-d)}.btn:disabled{opacity:.6;cursor:wait}.btn.secondary{background:#fff;color:var(--ink);border:1px solid var(--line)}.btn.small{padding:6px 14px;font-size:.9rem}
progress{width:100%;height:10px;accent-color:var(--accent)}.status{min-height:1.4em;color:var(--muted);margin:6px 0}
.notice{padding:12px 16px;border-radius:10px;background:#eef2ff;border:1px solid #c7d0ff;margin:10px 0}.notice p{margin:2px 0}
.notice.err{background:#fef2f2;border-color:#fecaca;color:#7f1d1d}.notice.warn{background:#fffbeb;border-color:#fde68a}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:12px}.compare img,.th{max-width:100%;border-radius:8px;border:1px solid var(--line);background:repeating-conic-gradient(#eee 0 25%,#fff 0 50%) 0 0/16px 16px}
.th{width:48px;height:48px;object-fit:cover}.compare figcaption{font-size:.88rem;color:var(--muted)}.compare figure{margin:0}
.info{border-collapse:collapse;width:100%;margin:10px 0}.info th,.info td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);overflow-wrap:anywhere}.info th{width:34%;color:var(--muted);font-weight:600}
iframe.preview{width:100%;height:320px;border:1px solid var(--line);border-radius:10px;background:#fff}
.tp h2{font-size:1.3rem;margin:28px 0 8px}.tp ol,.tp ul.pl{padding-left:22px}.tp li{margin:4px 0}.tp .seo{max-width:820px}
@media(max-width:600px){.compare{grid-template-columns:1fr}.files li,.outs li{flex-wrap:wrap}}
.note{color:var(--muted);font-size:.88rem;margin:8px 0}

.sizecard{display:flex;gap:20px;align-items:center;padding:16px 18px;margin:10px 0;border:1px solid var(--line);border-radius:var(--r);background:#f8faff}
.sizecard .big{font-size:2.4rem;font-weight:700;color:#059669;min-width:110px;text-align:center;letter-spacing:-.02em}.sizecard .big.up{color:#b45309}
.bars{flex:1;display:grid;gap:8px}.sb{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;font-size:.88rem;color:var(--muted)}
.sb span:first-child{min-width:70px}.sb .track{height:12px;background:#e6e9f4;border-radius:99px;overflow:hidden}.sb .track i{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .4s}
.outs li .sb{flex-basis:100%;grid-template-columns:1fr auto}.outs li .sb span:first-child{display:none}
.opt input[type=range]{padding:0;accent-color:var(--accent);height:28px}.opt output{font-weight:600;color:var(--accent-d)}
@media(max-width:600px){.sizecard{flex-direction:column;align-items:stretch}}
.opt.chk{grid-column:1/-1}