@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --ink:#171816; --muted:#686b65; --line:#dfe1da; --paper:#f5f5ef; --card:#fff; --acid:#c7ff4a; --dark:#22241f; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope,system-ui,sans-serif; }
main { width:min(1080px,calc(100% - 40px)); margin:auto; }
.brand { height:84px; display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.04em; font-size:20px; }
.brand-mark { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--acid); border:1px solid var(--ink); font-family:DM Mono,monospace; }
.hero { padding:72px 0 52px; max-width:840px; }
.eyebrow { font:500 12px DM Mono,monospace; letter-spacing:.16em; }
h1 { font-size:clamp(52px,8vw,94px); line-height:.97; letter-spacing:-.075em; margin:16px 0 28px; }
h1 em { font-style:normal; color:#7d8178; }
.intro { color:var(--muted); max-width:570px; font-size:17px; line-height:1.7; }
.compressor { background:var(--card); border:1px solid var(--line); border-radius:24px; padding:18px; box-shadow:0 25px 80px rgba(31,34,27,.08); }
.drop-zone { height:250px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; border:1.5px dashed #afb3a9; border-radius:16px; cursor:pointer; transition:.2s; background:#fbfbf7; }
.drop-zone:hover,.drop-zone.dragging { border-color:var(--ink); background:#f5ffd9; transform:translateY(-1px); }
.drop-zone.has-file { border-style:solid; border-color:#8cae3c; background:#f7ffe6; }
.drop-zone input { position:absolute; opacity:0; pointer-events:none; }
.upload-icon { display:grid; place-items:center; width:50px; height:50px; border-radius:50%; background:var(--dark); color:white; font-size:27px; margin-bottom:4px; }
.drop-zone strong { font-size:18px; }
.drop-zone>span:last-child { color:var(--muted); font-size:13px; }
.target-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding-top:16px; }
.target-control { display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--line); border-radius:14px; padding:7px 9px 7px 18px; font-size:14px; font-weight:600; }
.target-label { flex:none; }
.target-fields { display:flex; align-items:center; justify-content:flex-end; gap:7px; min-width:0; }
.target-fields select { min-width:148px; height:40px; padding:0 30px 0 11px; border:0; outline:0; border-radius:9px; background:#f2f3ed; color:var(--ink); font:500 12px Manrope,sans-serif; cursor:pointer; }
.input-wrap { display:flex; align-items:center; gap:8px; background:#f2f3ed; border-radius:9px; padding:5px 10px; }
.input-wrap input { border:0; outline:0; background:transparent; width:62px; text-align:right; font:600 18px DM Mono,monospace; }
.input-wrap b { font:500 12px DM Mono,monospace; color:var(--muted); }
button,.download { border:0; border-radius:14px; background:var(--dark); color:white; padding:18px 22px; font:700 15px Manrope,sans-serif; display:flex; align-items:center; justify-content:space-between; cursor:pointer; text-decoration:none; transition:.2s; }
button:hover,.download:hover { background:#000; transform:translateY(-1px); }
button:disabled { opacity:.55; cursor:wait; transform:none; }
.progress-panel,.result-panel { margin-top:16px; border-radius:14px; padding:20px; background:#f3f4ee; }
.progress-head { display:flex; justify-content:space-between; font-size:14px; }
.progress-head b { font:500 13px DM Mono,monospace; }
.progress-track { height:7px; background:#dfe1d9; border-radius:10px; overflow:hidden; margin:14px 0 9px; }
#progress-bar { width:0; height:100%; background:var(--acid); border-right:1px solid #668400; transition:width .4s ease; }
#progress-detail { color:var(--muted); margin:0; font-size:12px; font-family:DM Mono,monospace; }
.result-panel { display:flex; align-items:center; justify-content:space-between; background:#efffd0; border:1px solid #cce894; }
.result-copy { display:flex; align-items:center; gap:13px; }
.check { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--acid); border:1px solid #7a9c2c; }
.result-copy p { margin:4px 0 0; color:var(--muted); font-size:13px; }
.download { min-width:190px; padding:14px 18px; }
.error { color:#a52d2d; background:#fff0ef; border:1px solid #f2c5c0; border-radius:12px; padding:14px; font-size:14px; }
footer { border-top:1px solid var(--line); margin-top:80px; padding:26px max(20px,calc((100% - 1080px)/2)); display:flex; justify-content:space-between; font-weight:800; }
footer small { color:var(--muted); font:400 11px DM Mono,monospace; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
[hidden] { display:none !important; }
@media(max-width:700px) { .hero{padding-top:40px}.target-row{grid-template-columns:1fr}.target-control{align-items:flex-start;flex-direction:column;padding:14px}.target-fields{width:100%}.target-fields select{flex:1;min-width:0}.drop-zone{height:210px}.result-panel{align-items:stretch;flex-direction:column;gap:16px}.download{width:100%}footer{gap:12px;flex-direction:column} }