:root {
  --ink:#292929;
  --muted:#777;
  --line:#dedede;
  --paper:#fff;
  --soft:#f6f6f4;
  --blue:#356b9a;
  --blue-dark:#28577f;
  --green:#eaf4ec;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:16px/1.6 Arial, Helvetica, sans-serif;
}

a {
  color:var(--blue);
}

.top {
  border-bottom:1px solid var(--line);
  background:#fff;
}

.top-inner {
  max-width:980px;
  margin:auto;
  padding:17px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.brand {
  font-family:Georgia,serif;
  font-size:25px;
  font-weight:bold;
  color:#303030;
  text-decoration:none;
  letter-spacing:-.5px;
}

.brand span {
  color:var(--blue);
}

nav {
  display:flex;
  gap:22px;
  font-size:14px;
}

nav a {
  color:#555;
  text-decoration:none;
}

nav a:hover {
  text-decoration:underline;
}

main {
  max-width:820px;
  margin:48px auto 70px;
  padding:0 22px;
}

h1 {
  font:normal 34px/1.2 Georgia,'Times New Roman',serif;
  margin:0 0 12px;
  letter-spacing:-.5px;
}

.intro {
  color:#666;
  margin:0 0 30px;
  max-width:680px;
}

.tool {
  border:1px solid var(--line);
  padding:24px;
  background:#fff;
}

.step {
  font-size:13px;
  color:#777;
  text-transform:uppercase;
  letter-spacing:.7px;
  margin:0 0 12px;
}

.drop {
  border:2px dashed #c9c9c9;
  background:#fafafa;
  text-align:center;
  padding:38px 18px;
  cursor:pointer;
  transition:background .15s,border-color .15s;
}

.drop.drag {
  border-color:var(--blue);
  background:#f1f6fa;
}

.drop strong {
  display:block;
  font-size:18px;
  font-weight:600;
  margin-bottom:4px;
}

.drop p {
  color:#777;
  margin:4px 0 15px;
  font-size:14px;
}

.button {
  display:inline-block;
  border:1px solid var(--blue);
  background:var(--blue);
  color:#fff;
  padding:9px 18px;
  font:bold 14px Arial,sans-serif;
  cursor:pointer;
  border-radius:3px;
}

.button:hover {
  background:var(--blue-dark);
}

.button.secondary {
  color:#444;
  background:#fff;
  border-color:#bbb;
}

.button.secondary:hover {
  background:#f3f3f3;
}

input[type=file] {
  display:none;
}

.hint {
  font-size:12px;
  color:#888;
  margin-top:12px;
}

.message {
  margin-top:15px;
  font-size:14px;
  color:#555;
}

.result {
  display:none;
  margin-top:22px;
  border-top:1px solid var(--line);
  padding-top:22px;
}

.result.show {
  display:block;
}

.preview {
  display:flex;
  gap:18px;
  align-items:flex-start;
  margin-bottom:18px;
}

.preview img {
  max-width:180px;
  max-height:150px;
  object-fit:contain;
  background:var(--soft);
  border:1px solid var(--line);
  padding:4px;
}

.file-info {
  font-size:14px;
  color:#555;
}

.file-info strong {
  color:var(--ink);
}

.meta {
  margin:15px 0;
  background:var(--soft);
  border:1px solid #e7e7e4;
  padding:14px 16px;
  font-size:14px;
}

.meta h3 {
  font:bold 16px Georgia,serif;
  margin:0 0 8px;
}

.meta ul {
  margin:0;
  padding-left:19px;
  color:#555;
}

.actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:17px;
}

label.select-label {
  font-size:14px;
  color:#555;
}

select {
  margin-left:6px;
  padding:8px 28px 8px 9px;
  border:1px solid #bbb;
  background:white;
  color:#333;
  border-radius:2px;
}

.success {
  background:var(--green);
  border:1px solid #cfe2d2;
  color:#315d38;
  padding:10px 13px;
  font-size:14px;
  margin-top:14px;
  display:none;
}

.success.show {
  display:block;
}

.below {
  margin-top:34px;
}

h2 {
  font:normal 23px Georgia,serif;
  margin:0 0 8px;
}

.below p {
  color:#666;
  font-size:14px;
  margin:0 0 12px;
}

.faq {
  border-top:1px solid var(--line);
  padding:14px 0;
}

.faq strong {
  display:block;
  font-size:15px;
  margin-bottom:3px;
}

.faq p {
  margin:0;
}

footer {
  border-top:1px solid var(--line);
  color:#888;
  font-size:13px;
}

.footer-inner {
  max-width:980px;
  margin:auto;
  padding:20px 22px;
  display:flex;
  justify-content:space-between;
  gap:15px;
  flex-wrap:wrap;
}

@media(max-width:600px) {
  .top-inner {
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
  }

  nav {
    gap:16px;
    flex-wrap:wrap;
  }

  main {
    margin-top:32px;
  }

  h1 {
    font-size:29px;
  }

  .tool {
    padding:16px;
  }

  .preview {
    flex-direction:column;
  }
}