:root {
  --paper: #f4f4f1;
  --surface: #fcfcfa;
  --ink: #17171b;
  --muted: #8d8d85;
  --line: #d9d9d3;
  --line-strong: #c2c2ba;
  --accent: #df3b26;
  --accent-ink: #fcfcfa;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #111113;
    --surface: #18181b;
    --ink: #ececea;
    --muted: #7c7c78;
    --line: #2a2a2e;
    --line-strong: #3a3a40;
    --accent: #ff5238;
    --accent-ink: #111113;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }

/* the [hidden] attribute must always win over component display rules
   (otherwise e.g. .done{display:flex} keeps the download button visible) */
[hidden] { display: none !important; }

body {
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.5 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* asymmetric placement: content sits left-of-centre on wide screens */
.stage {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(40px, 1fr) minmax(auto, 460px) minmax(40px, 2.1fr);
  align-items: center;
}
.panel { grid-column: 2; padding: 48px 0; }

.mark {
  display: block;
  width: 12px; height: 12px;
  background: var(--accent);
  margin-bottom: 40px;
}

form { display: grid; gap: 0; }

/* fields share one hairline system, no rounded corners */
.field {
  display: block;
  width: 100%;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 0;
  font: inherit;
}

.file {
  position: relative;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.file input {
  position: absolute; inset: 0; opacity: 0; cursor: pointer;
}
.file #filelabel {
  flex: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--muted);
  pointer-events: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.file .cue {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
}
.file:hover, .file.drag { border-color: var(--accent); }
.file:hover #filelabel, .file.drag #filelabel,
.file:hover .cue, .file.drag .cue { color: var(--ink); }

.or {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 14px 0;
}

textarea.field {
  height: 200px;
  resize: vertical;
  padding: 14px 16px;
  margin-top: -1px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
  outline: none;
  transition: border-color .18s ease;
}
textarea.field::placeholder { color: var(--line-strong); }
textarea.field:focus { border-color: var(--accent); position: relative; z-index: 1; }

#email_confirm { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

#go {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 0;
  font: inherit;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
#go .arr {
  font-style: normal;
  transition: transform .18s ease;
}
#go:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
#go:hover .arr { transform: translateX(4px); }
#go:active { transform: translateY(1px); }
#go:disabled { color: var(--muted); background: var(--surface); border-color: var(--line); cursor: progress; }
#go:disabled .arr { display: none; }

.progress { margin-top: 22px; }
.bar { position: relative; height: 2px; background: var(--line); overflow: hidden; }
.fill {
  position: absolute; top: 0; left: 0;
  height: 100%; width: 38%;
  background: var(--accent);
}
.ptext {
  margin-top: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.done { margin-top: 22px; display: flex; align-items: center; gap: 18px; }
.done a {
  flex: 1;
  text-align: center;
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  padding: 14px 16px;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 1px solid var(--accent);
  transition: opacity .18s ease;
}
.done a:hover { opacity: .85; }
.again {
  background: none; border: 0; color: var(--muted);
  font: inherit; font-size: 13px; letter-spacing: .06em;
  cursor: pointer; padding: 6px;
}
.again:hover { color: var(--ink); }

.err {
  margin-top: 20px;
  padding: 12px 14px;
  border-left: 2px solid var(--accent);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
}

@media (prefers-reduced-motion: no-preference) {
  .panel > * {
    opacity: 0;
    transform: translateY(8px);
    animation: rise .5s cubic-bezier(.16,1,.3,1) forwards;
  }
  .panel > .mark { animation-delay: .02s; }
  .panel > form { animation-delay: .08s; }
  @keyframes rise { to { opacity: 1; transform: none; } }

  /* running indicator: a segment sweeping across the track, so it visibly moves
     even for tiny lists where a percentage bar would never animate */
  .fill { animation: sweep 1.1s ease-in-out infinite; }
  @keyframes sweep { from { left: -38%; } to { left: 100%; } }
}

@media (max-width: 640px) {
  .stage { grid-template-columns: 1fr; align-items: start; }
  .panel { grid-column: 1; padding: 40px 20px; }
  .mark { margin-bottom: 28px; }
}