html {
  min-height: 100%;
}
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  max-width: 720px;
  margin: 40px auto;
  padding: 0 20px;
  line-height: 1.45;
  color: #f5f7fb;
  background-color: #101217;
  background-image: linear-gradient(rgba(5, 7, 12, .58), rgba(5, 7, 12, .58)), url("https://cdn.nanomidi.net/dMMQ0DFL2f0h.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
label, button {
  display: block;
  margin-top: 16px;
}
input, select, button {
  font: inherit;
  padding: 8px;
}
input {
  width: 100%;
  box-sizing: border-box;
}
input[type="file"] {
  padding-left: 0;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: wait;
  opacity: .65;
}
.row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.row button {
  margin-top: 16px;
}
#status, #result, #fileStatus {
  margin-top: 18px;
  white-space: pre-wrap;
}
.error {
  color: #ffb4b4;
}
.success {
  color: #b9f8cf;
}
.notice {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid rgba(255, 200, 120, .35);
  background: rgba(120, 70, 0, .18);
}
.card {
  margin-top: 18px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.28);
}
.thumb {
  display: block;
  max-width: 220px;
  width: 100%;
  height: auto;
  margin-bottom: 10px;
  border: 1px solid rgba(255,255,255,.22);
}
a {
  color: inherit;
}
.small {
  opacity: .78;
}
code {
  background: rgba(0,0,0,.3);
  padding: 1px 4px;
}