@import url(/assets/tokens.css);@import url(/assets/fonts.css);
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;color-scheme:only light}
body{margin:0;background:var(--vx-paper);color:var(--vx-ink);font:400 17px/1.6 var(--vx-font-text);min-height:100vh;display:flex;flex-direction:column}
.wrap{width:100%;max-width:760px;margin:0 auto;padding:0 24px}
header{padding:26px 0 0}header .wrap{display:flex;align-items:center;gap:12px}
.logo{height:26px;width:auto;display:block}
.lang{margin-left:auto;display:flex;border:1.5px solid var(--vx-ink);border-radius:var(--vx-radius-pill);overflow:hidden;font:500 13px/1 var(--vx-font-mono)}
.lang button{background:var(--vx-white);border:0;font:inherit;color:var(--vx-ink);cursor:pointer;padding:8px 12px}
.lang button[aria-pressed=true]{background:var(--vx-ink);color:var(--vx-white)}
main{flex:1;padding:64px 0 40px}
.eyebrow{font:500 13px/1 var(--vx-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--vx-blue);margin:0 0 14px}
h1{font:600 clamp(32px,5vw,46px)/1.08 var(--vx-font-display);letter-spacing:-.02em;margin:0 0 16px}
.lead{color:var(--vx-ink-3);max-width:58ch;margin:0 0 40px}
.drop{display:block;position:relative;border:var(--vx-outline-width) dashed var(--vx-line);border-radius:18px;background:var(--vx-white);padding:56px 24px;text-align:center;transition:.15s;cursor:pointer}
.drop:hover,.drop.over{border-color:var(--vx-blue);background:var(--vx-blue-tint)}
.drop:focus-within{outline:2px solid var(--vx-blue);outline-offset:3px}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop svg{width:40px;height:40px;stroke:var(--vx-blue);fill:none;stroke-width:1.6;margin-bottom:12px}
.drop strong{display:block;font:600 20px var(--vx-font-display);margin-bottom:4px}.drop small{color:var(--vx-ink-3);font-size:15px}
.pick{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;margin-top:18px;border-radius:var(--vx-radius-pill);background:var(--vx-ink);color:var(--vx-white);font-weight:600;font-size:16px}
.list{list-style:none;margin:28px 0 0;padding:0}
.item{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:14px 0;border-top:1px solid var(--vx-line);font-size:15px}
.item:last-child{border-bottom:1px solid var(--vx-line)}
.name{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.meta{font:400 13px/1.6 var(--vx-font-mono);color:var(--vx-ink-3);text-align:right;white-space:nowrap}
.bar{grid-column:1/-1;height:3px;background:var(--vx-blue-tint);border-radius:2px;overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;width:0;background:var(--vx-blue);transition:width .2s}
.item.done .meta{color:var(--vx-blue)}.item.fail .meta{color:#9b2c1f}
.retry{background:none;border:0;color:var(--vx-ink);text-decoration:underline;font:inherit;cursor:pointer;padding:0;margin-left:8px}
.summary{margin:24px 0 0;font-size:15px;color:var(--vx-ink-3)}.summary b{color:var(--vx-ink)}
.notes{margin:56px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;font-size:15px;color:var(--vx-ink-3)}
.notes h2{font:600 16px var(--vx-font-display);color:var(--vx-ink);margin:0 0 4px}.notes p{margin:0}
@media(max-width:640px){main{padding-top:40px}.notes{grid-template-columns:1fr;gap:16px}.drop{padding:40px 18px}.logo{height:22px}}
footer{border-top:1px solid var(--vx-line);padding:22px 0 30px;font:400 12px/1.6 var(--vx-font-mono);color:var(--vx-ink-3)}
footer .wrap{display:flex;gap:18px;flex-wrap:wrap}footer a{color:var(--vx-ink-3)}
.invalid h1{font-size:32px}

.login{max-width:420px}.login label{display:block;margin:0 0 16px;font-size:14px;color:var(--vx-ink-3)}
.login input{display:block;width:100%;margin-top:6px;min-height:48px;padding:0 14px;font:inherit;font-size:17px;color:var(--vx-ink);background:var(--vx-white);border:1.5px solid var(--vx-line);border-radius:12px}
.login input:focus{outline:2px solid var(--vx-blue);outline-offset:1px;border-color:var(--vx-blue)}
.login .pick{border:0;cursor:pointer;font-family:inherit}.err{color:#9b2c1f;font-size:15px;margin:0 0 12px}