:root{ --ink:#000; --paper:#fff; }

*{ box-sizing:border-box; margin:0; padding:0; }

html,body{ background:var(--paper); color:var(--ink); }

body{
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

a{ color:inherit; }

::selection{ background:#000; color:#fff; }

.hero{
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(20px,4vw,52px);
  gap:40px;
}

.brand{ display:flex; align-items:center; gap:10px; }

.brand img{ width:22px; height:22px; display:block; }

.mark{
  font-size:12px; font-weight:700; letter-spacing:.32em; text-transform:uppercase;
}

.core{ max-width:1100px; width:100%; }

h1{
  font-size:clamp(2.4rem,7.4vw,6.2rem);
  line-height:1.02; letter-spacing:-.045em; font-weight:700;
}

.sub{
  margin-top:1.1rem; font-size:clamp(1rem,2.1vw,1.45rem); opacity:.55; letter-spacing:-.01em;
}

form{
  display:flex; align-items:stretch; margin-top:clamp(2rem,5vw,3.4rem);
  border-bottom:2px solid var(--ink);
}

input[type=url]{
  flex:1; min-width:0; border:0; background:none; color:var(--ink);
  font:inherit; font-size:clamp(1.05rem,2.3vw,1.6rem); letter-spacing:-.01em;
  padding:.9rem 0; outline:none;
}

input[type=url]::placeholder{ color:var(--ink); opacity:.3; }

button{
  border:0; background:var(--ink); color:var(--paper); cursor:pointer;
  font:inherit; font-weight:600; letter-spacing:.01em;
  padding:0 clamp(1.2rem,3vw,2.4rem); white-space:nowrap;
}

button:hover{ opacity:.78; }

button:disabled{ opacity:.4; cursor:progress; }

.opt{
  display:flex; align-items:center; gap:.55rem; margin-top:1rem;
  font-size:.92rem; opacity:.65; cursor:pointer; width:max-content;
}

.opt input{ accent-color:#000; }

.status{ margin-top:1.1rem; font-size:.95rem; opacity:.6; min-height:1.3em; }

.status.err{ opacity:1; font-weight:600; }

.status.ok{ opacity:.85; }

.foot{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:.8rem; opacity:.5; letter-spacing:.01em;
}

.result{ border-top:2px solid var(--ink); }

.result .head{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:14px clamp(20px,4vw,52px); font-size:.82rem; opacity:.6;
}

.result img{ display:block; width:100%; height:auto; }

.result a{ text-decoration:underline; }