:root{color-scheme:light;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.55;color:#142628;background:#f5f7f4}
*{box-sizing:border-box}
body{margin:0}
header{border-bottom:1px solid #d9e5dd;background:#fff}
nav{max-width:880px;margin:auto;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 20px}
nav .brand{font-weight:800;letter-spacing:-.02em}
nav a{color:#24675a;text-decoration:none;margin-left:12px}
main{max-width:880px;margin:68px auto;padding:0 20px}
h1{font-size:clamp(2.2rem,6vw,4rem);letter-spacing:-.05em;line-height:1.07;max-width:700px;margin:0 0 20px}
p.lead{font-size:1.14rem;color:#4b6261;max-width:640px;margin-bottom:30px}
.panel{background:#fff;border:1px solid #dae7df;border-radius:22px;padding:clamp(20px,5vw,34px);box-shadow:0 18px 50px #1329230b;max-width:670px}
label{font-weight:650;display:block;margin-bottom:8px}
input[type=file],input[type=number]{display:block;width:100%;padding:14px;border:1px solid #a9c1b7;border-radius:10px;font:inherit;background:#fff;max-width:100%}
.field{margin-bottom:20px}
.download{border:0;display:inline-block;text-decoration:none;background:#176f56;color:#fff;border-radius:11px;padding:14px 23px;font:inherit;font-weight:700;cursor:pointer;margin-top:14px}
.download[hidden],[hidden]{display:none!important}
#status{color:#813323}#status:empty{display:none}
#result{font-weight:600;margin:10px 0 0;font-size:.92rem}
.note{font-size:.9rem;color:#566d66}
.warning{font-size:.9rem;color:#566d66;margin:0 0 12px}
#preview-panel{margin-top:24px;border-top:1px solid #e1e9e4;padding-top:20px}
.preview-heading{font-weight:700;margin:0 0 10px}
.preview-image{display:block;max-width:100%;width:auto;max-height:360px;object-fit:contain;margin:0 auto;border-radius:8px;background-color:#f0f2f1;background-image:linear-gradient(45deg,#e3e8e5 25%,transparent 25%),linear-gradient(-45deg,#e3e8e5 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e3e8e5 75%),linear-gradient(-45deg,transparent 75%,#e3e8e5 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}
footer{max-width:880px;padding:35px 20px;margin:50px auto 0;color:#65746b;font-size:.85rem}
@media(max-width:600px){main{margin:45px auto}nav{flex-wrap:wrap}nav a{margin-left:8px}.preview-image{max-height:280px}}
:focus-visible{outline:3px solid #ecb85b;outline-offset:3px}