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

*{box-sizing:border-box}
:root{
  --paper:#f4f0e8; --ink:#171715; --muted:#77736a;
  --line:#d5d0c5; --accent:#d8ff38; --card:#fffdf8;
}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Manrope,system-ui,sans-serif;
}
.page{max-width:920px;margin:auto;padding:28px 22px 35px}
header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--ink);padding-bottom:18px}
.brand{display:flex;align-items:center;gap:11px;font-size:20px;font-weight:800;letter-spacing:-.8px;text-decoration:none;color:inherit}
.brand img{width:46px;height:46px;object-fit:contain;display:block}
.brand-text span{color:#9bad00}
.mini{font:500 11px "DM Mono",monospace;border:1px solid var(--ink);padding:7px 9px;letter-spacing:1px}
.hero{padding:78px 4px 42px;max-width:760px}
.eyebrow{font:500 11px "DM Mono",monospace;letter-spacing:2px;margin:0 0 20px}
h1{font-size:clamp(45px,8vw,82px);line-height:.94;letter-spacing:-5px;margin:0}
h1 em{font-style:normal;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:8px}
.lead{max-width:540px;color:var(--muted);font-size:15px;line-height:1.7;margin:28px 0 0}
.card{background:var(--card);border:1px solid var(--ink);min-height:330px;padding:45px 25px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;box-shadow:7px 7px 0 var(--ink)}
.card.drag{background:#eff9c9}
.upload-icon{width:48px;height:48px;border:1px solid var(--ink);display:grid;place-items:center;font-size:25px;margin-bottom:18px}
h2{font-size:21px;margin:0 0 6px;letter-spacing:-.7px}
.card p{margin:0;color:var(--muted);font-size:13px}
#choose,.upload-btn,#copy{border:1px solid var(--ink);background:var(--ink);color:#fff;padding:12px 18px;font:700 12px Manrope;cursor:pointer}
#choose{margin-top:20px}
.card small{margin-top:13px;color:#969188;font:11px "DM Mono",monospace}
.preview-wrap{display:none;margin-top:22px;position:relative}
.preview-wrap.show{display:block}
.preview-wrap img{display:block;width:min(360px,78vw);max-height:230px;object-fit:contain;border:1px solid var(--line)}
.remove{position:absolute;right:-10px;top:-10px;border:1px solid var(--ink);background:#fff;color:var(--ink);width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:18px}
.upload-btn{display:none;margin-top:16px}
.upload-btn.show{display:block}
.upload-btn:disabled{opacity:.4;cursor:not-allowed}
.status{font-size:12px;margin-top:15px;min-height:16px}
.result{display:none;margin-top:35px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:18px 0;align-items:center;justify-content:space-between;gap:18px}
.result.show{display:flex}
.result span{font:500 10px "DM Mono",monospace;color:var(--muted);letter-spacing:1.5px}
.result p{font:12px "DM Mono",monospace;margin:8px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:65vw}
#copy{white-space:nowrap;background:var(--accent);color:var(--ink)}
footer{display:flex;justify-content:space-between;color:var(--muted);font:10px "DM Mono",monospace;margin-top:27px;gap:15px}
@media(max-width:600px){
 .page{padding:18px 15px 25px}.hero{padding:58px 2px 32px}
 h1{letter-spacing:-3px}.lead{font-size:14px}.card{box-shadow:4px 4px 0 var(--ink);padding:35px 18px}
 .result{align-items:flex-start}.result p{max-width:52vw}footer{flex-direction:column}
}

@media(max-width:600px){
 .brand img{width:40px;height:40px}
 .brand{gap:8px}
 .brand-text{font-size:17px}
}