:root {
  --ground: #0a0908;
  --surface: #14110e;
  --raise: #1c1814;
  --line: #3a3221;
  --ink: #f2ecdd;
  --dim: #aa9e88;
  --gold: #c9a94f;
  --gold-deep: #8c7433;
  --ember: #e0902e;
  --good: #7fa05a;
  --display: "Avenir Next Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --body: "Avenir Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.5; }
body { min-height: 100vh; padding-inline: 20px; padding-block: 0 48px; }
.wrap { max-width: 640px; margin-inline: auto; }
header { padding-block: 40px 28px; border-bottom: 1px solid var(--line); margin-bottom: 32px; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.mark { font-family: var(--display); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); font-size: 15px; }
h1 { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(30px, 7vw, 42px); line-height: 1; margin: 0 0 12px; }
p.lede { color: var(--dim); margin: 0 0 28px; }
.signout { background: none; border: 1px solid var(--line); color: var(--dim); font: inherit; font-size: 14px; padding: 6px 14px; cursor: pointer; }
.signout:hover, .signout:focus-visible { border-color: var(--gold-deep); color: var(--ink); outline: none; }

form.login { display: grid; gap: 14px; margin-top: 8px; }
label { font-family: var(--display); text-transform: uppercase; letter-spacing: .14em; font-size: 13px; color: var(--dim); }
input[type=password] { width: 100%; font: inherit; font-size: 20px; padding: 14px 16px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
input[type=password]:focus { outline: none; border-color: var(--gold); }
button.primary { font-family: var(--display); font-weight: 600; font-size: 18px; letter-spacing: .12em; text-transform: uppercase; padding: 15px; background: var(--gold); color: var(--ground); border: 0; cursor: pointer; }
button.primary:hover, button.primary:focus-visible { background: #d8b95c; outline: none; }
.message { padding: 12px 14px; border-left: 3px solid var(--ember); background: var(--surface); color: var(--ink); }
.message:empty { display: none; }

.drop { position: relative; display: block; border: 2px dashed var(--line); background: var(--surface); padding: 44px 20px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.drop:hover, .drop.over, .drop:focus-within { border-color: var(--gold); background: var(--raise); }
.drop strong { display: block; font-family: var(--display); text-transform: uppercase; letter-spacing: .06em; font-size: 24px; margin-bottom: 6px; }
.drop span { color: var(--dim); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.fineprint { color: var(--dim); font-size: 14px; margin-top: 12px; }

ul.files { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 10px; }
ul.files li { background: var(--surface); border: 1px solid var(--line); padding: 14px 16px; }
.row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.name { overflow-wrap: anywhere; }
.state { color: var(--dim); font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bar { height: 4px; background: var(--raise); margin-top: 10px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .3s; }
li.done { border-color: #3d4a2c; } li.done .state { color: var(--good); } li.done .bar i { background: var(--good); }
li.error { border-color: #5a3a1a; } li.error .state { color: var(--ember); white-space: normal; }
@media (prefers-reduced-motion: reduce) { .bar i, .drop { transition: none; } }